public-fuse/src/view/case/records/manifest.vue

<template>
  <div class="records">
    <div class="header">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button :disabled="isDisableExport" @click="handleExport"
        >导出</el-button
      >
    </div>

    <div class="content">
      <div class="line">
        <span>起火单位/地址:</span>
        <el-input
          class="input"
          v-model="data.address"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="line">
        <span>提取日期:</span>
        <div>
          <el-input
            class="input"
            :maxlength="4"
            type="text"
            v-model="data.time.year"
            placeholder=""
            style="width: 80px"
          />
          <span>年</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.time.month"
            placeholder=""
            style="width: 80px"
          />
          <span>月</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.time.day"
            placeholder=""
            style="width: 80px"
          />
          <span>日</span>
        </div>
      </div>

      <div class="detail">
        <span class="sub-tit">提取清单：</span>
        <template v-for="(item, index) in data.detail">
          <div class="con">
            <span class="sub-tit">编号 {{ index + 1 }}: </span>
            <div class="info">
              <div class="inner">
                <div class="sec">
                  <span>名称: </span>
                  <el-input class="input" v-model="item.name" placeholder="" />
                </div>

                <div class="sec">
                  <span>规格: </span>
                  <el-input class="input" v-model="item.spec" placeholder="" />
                </div>

                <div class="sec">
                  <span>数量: </span>
                  <el-input class="input" v-model="item.num" placeholder="" />
                </div>
              </div>
              <div class="inner">
                <div class="sec">
                  <span>提取部位: </span>
                  <el-input class="input" v-model="item.part" placeholder="" />
                </div>
              </div>
              <div class="inner">
                <div class="sec">
                  <span>特征: </span>
                  <el-input class="input" v-model="item.desc" placeholder="" />
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="btn-container">
        <el-button class="btn" @click="addItem">+新增</el-button>
      </div>
      <div class="gap"></div>

      <div class="extractUser">
        <span class="sub-tit">提取人：</span>
        <template v-for="extractUser in data.extractUser">
          <div class="line">
            <span>姓名:</span>
            <el-input
              class="input"
              v-model="extractUser.name"
              placeholder=""
              style="width: 20%"
            />
            <span>工作单位:</span>
            <el-input
              class="input"
              v-model="extractUser.address"
              placeholder=""
              style="width: 70%"
            />
          </div>
        </template>
      </div>
      <div class="btn-container">
        <el-button class="btn" @click="addextractUser">+新增</el-button>
      </div>
      <!-- 证人 -->
      <div>
        <span>证人或当事人:</span>
        <template v-for="wit in data.witnessInfo">
          <div class="witnessInfo">
            <!-- <span class="sub-tit">证人信息：</span> -->
            <div class="line">
              <span>姓名:</span>
              <el-input
                class="input"
                v-model="wit.name"
                placeholder=""
                style="width: 180px"
              />
              <span style="margin-left: 50px">身份证件号码:</span>
              <el-input
                class="input"
                v-model="wit.id"
                placeholder=""
                style="width: 280px"
              />
              <span style="margin-left: 50px">联系电话:</span>
              <el-input
                class="input"
                v-model="wit.phone"
                placeholder=""
                style="width: 280px"
              />
            </div>
            <div class="line">
              <span>单位或住址:</span>
              <el-input
                class="input"
                v-model="wit.address"
                placeholder=""
                style="width: 100%"
              />
            </div>
          </div>
        </template>
      </div>
      <div class="btn-container">
        <el-button class="btn" @click="addwitnessInfo">+新增</el-button>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { reactive } from "vue";
import {
  getCaseDetailInfo,
  saveCaseDetailInfo,
  exportCaseDetailInfo,
} from "@/store/case";
import saveAs from "@/util/file-serve";
import { ElMessage } from "element-plus";

const props = defineProps({ caseId: Number, title: String });

const isDisableExport = ref(false);

console.log(props);

