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