feat: 添加自定义表格列功能

src/components/AutoDataTable/components/ColumnSettingPopover.vue

@@ -0,0 +1,77 @@
+<template>
+  <Dialog
+    v-if="showColumnSettingPopover"
+    :title="$t('common.CustomCol')"
+    :visible.sync="showColumnSettingPopover"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    width="35%"
+    top="10%"
+    @confirm="handleColumnConfirm()"
+  >
+    <el-alert type="success">
+      {{ this.$t('common.TableColSettingInfo') }}
+    </el-alert>
+    <el-checkbox-group
+      v-model="iCurrentColumns"
+    >
+      <el-row>
+        <el-col
+          v-for="item in totalColumnsList"
+          :key="item.prop"
+          :span="8"
+          style="margin-top:5px;"
+        >
+          <el-checkbox
+            :label="item.prop"
+            :disabled="item.prop==='id' ||item.prop==='actions' "
+          >
+            {{ item.label }}
+          </el-checkbox>
+        </el-col>
+      </el-row>
+
+    </el-checkbox-group>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index'
+export default {
+  name: 'ColumnSettingPopover',
+  components: {
+    Dialog
+  },
+  props: {
+    totalColumnsList: {
+      type: Array,
+      default: () => []
+    },
+    currentColumns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      showColumnSettingPopover: false,
+      iCurrentColumns: ''
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('showColumnSettingPopover', () => {
+      this.showColumnSettingPopover = true
+      this.iCurrentColumns = this.currentColumns
+    })
+  },
+  methods: {
+    handleColumnConfirm() {
+      this.showColumnSettingPopover = false
+      this.$emit('columnsUpdate', this.iCurrentColumns)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+</style>

src/components/AutoDataTable/index.vue

@@ -1,15 +1,24 @@
 <template>
-  <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" @filter-change="filterChange" />
+  <div>
+    <DataTable v-if="!loading" ref="dataTable" v-loading="loading" :config="iConfig" v-bind="$attrs" v-on="$listeners" @filter-change="filterChange" />
+    <ColumnSettingPopover
+      :current-columns="currentColumns"
+      :total-columns-list="totalColumnsList"
+      @columnsUpdate="handleColumnsChange"
+    />
+  </div>
 </template>
 
 <script type="text/jsx">
 import DataTable from '../DataTable'
 import { DateFormatter, DetailFormatter, DisplayFormatter, BooleanFormatter, ActionsFormatter } from '@/components/ListTable/formatters'
 import i18n from '@/i18n/i18n'
+import ColumnSettingPopover from './components/ColumnSettingPopover'
 export default {
   name: 'AutoDataTable',
   components: {
-    DataTable
+    DataTable,
+    ColumnSettingPopover
   },
   props: {
     config: {
@@ -27,7 +36,18 @@ export default {
       method: 'get',
       autoConfig: {},
       iConfig: {},
-      meta: {}
+      meta: {},
+      totalColumns: [],
+      currentColumns: [],
+      defaultColumns: [],
+      totalColumnsList: []
+    }
+  },
+  computed: {
+    tableConfig() {
+      return sessionStorage.getItem('tableConfig')
+        ? JSON.parse(sessionStorage.getItem('tableConfig'))
+        : {}
     }
   },
   watch: {
@@ -48,6 +68,10 @@ export default {
       this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
         this.meta = data.actions[this.method.toUpperCase()] || {}
         this.generateColumns()
+      }).then(() => {
+        this.generateDefaultColumns()
+      }).then(() => {
+        this.generateCurrentColumns(this.currentColumns)
       }).catch((error) => {
         this.$log.error('Error occur: ', error)
       }).finally(() => {
@@ -176,9 +200,48 @@ export default {
           columns.push(col)
         }
       }
+      // 第一次初始化时记录 totalColumns
+      this.totalColumns = columns
       config.columns = columns
       this.iConfig = config
     },
+    generateCurrentColumns(col) {
+      const currentColumns = []
+      this.totalColumns.forEach((v, k) => {
+        if (col.indexOf(v.prop) !== -1 ||
+          v.prop === 'id') {
+          currentColumns.push(this.totalColumns[k])
+        }
+      })
+      this.iConfig.columns = currentColumns
+    },
+    generateDefaultColumns() {
+      let defaultColumns = []
+      const totalColumnsList = []
+
+      this.totalColumns.forEach((v, k) => {
+        if (!this.iConfig.defaultColumns) {
+          defaultColumns.push(v.prop)
+        } else {
+          defaultColumns = this.iConfig.defaultColumns
+        }
+        totalColumnsList.push({
+          prop: v.prop,
+          label: v.label
+        })
+      })
+      this.defaultColumns = defaultColumns
+      this.totalColumnsList = totalColumnsList
+      this.currentColumns = _.get(this.tableConfig[this.$route.name], 'currentColumns', this.defaultColumns)
+    },
+    handleColumnsChange(val) {
+      this.currentColumns = val
+      this.tableConfig[this.$route.name] = {
+        'currentColumns': val
+      }
+      sessionStorage.setItem('tableConfig', JSON.stringify(this.tableConfig))
+      this.generateCurrentColumns(val)
+    },
     filterChange(filters) {
       const key = Object.keys(filters)[0]
       const attr = {}

src/components/ListTable/TableAction/RightSide.vue

@@ -37,6 +37,13 @@ export default {
         this.$eventBus.$emit('showImportDialog', { selectedRows })
       }
     },
+    hasColumnSetting: defaultTrue,
+    handleColumnConfig: {
+      type: Function,
+      default: function() {
+        this.$eventBus.$emit('showColumnSettingPopover')
+      }
+    },
     hasRefresh: defaultTrue,
     selectedRows: {
       type: Array,
@@ -54,6 +61,7 @@ export default {
   data() {
     return {
       defaultRightSideActions: [
+        { name: 'actionColumnSetting', fa: 'fa-cog', tip: this.$t('common.CustomCol'), has: this.hasColumnSetting, callback: this.handleColumnConfig.bind(this) },
         { name: 'actionExport', fa: 'fa-download', tip: this.$t('common.Export'), has: this.hasExport, callback: this.handleExport.bind(this) },
         { name: 'actionImport', fa: 'fa-upload', tip: this.$t('common.Import'), has: this.hasImport, callback: this.handleImport.bind(this) },
         { name: 'actionRefresh', fa: 'fa-refresh', tip: this.$t('common.Refresh'), has: this.hasRefresh, callback: this.handleRefresh }