feat: save

src/assets/style/public.scss

@@ -312,7 +312,8 @@ body {
 }
 
 .el-message-box__status {
-  top: -31px !important;
+  // top: -31px !important;
+  top: -14px !important;
 }
 
 .el-message-box__title span::before {

src/view/case/records/formData.ts

@@ -0,0 +1,39 @@
+export const recorderInfoType =
+    [
+        {
+            type: 0,
+            typeLabel: "笔录人",
+            name: "",
+            unit: "",
+            job: "",
+        },
+        {
+            type: 1,
+            typeLabel: "制图人",
+            name: "",
+            unit: "",
+            job: "",
+        },
+        {
+            type: 2,
+            typeLabel: "照相人",
+            name: "",
+            unit: "",
+            job: "",
+        },
+        {
+            type: 3,
+            typeLabel: "摄像人",
+            name: "",
+            unit: "",
+            job: "",
+        },
+        {
+            type: 4,
+            typeLabel: "法 医",
+            name: "",
+            unit: "",
+            job: "",
+        },
+
+    ]

src/view/case/records/index.vue

@@ -320,186 +320,79 @@
 
       <div class="line">
         <span>现场勘验制图，&nbsp; </span>
-        <el-input-number class="input" v-model="data.imageNum" style="width: 130px" />
-        <span>张; &nbsp;&nbsp;</span>
-        <span>照相</span>
-        <el-input-number class="input" v-model="data.photographNum" style="width: 130px" />
-        <span>张;&nbsp;&nbsp;</span>
-        <span>摄像</span>
-        <el-input class="input" v-model="data.d" style="width: 80px" />
-        <span>分</span>
-        <el-input class="input" v-model="data.d" style="width: 80px" />
-        <span>秒</span>
-      </div>
-      <div class="line">现场勘验记录人员：</div>
-      <div class="line">
-        <span>笔录人： &nbsp;&nbsp; </span>
-        <span>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
-        />
-        <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>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
+        <el-input-number
           class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
+          controls-position="right"
+          v-model="data.imageNum"
+          style="width: 130px"
         />
-        <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>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
-        />
-        <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>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
-        />
-        <span>单位</span>
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
-        />
-        <span>职务</span>
-        <el-input
+        <span>张; &nbsp;&nbsp;</span>
+        <span>照相</span>
+        <el-input-number
           class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
+          controls-position="right"
+          v-model="data.photographNum"
+          style="width: 130px"
         />
-      </div>
-      <div class="line">
-        <span>法 医： &nbsp;&nbsp; </span>
-        <span>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
-        />
-        <span>单位</span>
-        <el-input
+        <span>张;&nbsp;&nbsp;</span>
+        <span>摄像</span>
+        <el-input-number
           class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
+          controls-position="right"
+          v-model="data.photographyMinNum"
+          style="width: 130px"
         />
-        <span>职务</span>
-        <el-input
+        <span>分</span>
+        <el-input-number
           class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 200px"
+          controls-position="right"
+          v-model="data.photographySecNum"
+          style="width: 130px"
         />
+        <span>秒</span>
       </div>
       <div class="line">
-        <span>法 医： &nbsp;&nbsp; </span>
-        <span>姓名</span>
-        <!-- 单位 XX派出所 职务 一级警长 -->
-        <el-input
-          class="input"
-          type="text"
-          v-model="data.address"
-          placeholder=""
-          style="width: 180px"
-        />
-        <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"
-        />
+        现场勘验记录人员：
+        <el-button link @click="recorderInfoDialogShow = true"
+          ><el-icon :size="18"><CirclePlus /> </el-icon>
+        </el-button>
       </div>
+
+      <!-- 现场勘验记录人员 -->
+      <template v-for="(info, index) in data.recorderInfo">
+        <div class="line info">
+          <span>{{ info.typeLabel }}： &nbsp;&nbsp; </span>
+          <span>姓名</span>
+          <!-- 单位 XX派出所 职务 一级警长 -->
+          <el-input
+            class="input"
+            type="text"
+            v-model="info.name"
+            placeholder=""
+            style="width: 180px"
+          />
+          <span>单位</span>
+          <el-input
+            class="input"
+            type="text"
+            v-model="info.unit"
+            placeholder=""
+            style="width: 200px"
+          />
+          <span>职务</span>
+          <el-input
+            class="input"
+            type="text"
+            v-model="info.job"
+            placeholder=""
+            style="width: 200px"
+          />
+          <el-button link type="danger" @click="removeRecorderInfo(index)"
+            ><el-icon :size="18"><CircleClose /> </el-icon>
+          </el-button>
+        </div>
+      </template>
+
       <div class="line">现场勘验人员：</div>
 
       <div class="line">
@@ -663,18 +556,48 @@
 
       <div></div>
     </div>
+    <el-dialog
+      v-model="recorderInfoDialogShow"
+      title="增加现场勘验记录人员"
+      width="500"
+      align-center
+      @close="recorderInfoDialogSelect = null"
+    >
+      <div style="width: 80%; margin: 30px auto">
+        <el-select
+          v-model="recorderInfoDialogSelect"
+          placeholder="请选择现场勘验记录人员"
+          size="large"
+        >
+          <el-option
+            v-for="item in recorderInfoType"
+            :key="item.type"
+            :label="item.typeLabel"
+            :value="item.type"
+          />
+        </el-select>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="addRecorderInfo"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, h } from "vue";
 import { reactive } from "vue";
 import {
   getCaseInquestInfo,
   saveCaseInquestInfo,
   exportCaseInquestInfo,
 } from "@/store/case";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
 import saveAs from "@/util/file-serve";
