新增 查看PDF类型文件

src/views/voyage/voyageDetail.vue

@@ -1268,7 +1268,35 @@
     <div class="line" v-auth="'POLICY'">
       <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">
+            <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
+            </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>
         <el-upload
+          class="mb10 ml20"
           drag
           multiple
           :action="store.state.wayBillUrl"
@@ -1277,7 +1305,6 @@
           :on-remove="handleRemovePolicy"
           :data="policyParams"
           :on-success="policyUploadSuccess"
-          :file-list="policyFileList"
           :disabled="isAuthDisabled('POLICYADD')"
         >
           <div class="upload-plus-icon">+</div>
@@ -1980,6 +2007,9 @@ async function getVoyageDetail(isInit) {
     type: localStorage.userType,
     voyageId: route.query.id,
   });
+  // let res = {
+  //   data,
+  // };
   loading.close();
   if (res.data.status == 0) {
     ElNotification({
@@ -2015,6 +2045,10 @@ async function getVoyageDetail(isInit) {
       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) {
@@ -3269,6 +3303,12 @@ function dischargeExcelSuccess(e) {
 function beforeDischargeExcel() {
   isUpLoading.value = true;
 }
+const pdfUrl = ref("");
+const pdfVisible = ref(false);
+function handlePdf(item) {
+  pdfVisible.value = true;
+  pdfUrl.value = item.viewUrl;
+}
 
 onMounted(() => {
   getVoyageDetail(true);
@@ -3481,4 +3521,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 - 700px);
+  overflow-y: auto;
+}
 </style>