修改融资信息详情业务合同栏位样式

front-vue/src/components/Attachments/index.vue

@@ -1,14 +1,57 @@
 <template>
-
+<div class="attachments" @click="handlePreview">
+    <slot></slot>
+    <p class="attachments__name">{{fileName}}</p>
+</div>
 </template>
 
 <script>
 export default {
     name: "Attachments",
-    inheritAttrs: false
+    props: {
+        fileName: String,
+    },
+    methods: {
+      handlePreview () {
+        this.$emit('handlePreview')
+      }
+    }
 }
 </script>
 
-<style>
+<style lang="scss">
+.attachments {
+    flex: 0 0 270px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 270px;
+    height: 270px;
+    margin-right: 22px;
+    padding-bottom: 40px;
+    border-radius: 4px;
+    background-color: #F7F7F7;
+    box-sizing: border-box;
+    cursor: pointer;
+}
 
+.attachments__name {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    padding: 0 20px;
+    font-size: 16px;
+    color: #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-radius: 0px 0px 4px 4px;
+    background-color: rgba(0, 0, 0, 0.4);
+    box-sizing: border-box;
+}
 </style>

front-vue/src/main.js

@@ -34,6 +34,8 @@ import SearchBar from "@/components/SearchBar"
 import HeaderBar from "@/components/HeaderBar"
 // 表格底部数字统计
 import StatisticalData from "@/components/StatisticalData"
+// 附件展示
+import Attachments from "@/components/Attachments"
 // 日期过滤器
 import "@/filters/date.js"
 
@@ -70,6 +72,7 @@ Vue.component('ContentTotal', ContentTotal)
 Vue.component('SearchBar', SearchBar)
 Vue.component('HeaderBar', HeaderBar)
 Vue.component('StatisticalData', StatisticalData)
+Vue.component('Attachments', Attachments)
 
 Vue.use(permission)
 

front-vue/src/views/service/financeRecord/detailFinanceRecord.vue

@@ -67,18 +67,17 @@
     </el-row>
     <div class="zap-title">融信凭证</div>
     <el-row class="zap-form pb20">
-        <zap-bill 
-        :open="openName"
-        :openNum="openCode"
-        :recipient="receiveName"
-        :recipientNum="receiverCode"
-        :amountWord="issuedAmount"
-        :amount="form.zfiAmount"
-        :letter="zfiPaymentNumber"
-        :date="openDate"
-        :approver="coreHandleName"
-        :handler="coreFirstUser"
-        ></zap-bill>
+        <zap-bill
+            :open="openName"
+            :openNum="openCode"
+            :recipient="receiveName"
+            :recipientNum="receiverCode"
+            :amountWord="issuedAmount"
+            :amount="form.zfiAmount"
+            :letter="zfiPaymentNumber"
+            :date="openDate"
+            :approver="coreHandleName"
+            :handler="coreFirstUser"></zap-bill>
     </el-row>
     <div class="zap-title zap-margin-top">资产信息</div>
     <el-row class="zap-form zap-padding-bottom">
@@ -114,12 +113,18 @@
     </el-row>
     <el-row class="zap-margin-top zap-form">
         <div class="zap-title">业务合同</div>
-        <el-row>
-            <img style="width:50px;height:50px;" :key="dict.pfiFileId" src="../../../assets/images/pdf.png" v-for="dict in recordSealList" @click="handlePreview(dict)" :title="dict.pfiFileName" />
+        <el-row type="flex" style="flex-wrap: wrap;">
+            <template v-for="dict in recordSealList">
+                <attachments :key="dict.pfiFileId" :fileName="dict.pfiFileName" @handlePreview="handlePreview(dict)">
+                    <img class="" src="../../../assets/images/pdf.png" />
+                </attachments>
+            </template>
+            <template v-for="dict in creditSealList">
+                <attachments :key="dict.pfiFileId" :fileName="dict.pfiFileName" @handlePreview="handlePreview(dict)">
+                    <img class="" src="../../../assets/images/pdf.png" />
+                </attachments>
+            </template>
         </el-row>
-        <!-- <el-row> -->
-        <img style="width:50px;height:50px;" :key="dict.pfiFileId" src="../../../assets/images/pdf.png" v-for="dict in creditSealList" @click="handlePreview(dict)" :title="dict.pfiFileName">
-        <!-- </el-row> -->
     </el-row>
     <el-row type="flex" align="middle" justify="center" style="height: 77px;">
         <el-button plain @click="cancel">取消</el-button>
@@ -231,15 +236,15 @@ export default {
             //起止日期
             stopDate: "",
             //承诺函编号
-            zfiPaymentNumber:"",
+            zfiPaymentNumber: "",
             //电子签章日期
-            openDate:"",
+            openDate: "",
             //开立方审批人
-            coreHandleName:"",
+            coreHandleName: "",
             //开立方经办人
-            coreFirstUser:"",
+            coreFirstUser: "",
             //税率
-            zfiRate:"",
+            zfiRate: "",
             //签发金额大写
             issuedAmount: "零元整",
             //拒绝放款原因