mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-14 22:29:36 +00:00
feat: 新增自定义 table 的 Dialog 中全选功能
This commit is contained in:
@@ -10,10 +10,15 @@
|
||||
@cancel="restoreDefault()"
|
||||
@confirm="handleColumnConfirm()"
|
||||
>
|
||||
<label>{{ this.$t('TableColSetting') }}</label>
|
||||
<el-col style="margin-bottom: 5px">
|
||||
<label>{{ this.$t('TableColSetting') }}</label>
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" style="float: right" @change="handleCheckAllChange">全选</el-checkbox>
|
||||
</el-col>
|
||||
|
||||
<el-checkbox-group
|
||||
v-model="iCurrentColumns"
|
||||
class="column-setting"
|
||||
@change="handleCheckedChange"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
@@ -55,6 +60,10 @@ export default {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultColumns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
@@ -62,16 +71,34 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
showColumnSettingPopover: false,
|
||||
iCurrentColumns: ''
|
||||
iCurrentColumns: '',
|
||||
isIndeterminate: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentColumns: {
|
||||
handler(val) {
|
||||
this.iCurrentColumns = val
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$eventBus.$on('showColumnSettingPopover', ({ url }) => {
|
||||
if (url === this.url) {
|
||||
this.checkAll = false
|
||||
this.showColumnSettingPopover = true
|
||||
this.iCurrentColumns = this.currentColumns
|
||||
}
|
||||
|
||||
if (this.iCurrentColumns.length === this.totalColumnsList.length) {
|
||||
this.checkAll = true
|
||||
this.isIndeterminate = false
|
||||
} else {
|
||||
this.checkAll = false
|
||||
this.isIndeterminate = true
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@@ -82,6 +109,22 @@ export default {
|
||||
restoreDefault() {
|
||||
this.showColumnSettingPopover = false
|
||||
this.$emit('columnsUpdate', { columns: null, url: this.url })
|
||||
},
|
||||
handleCheckAllChange(value) {
|
||||
if (value) {
|
||||
this.iCurrentColumns = this.totalColumnsList.reduce((prev, item) => {
|
||||
return [...prev, (item.prop)]
|
||||
}, [])
|
||||
this.isIndeterminate = false
|
||||
} else {
|
||||
this.iCurrentColumns = this.defaultColumns
|
||||
this.isIndeterminate = true
|
||||
}
|
||||
},
|
||||
handleCheckedChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.totalColumnsList.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.totalColumnsList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -13,6 +13,7 @@
|
||||
:current-columns="popoverColumns.currentCols"
|
||||
:min-columns="popoverColumns.minCols"
|
||||
:total-columns-list="popoverColumns.totalColumnsList"
|
||||
:default-columns="popoverColumns.defaultCols"
|
||||
:url="config.url"
|
||||
@columnsUpdate="handlePopoverColumnsChange"
|
||||
/>
|
||||
@@ -58,7 +59,8 @@ export default {
|
||||
popoverColumns: {
|
||||
totalColumnsList: [],
|
||||
minCols: [],
|
||||
currentCols: []
|
||||
currentCols: [],
|
||||
defaultCols: []
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -426,6 +428,8 @@ export default {
|
||||
})
|
||||
this.popoverColumns.currentCols = this.cleanedColumnsShow.show
|
||||
this.popoverColumns.minCols = this.cleanedColumnsShow.min
|
||||
this.popoverColumns.defaultCols = this.cleanedColumnsShow.default
|
||||
|
||||
this.$log.debug('Popover cols: ', this.popoverColumns)
|
||||
},
|
||||
handlePopoverColumnsChange({ columns, url }) {
|
||||
@@ -434,6 +438,7 @@ export default {
|
||||
columns = this.cleanedColumnsShow.default
|
||||
}
|
||||
this.popoverColumns.currentCols = columns
|
||||
|
||||
const _tableConfig = localStorage.getItem('tableConfig')
|
||||
? JSON.parse(localStorage.getItem('tableConfig'))
|
||||
: {}
|
||||
|
Reference in New Issue
Block a user