个贷页面优化-自定义字段展示

src/components/BaseTable/parentTable.vue

@@ -5,7 +5,8 @@
       border-left: 1px solid #ebeced;
       border-right: 1px solid #ebeced;
       color: #333333;
-    " @selection-change="selectionChange" @sort-change="sortChange" @row-click="clickRow" @row-dblclick="expandRow">
+    " @selection-change="selectionChange" @sort-change="sortChange" @row-click="clickRow" @row-dblclick="expandRow"
+      @header-click="headerClick"	>
     <slot></slot>
   </el-table>
 </template>
@@ -90,6 +91,9 @@ export default {
     },
     getRowKeys(row) {
       return row.id;
+    },
+    headerClick(val){
+      this.$emit("headerClick", val.property);
     }
   },
 };

src/utils/auth.js

@@ -30,3 +30,7 @@ export function getCookie(key){
   return Cookies.get(key)
 }
 
+export function removeCookie(key){
+  return Cookies.remove(key)
+}
+

src/views/personal/pendingList.vue

@@ -5,100 +5,105 @@
     </div>
     <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getPage" >
       <template slot="left">
-        <MoreSearchBar business="PERSONAL_BUSINESS" :nodes="personalNodes"  @fliterSearch="fliterSearch" @resetParams="resetParams" :listQuery="listQuery"></MoreSearchBar>
+        <MoreSearchBar business="PERSONAL_BUSINESS" :nodes="personalNodes"  @fliterSearch="fliterSearch" @resetParams="resetParams" :listQuery="listQuery">
+          <template v-slot:otherButton>
+            <el-button class="filter-item" round @click="showAllLabel()">显示全部字段
+            </el-button>
+          </template>
+        </MoreSearchBar>
       </template>
-      <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
-        <el-table-column label="坐落" align="center" width="300"  >
+      <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;" @headerClick="switchHeader">
+        <el-table-column label="项目编号" align="center" width="150" v-if="!hiddenLabels.includes('orderId')" prop="orderId" >
           <template slot-scope="{row}">
