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