授信管理页面样式问题修改

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

@@ -1,47 +1,61 @@
 <template>
 <div class="app-container zap-main">
-    <search-bar :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :companyType="companyType" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
-            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
-                <el-form-item label="授信类型" prop="zfpType" v-if="companyType != '02'" size="medium">
-                    <el-select v-model="queryParams.zfpType" placeholder="请选择类型" clearable>
+    <search-bar
+        :checkList="checkList"
+        :tableList="tableList"
+        :selfDom="selfDom"
+        :companyType="companyType"
+        :tableId="tableId"
+        @query="handleQuery"
+        @reset="resetQuery">
+        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" label-width="80px">
+            <el-row type="flex" style="flex-wrap:wrap;">
+                <el-form-item class="zap-flex-1" label="授信类型" prop="zfpType" v-if="companyType != '02'" size="medium">
+                    <el-select class="zap-form-input--small" v-model="queryParams.zfpType" placeholder="请选择类型" clearable>
                         <el-option v-for="dict in queryTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="类型" prop="zfpcrQuery" size="medium">
-                    <el-select v-model="queryParams.zfpcrQuery" clearable>
-                        <el-option
-                        v-for="dict in queryTypesOptions"
-                        :key="dict.dictValue"
-                        :label="dict.dictLabel"
-                        :value="dict.dictValue"
-                        v-if="dict.dictValue == '02' && companyType  == '00'"
-                        />
-                        <el-option
-                        v-for="dict in queryTypesOptions"
-                        :key="dict.dictValue"
-                        :label="dict.dictLabel"
-                        :value="dict.dictValue"
-                        v-if="dict.dictValue != '02'"
-                        />
+                <el-form-item class="zap-flex-1" label="类型" prop="zfpcrQuery" size="medium">
+                    <el-select class="zap-form-input--medium" v-model="queryParams.zfpcrQuery" clearable>
+                        <el-option v-for="dict in queryTypesOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" v-if="dict.dictValue == '02' && companyType  == '00'" />
+                        <el-option v-for="dict in queryTypesOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" v-if="dict.dictValue != '02'" />
                     </el-select>
                 </el-form-item>
-                <el-form-item prop="zfpcrValue" v-if="this.queryParams.zfpcrQuery"  size="medium">
-                    <el-input v-model="queryParams.zfpcrValue" placeholder="请输入关键字模糊查询" clearable maxlength="25"/>
+                <el-form-item class="zap-flex-1 ml24" prop="zfpcrValue" v-if="this.queryParams.zfpcrQuery" size="medium" label-width="0">
+                    <el-input class="zap-form-input--default" v-model="queryParams.zfpcrValue" placeholder="请输入关键字模糊查询" clearable maxlength="25" />
                 </el-form-item>
-                <el-form-item label="授信状态" prop="zfpcrStatus" size="medium">
-                    <el-select v-model="queryParams.zfpcrStatus" placeholder="请选择状态" clearable>
+            </el-row>
+            <el-row type="flex" style="flex-wrap:wrap;">
+                <el-form-item class="zap-flex-1" label="授信状态" prop="zfpcrStatus" size="medium">
+                    <el-select class="zap-form-input--small" v-model="queryParams.zfpcrStatus" placeholder="请选择状态" clearable>
                         <el-option v-for="dict in queryStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="生效日期" prop="startTime" size="medium">
-                    <el-date-picker v-model="queryParams.startTime" unlink-panels value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
+                <!-- <el-form-item class="zap-flex-1" label="生效日期" prop="startTime" size="medium">
+                    <el-date-picker
+                        v-model="queryParams.startTime"
+                        unlink-panels
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
                     </el-date-picker>
-                </el-form-item>
-                <el-form-item label="到期日期" prop="endTime" size="medium">
-                    <el-date-picker v-model="queryParams.endTime" unlink-panels value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-form-item> -->
+                <el-form-item class="zap-flex-1" label="到期日期" prop="endTime" size="medium">
+                    <el-date-picker
+                        class="zap-form-input--medium"
+                        v-model="queryParams.endTime"
+                        unlink-panels
+                        value-format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期">
                     </el-date-picker>
                 </el-form-item>
-            </el-form>
+            </el-row>
+        </el-form>
     </search-bar>
     <div class="zap-content zap-margin-top">
         <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['credit:line:add']">新增</el-button>
