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

<template>
  <!-- 勘验笔录{{ props.caseId }} -->
  <div class="records">
    <div class="header">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleExport">导出</el-button>
    </div>
    <h3 class="title">基本信息</h3>
    <div class="content">
      <div class="line">
        <span>勘验次数:</span>
        <span>第</span>
        <el-input class="input" v-model="data.count" placeholder="" style="width: 80px" />
        <span>次勘验</span>
      </div>

      <div class="line">
        <span>勘验时间:</span>
        <div>
          <el-input
            class="input"
            :maxlength="4"
            type="text"
            v-model="data.startTime.year"
            placeholder=""
            style="width: 80px"
          />
          <span>年</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.startTime.month"
            placeholder=""
            style="width: 80px"
          />
          <span>月</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.startTime.day"
            placeholder=""
            style="width: 80px"
          />
          <span>日</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.startTime.hour"
            placeholder=""
            style="width: 80px"
          />
          <span>时</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.startTime.min"
            placeholder=""
            style="width: 80px"
          />
          <span>分</span>
        </div>
        <span style="width: 60px; text-align: center">至</span>
        <div>
          <el-input
            class="input"
            :maxlength="4"
            v-model="data.endTime.year"
            placeholder=""
            style="width: 80px"
          />
          <span>年</span>
          <el-input
            class="input"
            :maxlength="2"
            v-model="data.endTime.month"
            placeholder=""
            style="width: 80px"
          />
          <span>月</span>
          <el-input
            class="input"
            :maxlength="2"
            v-model="data.endTime.day"
            placeholder=""
            style="width: 80px"
          />
          <span>日</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.endTime.hour"
            placeholder=""
            style="width: 80px"
          />
          <span>时</span>
          <el-input
            class="input"
            :maxlength="2"
            type="text"
            v-model="data.endTime.min"
            placeholder=""
            style="width: 80px"
          />
          <span>分</span>
        </div>
      </div>

      <div class="line">
        <span>勘验地点:</span>
        <el-input
          class="input"
          type="tel"
          v-model="data.address"
          placeholder=""
          style="width: 100%"
        />
      </div>
      <div class="line">
        <span>勘验人员姓名、单位、职务（含技术职务）:</span>
        <el-input
          class="input"
          type="tel"
          v-model="data.userInfo"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="line">
        <span>勘验气象条件（天气、风力、温度）:</span>
        <el-input
          class="input"
          type="tel"
          v-model="data.weather"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>勘验情况:</span>
        <el-input
          type="textarea"
          :rows="4"
          v-model="data.situation"
          placeholder=""
          style="width: 100%"
        />
      </div>
      <div class="textarea">
        <span>一、环境勘验</span>
        <el-input
          type="textarea"
          :rows="4"
          v-model="data.environment"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>二、初步勘验</span>
        <el-input
          type="textarea"
          :rows="4"
          v-model="data.firstInquest"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>三、细项勘验</span>
        <el-input
          type="textarea"
          :rows="4"
          v-model="data.carefulInquest"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>四、专项勘验</span>
        <el-input
          type="textarea"
          :rows="6"
          v-model="data.specialInquest"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>提取物品描述：</span>
        <el-input
          type="textarea"
          :rows="6"
          v-model="data.itemDescription"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="textarea">
        <span>现场拍照制图描述：</span>
        <el-input
          type="textarea"
          :rows="6"
          v-model="data.imgDescription"
          placeholder=""
          style="width: 100%"
        />
      </div>

      <div class="info">
        <span class="sub-tit">天气情况：</span>
        <div class="inner">
          <div class="sec">
            <span>勘验负责人</span>
            <el-input class="input" v-model="data.leader" placeholder="" />
          </div>

          <div class="sec">
            <span> 记录人</span>
            <el-input class="input" v-model="data.recorder" placeholder="" />
          </div>

          <div class="sec">
            <span>勘验人</span>
            <el-input class="input" v-model="data.inspector" placeholder="" />
          </div>
        </div>
      </div>

      <div class="gap"></div>
      <!-- 证人 -->
      <template v-for="item of data.witnessInfo">
        <div class="witnessInfo">
          <span class="sub-tit">证人信息：</span>
          <div class="line">
            <span>证人或当事人:</span>
            <el-input
              class="input"
              v-model="item.name"
              placeholder=""
              style="width: 180px"
            />
            <div>
              <el-input
                class="input"
                v-model="item.year"
                placeholder=""
                style="width: 80px"
              />
              <span>年</span>
              <el-input
                class="input"
                v-model="item.month"
                placeholder=""
                style="width: 80px"
              />
              <span>月</span>
              <el-input
                class="input"
                v-model="item.day"
                placeholder=""
                style="width: 80px"
              />
              <span>日</span>
            </div>

            <span style="margin-left: 50px">身份证件号码:</span>
            <el-input
              class="input"
              v-model="item.id"
              placeholder=""
              style="width: 280px"
            />
          </div>
          <div class="line">
            <span>单位或住址:</span>
            <el-input
              class="input"
              v-model="item.address"
              placeholder=""
              style="width: 100%"
            />
          </div>
        </div>
      </template>

      <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 {
  getCaseInquestInfo,
  saveCaseInquestInfo,
  exportCaseInquestInfo,
} from "@/store/case";
import { ElMessage } from "element-plus";
import saveAs from "@/util/file-serve";
const props = defineProps({ caseId: Number });

