update 开票邮寄信息-查看发票更换弹框

src/components/PreviewFileModal.vue

@@ -0,0 +1,47 @@
+<template>
+<!--  预览文件弹框  -->
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @cancel="handleCancel"
+    :footer="null">
+    <!--  预览文件弹框  -->
+    <preview-file v-if="fileIds" style="width: 100%" v-bind="$attrs" :isFlex="true" :file-id="fileIds"></preview-file>
+    <a-list :data-source="[]" v-else></a-list>
+  </j-modal>
+</template>
+
+<script>
+import PreviewFile from '@comp/jero/PreviewFile'
+export default {
+  name: 'PreviewFileModal',
+  components: {PreviewFile},
+  data() {
+    return {
+      title: '预览',
+      width: 400,
+      visible: false,
+      confirmLoading: false,
+      // 预览文件ids
+      fileIds: ''
+    }
+  },
+  methods: {
+    open (ids) {
+      this.fileIds = ids || ''
+      this.visible = true
+    },
+    handleCancel() {
+      this.fileIds = ''
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/ProjectDetailModal.vue

@@ -332,6 +332,8 @@
     <template slot="footer">
       <a-button @click="handleCancel">关闭</a-button>
     </template>
+    <!--  查看发票：管理端不需要下载  -->
+    <preview-file-modal ref="previewFileModal" :allowDownload="false"/>
   </j-modal>
 </template>
 
@@ -342,7 +344,7 @@ import PreviewFile from './jero/PreviewFile'
 import { ProjectTypeEnums } from '@/enums/commonEnums'
 import Vue from 'vue'
 import {ACCESS_TOKEN} from '@/store/mutation-types'
-import {getFileInfo} from '@api/api'
+import PreviewFileModal from '@comp/PreviewFileModal'
 const Base64 = require('js-base64').Base64
 // import pick from 'lodash.pick'
 // import {getAction} from "@api/manage";
@@ -447,6 +449,7 @@ export default {
     }
   },
   components: {
+    PreviewFileModal,
     JEllipsis,
     PreviewFile
   },
@@ -528,14 +531,7 @@ export default {
         this.$message.warning('暂无发票')
         return
       }
-      // 多个文件取第一个
-      const id = record.invoiceFileId.split(',')[0]
-      getFileInfo({ id }).then(res => {
-        if (res.success) {
-          // 预览文件
-          this.handlePreview(res.result)
-        }
-      })
+      this.$refs.previewFileModal.open(record.invoiceFileId)
     },
     // 预览
     handlePreview(file) {

src/components/jero/PreviewFile.vue

@@ -1,10 +1,20 @@
 <template>
   <!--  父组件的文件id如果是异步获取的 需要加上v-if判断-->
-<div style="display: inline-block">
-  <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 style="display: inline-block" v-if="!isFlex">
+    <div v-for="(item) of fileList" :key="item.id">{{ item.name +'  ' }}
+      <span class="m-l-4 color-blue" v-if="allowDownload" @click="handleDownLoad(item)">下载</span> <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
+    </div>
+  </div>
+  <!-- flex布局（和企业端显示保持一致，保留原布局格式为了不影响之前样式） -->
+  <div class="file-wrap" v-else>
+    <div v-for="(item) of fileList" :key="item.id" class="file-item">
+      <span class="file-name"><j-ellipsis :value="item.name" :length="20"></j-ellipsis></span>
+      <div class="file-btn">
+        <span class="color-blue" v-if="allowDownload" @click="handleDownLoad(item)">下载</span>
+        <span class="color-blue" @click="handlePreview(item)">查看</span>
+      </div>
+    </div>
   </div>
-</div>
 </template>
 
 <script>
@@ -25,6 +35,18 @@ export default {
     fileId: {
       type: String,
       required: false
+    },
+    // 下载按钮是否显示，默认显示
+    allowDownload: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 布局类型
+    isFlex: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -102,7 +124,35 @@ export default {
   color: #069f99 !important;
   cursor: pointer;
 }
+
 .m-l-4 {
   margin-left: 4px;
 }
+
+.file-wrap {
+
+  display: inline-block;
+}
+
+.file-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+
+  .file-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-btn {
+    width: 100px;
+    display: inline-flex;
+    justify-content: flex-end;
+    span:nth-child(1):not(:last-of-type) {
+      margin: 0 20px 0 10px;
+    }
+  }
+}
 </style>