异常详情其他异常显示附件

src/views/ecw/order/pending.vue

@@ -282,6 +282,7 @@ export default {
           }
           this.FilePreAll.push(obj)
         })
+        console.log(this.fileArr)
       this.IsPreview = true // 打开预览弹窗
       this.timers = new Date().getTime() // 刷新预览地址
     },

src/views/ecw/order/prepayDeal.vue

@@ -253,6 +253,13 @@
             <file-upload v-model="handlerParams.fileList" :value="orderExceptionData.orderExceptionAttr" ></file-upload>
           </el-form-item>
         </el-row>
+        <el-form-item :label="$t('附件')" align="center" v-if="orderExceptionData.orderExceptionType=='order_other_exception'">
+          <template slot-scope="scope">
+            <div class="filelist">
+              <span v-for="(item,index) in handlerParams.fileList" :key="index" @click="onClickOpenPreview(item,index)">{{'附件'+(index+1)}}</span>
+            </div>
+          </template>
+        </el-form-item>
         <!--预付异常的备选需要根据接口数据过滤-->
         <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
             <el-form-item :label="$t('处理结果')+':'" required>
@@ -358,6 +365,9 @@
         <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
       </template>
     </div>
+    <div class="preview" v-if="IsPreview">
+      <file-preview :key="timers" :TragetPic="TragetPic" :FilePreAll="FilePreAll" @Close="onClickClosePreview"></file-preview>
+    </div>
   </div>
 </template>
 
@@ -365,6 +375,7 @@
   import FileUpload from '@/components/FileUpload'
   import {getDictData, getDictDatas} from  '@/utils/dict'
   import {getOrder} from '@/api/ecw/order'
+  import FilePreview from '@/components/FilePreview'
   import { getCurrencyList } from '@/api/ecw/currency'
   import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById} from "@/api/ecw/orderException"
   import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'
@@ -373,7 +384,7 @@
   export default {
     name: "PrepayDeal",
     components: {
-      FileUpload, WorkFlow
+      FileUpload, WorkFlow,FilePreview
     },
     data() {
       return {
@@ -400,6 +411,10 @@
         orderFee:[],
         currencyList:[],
         showWorkFlow: false, // 是否显示工作流
+        IsPreview:false, // 控制预览弹窗字段
+        timers:"", //时间戳
+        FilePreAll:[], // 预览数组
+        TragetPic:{},
       };
     },
     created() {
@@ -547,7 +562,44 @@
         .then(res => {
           this.getList()
         })
+      },
+      getFileName(fileName){
+        var fileArr = fileName.split('/')
+        return fileArr[fileArr.length-1]
+      },
+      getFileFormat(fileName){
+        var fileArr = this.getFileName(fileName).split('.')
+        return fileArr[fileArr.length-1]
+      },
+      // 打开预览
+      onClickOpenPreview(val,index){
+        this.TragetPic  = { // 当前点击的文件
+          FileName: this.getFileName(val), // 文件名称
+          name: this.getFileName(val), // 文件名称（可以不传）
+          format:this.getFileFormat(val), // 文件格式
+          url: val,  // 预览地址
+          downUrl:"", // 下载地址
+        } // 目标对象
+          var fileArr = this.handlerParams.fileList
+
+          fileArr.forEach(item =>{ // 需要预览的文件数组（可以传空数组就是单张预览）
+            let obj = {
+              FileName: this.getFileName(item),
+              name: this.getFileName(item),
+              format:this.getFileFormat(item),
+              url: item,
+              downUrl:"",
             }
+            this.FilePreAll.push(obj)
+          })
+           console.log(this.FilePreAll)
+        this.IsPreview = true // 打开预览弹窗
+        this.timers = new Date().getTime() // 刷新预览地址
+      },
+      // 关闭预览
+        onClickClosePreview(val){
+          this.IsPreview = val  // 由组件内部传入的关闭数据赋值关闭
+        },
     }
   };
 </script>
@@ -574,4 +626,13 @@
     display: flex;
     /* justify-content: space-between; */
   }
+  .filelist{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex-direction: column
+  }
+  .filelist span{
+    color: #1E98D7;
+  }
 </style>