还款管理页面样式调整

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

@@ -2,12 +2,12 @@
 <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="large">
+                <el-form-item label="授信类型" prop="zfpType" v-if="companyType != '02'" size="medium">
                     <el-select 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="large">
+                <el-form-item label="类型" prop="zfpcrQuery" size="medium">
                     <el-select v-model="queryParams.zfpcrQuery" clearable>
                         <el-option
                         v-for="dict in queryTypesOptions"
@@ -25,19 +25,19 @@
                         />
                     </el-select>
                 </el-form-item>
-                <el-form-item prop="zfpcrValue" v-if="this.queryParams.zfpcrQuery"  size="large">
+                <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>
-                <el-form-item label="授信状态" prop="zfpcrStatus" size="large">
+                <el-form-item label="授信状态" prop="zfpcrStatus" size="medium">
                     <el-select 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="large">
+                <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-date-picker>
                 </el-form-item>
-                <el-form-item label="到期日期" prop="endTime" size="large">
+                <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-date-picker>
                 </el-form-item>
@@ -93,11 +93,11 @@
         <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">
             <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)" v-if="scope.row.zfpcrStatus == '01'" v-hasPermi="['credit:line:edit']">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-view" @click="handleRows(scope.row)" v-hasPermi="['credit:line:query']">详情</el-button>
-                <el-button type="text" size="mini" icon="el-icon-s-check" @click="handleUpdate(scope.row)" v-hasPermi="['credit:line:update']" v-if="scope.row.zfpcrStatus == '00'">冻结</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleUpdate(scope.row)" v-if="scope.row.zfpcrStatus == '01'" v-hasPermi="['credit:line:update']">解冻</el-button>
-                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleSupplier(scope.row)" v-hasPermi="['supplierCredit:line:list']" v-if="scope.row.zfpType == '0'">融资方列表</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>
             </template>
         </el-table-column>
     </el-table>

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

@@ -1,25 +1,6 @@
 <template>
   <div class="app-container zap-main">
-    <el-row v-if="activeIndex === '0'" class="zap-table-search">
-      <div class="zap-padding-end">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getList"
-        >收起</right-toolbar>
-        <span class="zap-padding-start zap-font-title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetQuery" style="margin-right: 20px;">重置</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
+    <search-bar v-if="activeIndex === '0'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :companyType="companyType" :tableId="tableId" @query="handleQuery" @reset="resetQuery">
         <el-form
           :model="queryParams"
           ref="queryForm"
@@ -27,7 +8,7 @@
           v-show="showSearch"
           label-width="auto"
         >
-          <el-form-item label="类型" prop="type" size="large">
+          <el-form-item label="类型" prop="type" size="medium">
             <el-select v-model="queryParams.type" placeholder="请选择查询字段" clearable>
               <el-option
                 v-for="dict in typeOptions"
@@ -37,7 +18,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item prop="value" size="large">
+          <el-form-item prop="value" size="medium">
             <el-input
               v-model="queryParams.value"
               placeholder="请输入关键字模糊查询"
@@ -46,7 +27,7 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="承诺还款日期" prop="repaymentDate" size="large">
+          <el-form-item label="承诺还款日期" prop="repaymentDate" size="medium">
             <el-date-picker
               clearable
               unlink-panels
@@ -60,28 +41,40 @@
             ></el-date-picker>
           </el-form-item>
         </el-form>
-      </div>
-    </el-row>
-    <el-row v-if="activeIndex === '1'" class="zap-table-search">
-      <div class="zap-padding-end">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getUnpayList"
-        >收起</right-toolbar>
-        <span class="zap-padding-start zap-font-title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="secondQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetSecondQuery" style="margin-right: 20px;">重置</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
+        <el-form
+            :model="amountQueryParams"
+            ref="amountQueryForm"
+            :inline="true"
+            v-show="showSearch"
+            label-width="auto"
+          >
+            <el-row type="flex" align="middle">
+              <div class="zap-repaid">
+                <el-form-item prop="day">
+                  <el-select
+                    v-model="amountQueryParams.day"
+                    size="medium"
+                    @change="change(amountQueryParams.day)"
+                  >
+                    <el-option
+                      v-for="dict in dayOptions"
+                      :key="dict.dictValue"
+                      :label="dict.dictLabel"
+                      :value="dict.dictValue"
+                    />
+                  </el-select>
+                  <span class="zap-repaid__label">待还款金额:</span>
+                </el-form-item>
+                <div class="zap-repaid__amount">{{amount}}</div>
+              </div>
+              <div class="zap-total">
+                <div class="zap-total__label">总待还款金额:</div>
+                <div class="zap-total__amount">{{sumAmount}}</div>
+              </div>
+            </el-row>
+          </el-form>
+    </search-bar>
+    <search-bar v-if="activeIndex === '1'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :companyType="companyType" :tableId="tableId" @query="secondQuery" @reset="resetSecondQuery">
         <el-form
           :model="unRepayment"
           ref="queryForm1"
