融信详情样式调整

front-vue/src/views/service/contract/contract.vue

@@ -392,7 +392,7 @@ export default {
 .zap-table-search__form{
   display: flex;
   align-items: center;
-  height: 90px;
+  min-height: 90px;
   .el-form-item--medium.el-form-item{
     margin-bottom: 0;
   }

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

@@ -1,12 +1,90 @@
 <template>
-<el-row>
-    <el-tabs type="border-card">
-        <!-- 资产信息-->
-        <el-tab-pane label="资产信息">
-            <!-- <div class="app-container"> -->
-            <el-form ref="form" :model="form" :rules="rules" :inline="true" style="margin-top: 20px" label-width="auto">
-                <el-divider content-position="left">融信详情</el-divider>
-                <table class="gridtable" style="width:80%;text-align:center" align="center" v-show="financeStatus != null && financeStatus != '00' && financeStatus != '03'">
+<div class="app-container zap-main zap-credit-detail">
+    <div v-if="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'" class="zap-No">
+        <el-row type="flex" align="middle" :gutter="10">
+            <el-col :span="6">
+                <el-row type="flex" align="middle">
+                    <img class="icon" src="../../../assets/images/icon_contract_no.png" alt="">
+                    <span class="label">融信编号</span>
+                    <span class="value">{{form.zfiNumber}}</span>
+                </el-row>
+            </el-col>
+            <el-col :span="6">
+                <el-row type="flex" align="middle">
+                    <img class="icon" src="../../../assets/images/icon_calendar.png" alt="">
+                    <span class="label">创建时间</span>
+                    <el-date-picker disabled v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
+                    </el-date-picker>
+                </el-row>
+            </el-col>
+            <el-col :span="6">
+                <el-row type="flex" align="middle">
+                    <img class="icon" src="../../../assets/images/icon_person.png" alt="">
+                    <span class="label">创建人</span>
+                    <span class="value">{{form.createName}}</span>
+                </el-row>
+            </el-col>
+            <el-col :span="6">
+                <el-row type="flex" align="middle" justify="end">
+                    <el-button type="success">成功按钮</el-button>
+                </el-row>
+            </el-col>
+        </el-row>
+    </div>
+    <el-row class="zap-credit-detial__form zap-margin-top">
+        <el-col :span="24">
+            <el-form label-width="95px">
+                <template v-if="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'">
+                    <el-row>
+                        <el-col :span="10">
+                            <el-form-item size="large" label="开立方" prop="openName">
+                                <el-input v-model="form.openName" readonly />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="10">
+                            <el-form-item size="large" label="接收方" prop="receiveName">
+                                <el-input v-model="form.receiveName" readonly />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item size="large" label="授信额度" prop="zfpName">
+                                <el-input v-model="form.zfpName" readonly />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="10">
+                            <el-form-item size="large" label="签发有效期" prop="zfiEffectiveDate">
+                                <el-date-picker disabled v-model="form.zfiEffectiveDate" type="date" value-format="yyyy-MM-dd">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item size="large" label="承诺还款日" prop="zfiExpireDate">
+                                <el-date-picker disabled v-model="form.zfiExpireDate" type="date" value-format="yyyy-MM-dd">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </template>
+                <el-row>
+                    <el-col :span="10">
+                        <el-form-item size="large" label="签发金额">
+                            <el-input v-model="form.zfiAmount" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="4">
+                        <span class="issued-words__label">金额大写</span>
+                        <span class="issued-words__value">{{issuedAmount}}</span>
+                    </el-col>
+                </el-row>
+            </el-form>
+        </el-col>
+        <el-col :span="24">
+            <div class="zap-margin-top" style="margin-bottom: 28px;">
+                <table class="gridtable" style="width:100%;text-align:center" align="center" v-show="financeStatus != null && financeStatus != '00' && financeStatus != '03'">
                     <tr>
                         <td rowspan="4">开立方</td>
                         <td>全称</td>
@@ -42,111 +120,44 @@
                         <td colspan="4">{{stopDate}}</td>
                     </tr>
                 </table>
-                <el-row v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'">
-                    <el-col :span="8">
-                        <el-form-item label="融信编号" prop="zfiNumber">
-                            <el-input v-model="form.zfiNumber" style="width: 200px" readonly />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建时间" prop="createTime">
-                            <el-date-picker disabled size="small" style="width: 200px" v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="创建人" prop="createName">
-                            <el-input v-model="form.createName" style="width: 200px" readonly />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'">
-                    <el-col :span="8">
-                        <el-form-item label="开立方" prop="openName">
-                            <el-input v-model="form.openName" style="width: 200px" readonly />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="接收方" prop="receiveName">
-                            <el-input v-model="form.receiveName" style="width: 200px" readonly />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="授信额度" prop="zfpName">
-                            <el-input v-model="form.zfpName" style="width: 200px" readonly />
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row v-show="this.financeStatus == null || this.financeStatus == '00' || this.financeStatus == '03'">
-                    <el-col :span="8">
-                        <el-form-item label="签发有效期" prop="zfiEffectiveDate">
-                            <el-date-picker disabled size="small" style="width: 200px" v-model="form.zfiEffectiveDate" type="date" value-format="yyyy-MM-dd">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="承诺还款日" prop="zfiExpireDate">
-                            <el-date-picker disabled size="small" style="width: 200px" v-model="form.zfiExpireDate" type="date" value-format="yyyy-MM-dd">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <!-- <el-col :span="8">
-                        <el-form-item label="收款账号" prop="zfiCollectionAccount" v-if="isShow">
-                            <el-input v-model="form.zfiCollectionAccount" style="width: 200px"/>
-                        </el-form-item>
-                    </el-col> -->
-                </el-row>
-                <el-divider content-position="left">{{tableTitle}}</el-divider>
-                <el-form-item style="margin-left: 100px">
-                    <el-form-item label="合计金额:">
-                        <span>{{checkTotalAmt}}</span>
-                    </el-form-item>
-                    <el-form-item label="金额大写:">
-                        <span>{{checkTotalBigAmt}}</span>
-                    </el-form-item>
-
-                    <el-table :data="payList" style="width: 1100px">
-                        <el-table-column label="账款名称" align="center" prop="zbiName" show-overflow-tooltip />
-                        <el-table-column label="应收企业" align="center" prop="receiveName" />
-                        <el-table-column label="应付企业" align="center" prop="payName" />
-                        <el-table-column label="预计还款期" align="center" prop="zbiPayDate" show-overflow-tooltip />
-                        <el-table-column label="金额" align="center" prop="zbiAmount" />
-                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
-                            <template slot-scope="scope">
-                                <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.$index, payList)">详情</el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-form-item>
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="签发金额" prop="zfiAmount">
-                            <el-input v-model="form.zfiAmount" style="width: 200px" />
-                        </el-form-item>
+            </div>
+            <!-- 应收账款 -->
+            <div class="zap-credit-detail__receivable">
+                <el-row type="flex" justify="space-between" align="middle">
+                    <el-col>
+                        <el-row type="flex" align="middle">
+                            <div class="title"><span class="snow-tag">*</span>应收账款</div>
+                            <el-button type="primary">选择</el-button>
+                        </el-row>
                     </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="金额大写" prop="issuedAmount">
-                            {{issuedAmount}}
-                        </el-form-item>
+                    <el-col>
+                        <el-row class="zap-credit-detail__receivable-total" type="flex" justify="end" align="middle">
+                            <span class="label">合计金额：</span>
+                            <span class="value">{{checkTotalAmt}}</span>
+                            <span class="label" style="margin-left: 48px;">金额大写：</span>
+                            <span class="value">{{checkTotalBigAmt}}</span>
+                        </el-row>
                     </el-col>
                 </el-row>
-            </el-form>
-            <div style="margin-top: 100px; margin-left:45%">
-                <el-button type="info" @click="cancel">取消</el-button>
-                <!-- <el-button type="success" @click="submitForm"
-                    >提交</el-button> -->
             </div>
-            <!-- 附件详情 -->
-            <el-dialog title="详情" :visible.sync="openDetailBill" width="1120px" append-to-body>
-                <detail-bill :zbiId="this.zbiId" v-if="openDetailBill"></detail-bill>
-            </el-dialog>
-            <!--预览-->
-            <el-dialog :visible.sync="openFile" width="1000px" append-to-body>
-                <img :src="wordUrl" v-if="show" width='450px' height='500px' />
-                <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid" />
-            </el-dialog>
-        </el-tab-pane>
-        <el-tab-pane label="签署合同">
+            <el-table class="zap-margin-top" :data="payList" style="width: 100%;">
+                <el-table-column label="账款名称" align="center" prop="zbiName" show-overflow-tooltip />
+                <el-table-column label="应收企业" align="center" prop="receiveName" />
+                <el-table-column label="应付企业" align="center" prop="payName" />
+                <el-table-column label="预计还款期" align="center" prop="zbiPayDate" show-overflow-tooltip />
+                <el-table-column label="金额" align="center" prop="zbiAmount" />
+                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.$index, payList)">详情</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-col>
+    </el-row>
+    <!-- 签署合同 -->
+    <el-row class="zap-margin-top">
+        <div class="zap-title">附件信息</div>
+        <div class="zap-enclosure">
             <el-table :data="creditSealList" style="width: 100%">
                 <el-table-column label="文件名称" align="center" prop="pfiFileName" show-overflow-tooltip>
                     <template slot-scope="scope">