@@ -56,7 +70,13 @@
         </el-table-column>
         <el-table-column label="核心企业" align="center" prop="scyName" show-overflow-tooltip />
         <el-table-column label="融资产品" align="center" prop="zfpName" show-overflow-tooltip />
-        <el-table-column label="授信额度" :formatter="moneyFormat" align="center" prop="zfsqAmount" show-overflow-tooltip width="120" />
+        <el-table-column
+            label="授信额度"
+            :formatter="moneyFormat"
+            align="center"
+            prop="zfsqAmount"
+            show-overflow-tooltip
+            width="120" />
         <el-table-column label="利率(%)" align="center" prop="zfpcrRate" width="120" />
         <el-table-column label="已使用额度" :formatter="moneyFormat" align="center" prop="zfiAmount" width="120" />
         <el-table-column label="可用额度" :formatter="moneyFormat" align="center" prop="usableAmount" width="120" />
@@ -78,26 +98,87 @@
             </template>
         </el-table-column>
         <el-table-column label="资金方" align="center" prop="rzScyName" show-overflow-tooltip v-if="uncheckList.rzScyName && companyType != '03'" />
-        <el-table-column label="授信类型" :formatter="typeFormat" align="center" prop="zfpType" show-overflow-tooltip v-if="uncheckList.zfpType" />
+        <el-table-column
+            label="授信类型"
+            :formatter="typeFormat"
+            align="center"
+            prop="zfpType"
+            show-overflow-tooltip
+            v-if="uncheckList.zfpType" />
         <el-table-column label="融资产品" align="center" prop="zfpName" v-if="uncheckList.zfpName" show-overflow-tooltip />
         <el-table-column label="企业名称" align="center" prop="scyName" v-if="uncheckList.scyName && companyType != '01'" show-overflow-tooltip />
         <el-table-column label="企业代码" align="center" prop="scySocialCode" v-if="uncheckList.scySocialCode && companyType == '00'" show-overflow-tooltip />
-        <el-table-column label="授信额度" :formatter="moneyFormat" align="center" prop="zfpcrAmount" show-overflow-tooltip v-if="uncheckList.zfpcrAmount" width="120" />
+        <el-table-column
+            label="授信额度"
+            :formatter="moneyFormat"
+            align="center"
+            prop="zfpcrAmount"
+            show-overflow-tooltip
+            v-if="uncheckList.zfpcrAmount"
+            width="120" />
         <el-table-column label="利率(%)" align="center" prop="zfpcrRate" v-if="uncheckList.zfpcrRate" width="120" />
         <!-- <el-table-column label="已分割额度" :formatter="moneyFormat"  align="center" prop="zfpcrDivisionAmount" v-if="uncheckList.zfpcrDivisionAmount" width="120"/> -->
-        <el-table-column label="已使用额度" :formatter="moneyFormat" align="center" prop="zfiAmount" v-if="uncheckList.zfiAmount" width="120" />
-        <el-table-column label="已分配额度" :formatter="moneyFormat" align="center" prop="supplierAmount" v-if="uncheckList.supplierAmount" width="120" />
-        <el-table-column label="可用额度" :formatter="moneyFormat" align="center" prop="usableAmount" v-if="uncheckList.usableAmount && (companyType != '02')" width="120" />
+        <el-table-column
+            label="已使用额度"
+            :formatter="moneyFormat"
+            align="center"
+            prop="zfiAmount"
+            v-if="uncheckList.zfiAmount"
+            width="120" />
+        <el-table-column
+            label="已分配额度"
+            :formatter="moneyFormat"
+            align="center"
+            prop="supplierAmount"
+            v-if="uncheckList.supplierAmount"
+            width="120" />
+        <el-table-column
+            label="可用额度"
+            :formatter="moneyFormat"
+            align="center"
+            prop="usableAmount"
+            v-if="uncheckList.usableAmount && (companyType != '02')"
+            width="120" />
         <el-table-column label="生效日期" align="center" prop="zfpcrStartDate" v-if="uncheckList.zfpcrStartDate && (companyType != '01'|| companyType != '03')" show-overflow-tooltip />
         <el-table-column label="到期日期" align="center" prop="zfpcrEndDate" v-if="uncheckList.zfpcrEndDate" show-overflow-tooltip />
