update preview pdf

src/components/DialogWithMenu.vue

@@ -519,9 +519,18 @@ export default {
                 // 显示图片
                 this.currentImgUrl = URL.createObjectURL(res);
                 this.imgPreviewDialogVisible = true;
+              } else if (/pdf/i.test(res.type)) {
+                // 预览pdf 
+                let a = document.createElement('a')
+                a.setAttribute('target', '_blank')
+                a.href = URL.createObjectURL(res)
+                a.click()
+                console.log('before remove a ', a)
+                a.remove()
+                console.log('removed a ', a)
               } else {
                 this.$message({
-                  message: "非图片文件请下载后预览",
+                  message: "非图片和PDF文件请下载后预览",
                   type: "error",
                   duration: 1500,
                 });

src/components/uploadBtn/components/FileList.vue

@@ -7,6 +7,7 @@
           {{ file.name }}
         </span>
         <div class="h-4 space-x-2">
+          <button class="el-icon-view color-blue" @click="hanlePreview(file)" title="点击预览"></button>
           <button class="el-icon-download color-blue" @click="handleDownload(file)" title="点击下载"></button>
           <button class="el-icon-delete color-red" v-if="!detailMode" @click="handleDelete(file)" title="点击删除"></button>
         </div>
@@ -17,15 +18,8 @@
     <div class="top-search">
       <transition name="fade" mode="out-in">
         <button v-if="!showSearchInput" class="el-icon-search search-btn" @click="handleSearchClick"></button>
-        <el-input
-          v-else
-          size="mini"
-          placeholder="请输入关键字"
-          clearable
-          @keydown.enter.native="showSearchInput = false"
-          @keydown.esc.stop.native="showSearchInput = false"
-          v-model="searchCondition"
-        />
+        <el-input v-else size="mini" placeholder="请输入关键字" clearable @keydown.enter.native="showSearchInput = false"
+          @keydown.esc.stop.native="showSearchInput = false" v-model="searchCondition" />
       </transition>
     </div>
 
@@ -77,6 +71,34 @@ export default {
     },
   },
   methods: {
+    hanlePreview(file) {
+      // 加载图片
+      this.$http
+        .get("/pms/attachment/downloadFile", {
+          params: {
+            attachmentId: file.id,
+            type: 0, // 0 预览，1 下载
+          },
+          responseType: "blob",
+        })
+        .then(({ data: res }) => {
+          console.log("preivew", res);
+          if (/image/i.test(res.type) || /pdf/i.test(res.type)) {
+            let a = document.createElement('a')
+            a.setAttribute('target', '_blank')
+            a.href = URL.createObjectURL(res)
+            a.click()
+            a.remove()
+          } else {
+            this.$message({
+              message: "非图片和PDF文件请下载后预览",
+              type: "error",
+              duration: 1500,
+            });
+          }
+        });
+
+    },
     handleDownload(file) {
       console.log("[FileList] handleDownload", file);
       this.$http
@@ -153,7 +175,7 @@ li {
   list-style: none;
 }
 
-.filelist > li {
+.filelist>li {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -178,12 +200,15 @@ li {
 ::-webkit-scrollbar {
   width: 8px;
 }
+
 ::-webkit-scrollbar-track {
   width: 8px;
 }
+
 ::-webkit-scrollbar-button {
   display: none;
 }
+
 ::-webkit-scrollbar-thumb {
   background: rgb(175, 175, 175);
   border-radius: 4px;
@@ -193,6 +218,7 @@ li {
   color: #0b58ff;
   cursor: pointer;
 }
+
 .color-red {
   color: rgba(222, 15, 15, 0.89);
   cursor: pointer;