console.log(props);

const data = reactive({
  count: "",
  startTime: {
    year: "",
    month: "",
    day: "",
    hour: "",
    min: "",
  },
  endTime: {
    year: "",
    month: "",
    day: "",
    hour: "",
    min: "",
  },
  address: "",
  userInfo: "",
  weather: "",
  situation: "",
  environment: "", //环境勘验
  firstInquest: "", //初步勘验
  carefulInquest: "", //细项勘验
  specialInquest: "", //专项勘验
  itemDescription: "",
  imgDescription: "",
  leader: "",
  recorder: "",
  inspector: "",
  witnessInfo: [
    {
      name: "",
      year: "",
      month: "",
      day: "",
      id: "",
      address: "",
    },
    {
      name: "",
      year: "",
      month: "",
      day: "",
      id: "",
      address: "",
    },
  ],
});

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

    const eMonth = newValue.endTime.month.replace(/[^0-9]/g, "");
    const eDay = newValue.endTime.day.replace(/[^0-9]/g, "");
    const eHour = newValue.endTime.hour.replace(/[^0-9]/g, "");
    const eMin = newValue.endTime.min.replace(/[^0-9]/g, "");

    data.startTime.year = newValue.startTime.year.replace(/[^0-9]/g, "");
    data.startTime.month = Number(sMonth) > 12 ? "12" : sMonth;
    data.startTime.day = Number(sDay) > 31 ? "31" : sDay;
    data.startTime.hour = Number(sDay) > 24 ? "24" : sHour;
    data.startTime.min = Number(sMin) > 60 ? "0" : sMin;

    data.endTime.year = newValue.endTime.year.replace(/[^0-9]/g, "");
    data.endTime.month = Number(eMonth) > 12 ? "12" : eMonth;
    data.endTime.day = Number(eDay) > 31 ? "31" : eDay;
    data.endTime.hour = Number(eHour) > 24 ? "24" : eHour;
    data.endTime.min = Number(eMin) > 60 ? "0" : eMin;

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

onMounted(async () => {
  const res = await getCaseInquestInfo(props.caseId);
  console.log("res", res);
  for (var k in data) {
    if (res.data && res.data.hasOwnProperty(k)) {
      console.log("Key is " + k);
      data[k] = res.data[k];
    }
  }
});

const addwitnessInfo = () => {
  // witnessInfoes.value += 1
  data.witnessInfo.push({
    name: "",
    year: "",
    month: "",
    day: "",
    id: "",
  });
};

const handleSave = async () => {
  console.log("data", data);
  const res = await saveCaseInquestInfo(props.caseId, data);
  if (res.code === 0) {
    ElMessage.success("保存成功！");
  }
};
const handleExport = async () => {
  const res = await exportCaseInquestInfo(props.caseId);
  console.log("res", res);
  saveAs(res, `勘验笔录-${props.caseId}.docx`);
};
</script>

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

  .header {
    display: flex;
    justify-content: flex-endTime;
  }

  .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;
    }
  }
}
</style>