-            <span>{{ row.location }}</span>
+            <span class="enableClick" @click="orderDetail(row)">{{ row.orderId }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="项目编号" align="center" width="150" >
+        <el-table-column label="坐落" align="center" width="300" v-if="!hiddenLabels.includes('location')" prop="location">
           <template slot-scope="{row}">
-            <span>{{ row.orderId }}</span>
+            <span class="enableClick" @click="orderDetail(row)">{{ row.location }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="当前节点" align="center" width="130">
+        <el-table-column label="当前节点" align="center" width="130" v-if="!hiddenLabels.includes('currentNodeName')" prop="currentNodeName">
           <template slot-scope="{row}">
             <span>{{ row.currentNodeName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="处理人" align="center" width="130">
+        <el-table-column label="处理人" align="center" width="130" v-if="!hiddenLabels.includes('handlerName')" prop="handlerName">
           <template slot-scope="{row}">
             <span>{{ row.handlerName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="面积" align="center" width="130" prop="reportNo">
+        <el-table-column label="面积" align="center" width="130" v-if="!hiddenLabels.includes('acreage')" prop="acreage">
           <template slot-scope="{row}">
             <span>{{ row.acreage?row.acreage:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="单价" align="center" width="130">
+        <el-table-column label="单价" align="center" width="130" v-if="!hiddenLabels.includes('price')" prop="price">
           <template slot-scope="{row}">
             <span>{{ row.price?row.price:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="总价" align="center" width="130">
+        <el-table-column label="总价" align="center" width="130" v-if="!hiddenLabels.includes('amount')" prop="amount">
           <template slot-scope="{row}">
             <span>{{ row.amount?row.amount:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="客户名称" align="center" width="130">
+        <el-table-column label="客户名称" align="center" width="130" v-if="!hiddenLabels.includes('clientName')" prop="clientName">
           <template slot-scope="{row}">
             <span>{{ row.clientName==null?'--': row.clientName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="业务来源" align="center" width="130">
+        <el-table-column label="业务来源" align="center" width="130" v-if="!hiddenLabels.includes('clientSubName')" prop="clientSubName">
           <template slot-scope="{row}">
             <span>{{ row.clientSubName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="中介" align="center" width="130">
+        <el-table-column label="中介" align="center" width="130" v-if="!hiddenLabels.includes('agent')" prop="agent">
           <template slot-scope="{row}">
             <span>{{ row.agent==null?'--': row.agent }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="联系人" align="center" width="130">
+        <el-table-column label="联系人" align="center" width="130" v-if="!hiddenLabels.includes('contactName')" prop="contactName">
           <template slot-scope="{row}">
             <span>{{ row.contactName}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="联系人电话" align="center" width="130">
+        <el-table-column label="联系人电话" align="center" width="130" v-if="!hiddenLabels.includes('contactTel')" prop="contactTel">
           <template slot-scope="{row}">
             <span>{{ row.contactTel }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="委托人" align="center">
+        <el-table-column label="委托人" align="center" v-if="!hiddenLabels.includes('bailorA')" prop="bailorA">
           <template slot-scope="{row}">
             <span>{{ row.bailorA}}{{ row.bailorB}}</span>
           </template>
         </el-table-column>
-        <el-table-column label="委托人电话" align="center" width="130">
+        <el-table-column label="委托人电话" align="center" width="130" v-if="!hiddenLabels.includes('bailoraTel')" prop="bailoraTel">
           <template slot-scope="{row}">
             <span>{{ row.bailoraTel===null?row.bailorbTel:row.bailoraTel }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="客户经理" align="center">
+        <el-table-column label="客户经理" align="center" v-if="!hiddenLabels.includes('clientManager')" prop="clientManager">
           <template slot-scope="{row}">
             <span>{{ row.clientManager }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="实勘人" align="center" width="130">
+        <el-table-column label="实勘人" align="center" width="130" v-if="!hiddenLabels.includes('outwardStaffName')" prop="outwardStaffName">
           <template slot-scope="{row}">
             <span>{{ row.outwardStaffName?row.outwardStaffName:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="内业人员" align="center" width="130">
+        <el-table-column label="内业人员" align="center" width="130" v-if="!hiddenLabels.includes('inwardStaffName')" prop="inwardStaffName">
           <template slot-scope="{row}">
             <span>{{ row.inwardStaffName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="定价人员" align="center" width="130">
+        <el-table-column label="定价人员" align="center" width="130" v-if="!hiddenLabels.includes('pricingStaffName')" prop="pricingStaffName">
           <template slot-scope="{row}">
             <span>{{ row.pricingStaffName?row.pricingStaffName:'--' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="下单时间" align="center" width="110" prop="created">
+        <el-table-column label="下单时间" align="center" width="110" v-if="!hiddenLabels.includes('created')" prop="created">
           <template slot-scope="{row}">
             {{ row.created }}
           </template>
@@ -117,7 +122,7 @@ import YPageListLayout from '@/components/YPageListLayout'
 import Breadcrumb from '@/components/Breadcrumb'
 import PermissionButton from '@/components/PermissionButton/PermissionButton'
 import MoreSearchBar from '@/components/MoreSearchBar'
-import { getCookie } from '@/utils/auth'
+import { getCookie,setCookie,removeCookie } from '@/utils/auth'
 
 export default {
   name: 'PersonalPendingList',
@@ -142,11 +147,17 @@ export default {
         startDate:null,
         endDate:null
       },
-      personalNodes:[]
+      personalNodes:[],
+      currentNodeName:false,
+      hiddenLabels:[]
     }
   },
 
+  
   created() {
+    if (getCookie("PersonalPendingList-hiddenLabels")!=undefined){
+      this.hiddenLabels = JSON.parse(getCookie("PersonalPendingList-hiddenLabels"))
+    }
     this.listQuery.keyword = this.$route.query.keyword;
     this.getPage();
     this.getNodeEnum();
@@ -197,10 +208,23 @@ export default {
     orderDetail(row){
       this.$router.push(`/personal/readonly/detail?id=${row.id}&currentNodeName=${row.currentNodeName}&orderId=${row.orderId}&back=${'/personal/pending/list'}`)
     },
+
+    switchHeader(data){
+      this.hiddenLabels.push(data);
+      setCookie("PersonalPendingList-hiddenLabels",this.hiddenLabels);
+    },
+    showAllLabel(){
+      removeCookie("PersonalPendingList-hiddenLabels");
+      location.reload();
+    }
   },
   
 }
 </script>
 <style lang="scss" scoped>
- 
+ .enableClick:hover{
+    color:#1890ff;
+    font-weight: bold;
+    cursor: pointer;
+ }
 </style>

src/views/personal/todoDetail.vue

@@ -416,22 +416,19 @@
           </el-row>
           <el-row class="row-style">
             <el-col :xs="24" :sm="12" :lg="6" :span="6">
-              <el-form-item label="评估面积(平)：" prop="acreage" label-width="140px"
-                :rules="{ required: true, message: '评估面积不能为空', trigger: 'blur' }" class="postInfo-container-item">
+              <el-form-item label="评估面积(平)：" prop="acreage" label-width="140px" class="postInfo-container-item">
                 <el-input-number v-model="target.acreage" size="medium" controls-position="right" :min="0" :max="10000"
                   style="width: 100%;"></el-input-number>
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :lg="6" :span="6">
-              <el-form-item label="评估单价(元)：" prop="price" label-width="140px"
-                :rules="{ required: true, message: '评估单价不能为空', trigger: 'blur' }" class="postInfo-container-item">
+              <el-form-item label="评估单价(元)：" prop="price" label-width="140px"  class="postInfo-container-item">
                 <el-input-number v-model="target.price" size="medium" controls-position="right" :min="0"
                   style="width: 100%;"></el-input-number>
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :lg="6" :span="6">
-              <el-form-item label="评估总价(元)：" prop="amount" label-width="140px"
-                :rules="{ required: true, message: '评估总价不能为空', trigger: 'blur' }" class="postInfo-container-item">
+              <el-form-item label="评估总价(元)：" prop="amount" label-width="140px" class="postInfo-container-item">
                 <el-input-number v-model="target.amount" size="medium" controls-position="right" :min="0"
                   style="width: 100%;"></el-input-number>
               </el-form-item>

src/views/personal/todoList.vue

@@ -14,14 +14,14 @@
         </MoreSearchBar>
       </template>
       <parentTable ref="table" v-loading="listLoading" :data="pageData.records" slot="table" style="width: 100%;">
-        <el-table-column label="坐落" align="center" width="300">
+        <el-table-column label="项目编号" align="center" width="150" >
           <template slot-scope="{row}">
-            <span>{{ row.location }}</span>
+            <span class="enableClick" @click="orderDetail(row)">{{ row.orderId }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="项目编号" align="center" width="130" >
+        <el-table-column label="坐落" align="center" width="300" >
           <template slot-scope="{row}">
-            <span>{{ row.orderId }}</span>
+            <span class="enableClick" @click="orderDetail(row)">{{ row.location }}</span>
           </template>
         </el-table-column>
         <el-table-column label="当前节点" align="center" width="130">
@@ -405,4 +405,9 @@ export default {
   padding-left: 17px;
 }
 
+.enableClick:hover{
+    color:#1890ff;
+    font-weight: bold;
+    cursor: pointer;
+ }
 </style>