feat(records): change id

src/view/case/records/manifest.vue

@@ -5,18 +5,16 @@
       <el-button type="primary" @click="handleSave">保存</el-button>
       <el-button>导出</el-button>
     </div>
-    <h3 class="title">基本信息</h3>
-    <div class="content">
 
+    <div class="content">
       <div class="line">
-        <span>勘验次数:</span>
-        <span>第</span>
-        <el-input class="input" v-model="data.times" placeholder="" style="width: 80px;" />
-        <span>次勘验</span>
+        <span>起火单位/地址:</span>
+        <el-input class="input" v-model="data.times" placeholder="" style="width: 100%;" />
+
       </div>
 
       <div class="line">
-        <span>勘验时间:</span>
+        <span>提取日期:</span>
         <div>
           <el-input class="input" :maxlength="4" type="text" v-model="data.start.year" placeholder=""
             style="width: 80px;" />
@@ -28,106 +26,92 @@
             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="lists">
+        <span class="sub-tit">提取清单：</span>
+        <template v-for=" (list, index) in data.lists">
+          <div class="con">
+            <span class="sub-tit">编号 {{ index + 1 }}: </span>
+            <div class="info">
+              <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 class="inner">
+                <div class="sec">
+                  <span>提取部位: </span>
+                  <el-input class="input" v-model="data.leader" placeholder="" />
+                </div>
+
+
+              </div>
+              <div class="inner">
+                <div class="sec">
+                  <span>特征: </span>
+                  <el-input class="input" v-model="data.leader" placeholder="" />
+                </div>
+
+              </div>
+            </div>
 
-      <div class="textarea">
-        <span>二、初步勘验</span>
-        <el-input type="textarea" :rows="4" v-model="data.situationPrimary" placeholder="" style="width: 100%;" />
-      </div>
+          </div>
 
-      <div class="textarea">
-        <span>三、细项勘验</span>
-        <el-input type="textarea" :rows="4" v-model="data.situationDetail" placeholder="" style="width: 100%;" />
-      </div>
+        </template>
 
-      <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 class="btn-container">
+        <el-button class="btn" @click="addItem">+新增</el-button>
       </div>
+      <div class="gap"></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 class="man">
+        <span class="sub-tit">提取人：</span>
+        <template v-for="man in data.man">
+          <div class="line">
+            <span>姓名:</span>
+            <el-input class="input" placeholder="" style="width: 20%" />
+            <span>工作单位:</span>
+            <el-input class="input" placeholder="" style="width: 70%" />
           </div>
 
-          <div class="sec">
-            <span>勘验人</span>
-            <el-input class="input" v-model="data.start.month" placeholder="" />
-          </div>
-        </div>
+        </template>
+      </div>
+      <div class="btn-container">
+        <el-button class="btn" @click="addMan">+新增</el-button>
       </div>
-
-      <div class="gap"></div>
       <!-- 证人 -->
-      <template v-for="index of witnesses">
+      <template v-for="wit in data.witness">
         <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;" />
+            <el-input class="input" v-model="wit.name" placeholder="" style="width: 180px;" />
             <div>
-              <el-input class="input" v-model="data.witness[index - 1].year" placeholder="" style="width: 80px;" />
+              <el-input class="input" v-model="wit.year" placeholder="" style="width: 80px;" />
               <span>年</span>
-              <el-input class="input" v-model="data.witness[index - 1].month" placeholder="" style="width: 80px;" />
+              <el-input class="input" v-model="wit.year" placeholder="" style="width: 80px;" />
               <span>月</span>
-              <el-input class="input" v-model="data.witness[index - 1].day" placeholder="" style="width: 80px;" />
+              <el-input class="input" v-model="wit.year" 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;" />
+            <el-input class="input" v-model="wit.id" placeholder="" style="width: 280px;" />
           </div>
         </div>
 
@@ -162,15 +146,36 @@ const data = reactive({
     day: ""
   },
   location: '',
-  job: '',
-  condition: '',
-  situation: '',
-  situationEnv: '',  //环境勘验
-  situationPrimary: '', //初步勘验
-  situationDetail: '', //初步勘验
-  situationTask: '', //专项勘验
-  objectDesc: '',
-  sceneDesc: '',
+  lists: [{
+    id: "1",
+    name: "",
+    spec: "",
+    num: "",
+    part: "",
+    desc: "",
+  },
+  {
+    id: "2",
+    name: "",
+    spec: "",
+    num: "",
+    part: "",
+    desc: "",
+  }],
+  man: [
+    {
+      name: "",
+      workplace: "",
+      id: ""
+    },
+
+    {
+      name: "",
+      workplace: "",
+      id: ""
+    },
+  ],
+
   witness: [{
     name: "",
     year: "",
@@ -216,12 +221,11 @@ watch(data, newValue => {
   deep: true
 })
 
-const witnesses = ref(2)
+
 onMounted(() => {
 })
 
 const addWitness = () => {
-  witnesses.value += 1
   data.witness.push({
     name: "",
     year: "",
@@ -230,7 +234,26 @@ const addWitness = () => {
     id: ""
   })
 }
-
+const addItem = () => {
+  data.lists.push({
+    id: "1",
+    name: "",
+    spec: "",
+    num: "",
+    part: "",
+    desc: "",
+  })
+}
+const addMan = () => {
+  data.man.push({
+    id: "1",
+    name: "",
+    spec: "",
+    num: "",
+    part: "",
+    desc: "",
+  })
+}
 const handleSave = () => {
   console.log('data', data)
 
@@ -247,6 +270,7 @@ const handleSave = () => {
   .header {
     display: flex;
     justify-content: flex-end;
+    margin-bottom: 50px;
   }
 
   .input {
@@ -293,8 +317,6 @@ const handleSave = () => {
 .info {
   display: block;
 
-
-
   .inner {
     display: flex;
     flex-direction: row;
@@ -321,7 +343,7 @@ const handleSave = () => {
   background: #F5F5F5;
   padding: 15px;
   margin-top: 20px;
-  margin-right: 8px;
+  // margin-right: 8px;
 }
 
 .gap {
@@ -341,4 +363,32 @@ const handleSave = () => {
     }
   }
 }
+
+.lists {
+
+
+  .con {
+    padding: 20px;
+    background-color: #F5F5F5;
+  }
+
+  .info {
+    .inner {
+      margin-bottom: 20px;
+    }
+  }
+
+}
+
+.man {
+  margin-right: 0px;
+
+  .line {
+    background-color: #F5F5F5;
+    padding: 15px;
+    width: calc(100% - 30px);
+    display: inline-flex;
+    margin-bottom: 15px;
+  }
+}
 </style>