@@ -162,8 +173,11 @@
                     </template>
                 </el-table-column>
             </el-table>
-        </el-tab-pane>
-        <el-tab-pane label="最终还款明细" v-if="this.companyType == '01'">
+        </div>
+    </el-row>
+    <template v-if="this.companyType == '01'">
+        <!-- 最终还款明细 -->
+        <el-row class="zap-margin-top">
             <el-form :inline="true" ref="forms" :model="forms" label-width="auto" style="margin-top: 20px" disabled>
                 <el-row>
                     <el-col :span="8">
@@ -217,19 +231,27 @@
                     </el-col>
                 </el-row>
                 <el-table v-loading="loading" :data="list" border>
-                    <!-- <el-table-column label="序号" type="index" width="50" align="center">
-                    <template slot-scope="scope">
-                    <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
-                    </template>
-                </el-table-column>      -->
                     <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-form>
-        </el-tab-pane>
-    </el-tabs>
-</el-row>
+        </el-row>
+    </template>
+    <el-row type="flex" justify="center" align="middle" style="height: 67px">
+        <el-button type="primary" plain @click="cancel">取消</el-button>
+    </el-row>
+
+    <!-- 附件详情 -->
+    <el-dialog title="详情" :visible.sync="openDetailBill" width="1120px" append-to-body>
+        <detail-bill :zbiId="this.zbiId" v-if="openDetailBill"></detail-bill>
+    </el-dialog>
+    <!--预览-->
+    <el-dialog :visible.sync="openFile" width="1000px" append-to-body>
+        <img :src="wordUrl" v-if="show" width='450px' height='500px' />
+        <iframe :src="wordUrl" width='800px' height='600px' frameborder='1' v-if="heid" />
+    </el-dialog>
+</div>
 </template>
 
 <script>
