新增 查看PDF类型文件

src/views/voyage/voyageDetail.vue

@@ -970,13 +970,33 @@
     <div class="line-container-p24" style="padding-left: 60px">
       <div class="df aic">
         <div class="info-line-title">保险单:</div>
-        <el-image
-          style="width: 200px; height: 200px; margin-right: 20px"
-          :src="item.viewUrl"
-          v-for="item in policyList"
-          :key="item"
-          @click="openMediaModal(item.viewUrl, 1, '保险单查看')"
-        ></el-image>
+        <div class="file-box df aic mb10">
+          <div class="file-container" v-for="(item, index) in policyFileList">
+            <img
+              v-if="item.suffix === 'jpg'"
+              style="width: 145px; height: 100px; object-fit: contain"
+              :src="item.viewUrl"
+              @click="openMediaModal(item.viewUrl, 1, '保险单查看')"
+            />
+
+            <el-button
+              style="margin: 0 auto"
+              v-if="item.suffix === 'pdf'"
+              type="text"
+              size="small"
+              @click="handlePdf(item)"
+            >
+              查看PDF
+            </el-button>
+          </div>
+          <el-dialog fullscreen v-model="pdfVisible" title="查看PDF">
+            <iframe
+              style="width: 100%; height: 85vw; overflow: hidden; border: none"
+              :src="pdfUrl"
+              frameborder="0"
+            ></iframe>
+          </el-dialog>
+        </div>
       </div>
       <div v-if="voyage.hasInsurance == 1">
         <div class="hr mb20"></div>
@@ -1322,7 +1342,7 @@ let voyage = ref({
 let medias = ref([]);
 let coordinates = ref();
 let previewSrcList = ref([]);
-let policyList = ref([]);
+let policyFileList = ref([]);
 let previewPoundList = ref([]);
 let shipAudits = ref([]);
 
@@ -1336,7 +1356,7 @@ function showCerts() {
 }
 
 async function getVoyageDetail(isInit) {
-  policyList.value = [];
+  policyFileList.value = [];
   voyageBill.value = [];
   previewSrcList.value = [];
   let loading = ElLoading.service({
@@ -1379,9 +1399,13 @@ async function getVoyageDetail(isInit) {
     }
 
     for (let i of res.data.result.policys || []) {
-      policyList.value.push({
+      policyFileList.value.push({
         ...i,
         url: i.viewUrl,
+        suffix:
+          i.fileKey.split(".").pop() === "jpeg"
+            ? "jpg"
+            : i.fileKey.split(".").pop(),
       });
     }
     for (let i of res.data.result.waybills) {
@@ -2097,6 +2121,13 @@ async function updateCargoOwnerRemark() {
   }
 }
 
+const pdfUrl = ref("");
+const pdfVisible = ref(false);
+function handlePdf(item) {
+  pdfVisible.value = true;
+  pdfUrl.value = item.viewUrl;
+}
+
 onMounted(() => {
   getVoyageDetail(true);
 });
@@ -2294,4 +2325,21 @@ onMounted(() => {
   background-color: #0094feb6; /* 设置滚动条的颜色 */
   border-radius: 10px;
 }
+
+.file-container {
+  width: 145px;
+  height: 145px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.file-box {
+  width: calc(100vw - 400px);
+  overflow-y: auto;
+}
 </style>