@@ -122,28 +115,8 @@
             ></el-date-picker>
           </el-form-item>
         </el-form>
-      </div>
-    </el-row>
-    <el-row v-if="activeIndex === '2'" class="zap-table-search">
-      <div class="zap-padding-end">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getRepayList"
-        >收起</right-toolbar>
-        <span class="zap-padding-start zap-font-title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="thirdQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetThirdQuery" style="margin-right: 20px;">重置</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
+    </search-bar>
+    <search-bar v-if="activeIndex === '2'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :companyType="companyType" :tableId="tableId" @query="thirdQuery" @reset="resetThirdQuery">
         <el-form
           :model="repayment"
           ref="queryForm2"
@@ -185,28 +158,8 @@
             ></el-date-picker>
           </el-form-item>
         </el-form>
-      </div>
-    </el-row>
-    <el-row v-if="activeIndex === '3'" class="zap-table-search">
-      <div class="zap-padding-end">
-        <right-toolbar
-          class="zap-right-toolbar"
-          :showSearch.sync="showSearch"
-          @queryTable="getOverdueList"
-        >收起</right-toolbar>
-        <span class="zap-padding-start zap-font-title">所选条件:</span>
-        <div style="float: right;margin-right:1%">
-          <el-button type="cyan" icon="el-icon-search" @click="fouthQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetFouthQuery" style="margin-right: 20px;">重置</el-button>
-          <column-setting
-            class="zap-column-setting"
-            :checkList="checkList"
-            :tableList="tableList"
-            :selfDom="selfDom"
-            :tableId="tableId"
-          ></column-setting>
-        </div>
-        <hr style="margin-top: 16px;" />
+     </search-bar>
+    <search-bar v-if="activeIndex === '3'" :checkList="checkList" :tableList="tableList" :selfDom="selfDom" :companyType="companyType" :tableId="tableId" @query="fouthQuery" @reset="resetFouthQuery">
         <el-form
           :model="overdue"
           ref="queryForm3"
@@ -248,43 +201,10 @@
             ></el-date-picker>
           </el-form-item>
         </el-form>
-      </div>
-    </el-row>
+    </search-bar>
     <el-tabs class="zap-bg zap-margin-top" v-model="activeIndex">
       <el-tab-pane label="全部">
         <div class="zap-form">
-          <el-form
-            :model="amountQueryParams"
-            ref="amountQueryForm"
-            :inline="true"
-            v-show="showSearch"
-            label-width="auto"
-          >
-            <div
-              style="width:20%;height:135px;background:#f2f2f2;float:left;border-radius: 5%;"
-            >
-              <el-form-item prop="day">
-                <el-select
-                  v-model="amountQueryParams.day"
-                  size="small"
-                  @change="change(amountQueryParams.day)"
-                >
-                  <el-option
-                    v-for="dict in dayOptions"
-                    :key="dict.dictValue"
-                    :label="dict.dictLabel"
-                    :value="dict.dictValue"
-                  />
-                </el-select>
-              </el-form-item>
-              <span>待还款金额:</span>
-              <span>{{amount}}</span>
-            </div>
-            <div style="width:20%;height:135px;background:#f2f2f2;float:left;margin-left:10px;border-radius: 5%; ">
-              <span>总待还款金额:</span>
-              <span>{{sumAmount}}</span>
-            </div>
-          </el-form>
           <div>
             <el-button
               type="primary"
@@ -380,23 +300,23 @@
             <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
               <template slot-scope="scope">
                 <el-button