-        <el-table-column label="授信状态" :formatter="statusFormat" align="center" prop="zfpcrStatus" v-if="uncheckList.zfpcrStatus" show-overflow-tooltip />
+        <el-table-column
+            label="授信状态"
+            :formatter="statusFormat"
+            align="center"
+            prop="zfpcrStatus"
+            v-if="uncheckList.zfpcrStatus"
+            show-overflow-tooltip />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="right">
             <template slot-scope="scope">
-                <el-button class="zap-button-primary" size="mini" type="text" @click="handleEdit(scope.row)" v-if="scope.row.zfpcrStatus == '01'" v-hasPermi="['credit:line:edit']">修改</el-button>
+                <el-button
+                    class="zap-button-primary"
+                    size="mini"
+                    type="text"
+                    @click="handleEdit(scope.row)"
+                    v-if="scope.row.zfpcrStatus == '01'"
+                    v-hasPermi="['credit:line:edit']">修改</el-button>
                 <el-button class="zap-button-plain" size="mini" type="text" @click="handleRows(scope.row)" v-hasPermi="['credit:line:query']">详情</el-button>
-                <el-button class="zap-button-primary" type="text" size="mini" @click="handleUpdate(scope.row)" v-hasPermi="['credit:line:update']" v-if="scope.row.zfpcrStatus == '00'">冻结</el-button>
-                <el-button class="zap-button-primary" size="mini" type="text" @click="handleUpdate(scope.row)" v-if="scope.row.zfpcrStatus == '01'" v-hasPermi="['credit:line:update']">解冻</el-button>
-                <el-button class="zap-button-primary" size="mini" type="text" @click="handleSupplier(scope.row)" v-hasPermi="['supplierCredit:line:list']" v-if="scope.row.zfpType == '0'">融资方列表</el-button>
+                <el-button
+                    class="zap-button-primary"
+                    type="text"
+                    size="mini"
+                    @click="handleUpdate(scope.row)"
+                    v-hasPermi="['credit:line:update']"
+                    v-if="scope.row.zfpcrStatus == '00'">冻结</el-button>
+                <el-button
+                    class="zap-button-primary"
+                    size="mini"
+                    type="text"
+                    @click="handleUpdate(scope.row)"
+                    v-if="scope.row.zfpcrStatus == '01'"
+                    v-hasPermi="['credit:line:update']">解冻</el-button>
+                <el-button
+                    class="zap-button-primary"
+                    size="mini"
+                    type="text"
+                    @click="handleSupplier(scope.row)"
+                    v-hasPermi="['supplierCredit:line:list']"
+                    v-if="scope.row.zfpType == '0'">融资方列表</el-button>
             </template>
         </el-table-column>
     </el-table>
@@ -116,10 +197,18 @@ import {
     changeStatus
 } from "@/api/service/creditLine/creditLine";
 import Cookies from 'js-cookie'
-import { columnQuery, columnfilter} from "@/api/common/columnSetting";
+import {
+    columnQuery,
+    columnfilter
+} from "@/api/common/columnSetting";
 import ColumnSetting from "../../../components/Table/columnSetting.vue";
-import { getPreMonthDay, getCurrentDateStr} from "@/api/common/getDateUtils";
-import { getUserProfile } from "@/api/system/user";
+import {
+    getPreMonthDay,
+    getCurrentDateStr
+} from "@/api/common/getDateUtils";
+import {
+    getUserProfile
+} from "@/api/system/user";
 import SearchBar from '@/components/SearchBar/index.vue'
 import PlainButton from '@/components/PlainButton/index.vue'
 export default {
@@ -374,7 +463,7 @@ export default {
                 this.creditLineList = response.data.records;
                 if (response.data.records[0]) {
                     this.companyType = response.data.records[0].companyType
-                    console.log(this.companyType,"企业类型")
+                    console.log(this.companyType, "企业类型")
                 }
                 this.total = response.data.total;
                 this.loading = false;
@@ -499,7 +588,7 @@ export default {
         // /** 详情按钮操作 */
         handleRows(row) {
             const zfpcrId = row.zfpcrId || this.ids;
-            console.log(zfpcrId,"授信id")
+            console.log(zfpcrId, "授信id")
             const zfiAmount = row.zfiAmount;
             const usableAmount = row.usableAmount;
             const companyType = this.companyType;