更新 保险单删除;查看

package.json

@@ -11,16 +11,17 @@
   "dependencies": {
     "@cloudbase/js-sdk": "^1.7.1",
     "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^2.3.1",
     "axios": "^0.21.1",
     "dayjs": "^1.11.4",
+    "echarts": "^5.3.3",
     "element-plus": "^1.1.0-beta.24",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "vite-plugin-compression": "^0.3.5",
     "vue": "^3.2.16",
     "vue-router": "^4.0.4",
-    "vuex": "^4.0.2",
-    "echarts": "^5.3.3"
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",

src/views/voyage/voyageDetail.vue

@@ -1269,22 +1269,44 @@
       <div class="info-line">
         <div class="info-line-title">保险单</div>
         <div class="file-box df aic">
-          <div class="file-container" v-for="(item, index) in policyFileList">
+          <div
+            class="file-container"
+            v-for="(item, index) in policyFileList"
+            :key="index"
+            @mouseover="item.show = true"
+            @mouseleave="item.show = false"
+          >
+            <div v-show="item.show" class="policy-mask df aic jcc">
+              <el-icon
+                class="pointer mr20"
+                color="#fff"
+                size="20"
+                @click="checkPolicy(item)"
+              >
+                <ZoomIn />
+              </el-icon>
+              <el-icon
+                @click="deletePolicy(item, index)"
+                class="pointer"
+                color="#fff"
+                size="20"
+              >
+                <Delete />
+              </el-icon>
+            </div>
             <img
               v-if="item.suffix === 'jpg'"
               style="width: 145px; height: 100px; object-fit: contain"
               :src="item.viewUrl"
               alt=""
             />
-
             <el-button
               style="margin: 0 auto"
               v-if="item.suffix === 'pdf'"
               type="text"
               size="small"
-              @click="handlePdf(item)"
             >
-              查看PDF
+              PDF
             </el-button>
           </div>
           <el-dialog fullscreen v-model="pdfVisible" title="查看PDF">
@@ -1296,15 +1318,15 @@
           </el-dialog>
         </div>
         <el-upload
-          class="mb10 ml20"
+          class="ml20"
           drag
-          multiple
           :action="store.state.wayBillUrl"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemovePolicy"
           :data="policyParams"
           :on-success="policyUploadSuccess"
+          :show-file-list="false"
           :disabled="isAuthDisabled('POLICYADD')"
         >
           <div class="upload-plus-icon">+</div>
@@ -1982,6 +2004,7 @@ import { subTimeStr } from "utils/utils";
 import * as dayjs from "dayjs";
 import isAuthDisabled from "../../auth/isAuthDisabled";
 import data from "./data.js";
+import { ZoomIn, Delete } from "@element-plus/icons-vue";
 
 const route = useRoute();
 let map = ref({});
@@ -2003,13 +2026,13 @@ async function getVoyageDetail(isInit) {
     spinner: "el-icon-loading",
     background: "rgba(0, 0, 0, 0.7)",
   });
-  // let res = await api.getVoyageDetail({
-  //   type: localStorage.userType,
-  //   voyageId: route.query.id,
-  // });
-  let res = {
-    data,
-  };
+  let res = await api.getVoyageDetail({
+    type: localStorage.userType,
+    voyageId: route.query.id,
+  });
+  // let res = {
+  //   data,
+  // };
   loading.close();
   if (res.data.status == 0) {
     ElNotification({
@@ -2044,7 +2067,6 @@ async function getVoyageDetail(isInit) {
     for (let i of res.data.result.policys || []) {
       policyFileList.value.push({
         ...i,
-        url: i.viewUrl,
         suffix:
           i.fileKey.split(".").pop() === "jpeg"
             ? "jpg"
@@ -2448,12 +2470,14 @@ async function handleRemovePolicy(file, list) {
 let policyFileList = ref([]);
 
 function policyUploadSuccess(response, file, list) {
-  list[list.length - 1] = {
-    ...response.result,
-    url: response.result.viewUrl,
-  };
-  console.log(list);
-  policyFileList.value = list;
+  let { result } = response;
+  policyFileList.value.push({
+    ...result,
+    suffix:
+      result.fileKey.split(".").pop() === "jpeg"
+        ? "jpg"
+        : result.fileKey.split(".").pop(),
+  });
 }
 
 let policyParams = ref({
@@ -3310,6 +3334,50 @@ function handlePdf(item) {
   pdfUrl.value = item.viewUrl;
 }
 
+function checkPolicy(item) {
+  switch (item.suffix) {
+    case "pdf": {
+      handlePdf(item);
+      break;
+    }
+    case "jpg": {
+      openMediaModal(item.viewUrl, 1, "保险单查看");
+
+      break;
+    }
+    case "png": {
+      openMediaModal(item.viewUrl, 1, "保险单查看");
+
+      break;
+    }
+  }
+}
+
+function deletePolicy(item, index) {
+  ElMessageBox.confirm("确认删除保险单?", "提示", {
+    confirmButtonText: "删除",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    let { id } = item;
+    let { data } = await api.deleteWaybill({
+      id,
+    });
+    if (data.status == 0) {
+      ElMessage({
+        message: "删除成功!",
+        type: "success",
+      });
+      policyFileList.value.splice(index, 1);
+    } else {
+      ElMessage({
+        message: data.msg,
+        type: "error",
+      });
+    }
+  });
+}
+
 onMounted(() => {
   getVoyageDetail(true);
 });
@@ -3532,10 +3600,32 @@ onMounted(() => {
   border-radius: 8px;
   flex-shrink: 0;
   overflow: hidden;
+  position: relative;
 }
 
 .file-box {
   width: calc(100vw - 700px);
   overflow-y: auto;
+  border: 1px solid #eee;
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.policy-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.mask-btn {
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 10px;
+  margin: 0 5px;
 }
 </style>