还款登记附件预览下载

front-vue/src/views/service/repayment/detailRepayment.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="app-container zap-main">
+    <div style="background-color: #ffffff;padding: 15px 25px;height:60px;vertical-align:middle;" v-if="form.fileId">
+      <span style="margin-left:3%;">还款登记附件:</span>
+      <span>{{form.fileName}}</span>
+      <el-button style="float:right;margin-right:3%"  size="mini" type="text" icon="el-icon-view" @click="handleDownload(form.fileUrl)">下载</el-button>
+      <el-button style="float:right;margin-right:3%"  size="mini" type="text" icon="el-icon-view" @click="handlePreview(form.fileName,form.fileUrl)">预览</el-button>
+    </div>
     <el-form
       class="zap-form"
       :inline="true"
@@ -7,7 +13,7 @@
       :model="form"
       :rules="rules"
       label-width="auto"
-      style="padding-top: 20px"
+      style="padding-top: 20px;margin-top:20px"
       disabled
     >
       <el-form-item label="还款明细编号:" prop="zfcName" size="large">
@@ -57,6 +63,10 @@
           :show-overflow-tooltip="true"
         />
       </el-table>
+      <el-dialog  :visible.sync="openFile" width="1000px" append-to-body>
+                <img :src="wordUrl" v-if="show" width='450px' height='500px'/>
+                <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid"/>
+            </el-dialog>
     </el-form>
     <div style="margin-top: 100px; margin-left:45%">
       <el-button type="primary" plain @click="cancel">取消</el-button>
@@ -66,6 +76,7 @@
 
 <script>
 import { getRepayment } from "@/api/service/repayment/repayment";
+import {getToken} from "@/utils/auth";
 export default {
   name: "detailRepayment",
   components: {},
@@ -82,6 +93,9 @@ export default {
       total: 0,
       // 是否显示弹出层
       open: false,
+      openFile:false,
+      show:false,
+      heid:false,
       list: [],
       // 表单参数
       form: {},
@@ -134,7 +148,71 @@ export default {
       this.$store.dispatch("tagsView/delView", this.$route);
       this.$router.go(-1);
       this.open = false;
-    }
+    },
+    //附件预览
+    handlePreview(fileName,fileUrl) {
+        const pfiUrl = fileUrl;
+        const pfiFileName = fileName;
+        if (this.form.fileId) {
+            console.log(pfiFileName.substr(-3));
+            if (pfiFileName.substr(-3) == "pdf") {
+                this.wordUrl = pfiUrl + "/" + getToken();
+                this.show=false;
+                this.heid=true;
+            } else if (
+                pfiFileName.substr(-3) == "jpg" ||
+                pfiFileName.substr(-3) == "png" ||
+                pfiFileName.substr(-3) == "JPG" ||
+                pfiFileName.substr(-3) == "PNG" ||
+                pfiFileName.substr(-4) == "jpeg" ||
+                pfiFileName.substr(-3) == "JPEG" 
+            ) {
+                this.wordUrl =
+                    pfiUrl +
+                    "/" +
+                    getToken();
+                    this.show=true;
+                    this.heid=false;
+                        console.log("====>",this.wordUrl);
+            } else if (
+                pfiFileName.substr(-3) == "doc" ||
+                pfiFileName.substr(-3) == "DOC"||
+                pfiFileName.substr(-4) == "docx" ||
+                pfiFileName.substr(-3) == "DOCX"
+            ) {
+                this.wordUrl =
+                    "https://view.officeapps.live.com/op/view.aspx?src=" +
+                    pfiUrl +
+                    "/" +
+                    getToken() +
+                    "/" +
+                    pfiFileName;
+                    this.show=false;
+                    this.heid=true;
+                    console.log("====>",this.wordUrl);
+            } else {
+                this.$message({
+                    message: "暂不支持该类型文件预览",
+                    type: "warning",
+                });
+                return;
+            }
+        }
+        this.openFile = true;
+    },
+    //附件下载
+        handleDownload(url){
+            const pfiUrl = url;
+            if(pfiUrl != null && pfiUrl != ''){
+            window.open(pfiUrl +"/"+ getToken());
+            }else{
+                this.$message({
+                message: '该附件不存在！',
+                type: 'warning'
+                });
+                return;
+            }
+        },
   }
 };
 </script>