revert: 回滚表格自定义列功能 (#594)

* revert: 回滚表格自定义列功能

* fix: 优化写法

Co-authored-by: Orange <orangemtony@gmail.com>

src/components/ActionsGroup/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="grouped ? 'el-button-group' : ''">
     <el-button v-for="item in iActions" :key="item.name" :size="size" v-bind="item" @click="handleClick(item.name)">
-      <el-tooltip v-if="['actionExport', 'actionImport', 'actionRefresh','actionColumnSetting'].indexOf(item.name) !== -1" effect="dark" :content="item.tip" placement="top">
+      <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
         <i v-if="item.fa" :class="'fa ' + item.fa" />{{ item.title }}
       </el-tooltip>
       <span v-else>

src/components/AutoDataTable/index.vue

@@ -178,7 +178,6 @@ export default {
       }
       config.columns = columns
       this.iConfig = config
-      this.$eventBus.$emit('columnsChange', config)
     },
     filterChange(filters) {
       const key = Object.keys(filters)[0]

src/components/ListTable/TableAction/ColumnSettingPopover.vue

@@ -1,94 +0,0 @@
-<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="columnList"
-    >
-      <el-row>
-        <el-col
-          v-for="item in totalColumns"
-          :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 { mapGetters } from 'vuex'
-import Dialog from '@/components/Dialog/index'
-
-export default {
-  name: 'ColumnSettingPopover',
-  components: {
-    Dialog
-
-  },
-  props: {
-    totalColumns: {
-      type: Array,
-      default: () => []
-    },
-    defaultColumn: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      showColumnSettingPopover: false,
-      columnList: []
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'tableConfig'
-    ])
-  },
-  mounted() {
-    this.$eventBus.$on('showColumnSettingPopover', () => {
-      this.showColumnSettingPopover = true
-    })
-    this.columnList = _.get(this.tableConfig, this.$route.name, this.defaultColumn || [])
-  },
-  methods: {
-    handleColumnConfirm() {
-      const ACTIVE_COLUMN_KEY = this.$route.name
-      this.$store.commit('table/SET_TABLE_CONFIG',
-        {
-          key: ACTIVE_COLUMN_KEY,
-          value: this.columnList
-        }
-      )
-      this.showColumnSettingPopover = false
-    }
-  }
-
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>

src/components/ListTable/TableAction/RightSide.vue

@@ -2,25 +2,21 @@
   <div>
     <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" />
     <ImExportDialog :selected-rows="selectedRows" :url="tableUrl" v-bind="$attrs" />
-    <ColumnSettingPopover v-bind="$attrs" />
   </div>
 </template>
 
 <script>
 import ActionsGroup from '@/components/ActionsGroup'
 import ImExportDialog from './ImExportDialog'
-import ColumnSettingPopover from './ColumnSettingPopover'
 import { cleanActions } from './utils'
 
 const defaultTrue = { type: Boolean, default: true }
