修改融信管理详情,签署合同排版异常

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

@@ -1,6 +1,7 @@
 <template>
 <div class="attachments" @click="handlePreview">
     <slot></slot>
+    <slot name="marker"></slot>
     <p class="attachments__name">{{fileName}}</p>
 </div>
 </template>
@@ -55,4 +56,20 @@ export default {
     background-color: rgba(0, 0, 0, 0.4);
     box-sizing: border-box;
 }
+.attachements__marker{
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.36);
+}
+.attachments:hover{
+  .attachements__marker{
+    display: flex;
+  }
+}
 </style>

front-vue/src/views/service/credit/creditDetail.vue

@@ -115,58 +115,52 @@
             </el-dialog>
         </el-tab-pane>
         <el-tab-pane label="签署合同">
-            <el-table :data="creditSealList" style="width: 100%" stripe border>
-                <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip>
-                    <template slot-scope="scope">
-                      <attachments :fileName="scope.row.pfiFileName">
-                        <img class="" src="../../../assets/images/pdf.png" />
-                      </attachments>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300" fixed="right">
-                    <template slot-scope="scope">
-                        <el-button class="zap-button-primary" size="mini" @click="handleDownload(scope.row)">下载</el-button>
-                        <el-button class="zap-button-primary" size="mini" @click="handlePreview(scope.row)">预览</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+            <el-row class="zap-form" type="flex">
+                <attachments v-for="(item, index) in creditSealList" :key="index" :fileName="item.pfiFileName">
+                    <img class="" src="../../../assets/images/pdf.png" />
+                    <div class="attachements__marker" slot="marker">
+                      <el-button class="zap-button-primary" size="mini" @click="handleDownload(item)">下载</el-button>
+                      <el-button class="zap-button-primary" size="mini" @click="handlePreview(item)">预览</el-button>
+                    </div>
+                </attachments>
+            </el-row>
         </el-tab-pane>
         <el-tab-pane label="最终还款明细" v-if="this.companyType == '01'">
             <el-row class="zap-form">
-              <el-col :span="12">
-                <text-item label="还款明细编号" :value="form.zfrPayNumber"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="最终付款方" :value="form.core"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="还款承诺函编号" :value="form.zfiPaymentNumber"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="付款承诺日期" :value="form.zfrRepaymentDate"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="承诺付款金额" :value="form.zfrLoanAmount"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="融信产品" :value="form.zfpName"></text-item>
-              </el-col>
-               <el-col :span="12">
-                <text-item label="承诺付款账户" :value="form.zfpcrAccount"></text-item>
-              </el-col>
-              <el-col :span="12">
-                <text-item label="付款账户开户行" :value="form.zfpcrAccountBank"></text-item>
-              </el-col>
-               <el-col :span="12">
-                <text-item label="还款状态" :value="form.zfrApplyStatus"></text-item>
-              </el-col>
+                <el-col :span="12">
+                    <text-item label="还款明细编号" :value="form.zfrPayNumber"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="最终付款方" :value="form.core"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="还款承诺函编号" :value="form.zfiPaymentNumber"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="付款承诺日期" :value="form.zfrRepaymentDate"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="承诺付款金额" :value="form.zfrLoanAmount"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="融信产品" :value="form.zfpName"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="承诺付款账户" :value="form.zfpcrAccount"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="付款账户开户行" :value="form.zfpcrAccountBank"></text-item>
+                </el-col>
+                <el-col :span="12">
+                    <text-item label="还款状态" :value="form.zfrApplyStatus"></text-item>
+                </el-col>
             </el-row>
             <el-row class="zap-form">
-              <el-table v-loading="loading" :data="list" border stripe>
-                <el-table-column label="收款账户" align="center" prop="zfrCollectionAccount" :show-overflow-tooltip="true" />
-                <el-table-column label="收款账户户名" align="center" prop="supplier" :show-overflow-tooltip="true" />
-                <el-table-column label="收款金额" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" />
-              </el-table>
+                <el-table v-loading="loading" :data="list" border stripe>
+                    <el-table-column label="收款账户" align="center" prop="zfrCollectionAccount" :show-overflow-tooltip="true" />
+                    <el-table-column label="收款账户户名" align="center" prop="supplier" :show-overflow-tooltip="true" />
+                    <el-table-column label="收款金额" align="center" prop="zfrLoanAmount" :show-overflow-tooltip="true" />
+                </el-table>
             </el-row>
         </el-tab-pane>
     </el-tabs>