Merge branch 'xj' of http://192.168.0.115:3000/bill/public-fuse into xj

src/components/head/index.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="head-layer">
-    <el-tabs
-      :modelValue="modelValue"
-      @update:modelValue="(str: any) => updateModelValue(str)"
-    >
-      <el-tab-pane
-        v-for="item in options"
-        :key="item.value"
-        :label="item.name"
-        :name="item.value"
-      >
+    <el-tabs :modelValue="modelValue" @update:modelValue="(str: any) => updateModelValue(str)">
+
+      <el-tab-pane v-for="item in options" :key="item.value" :label="item.name"
+        :name="item.value">
       </el-tab-pane>
+
     </el-tabs>
     <div class="head-content-layer" :class="{ show: show }" v-if="!notContent">
       <div class="head-content">
@@ -19,11 +14,15 @@
       <div class="display" @click="show = !show" v-if="showCtrl">
         <template v-if="show">
           <span>收起</span>
-          <el-icon><ArrowUp /></el-icon>
+          <el-icon>
+            <ArrowUp />
+          </el-icon>
         </template>
         <template v-else>
           <span>展开</span>
-          <el-icon><ArrowDown /></el-icon>
+          <el-icon>
+            <ArrowDown />
+          </el-icon>
         </template>
       </div>
     </div>

src/router/routeName.ts

@@ -15,6 +15,7 @@ export const RouteName = {
   role: "role",
   sceneInitiator: "sceneInitiator",
   sceneVisitor: "sceneVisitor",
+  records: "records",
   setting: "setting",
 } as const;
 

src/view/case/records/index copy.vue

@@ -0,0 +1,344 @@
+<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>

src/view/case/records/index.vue

@@ -1,9 +1,345 @@
 <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>
 
-  <div>勘验笔录</div>
 </template>
 <script setup>
+import { onMounted, ref, watch } from 'vue';
+import { reactive } from 'vue'
+const props = defineProps({ caseId: Number })
 
-const props = defineProps({caseId: Number})
 console.log(props)
-</script>
+
+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>