项目详情修改

src/components/jero/PreviewFile.vue

@@ -1,17 +1,19 @@
 <template>
   <!--  父组件的文件id如果是异步获取的 需要加上v-if判断-->
-<div style="display: inline-block">
-  <span v-for="(item) of fileList" :key="item.id">{{ item.name +'  ' }}
-    <span class="m-l-4 color-blue" @click="handleDownLoad(item)">下载</span> <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
-  </span>
-</div>
+  <div style="display: inline-block">
+    <!--  2021-10-09 author:zx 把span换成了div，实现多个文件显示换行-->
+    <div v-for="(item) of fileList" :key="item.id">{{ item.name + '  ' }}
+      <span class="m-l-4 color-blue" @click="handleDownLoad(item)">下载</span>
+      <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
+    </div>
+  </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import {ACCESS_TOKEN} from '@/store/mutation-types'
-import {getFileInfo} from '@/api/api'
-import {downloadFile} from '@api/manage'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getFileInfo } from '@/api/api'
+import { downloadFile } from '@api/manage'
 // eslint-disable-next-line
 const Base64 = require('js-base64').Base64
 
@@ -30,7 +32,7 @@ export default {
   data() {
     return {
       fileInfo: {},
-      fileList: [],
+      fileList: []
     }
   },
   mounted() {
@@ -51,7 +53,7 @@ export default {
     getFileInfo(id) {
       return new Promise(resolve => {
         let result = {}
-        getFileInfo({id: id}).then(res => {
+        getFileInfo({ id: id }).then(res => {
           if (res.success) {
             result = res.result
           }
@@ -64,31 +66,31 @@ export default {
     * 获取文件信息
     * */
     async initFileList(fileIds) {
-      if(fileIds){
+      if (fileIds) {
         const fileList = []
         let arr = fileIds.split(',')
         for (let i = 0; i < arr.length; i++) {
           let fileObj = {}
           fileObj = await this.getFileInfo(arr[i])
-          fileList.push({id: fileObj.id, name: fileObj.fileName})
+          fileList.push({ id: fileObj.id, name: fileObj.fileName })
         }
         this.fileList = [...fileList]
-      }else {
+      } else {
         this.fileList = []
       }
     },
-    handleDownLoad(file){
+    handleDownLoad(file) {
       console.log(file)
-      downloadFile(`sys/common/download/${file.id}`, file.name)
+      downloadFile(`sys/common/download/${ file.id }`, file.name)
     },
     handlePreview(file) {
       if (file && file.id) {
-        const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
-        let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+        const fileFullUrl = `${ window._CONFIG['domianWebSocketURL'] }/sys/common/download/${ file.id }?token=${ Vue.ls.get(ACCESS_TOKEN) }&fullfilename=${ file.name }`
+        let url = `${ window._CONFIG['onlinePreviewDomainURL'] }?url=${ encodeURIComponent(Base64.encode(fileFullUrl)) }`
         // let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
         window.open(url)
       }
-    },
+    }
   }
 }
 </script>
@@ -98,6 +100,7 @@ export default {
   color: #069f99 !important;
   cursor: pointer;
 }
+
 .m-l-4 {
   margin-left: 4px;
 }