caseEditor/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>

      </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: ""
  }, {
    name: "",
    year: "",
    month: "",
    day: "",
    id: ""
  }]
})

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>