feat(records): save ui

src/router/config.ts

@@ -91,6 +91,7 @@ export const routes: Routes = [
         component: () => import("@/view/vrmodel/downloadLog.vue"),
         meta: { title: "下载记录", icon: "icon-query_home" },
       },
+    
     ],
   },
   {

src/router/routeName.ts

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

src/view/case/records/index.vue

@@ -1,9 +1,340 @@
 <template>
+  <!-- 勘验笔录{{ props.caseId }} -->
+  <div class="records">
+    <div class="header">
+      <el-button type="primary">保存</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>
-
-const props = defineProps({caseId: Number})
+import { onMounted, ref, watch } from 'vue';
+import { reactive } from 'vue'
+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: ""
+  })
+}
+
+
+</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>