feat: save

src/view/case/records/index.vue

@@ -387,7 +387,7 @@
             placeholder=""
             style="width: 200px"
           />
-          <el-button link type="danger" @click="removeRecorderInfo(index)"
+          <el-button link class="del-btn" type="danger" @click="removeRecorderInfo(index)"
             ><el-icon :size="18"><CircleClose /> </el-icon>
           </el-button>
         </div>
@@ -420,159 +420,61 @@
             placeholder=""
             style="width: 200px"
           />
-          <el-button link type="danger" @click="removeSignatureInfo(index)"
+          <el-button class="del-btn" link type="danger" @click="removeSignatureInfo(index)"
             ><el-icon :size="18"><CircleClose /> </el-icon>
           </el-button>
         </div>
       </template>
 
-      <!-- <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
-
-        <span>单位</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>职务</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-      </div>
-      <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
-
-        <span>单位</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>职务</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-      </div>
-      <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
-
-        <span>单位</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>职务</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-      </div>
       <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
+        现场勘验见证人：
 
-        <span>单位</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>职务</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-      </div> -->
-
-      <div class="line">现场勘验见证人：</div>
-
-      <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
-        <span>性别</span>
-        <el-select
-          class="input"
-          v-model="data.x"
-          placeholder="性别"
-          style="width: 140px"
-        >
-          <el-option :value="0" label="男" />
-          <el-option :value="1" label="女" />
-        </el-select>
-        <span>出生日期</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>住址</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 260px"
-        />
-      </div>
-      <div class="line">
-        <span>本人签名： &nbsp;&nbsp; </span>
-        <span>_______________ &nbsp;&nbsp;</span>
-        <span>性别</span>
-        <el-select
-          class="input"
-          v-model="data.x"
-          placeholder="性别"
-          style="width: 140px"
-        >
-          <el-option :value="0" label="男" />
-          <el-option :value="1" label="女" />
-        </el-select>
-        <span>出生日期</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address1"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>住址</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address12"
-          placeholder=""
-          style="width: 260px"
-        />
+        <el-button link @click="addWitnessInfo"
+          ><el-icon :size="18"><CirclePlus /> </el-icon>
+        </el-button>
       </div>
+      <template v-for="(witness, index) of data.witnessInfo">
+        <div class="line info">
+          <span>本人签名： &nbsp;&nbsp; </span>
+          <span>_______________ &nbsp;&nbsp;</span>
+          <span>性别</span>
+          <el-select
+            class="input"
+            v-model="witness.sex"
+            placeholder="性别"
+            style="width: 140px"
+          >
+            <el-option :value="0" label="男" />
+            <el-option :value="1" label="女" />
+          </el-select>
+          <span>出生日期</span>
+          <el-date-picker
+            class="input"
+            v-model="witness.birthday"
+            type="date"
+            placeholder="出生日期"
+            style="width: 180px"
+          />
+          <!-- <el-input
+            class="input"
+            type="text"
+            v-model="witness.birthday"
+            placeholder=""
+            style="width: 200px"
+          /> -->
+          <span>住址</span>
+          <el-input
+            class="input"
+            type="text"
+            v-model="witness.address"
+            placeholder=""
+            style="width: 260px"
+          />
+          <el-button link class="del-btn" type="danger" @click="removeWitnessInfo(index)"
+            ><el-icon :size="18"><CircleClose /> </el-icon>
+          </el-button>
+        </div>
+      </template>
 
       <div class="textarea">
         <span>备注：</span>
@@ -676,6 +578,7 @@ const data = reactive({
   signatureInfo: [], //现场勘验人员
   signatureInfoNum: 4,
   witnessInfo: [],
+  witnessInfoNum: 2,
   remark: [],
 });
 
@@ -696,18 +599,27 @@ const initInfo = async () => {
     }
   }
 };
-const initSignatureInfo = () => {
-  Array.from(new Array(data.signatureInfoNum)).forEach(() => {
-    data.signatureInfo.push({
-      unit: "",
-      job: "",
+const initSignatureAndWitInfo = () => {
+  data.signatureInfo.length === 0 &&
+    Array.from(new Array(data.signatureInfoNum)).forEach(() => {
+      data.signatureInfo.push({
+        unit: "",
+        job: "",
+      });
+    });
+  data.witnessInfo.length === 0 &&
+    Array.from(new Array(data.witnessInfoNum)).forEach(() => {
+      data.witnessInfo.push({
+        sex: 0,
+        birthday: "",
+        address: "",
+      });
     });
-  });
 };
 
 onMounted(() => {
   initInfo();
-  initSignatureInfo();
+  initSignatureAndWitInfo();
 });
 
 const addRecorderInfo = () => {
@@ -738,6 +650,21 @@ const removeSignatureInfo = async (index) => {
     data.signatureInfo.splice(index, 1);
   }
 };
+const addWitnessInfo = async () => {
+  if (await confirm("确定要添加新的现场勘验见证人？")) {
+    data.witnessInfo.push({
+      sex: 0,
+      birthday: "",
+      address: "",
+    });
+  }
+};
+
+const removeWitnessInfo = async (index) => {
+  if (await confirm("确定要删除此数据？")) {
+    data.witnessInfo.splice(index, 1);
+  }
+};
 
 const handleSave = async () => {
   console.log("data", data);
@@ -854,11 +781,11 @@ const handleExport = async () => {
   }
 }
 .info {
-  .el-icon {
+  .del-btn {
     display: none;
   }
   &:hover {
-    .el-icon {
+    .del-btn {
       display: block;
     }
   }