diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue index d4a15f5..8a5b246 100644 --- a/src/components/XyTable/index.vue +++ b/src/components/XyTable/index.vue @@ -147,9 +147,17 @@ export default { return { width: "100%", marginBottom: "20px" }; }, }, + btnToMore: { + type: Boolean, + default: false + }, + moreAuths: { + type: Array, + default: () => ['edit','delete'] + }, btnWidth: { type: Number, - default: 140, + default: 220, }, // 分页相关 @@ -204,10 +212,9 @@ export default { return metrics.width; }, initLoad() { + if (this.height) return; let clientHeight = document.documentElement.clientHeight; - let lxheader = document - .querySelector(".v-header") - .getBoundingClientRect(); + let lxheader = document.querySelector(".v-header")?.getBoundingClientRect(); let lxHeader_height = lxheader.height + 25; //查询 头部 let paginationHeight = 37; //分页的高度 let topHeight = 50; //页面 头部 @@ -242,6 +249,7 @@ export default { .then((res) => { this.listData = this.getByStrkey(res.data, this.resProp); this.totalData = res.data.total; + this.$emit('loaded') setTimeout(() => { this.loading = false; @@ -261,6 +269,7 @@ export default { .then((res) => { this.listData = this.getByStrkey(res, this.resProp); this.totalData = res.total; + this.$emit('loaded') setTimeout(() => { this.loading = false; @@ -368,7 +377,7 @@ export default { this.$refs.table.toggleRowExpansion(row, expanded); }, setCurrentRow(row) { - this.$refs.table.toggleRowExpansion(row); + this.$refs.table.setCurrentRow(row); }, clearSort() { this.$refs.table.clearSort(); @@ -385,6 +394,9 @@ export default { getSelection(){ return this.$refs.table?.store?.states?.selection ?? [] }, + getListData () { + return this.listData + }, //table通讯事件 delete(row, type) { @@ -444,6 +456,7 @@ export default { expandChange(row, expanded) { this.$emit("expand-change", row, expanded); }, + deleteClick(row) { this.$emit("delete", row); if (this.destroyAction) { @@ -571,12 +584,68 @@ export default { let _this = this; if (_this.auths?.length > 0) { let btns = new Map(); + btns.set( + "more", + { + if (command === 'edit') { + this.editorClick(scope.row) + } + else if (command === 'delete') { + let that = this + this.$confirm("确认删除吗?",{ + beforeClose(action,instance,done){ + if (action === 'confirm') { + that.deleteClick(scope.row); + done(); + } else { + done(); + } + } + }).then(res => { + this.$message({ + type: 'success', + message: '删除成功' + }) + this.load() + }) + } else { + this.$emit(command, scope.row) + } + } + }}> + + 更多 + + + + { + (() => { + let dom = []; + + this.moreAuths.forEach(i => { + this.$scopedSlots[i] ? dom.push(({ this.$scopedSlots[i](scope) })) : '' + }) + + if (this.auths.indexOf('edit') !== -1) { + dom.push(编辑) + } + if (this.auths.indexOf('delete') !== -1) { + dom.push(删除) + } + return dom; + })() + } + + + ) btns.set( "detail", _this.editorClick(scope.row, "edit")} @@ -673,17 +739,25 @@ export default { "flex-wrap": "wrap", }} > - {_this.auths.map((item, index) => { - if (_this.$scopedSlots[item]) { - flag = index; - return _this.$scopedSlots[item](scope, item, index); - } else { - if (btns.get(item)) { + { (() => { + let dom = []; + _this.auths.forEach((item, index) => { + if (this.btnToMore && _this.moreAuths.find(j => j === item)) return + if (_this.$scopedSlots[item]) { flag = index; - return btns.get(item); + dom.push(_this.$scopedSlots[item](scope, item, index)); + } else { + if (btns.get(item)) { + flag = index; + dom.push(btns.get(item)); + } } - } - })} + }) + + this.btnToMore? dom.push(btns.get('more')) : '' + + return dom; + })() } ); return { dom, flag }; @@ -711,7 +785,7 @@ export default { } },{ deep: true, - immediate: false + immediate: true }) } else { if(this.action) this.getTableData(); @@ -829,68 +903,68 @@ export default { scopedSlots={ item.customFn || item.type === "expand" ? { - default(scope) { - if (item.type === "expand") { - return item.expandFn(scope); - } - if (item.customFn) { - return item.customFn(scope.row, scope); - } - }, - } + default(scope) { + if (item.type === "expand") { + return item.expandFn(scope); + } + if (item.customFn) { + return item.customFn(scope.row, scope); + } + }, + } : "" } > {item.multiHd ? item.multiHd.map((item1, index1) => { - return ( - - ); - }) + return ( + + ); + }) : ""} ); @@ -921,6 +995,7 @@ export default { ::v-deep .el-table { margin-bottom: 0 !important; + } .xy-table__setting { font-size: 14px; @@ -933,6 +1008,7 @@ export default { .xy-table__page { display: flex; justify-content: right; + align-items: center; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background: rgba(140, 140, 140, 0.6); @@ -1013,7 +1089,7 @@ export default { clip-path: polygon(0 30%, 100% 30%, 100% 100%, 0 100%); background: rgba(140, 140, 140, 0.7); transform: scale(0.8, 0.8) translateX(-22px) translateY(-10px) - rotate(-90deg); + rotate(-90deg); } } } @@ -1055,4 +1131,8 @@ export default { opacity: 1; } } + +Button + Button { + margin-left: 6px; +} diff --git a/src/views/component/dialog.vue b/src/views/component/dialog.vue index cede370..ff656e4 100644 --- a/src/views/component/dialog.vue +++ b/src/views/component/dialog.vue @@ -1,9 +1,10 @@