证照管理附件预览

张晓杰
src/views/system/orginfo/orginfoCertificate/index.vue
--- a/src/views/system/orginfo/orginfoCertificate/index.vue
查看文件 @643fe2c
+++ b/src/views/system/orginfo/orginfoCertificate/index.vue
查看文件 @643fe2c
@@ -17,7 +17,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="认证机构名称" prop="certificationName">
+      <el-form-item label="认证机构名称" prop="certificationName" label-width="150">
         <el-input
           v-model="queryParams.certificationName"
           placeholder="请输入认证机构名称"
@@ -33,7 +33,7 @@
           placeholder="请选择发证时间">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="证书有效期" prop="certificateValidityPeriod">
+      <el-form-item label="证书有效期" prop="certificateValidityPeriod" label-width="100px">
         <el-date-picker clearable
           v-model="queryParams.certificateValidityPeriod"
           type="date"
@@ -41,14 +41,14 @@
           placeholder="请选择证书有效期">
         </el-date-picker>
       </el-form-item>
-      <el-form-item label="证书附件" prop="certificateAttachment">
+      <!-- <el-form-item label="证书附件" prop="certificateAttachment">
         <el-input
           v-model="queryParams.certificateAttachment"
           placeholder="请输入证书附件"
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -118,8 +118,7 @@
         </template>
       </el-table-column>
       <el-table-column label="证书附件" align="center" prop="certificateAttachment" >
-        <template slot-scope="scope">
-          
+        <template slot-scope="scope">   
           <img src="@/assets/images/PDF.png" @click="openFile(scope.row.certificateAttachment)" width="40px" height="auto" style="cursor: pointer"/>
         </template>
       </el-table-column>
@@ -151,9 +150,12 @@
       @pagination="getList"
     />
+    <el-dialog title="预览" :visible.sync="dialogVisible" width="50%" center :before-close="handleClose">
+      <vue-pdf :src="currentFile" type="application/pdf" width="100%" height="800px" />
+    </el-dialog>
     <!-- 添加或修改单位证照表对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
         <el-form-item label="单位编号" prop="orgcode">
           <el-input v-model="this.orgcode" placeholder="请输入单位编号" :disabled="true"/>
         </el-form-item>
@@ -225,6 +227,9 @@ import { getToken } from "@/utils/auth";
 import VuePdf from 'vue-pdf';
 export default {
   name: "OrginfoCertificate",
+  components: {
+    VuePdf
+  },
   data() {
     return {
       // 设置上传的请求头部
@@ -233,6 +238,9 @@ export default {
       url: process.env.VUE_APP_BASE_API + "/common/uploads",
       // urlhead: "http://joycart.zgftlm.com",
       urlhead:process.env.VUE_APP_BASE_API,
+      baseUrl:process.env.VUE_APP_BASE_API,
+      dialogVisible:false,
+      currentFile:'',
       fileList: [],
       file:[],
       // 按钮loading
@@ -429,12 +437,15 @@ export default {
     },
     openFile(filePath) {
-      
-      this.currentFile = this.urlhead+filePath;
+      this.currentFile = this.baseUrl+filePath;
       console.log(this.currentFile)
       this.dialogVisible = true; 
     },
+    handleClose() {
+        this.currentFile = ''
+        this.dialogVisible = false
+      },
     beforeUpload(file) {
       const isPDF = file.type === 'application/pdf';
     const isLt5M = file.size / 1024 / 1024 < 5;