+import { CirclePlus, CircleClose } from "@element-plus/icons-vue";
+import { recorderInfoType } from "./formData.ts";
+import { confirm } from "@/helper/message";
 const props = defineProps({ caseId: Number, title: String });
 
 console.log(props);
@@ -716,13 +639,16 @@ const data = reactive({
   inquestSituation: "", //现场勘验情况
   imageNum: 0, //现场勘验制图数量
   photographNum: 0, //照相数量
-  photographyNum: 0, //摄影数量
-  recorderInfo: [],
+  photographyMinNum: 0, //摄影数量
+  photographySecNum: 0, //摄影数量
+  recorderInfo: [...recorderInfoType, recorderInfoType[4]],
   signatureInfo: [],
   witnessInfo: [],
   remark: [],
 });
 
+const recorderInfoDialogShow = ref(false);
+const recorderInfoDialogSelect = ref();
 const initInfo = async () => {
   const res = await getCaseInquestInfo(props.caseId);
 
@@ -743,15 +669,20 @@ onMounted(() => {
   initInfo();
 });
 
-const addwitnessInfo = () => {
-  // witnessInfoes.value += 1
-  data.witnessInfo.push({
-    name: "",
-    year: "",
-    month: "",
-    day: "",
-    id: "",
-  });
+const addRecorderInfo = () => {
+  recorderInfoDialogShow.value = false;
+  if (recorderInfoDialogSelect.value) {
+    const newCrew = recorderInfoType.find(
+      (i) => i.type === recorderInfoDialogSelect.value
+    );
+    data.recorderInfo.push(newCrew);
+    // debugger;
+  }
+};
+const removeRecorderInfo = async (index) => {
+  if (await confirm("确定要删除此数据？")) {
+    data.recorderInfo.splice(index, 1);
+  }
 };
 
 const handleSave = async () => {
@@ -868,4 +799,14 @@ const handleExport = async () => {
     }
   }
 }
+.info {
+  .el-icon {
+    display: none;
+  }
+  &:hover {
+    .el-icon {
+      display: block;
+    }
+  }
+}
 </style>