From fd34c3c56e2d40c312fcbbf7330d40ceafcd421e Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期四, 28 九月 2023 09:34:46 +0800
Subject: [PATCH] feat: 表格组件添加列显隐控制组件;销售线索页表格适配列显隐

---
 src/components/makepager/TableCommonView.vue |   86 ++++++++++++++++++++++++++++
 src/views/client/salesLead/index.vue         |   40 +++++++++---
 2 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 54c5b14..124fc97 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -25,6 +25,7 @@
         :min-width="item.min"
         show-overflow-tooltip
         :sortable="item.sortable"
+        v-if="item.isShowColumn"
       >
         <template slot-scope="scope">
           <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
@@ -122,6 +123,21 @@
         <el-empty description="鏆傛棤鏁版嵁"></el-empty>
       </div>
     </el-table>
+
+    <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
+    <div class="styleBtn">
+      <i @click="checkCol()" class="label">...</i>
+      <el-checkbox-group
+          v-model="showcol"
+          v-show="iscolopen"
+          class="checkbox-group"
+          @change="selectCheckBoxList"
+      >
+        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
+        >{{ item }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
   </div>
 </template>
 
@@ -139,6 +155,8 @@
         return {
           selectBox: true,
           tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁
+          showcol: [],
+          allcol: [],
           tableColumn: [
             // table琛ㄥ崟
             { label: "", prop: "", min: 200, tooltip: true }
@@ -158,10 +176,30 @@
     }
   },
   data() {
-    return {}
+    return {
+      iscolopen: false,
+      showcol:[]
+    }
   },
   computed: {},
+  watch: {
+    'tableList.showcol':{
+      handler(newVal){
+        this.showcol=newVal
+      },
+      immediate:true
+    }
+  },
   methods: {
+    onMaskClick() {
+      this.iscolopen = false;
+    },
+    checkCol() {
+      this.iscolopen = !this.iscolopen;
+    },
+    selectCheckBoxList(val) {
+      this.$emit("selTableCol", val);
+    },
     handleReserve(row) {
       return row._id ? row._id : row.id
     },
@@ -398,4 +436,50 @@
   height: 35px;
   text-align: center;
 }
+
+.overSpread1 {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0);
+  z-index: 10;
+}
+
+.styleBtn {
+  position: absolute;
+  width: 30px;
+  height: 36px;
+  // line-height: 26px;
+  // background: #06c062;
+  top: 0;
+  right: 2px;
+  z-index: 9999;
+  .label {
+    position: absolute;
+    top: 6px;
+    font-size: 20px;
+    // line-height: 5px;
+    cursor: pointer;
+    color: #000;
+    transform: rotate(-90deg);
+  }
+  .checkbox-group {
+    width: 160px;
+    height: 330px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    line-height: 25px;
+    background: #ffffff;
+    border-radius: 16px;
+    padding: 12px;
+    position: absolute;
+    right: 0;
+    top: 30px;
+    z-index: 99;
+    box-shadow: 0 0 2px 2px #f8f8f8;
+  }
+}
 </style>
diff --git a/src/views/client/salesLead/index.vue b/src/views/client/salesLead/index.vue
index 0eb1f72..014a51c 100644
--- a/src/views/client/salesLead/index.vue
+++ b/src/views/client/salesLead/index.vue
@@ -28,6 +28,7 @@
               :table-list="tableList"
               @selSalesLeadClick="selSalesLeadClick"
               @getSelectArray="getSelectArray"
+              @selTableCol="selTableCol"
           >
             <template slot="tableButton">
               <el-table-column label="鎿嶄綔" width="120">
@@ -134,7 +135,18 @@
         // 鍒嗛厤
         visible: false,
         infomation: {}
-      }
+      },
+      tableColumn:[
+        { label: "瀹㈡埛鍚嶇О", prop: "name", min: 190, isSalesLeadClick: true ,default:true}, // 瀹㈡埛鍚嶇О
+        { label: "閿�鍞嚎绱㈢紪鍙�", prop: "number", min: 130 }, // 閿�鍞嚎绱㈢紪鍙�
+        { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 130 }, // 鑱旂郴浜哄鍚�
+        { label: "鎵嬫満鍙风爜", prop: "contact_phone", min: 130 }, // 鎵嬫満鍙风爜
+        { label: "鍟嗘満鏉ユ簮", prop: "sales_resources", min: 130 }, // 鍟嗘満鏉ユ簮
+        { label: "鐪佷唤", prop: "province", min: 130 }, // 鐪佷唤
+        { label: "鍩庡競", prop: "city", min: 130 }, // 鍩庡競
+        { label: "璐熻矗浜�", prop: "member_name", min: 130 } // 璐熻矗浜�
+      ],
+      showCol:["瀹㈡埛鍚嶇О","閿�鍞嚎绱㈢紪鍙�","鑱旂郴浜哄鍚�","鎵嬫満鍙风爜","鍟嗘満鏉ユ簮","鐪佷唤","鍩庡競","璐熻矗浜�"]
     }
   },
   created() {
@@ -145,17 +157,11 @@
     setTable() {
       this.tableList = {
         tableInfomation: [],
-        tableColumn: [
-          { label: "瀹㈡埛鍚嶇О", prop: "name", min: 190, isSalesLeadClick: true }, // 瀹㈡埛鍚嶇О
-          { label: "閿�鍞嚎绱㈢紪鍙�", prop: "number", min: 130 }, // 閿�鍞嚎绱㈢紪鍙�
-          { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 130 }, // 鑱旂郴浜哄鍚�
-          { label: "鎵嬫満鍙风爜", prop: "contact_phone", min: 130 }, // 鎵嬫満鍙风爜
-          { label: "鍟嗘満鏉ユ簮", prop: "sales_resources", min: 130 }, // 鍟嗘満鏉ユ簮
-          { label: "鐪佷唤", prop: "province", min: 130 }, // 鐪佷唤
-          { label: "鍩庡競", prop: "city", min: 130 }, // 鍩庡競
-          { label: "璐熻矗浜�", prop: "member_name", min: 130 } // 璐熻矗浜�
-        ]
+        allcol: [],
+        showcol: this.showCol,
+        tableColumn:this.setColumnVisible(this.showCol)
       }
+      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
       this.searchOptions = []
       for (let i = 0; i < this.tableList.tableColumn.length; i++) {
         const label = this.tableList.tableColumn[i].label
@@ -163,6 +169,18 @@
         this.searchOptions.push({ value: value, label: label })
       }
     },
+    setColumnVisible(showCol){
+      return  this.tableColumn.map(ele=>{
+        return {
+          ...ele,
+          isShowColumn:showCol.includes(ele.label)
+        }
+      })
+    },
+    selTableCol(val) {
+      this.showcol = val;
+      this.tableList.tableColumn = this.setColumnVisible(val);
+    },
     // 璇锋眰鏁版嵁
     async getData() {
       await getSalesLeadsList({

--
Gitblit v1.8.0