feat: 新增自定义 table 的 Dialog 中全选功能

src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue

@@ -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
     }
   }
 }

src/components/Table/AutoDataTable/index.vue

@@ -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'))
         : {}