const data = reactive({
  address: "",
  time: {
    year: "",
    month: "",
    day: "",
  },

  location: "",
  detail: [
    {
      // id: "1",
      name: "",
      spec: "",
      num: "",
      part: "",
      desc: "",
    },
    {
      // id: "2",
      name: "",
      spec: "",
      num: "",
      part: "",
      desc: "",
    },
  ],
  extractUser: [
    {
      name: "",
      workplace: "",
      id: "",
    },

    {
      name: "",
      address: "",
      id: "",
    },
  ],

  witnessInfo: [
    {
      name: "",
      address: "",
      phone: "",
      id: "",
    },
    {
      name: "",
      address: "",
      phone: "",
      id: "",
    },
  ],
});

watch(
  data,
  (newValue) => {
    // data.userName = newValue.userName.replace(/[^0-9]/g, '');
    const sMonth = newValue.time.month.replace(/[^0-9]/g, "");
    const sDay = newValue.time.day.replace(/[^0-9]/g, "");

    data.time.year = newValue.time.year.replace(/[^0-9]/g, "");
    data.time.month = Number(sMonth) > 12 ? "12" : sMonth;
    data.time.day = Number(sDay) > 31 ? "31" : sDay;
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {});

const addwitnessInfo = () => {
  data.witnessInfo.push({
    name: "",
    address: "",
    phone: "",
    id: "",
  });
};
const addItem = () => {
  data.detail.push({
    // id: "1",
    name: "",
    spec: "",
    num: "",
    part: "",
    desc: "",
  });
};
const addextractUser = () => {
  data.extractUser.push({
    name: "",
    address: "",
    id: "",
  });
};
const handleSave = async () => {
  console.log("data", data);
  const res = await saveCaseDetailInfo(props.caseId, data);
  if (res.code === 0) {
    ElMessage.success("保存成功！");
    initInfo();
  }
};
const handleExport = async () => {
  await saveCaseDetailInfo(props.caseId, data);
  const res = await exportCaseDetailInfo(props.caseId);
  console.log("res", res);
  saveAs(res, `${props.title}_提取清单.docx`);
};
const initInfo = async () => {
  const res = await getCaseDetailInfo(props.caseId);

  console.log("res", res);
  for (var k in data) {
    if (!res.data) {
      isDisableExport.value = true;
    } else {
      isDisableExport.value = false;
    }
    if (res.data && res.data.hasOwnProperty(k)) {
      // console.log("Key is " + k)
      data[k] = res.data[k];
    }
  }
};
onMounted(() => {
  initInfo();
});
</script>

<style lang="scss">
.records {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 0;

  .header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 50px;
  }

  .input {
    height: 32px;
    line-height: 32px;
    margin: 0 8px;
  }

  .textarea {
    margin-right: 8px;
    margin-bottom: 20px;

    span {
      padding: 10px 0;
      display: inline-block;
    }

    // margin: 0 8px;
  }

  .line {
    display: inline-flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-bottom: 25px;
    line-height: 38px;

    span {
      white-space: nowrap;
    }
  }
}

.title {
  text-align: center;
}

.sub-tit {
  display: inline-block;
  padding-bottom: 20px;
}

.info {
  display: block;

  .inner {
    display: flex;
    flex-direction: row;
    width: 100%;

    .input {
      flex: 1;
    }

    .sec {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.witnessInfo {
  background: #f5f5f5;
  padding: 15px;
  margin-top: 20px;
  // margin-right: 8px;
}

.gap {
  margin: 15px 0;
}

.btn-container {
  padding: 20px 0;

  .btn {
    color: #26559b;
    width: 100%;

    &:hover {
      background: #f5f5f5;
      border-color: #dcdfe6;
    }
  }
}

.detail {
  .con {
    padding: 20px;
    background-color: #f5f5f5;
  }

  .info {
    .inner {
      margin-bottom: 20px;
    }
  }
}

.extractUser {
  margin-right: 0px;

  .line {
    background-color: #f5f5f5;
    padding: 15px;
    width: calc(100% - 30px);
    display: inline-flex;
    margin-bottom: 15px;
  }
}
</style>