@@ -633,4 +655,102 @@ table.gridtable td {
     padding: 8px;
     border-style: solid;
 }
+</style><style lang="scss" scoped>
+.zap-credit-detail {}
+
+.zap-credit-detial__form {
+    padding: 24px 12px 20px;
+    background-color: #ffffff;
+}
+
+.zap-credet-detail__electronic--title {
+    font-size: 14px;
+    color: #333333;
+}
+
+.zap-credit-detial__title {
+    padding: 20px 12px 28px;
+    font-size: 16px;
+    color: #333333;
+}
+
+.zap-credit-detail__receivable {
+    .title {
+        margin-right: 20px;
+        font-size: 14px;
+        color: #333333;
+    }
+}
+
+.zap-credit-detail__receivable-total {
+    .label {
+        font-size: 12px;
+        color: #999999;
+    }
+
+    .vlaue {
+        font-size: 14px;
+        color: #333333;
+    }
+}
+
+.snow-tag {
+    margin-right: 14px;
+    font-size: 14px;
+    color: #f41d27;
+}
+
+.issued-words__label,
+.issued-words__value {
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    font-size: 12px;
+    color: #333333;
+}
+
+.issued-words__label {
+    margin-left: 20px;
+}
+
+.zap-enclosure {
+    padding: 0 12px 18px;
+    background-color: #ffffff;
+}
+
+.zap-title {
+    height: 60px;
+    line-height: 60px;
+    padding: 0 25px;
+    font-size: 16px;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 100%;
+}
+
+.zap-No {
+    padding: 14px 25px;
+    background-color: #ffffff;
+
+    .icon {
+        width: 18px;
+        margin-right: 10px;
+    }
+
+    .label {
+        white-space: nowrap;
+        margin-right: 8px;
+        font-size: 14px;
+        color: #999999;
+    }
+
+    .value {
+        font-size: 14px;
+        color: #333333;
+    }
+}
 </style>