授信信息详情页面样式调整

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="zap-text-item">
+      <span class="zap-text-item__label">{{label}}</span>
+      <div class="zap-text-item__file">
+          <span class="zap-text-item__value">{{value}}</span>
+          <span v-if="suffix" class="zap-text-item__suffix">{{suffix}}</span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "TextItem",
+    props: {
+        label: String,
+        value: String,
+        suffix: String
+    }
+}   
+</script>
+
+<style lang="scss">
+.zap-text-item{
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+}
+.zap-text-item__label{
+    flex: 0 0 160px;
+    width: 136px;
+    text-align: right;
+    font-size: 14px;
+    color: #333333;
+}
+.zap-text-item__file{
+    flex: 0 0 264px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 264px;
+    height: 36px;
+    margin-left: 16px;
+    padding-left: 8px;
+    background-color: #F4F5F6;
+    border: 1px solid #EBEBEB;
+    border-radius: 4px;
+}
+.zap-text-item__value{
+    flex: 1;
+    font-size: 14px;
+    color: #333333;
+}
+.zap-text-item__suffix{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 100%;
+    flex: 0 0 40px;
+    font-size: 14px;
+    color: #999999;
+    border-left: 1px solid #EBEBEB;
+}
+</style>

front-vue/src/views/service/creditLine/detailCreditLine.vue

@@ -3,70 +3,32 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="auto">
         <div class="zap-title">授信信息</div>
         <el-row class="zap-form">
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="资金方:" prop="zfpcrFundSide" size="large">
-                    <el-select v-model="form.zfpcrFundSide" clearable disabled>
-                        <el-option v-for="(item,index) in zfCompanyList" :key="index" :label="item.scyName" :value="item.scyId"></el-option>
-                    </el-select>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="资金方" :value="zfCompanyList | pickerFilter(form.zfpcrFundSide, 'scyId', 'scyName')"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="授信企业名称:" prop="zfpcrCompanyId" size="large">
-                    <el-select v-model="form.zfpcrCompanyId" clearable disabled>
-                        <el-option v-for="(item,index) in hxCompanyList" :key="index" :label="item.scyName" :value="item.scyId"></el-option>
-                    </el-select>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="授信企业名称" :value="hxCompanyList | pickerFilter(form.zfpcrCompanyId, 'scyId', 'scyName')"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="融资产品:" prop="zfpcrProductId" size="large">
-                    <el-select v-model="form.zfpcrProductId" clearable disabled>
-                        <el-option v-for="(item,index) in financeProductList" :key="index" :label="item.zfpName" :value="item.zfpId"></el-option>
-                    </el-select>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="融资产品" :value="financeProductList | pickerFilter(form.zfpcrProductId, 'zfpId', 'zfpName')"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="原授信额度:" prop="zfpcrOldAmount" size="large">
-                    <el-input v-model="form.zfpcrOldAmount" disabled>
-                        <template slot="append">元</template>
-                    </el-input>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="原授信额度" :value="form.zfpcrOldAmount" suffix="元"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="已用授信额度:" prop="zfiAmount" size="large">
-                    <el-input v-model="form.zfiAmount" disabled>
-                        <template slot="append">元</template>
-                    </el-input>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="已用授信额度" :value="form.zfiAmount" suffix="元"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="剩余授信额度:" prop="usableAmount" size="large">
-                    <el-input v-model="form.usableAmount" disabled>
-                        <template slot="append">元</template>
-                    </el-input>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="剩余授信额度" :value="form.usableAmount" suffix="元"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="授信额度:" prop="zfpcrAmount" size="large">
-                    <!-- <el-tooltip class="item" effect="light" :content= "zfpcrAmountFormat" placement="top-start"> -->
-                    <el-input v-model="form.zfpcrAmount" placeholder="请输入授信额度" readonly>
-                        <template slot="append">元</template>
-                    </el-input>
-                    <!-- </el-tooltip> -->
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="授信额度" :value="form.zfpcrAmount" suffix="元"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="利率:" prop="zfpcrRate" size="large">
-                    <el-input v-model="form.zfpcrRate" placeholder="请输入利率" readonly>
-                        <template slot="append">%起</template>
-                    </el-input>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="利率" :value="form.zfpcrRate" suffix="%起"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="有效期:" prop="zfpcrDateType" size="large">
-                    <el-radio-group v-model="form.zfpcrDateType" disabled>
-                        <el-radio-button v-for="(dict,index) in dateTypeOptions" :key="index" :label="dict.dictValue" border>{{dict.dictLabel}}</el-radio-button>
-                    </el-radio-group>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="有效期" :value="dateTypeOptions | pickerFilter(form.zfpcrDateType, 'dictValue', 'dictLabel')"></text-item>
             </el-col>
             <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
                 <el-form-item label="有效期范围:" prop="dateTime" v-if="this.form.zfpcrDateType == '1'" size="large">
@@ -74,49 +36,26 @@
                     </el-date-picker>
                 </el-form-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="融资网点:" prop="zfpcrAddress" size="large">
