审批的图片预览

src/views/seal_manage/approvalList.vue

@@ -276,12 +276,13 @@
           <block v-else><el-button type="primary" @click="showDetail=false">知道了</el-button></block>
         </div>
         <!-- 预览合同附件弹窗 当附件大于1个时显示 -->
-        <el-dialog title="请选择附件" :visible.sync="showAttachment" @close = "showAttachment=false"
+        <el-dialog title="请选择附件" :visible.sync="showAttachment" @close="closeAttachmentHandler"
         :close-on-click-modal='false' :append-to-body="true" >
           <div class="attachment-contain" style="min-height: 240px;">
             <el-image v-for="item in attachmentUrls" :key="item"
             :src="fileTypeIcon(item)" 
             @click="viewAttachment(item)" 
+            :preview-src-list="dlgImgView"
             class="attachment-image"></el-image>
           </div>
         </el-dialog>
@@ -427,7 +428,9 @@ export default {
       attachmentUrls:[],// 附件列表
 
       belongCompany: '',//归属公司
-      belongCompanyOption: []
+      belongCompanyOption: [],
+
+      dlgImgView:[],// 预览附件的图片
     }
   },
   created () {
@@ -606,7 +609,7 @@ export default {
     fileTypeIcon(url) {
       if (!url) return "";
       const fileType = this.fileType(url);
-      return fileType === "word"
+      return  fileType === "img" ? url : fileType === "word"
         ? require("@/assets/img/constract/word-icon.png")
         : require("@/assets/img/constract/pdf.png");
     },
@@ -616,21 +619,31 @@ export default {
         return "pdf";
       } else if (/^.+(\.doc|\.docx)$/i.test(fileUrl)) {
         return "word";
+      } else if (/^.+(\.jpg|\.png)$/i.test(fileUrl)) {
+        return "img";
       } else {
         return "other";
       }
     },
     // 预览合同附件
     viewAttachment(url){
+      this.dlgImgView = [];
       const reg = /\.(pdf)$/;
+      const isPng = /\.(jpg|png)$/;
       // pdf
       if(reg.test(url)){
         window.open(url,'_blank');
+      }else if(isPng.test(url)){
+        this.dlgImgView = [url];
       }else{
         window.open('https://view.officeapps.live.com/op/view.aspx?src='+url,'_blank');
       }
     },
-    
+    //  关闭预览附件
+    closeAttachmentHandler(){
+      this.showAttachment = false;
+      this.dlgImgView = [];
+    },
     // 审批弹窗审批状态切换
     approvalFromStatusChange(){
       if(this.form.status==='驳回'){

src/views/seal_manage/updateSeal.vue

@@ -510,7 +510,7 @@ export default {
         return "word";
       } else if (/^.+(\.jpg|\.png)$/i.test(fileUrl)) {
         return "img";
-      }else {
+      } else {
         return "other";
       }
     },