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>导出</el-button>
    </div>
    <h3 class="title">基本信息</h3>
    <div class="content">

      <div class="line">
        <span>勘验次数:</span>
        <span>第</span>
        <el-input class="input" v-model="data.times" placeholder="" style="width: 80px;" />
        <span>次勘验</span>
      </div>

      <div class="line">
        <span>勘验时间:</span>
        <div>
          <el-input class="input" :maxlength="4" type="text" v-model="data.start.year" placeholder=""
            style="width: 80px;" />
          <span>年</span>
          <el-input class="input" :maxlength="2" type="text" v-model="data.start.month" placeholder=""
            style="width: 80px;" />
          <span>月</span>
          <el-input class="input" :maxlength="2" type="text" v-model="data.start.day" 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.end.year" placeholder="" style="width: 80px;" />
          <span>年</span>
          <el-input class="input" :maxlength="2" v-model="data.end.month" placeholder="" style="width: 80px;" />
          <span>月</span>
          <el-input class="input" :maxlength="2" v-model="data.end.day" placeholder="" style="width: 80px;" />
          <span>日</span>
        </div>
      </div>

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

      </div>

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

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

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

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

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

      <div class="textarea">
        <span>现场拍照制图描述：</span>
        <el-input type="textarea" :rows="6" v-model="data.sceneDesc" 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.start.month" placeholder="" />
          </div>

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

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

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

            <span style="margin-left:50px">身份证件号码:</span>
            <el-input class="input" v-model="data.witness[index - 1].id" placeholder="" style="width: 280px;" />
          </div>
        </div>

      </template>

      <div class="btn-container">
        <el-button class="btn" @click="addWitness">+新增</el-button>
      </div>

      <div>
      </div>
    </div>
  </div>

</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { reactive } from 'vue'
const props = defineProps({ caseId: Number })

console.log(props)

const data = reactive({
  times: "",
  start: {
    year: "",
    month: "",
    day: ""
  },
  end: {
    year: "",
    month: "",
    day: ""
  },
  location: '',
  job: '',
  condition: '',
  situation: '',
  situationEnv: '',  //环境勘验
  situationPrimary: '', //初步勘验
  situationDetail: '', //初步勘验
  situationTask: '', //专项勘验
  objectDesc: '',
  sceneDesc: '',
  witness: [{
    name: "",
    year: "",
    month: "",
    day: "",
    id: ""
  }, {
    name: "",
    year: "",
    month: "",
    day: "",
    id: ""
  }]
})

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

  const eMonth = newValue.end.month.replace(/[^0-9]/g, '');
  const eDay = newValue.end.day.replace(/[^0-9]/g, '');

  data.start.year = newValue.start.year.replace(/[^0-9]/g, '');
  data.start.month = Number(sMonth) > 12 ? '12' : sMonth;
  data.start.day = Number(sDay) > 31 ? '31' : sDay;

  data.end.year = newValue.end.year.replace(/[^0-9]/g, '');
  data.end.month = Number(eMonth) > 12 ? '12' : eMonth;
  data.end.day = Number(eDay) > 31 ? '31' : eDay;

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

}, {
  immediate: true,
  deep: true
})

const witnesses = ref(2)
onMounted(() => {
})

const addWitness = () => {
  witnesses.value += 1
  data.witness.push({
    name: "",
    year: "",
    month: "",
    day: "",
    id: ""
  })
}

const handleSave = () => {
  console.log('data', data)

}

</script>

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

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

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


  }


}

.witness {
  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>