From 352e9e459e3c865a8509ccebfe6a3d580a65165c Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期二, 10 十月 2023 13:48:29 +0800 Subject: [PATCH] 搜索公共组件、新建选择客户名称等公共组件、新建弹窗及跟进记录页面批量删除改为单条删除 --- src/components/makepager/TableCommonView.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 94 insertions(+), 9 deletions(-) diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue index 54c5b14..fb8bbf5 100644 --- a/src/components/makepager/TableCommonView.vue +++ b/src/components/makepager/TableCommonView.vue @@ -1,3 +1,4 @@ +<!-- eslint-disable vue/no-use-v-if-with-v-for --> <template> <div class="table-view"> <el-table @@ -12,9 +13,10 @@ :summary-method="getSummaries" :span-method="arraySpanMethod" @selection-change="handleSelectionChange" - :header-cell-style="{ background: '#f1f3f8', color: '#000009' , 'font-size': '12px','font-family':'PingFangSC'}" + :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }" size="mini" > + <el-table-column v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"></el-table-column> <el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column> <el-table-column v-for="(item, i) in tableList.tableColumn" @@ -25,6 +27,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 +125,14 @@ <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> @@ -131,14 +142,16 @@ props: { selectBox: { type: Boolean, - default: true + default: false }, tableList: { type: Object, default: () => { return { - selectBox: true, + selectIndex: true, tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁 + showcol: [], + allcol: [], tableColumn: [ // table琛ㄥ崟 { label: "", prop: "", min: 200, tooltip: true } @@ -158,10 +171,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 }, @@ -178,10 +211,16 @@ .querySelector(".el-table__footer") var cell = current.rows[0].cells for (let i = 0; i < this.showSummary.mergeNumber; i++) { - cell[i].style.display = "none" + cell[i] && cell[i].style && (cell[i].style.display = "none") } - cell[this.showSummary.mergeNumber].classList.remove("is-left") - cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString() + if (cell[this.showSummary.mergeNumber]) { + if (cell[this.showSummary.mergeNumber].classList) { + cell[this.showSummary.mergeNumber].classList.remove("is-left") + } + if (cell[this.showSummary.mergeNumber].colSpan) { + cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString() + } + } } }) } @@ -387,8 +426,8 @@ text-align: center; } -::v-deep{ - .el-table .cell .el-button--text.el-button--small{ +::v-deep { + .el-table .cell .el-button--text.el-button--small { padding: 4px 0; } } @@ -398,4 +437,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: -6px; + z-index: 11; + .label { + position: absolute; + top: 6px; + font-size: 20px; + // line-height: 5px; + cursor: pointer; + color: #000; + transform: rotate(-90deg); + } + .checkbox-group { + width: 160px; + height: 300px; + 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> -- Gitblit v1.8.0