diff --git a/src/assets/css/components/components/table/common.scss b/src/assets/css/components/components/table/common.scss index b208219d..592aacac 100644 --- a/src/assets/css/components/components/table/common.scss +++ b/src/assets/css/components/components/table/common.scss @@ -1,5 +1,5 @@ .pop-custom { - padding: 0 12px 12px 12px; + padding: 12px; border: 1px solid #EBEEF5; position: absolute; top: 55px; @@ -103,3 +103,54 @@ border-radius: 2px 0px 0px 2px; } } + +.list { + list-style: none; + padding-inline-start: 0 !important; + max-height: 358px !important; + overflow: auto; + margin: 0 0; + + .drag-move { + transition: transform 0.3s; + } + + .list-item:last-child { + margin-bottom: 6px; + } + + .list-item { + width: 100%; + color: #575757; + margin-bottom: 0; + height: 24px; + line-height: 24px; + text-align: left; + font-weight: 400; + font-size: 12px; + + .icon-drag { + cursor: move; + margin-left: 6px; + margin-right: 3px; + } + + .el-checkbox__input.is-checked .el-checkbox__inner { + background-color: #38ACD2; + border-color: #38ACD2; + border-radius: 2px; + } + + .el-checkbox__input .el-checkbox__inner { + background-color: #F2F7F9; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 2px; + } + + .el-checkbox__input.is-checked + .el-checkbox__label, .el-checkbox__input + .el-checkbox__label { + font-size: 12px; + color: #575757; + font-weight: 400; + } + } +} diff --git a/src/components/table/ColumnCustomize.vue b/src/components/table/ColumnCustomize.vue index 7a423863..adffae58 100644 --- a/src/components/table/ColumnCustomize.vue +++ b/src/components/table/ColumnCustomize.vue @@ -1,39 +1,59 @@ @@ -48,7 +68,10 @@ export default { }, data () { return { - custom: [] + custom: [], + dragIndex: -1, + selectList: [], + lastIndex: -1 } }, created () { @@ -63,10 +86,44 @@ export default { deep: true, handler (n) { this.custom = JSON.parse(JSON.stringify(n)) + this.selectList = this.custom.filter(item => item.show) } } }, methods: { + tabChange () { + this.selectList = this.custom.filter(item => item.show) + // 最少保留一个选项 + if (this.selectList.length === 1) { + let index = -1 + this.custom.find((item, i) => { + index = i + return item.prop === this.selectList[0].prop + }) + this.lastIndex = index + this.custom[index].disabled = true + } else if (this.lastIndex > -1) { + this.custom[this.lastIndex].disabled = false + this.lastIndex = -1 + } + this.save() + }, + dragstart (index) { + this.dragIndex = index + }, + dragenter (e, index) { + e.preventDefault() + if (this.dragIndex !== index) { + const moving = this.custom[this.dragIndex] + this.custom.splice(this.dragIndex, 1) + this.custom.splice(index, 0, moving) + this.dragIndex = index + this.save() + } + }, + dragover (e) { + e.preventDefault() + }, // 悬浮点击空白隐藏 esc () { this.$emit('close') @@ -94,9 +151,8 @@ export default { // 点击第二个cancel save () { this.$emit('update', this.custom) - localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, - JSON.stringify(this.custom)) - this.esc() + localStorage.setItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId, JSON.stringify(this.custom)) + // this.esc() } }, computed: { diff --git a/src/components/table/administration/OperationLogTable.vue b/src/components/table/administration/OperationLogTable.vue index 9e851049..fd5a338b 100644 --- a/src/components/table/administration/OperationLogTable.vue +++ b/src/components/table/administration/OperationLogTable.vue @@ -18,8 +18,8 @@ width="55"> 0) { + if (n[0].flag === 'drag') { + // 重新渲染，会导致界面偶现闪的情况，点击checkbox时界面闪会比较丑，故不处理点击的情况 + this.isRefresh = false + this.$nextTick(() => { + this.isRefresh = true + }) + } + } } } } diff --git a/src/components/table/administration/UserTable.vue b/src/components/table/administration/UserTable.vue index 1fc1e4ae..cea8a368 100644 --- a/src/components/table/administration/UserTable.vue +++ b/src/components/table/administration/UserTable.vue @@ -17,8 +17,8 @@ width="55"> {{scope.row[item.prop]}} diff --git a/src/mixins/data-list.js b/src/mixins/data-list.js index 065f28a9..ac873661 100644 --- a/src/mixins/data-list.js +++ b/src/mixins/data-list.js @@ -416,12 +416,24 @@ export default { } let localStorageTableTitle = localStorage.getItem(storageKey.tableTitle + '-' + localStorage.getItem(storageKey.username) + '-' + this.tableId) localStorageTableTitle = localStorageTableTitle ? JSON.parse(localStorageTableTitle) : this.$refs.dataTable.tableTitle - this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题 - if (localStorageTableTitle[index]) { - item.show = localStorageTableTitle[index].show + // this.tools.customTableTitle = this.$refs.dataTable.tableTitle.map((item, index) => { // 修复切换中英文的问题 + // if (localStorageTableTitle[index]) { + // item.show = localStorageTableTitle[index].show + // } + // return item + // }) + + // 不够优美，后续修改 + // 为了避免缓存里的label在切换中英文时不一致，因为在拖拽后，键值不一致了，故根据prop匹配来修改label + for (let i = 0; i < localStorageTableTitle.length; i++) { + for (let j = 0; j < this.tools.customTableTitle.length; j++) { + if (localStorageTableTitle[i].prop === this.tools.customTableTitle.prop) { + localStorageTableTitle[i].label = this.tools.customTableTitle.label + break + } } - return item - }) + } + this.tools.customTableTitle = localStorageTableTitle if (localStorageTableTitle && (localStorageTableTitle.length > this.$refs.dataTable.tableTitle.length)) { const arr = localStorageTableTitle.splice(this.$refs.dataTable.tableTitle.length, localStorageTableTitle.length) this.tools.customTableTitle = this.tools.customTableTitle.concat(arr)