实施增加图片jpg 及其文件pdf 预览功能

src/views/enforceflow/enforceflow.vue

@@ -530,6 +530,7 @@
             </el-table-column>
             <el-table-column prop="op" label="操作" width="180">
               <template slot-scope="scope">
+                <el-button type="success" v-if="scope.row.fileName.indexOf('jpg')!==-1 || scope.row.fileName.indexOf('png')!==-1  || scope.row.fileName.indexOf('pdf')!==-1 " size="mini" @click="preview(scope.row)">预览</el-button>
                 <el-button type="primary" size="mini" @click="downEnforceFile(scope.row)">下载</el-button>
               </template>
             </el-table-column>
@@ -539,6 +540,13 @@
 
     </el-dialog>
 
+    <el-image-viewer v-if="showImagePreview" :url-list="previewList" hide-on-click-modal teleported :on-close="closePreview"  style="z-index:3000" />
+
+    <el-dialog  :visible.sync="pdfViewShow" center width="75%">
+      <pdf :src="pdfSrc"></pdf>
+    </el-dialog>
+
+
     <el-dialog :visible.sync="addEnforceRecordWin" center width="65%" title="添加运维记录">
       <el-form label-width="120px" :model="editEnforceRecord" size="mini">
         <el-form-item label="运维事项:">
@@ -722,6 +730,9 @@
 
 <script>
 import E from 'wangeditor';
+import pdf from 'vue-pdf'
+
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 
 let editor;
 let editorEnforce;
@@ -898,13 +909,18 @@ export default {
       enforceFlowData: [],
       addHospitalsVisible:false,
       addSystemVisible:false,
-
+      showImagePreview: false,
+      previewList:[],
+      pdfSrc:null,
+      pdfViewShow:false
 
     }
   },
   // 注册组件
   components: {
-    Pagination
+    Pagination,
+    ElImageViewer,
+    pdf
   },
   mounted() {
     this.getHosInfos()
@@ -1483,6 +1499,27 @@ export default {
       let url = row.url
       window.location.href = url
     },
+    preview(row){
+      let url=row.url
+      let fileName=row.fileName
+      if(fileName.indexOf('jpg')!==-1 || fileName.indexOf('png')!==-1 ){
+        this.previewList=[url]
+        document.body.style.overflow = 'hidden';
+        this.showImagePreview= true
+      }
+      else if(fileName.indexOf('pdf')!==-1){
+        this.pdfSrc=url
+        this.pdfViewShow=true
+      }else{
+        this.$message.error("暂不支持预览!");
+      }
+
+    },
+    closePreview(){
+      this.showImagePreview= false;
+      document.body.style.overflow = 'auto';
+
+    },
     getEnforceFlowFileList() {
       let id = this.enforceDetail.id
       getEnforceFlowFiles(id).then(res => {