-const defaultFalse = { type: Boolean, default: false }
 
 export default {
   name: 'RightSide',
   components: {
     ActionsGroup,
-    ImExportDialog,
+    ImExportDialog
-    ColumnSettingPopover
   },
   props: {
     tableUrl: {
@@ -41,13 +37,6 @@ export default {
         this.$eventBus.$emit('showImportDialog', { selectedRows })
       }
     },
-    hasColumnSetting: defaultFalse,
-    handleColumnConfig: {
-      type: Function,
-      default: function({ selectedRows }) {
-        this.$eventBus.$emit('showColumnSettingPopover')
-      }
-    },
     hasRefresh: defaultTrue,
     selectedRows: {
       type: Array,
@@ -65,7 +54,6 @@ 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 }

src/components/ListTable/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="iHeaderActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
+    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
       <AutoDataTable ref="dataTable" :filter-table="filter" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
@@ -13,7 +13,7 @@ import IBox from '../IBox'
 import TableAction from './TableAction'
 import Emitter from '@/mixins/emitter'
 import deepmerge from 'deepmerge'
-import { mapGetters } from 'vuex'
+
 export default {
   name: 'ListTable',
   components: {
@@ -57,40 +57,12 @@ export default {
       }
       return true
     },
-    hasCloneAction() {
-      const hasClone = _.get(this.tableConfig, 'columnsMeta.actions.formatterArgs.hasClone', null)
-      if (hasClone) {
-        return true
-      }
-      if (this.hasCreateAction && hasClone == null) {
-        return true
-      }
-      return false
-    },
-    iHeaderActions() {
-      const config = this.headerActions
-      const hasColumnSetting = _.get(this.headerActions, 'hasColumnSetting', false)
-      if (hasColumnSetting) {
-        config.totalColumns = this.tableConfig.columns
-      }
-      return config
-    },
     iTableConfig() {
       const config = deepmerge(this.tableConfig, { extraQuery: this.extraQuery })
       this.$log.debug('Header actions', this.headerActions)
-      _.set(config, 'columnsMeta.actions.formatterArgs.hasClone', this.hasCloneAction)
       this.$log.debug('ListTable: iTableConfig change', config)
-      return this.getActiveColumns(config)
+      return config
-    },
+    }
-    defaultColumn() {
-      return _.get(this.headerActions, 'defaultColumn', [])
-    },
-    currentColumnSetting() {
-      return _.get(this.tableColConfig, this.$route.name, this.defaultColumn || [])
-    },
-    ...mapGetters({
-      tableColConfig: 'tableConfig'
-    })
   },
   watch: {
     extraQuery: {
@@ -107,20 +79,6 @@ export default {
     }
   },
   methods: {
-    getActiveColumns(config) {
-      const hasColumnSetting = _.get(this.headerActions, 'hasColumnSetting', false)
-      if (hasColumnSetting) {
-        const currentColumnSetting = this.currentColumnSetting
-        const currentColumn = []
-        config.columns.forEach((v, k) => {
-          if (currentColumnSetting.indexOf(v.prop) !== -1 || v.prop === 'id') {
-            currentColumn.push(config.columns[k])
-          }
-        })
-        config.columns = currentColumn
-      }
-      return config
-    },
     handleSelectionChange(val) {
       this.selectedRows = val
     },

src/userviews/assets/index.vue

@@ -151,9 +151,7 @@ export default {
         hasExport: false,
         hasImport: false,
         hasLeftActions: false,
-        hasSearch: true,
+        hasSearch: true
-        hasColumnSetting: true,
-        defaultColumn: ['hostname', 'ip', 'SystemUsers', 'comment', 'id']
       }
     }
   },

src/views/assets/Asset/AssetList.vue

@@ -98,40 +98,24 @@ export default {
         url: '/api/v1/assets/assets/',
         hasTree: true,
         columns: [
-          {
+          'hostname', 'ip', 'hardware_info', 'connectivity', 'actions'
-            prop: 'hostname',
+        ],
+        columnsMeta: {
+          hostname: {
             formatter: DetailFormatter,
-            label: this.$t('assets.Hostname'),
             formatterArgs: {
               route: 'AssetDetail'
             },
             showOverflowTooltip: true
           },
-          {
+          ip: {
-            prop: 'ip',
             sortable: 'custom',
-            label: `IP`,
             width: '140px'
           },
-          {
+          hardware_info: {
-            prop: 'domain_display',
-            label: this.$t('assets.Domain')
-          },
-          {
-            prop: 'hardware_info',
-            label: this.$t('assets.HardwareInfo'),
             showOverflowTooltip: true
           },
-          {
+          connectivity: {
-            prop: 'public_ip',
-            label: this.$t('assets.PublicIp')
-          },
-          {
-            prop: 'platform',
-            label: this.$t('assets.Platform')
-          },
-          {
-            prop: 'connectivity',
             label: this.$t('assets.Reachable'),
             formatter: BooleanFormatter,
             formatterArgs: {
@@ -148,11 +132,8 @@ export default {
             width: '90px',
             align: 'center'
           },
-          {
+          actions: {
-            prop: 'actions',
             formatter: ActionsFormatter,
-            label: this.$t('common.Actions'),
-            width: '140px',
             formatterArgs: {
               hasClone: true,
               performDelete: ({ row, col }) => {
@@ -172,11 +153,9 @@ export default {
               ]
             }
           }
-        ]
+        }
       },
       headerActions: {
-        hasColumnSetting: true,
-        defaultColumn: ['hostname', 'ip', 'hardware_info', 'connectivity', 'actions'],
         createRoute: {
           name: 'AssetCreate',
           query: this.$route.query

src/views/assets/SystemUser/SystemUserList.vue

@@ -4,7 +4,6 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { ActionsFormatter, DetailFormatter } from '@/components/ListTable/formatters'
 
 export default {
   components: {
@@ -14,84 +13,29 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/assets/system-users/',
-        columns: [
+        columns: ['name', 'username', 'protocol', 'login_mode', 'assets_amount', 'comment', 'actions'],
-          {
+        columnsMeta: {
-            prop: 'name',
+          username: {
-            label: this.$t('assets.Name'),
-            sortable: 'custom',
-            formatter: DetailFormatter,
             showOverflowTooltip: true
           },
-          {
+          protocol: {
-            prop: 'username',
+            width: '100px'
-            label: this.$t('assets.Username')
           },
-          {
+          login_mode: {
-            prop: 'protocol',
-            label: this.$t('assets.Protocol'),
-            width: '100px',
-            'column-key': `protocol`,
-            filters: [
-              {
-                'value': 'ssh',
-                'text': 'ssh'
-              }, {
-                'value': 'rdp',
-                'text': 'rdp'
-              }, {
-                'value': 'telnet',
-                'text': 'telnet'
-              }, {
-                'value': 'vnc',
-                'text': 'vnc'
-              }, {
-                'value': 'mysql',
-                'text': 'mysql'
-              }, {
-                'value': 'oracle',
-                'text': 'oracle'
-              }, {
-                'value': 'mariadb',
-                'text': 'mariadb'
-              }, {
-                'value': 'postgresql',
-                'text': 'postgresql'
-              }, {
-                'value': 'k8s',
-                'text': 'k8s'
-              }]
-          },
-          {
-            prop: 'login_mode',
-            label: this.$t('assets.LoginModel'),
-            sortable: 'custom',
             width: '120px'
           },
-          {
+          assets_amount: {
-            prop: 'assets_amount',
-            label: this.$t('setting.AssetCount'),
             width: '80px'
           },
-          {
+          actions: {
-            prop: 'comment',
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'actions',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: '150px',
-            formatter: ActionsFormatter,
             formatterArgs: {
               hasClone: true
             }
           }
-        ]
+        }
       },
       headerActions: {
         hasMoreActions: false,
-        hasColumnSetting: true,
-        defaultColumn: ['name', 'username', 'protocol', 'assets_amount', 'comment', 'actions'],
         createRoute: 'SystemUserCreate'
       },
       helpMessage: this.$t('assets.SystemUserListHelpMessage')

src/views/sessions/CommandStorageCreateUpdate.vue

@@ -8,6 +8,7 @@
       :create-success-next-route="successUrl"
       :clean-form-value="cleanFormValue"
       :object="formData"
+      :has-detail-in-msg="false"
       :fields-meta="fieldsMeta"
     />
   </div>

src/views/sessions/ReplayStorageCreateUpdate.vue

@@ -7,6 +7,7 @@
       :create-success-next-route="successUrl"
       :clean-form-value="cleanFormValue"
       :object="formData"
+      :has-detail-in-msg="false"
       :initial="initial"
       :fields-meta="fieldsMetas"
     />