+                  class="zap-button-plain"
                   size="mini"
                   type="text"
-                  icon="el-icon-view"
                   @click="handleInfo(scope.row)"
                   v-hasPermi="['service:repayment:query']"
                 >详情</el-button>
                 <el-button
+                  class="zap-button-waring"
                   size="mini"
                   type="text"
-                  icon="el-icon-delete"
                   @click="handleDown(scope.row)"
                   v-hasPermi="['service:repayment:down']"
                 >下载</el-button>
                 <el-button
+                  class="zap-button-primary"
                   size="mini"
                   type="text"
-                  icon="el-icon-delete"
                   @click="handleUp(scope.row)"
                   v-hasPermi="['service:repayment:edit']"
                   v-if="scope.row.zfrApplyStatus != '01'"
@@ -507,23 +427,23 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button
+                class="zap-button-plain"
                 size="mini"
                 type="text"
-                icon="el-icon-view"
                 @click="handleInfo(scope.row)"
                 v-hasPermi="['service:repayment:query']"
               >详情</el-button>
               <el-button
+                class="zap-button-waring"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleDown(scope.row)"
                 v-hasPermi="['service:repayment:down']"
               >下载</el-button>
               <el-button
+                class="zap-button-primary"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleUp(scope.row)"
                 v-hasPermi="['service:repayment:up']"
                 v-if="scope.row.zfrApplyStatus != '01'"
@@ -633,23 +553,23 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button
+                class="zap-button-plain"
                 size="mini"
                 type="text"
-                icon="el-icon-view"
                 @click="handleInfo(scope.row)"
                 v-hasPermi="['service:repayment:query']"
               >详情</el-button>
               <el-button
+                class="zap-button-waring"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleDown(scope.row)"
                 v-hasPermi="['service:repayment:down']"
               >下载</el-button>
               <el-button
+                class="zap-button-primary"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleUp(scope.row)"
                 v-hasPermi="['service:repayment:up']"
                 v-if="scope.row.zfrApplyStatus != '01'"
@@ -760,23 +680,23 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button
+                class="zap-button-plain"
                 size="mini"
                 type="text"
-                icon="el-icon-view"
                 @click="handleInfo(scope.row)"
                 v-hasPermi="['service:repayment:query']"
               >详情</el-button>
               <el-button
+                class="zap-button-waring"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleDown(scope.row)"
                 v-hasPermi="['service:repayment:down']"
               >下载</el-button>
               <el-button
+                class="zap-button-primary"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
                 @click="handleUp(scope.row)"
                 v-hasPermi="['service:repayment:up']"
                 v-if="scope.row.zfrApplyStatus != '01'"
@@ -849,10 +769,12 @@ import { columnQuery, columnfilter } from "@/api/common/columnSetting";
 import Cookies from "js-cookie";
 import { uploadFileNew } from "@/api/common/file";
 import { getToken } from "@/utils/auth";
+import SearchBar from '@/components/SearchBar/index.vue'
 export default {
   name: "repayment",
   components: {
-    ColumnSetting
+    ColumnSetting,
+    SearchBar
   },
   data() {
     return {
@@ -1387,4 +1309,50 @@ export default {
   font-size: 12px;
   color: #333333;
 }
+.zap-repaid{
+  position: relative;
+  padding-right: 70px;
+  padding-top: 10px;
+  padding-left: 42px;
+  padding-bottom: 24px;
+  &::after{
+    content: '';
+    display: block;
+    position: absolute;
+    top: 10px;
+    right: 0;
+    width: 1px;
+    height: calc(100% - 44px);
+    border-right: 1px solid #EBEBEB;
+  }
+  .el-form-item{
+    margin-bottom: 0;
+  }
+}
+.zap-repaid__label{
+  margin-left: 16px;
+  font-size: 14px;
+  color: #333333;
+}
+.zap-repaid__amount{
+  margin-top: 24px;
+  font-size: 28px;
+  color: #4280F2;
+}
+.zap-total{
+  padding-left: 70px;
+  padding-bottom: 24px;
+}
+.zap-total__label{
+  font-size: 14px;
+  color: #333333;
+}
+.zap-total__amount{
+  margin-top: 30px;
+  font-size: 28px;
+  color: #FF2F2F;
+}
+.zap-title{
+
+}
 </style>