-                    <el-input v-model="form.zfpcrAddress" placeholder="请输入融资网点" readonly />
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="融资网点" :value="form.zfpcrAddress"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="是否收取手续费:" prop="zfpcrCharge" v-if="this.companyType == '00'" size="large">
-                    <el-radio-group v-model="form.zfpcrCharge" size="medium" disabled>
-                        <el-radio-button v-for="(dict,index) in chargeOptions" :key="index" :label="dict.dictValue" border>{{dict.dictLabel}}</el-radio-button>
-                    </el-radio-group>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="是否收取手续费" :value="chargeOptions | pickerFilter(form.zfpcrCharge, 'dictValue', 'dictLabel')"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="平台服务费收取费率:" prop="zfpcrChargeRate" v-if="this.form.zfpcrCharge == '1' && this.companyType == '00'" size="large">
-                    <el-input v-model="form.zfpcrChargeRate" placeholder="请输入平台服务费收取费率" readonly>
-                        <template slot="append">%</template>
-                    </el-input>
-                </el-form-item>
+            <el-col v-if="this.form.zfpcrCharge == '1' && this.companyType == '00'" :span="12">
+                <text-item label="平台服务费收取费率" :value="form.zfpcrChargeRate" suffix="%"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="核心企业还款账户账号:" prop="zfpcrAccount" v-if="this.companyType == '00'" size="large">
-                    <el-autocomplete readonly class="inline-input" v-model="form.zfpcrAccount" :fetch-suggestions="querySearch" placeholder="核心企业还款账户账号"></el-autocomplete>
-                </el-form-item>
+            <el-col v-if="this.companyType == '00'" :span="12">
+                <text-item label="核心企业还款账户账号" :value="form.zfpcrAccount"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="核心企业还款账户开户行:" prop="zfpcrAccountBank" label-width="200px"  size="large">
-                    <el-input v-model="form.zfpcrAccountBank" placeholder="请输入核心企业还款账户开户行" maxlength="30" readonly>
-                    </el-input>
-                </el-form-item>
+            <el-col :span="12">
+                <text-item label="核心企业还款账户开户行" :value="form.zfpcrAccountBank"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="融资放款方式:" prop="zfpcrLoanType" v-if="this.companyType == '00'" size="large">
-                    <el-select v-model="form.zfpcrLoanType" placeholder="请选择状态" clearable disabled>
-                        <el-option v-for="dict in loanTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-                    </el-select>
-                </el-form-item>
+            <el-col v-if="this.companyType == '00'" :span="12">
+                <text-item label="融资放款方式" :value="loanTypeOptions | pickerFilter(form.zfpcrLoanType, 'dictValue', 'dictLabel')"></text-item>
             </el-col>
-            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
-                <el-form-item label="记账簿托管方式:" prop="zfpcrBookkeepingType" v-if="this.companyType == '00'" size="large">
-                    <el-select v-model="form.zfpcrBookkeepingType" placeholder="请选择状态" clearable disabled>
-                        <el-option v-for="dict in bookkeepingTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-                    </el-select>
-                </el-form-item>
+            <el-col v-if="this.companyType == '00'" :span="12">
+                <text-item label="记账簿托管方式" :value="bookkeepingTypeOptions | pickerFilter(form.zfpcrBookkeepingType, 'dictValue', 'dictLabel')"></text-item>
             </el-col>
         </el-row>
         <div class="zap-title zap-margin-top">关联合同</div>
@@ -173,7 +112,7 @@
         </span>
     </el-dialog>
     <el-row type="flex" justify="center" align="middle" style="height: 82px;">
-        <el-button type="primary" plain @click="cancel">取消</el-button>
+        <el-button plain @click="cancel">取消</el-button>
         <!-- <el-button type="success" @click="submitForm"
             >提交</el-button> -->
     </el-row>
@@ -203,9 +142,12 @@ import {
 import {
     getToken
 } from "@/utils/auth";
+import TextItem from "@/components/TextItem/index.vue"
 export default {
     name: "detailCreditLine",
-    components: {},
+    components: {
+        TextItem
+    },
     data() {
         return {
             //企业类型
@@ -378,6 +320,14 @@ export default {
             }
         };
     },
+    filters: {
+        pickerFilter(arr, id, filterKey, name) {
+            let list = arr.filter((item) => {
+                return item[filterKey] == id
+            })
+            return list[0] ? list[0][name] : ''
+        }
+    },
     created() {
         const zfpcrId = this.$route.params && this.$route.params.zfpcrId;
         const zfiAmount = this.$route.params && this.$route.params.zfiAmount;
@@ -735,9 +685,8 @@ export default {
 .single-select-table thead .el-table-column--selection .cell {
     display: none;
 }
-</style>
-<style lang="scss" scoped>
-.zap-form ::v-deep .el-form-item--medium .el-form-item__content{
-  margin-left: 0 !important;
+</style><style lang="scss" scoped>
+.zap-form ::v-deep .el-form-item--medium .el-form-item__content {
+    margin-left: 0 !important;
 }
 </style>