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

* revert: 回滚表格自定义列功能 * fix: 优化写法 Co-authored-by: Orange <orangemtony@gmail.com>
2025-09-25 06:19:51 +00:00 · 2021-01-20 17:12:04 +08:00
parent f58e37a76a
commit cf810b3d3e
10 changed files with 27 additions and 253 deletions
--- a/src/components/ActionsGroup/index.vue
+++ b/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>
--- a/src/components/AutoDataTable/index.vue
+++ b/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]
--- a/src/components/ListTable/TableAction/ColumnSettingPopover.vue
+++ b/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>
--- a/src/components/ListTable/TableAction/RightSide.vue
+++ b/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,
-    ColumnSettingPopover
+    ImExportDialog
  },
  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 }
--- a/src/components/ListTable/index.vue
+++ b/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)
-    },
-    defaultColumn() {
-      return _.get(this.headerActions, 'defaultColumn', [])
-    },
-    currentColumnSetting() {
-      return _.get(this.tableColConfig, this.$route.name, this.defaultColumn || [])
-    },
-    ...mapGetters({
-      tableColConfig: 'tableConfig'
-    })
+      return config
+    }
  },
  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
    },
--- a/src/userviews/assets/index.vue
+++ b/src/userviews/assets/index.vue
@@ -151,9 +151,7 @@ export default {
        hasExport: false,
        hasImport: false,
        hasLeftActions: false,
-        hasSearch: true,
-        hasColumnSetting: true,
-        defaultColumn: ['hostname', 'ip', 'SystemUsers', 'comment', 'id']
+        hasSearch: true
      }
    }
  },
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -98,40 +98,24 @@ export default {
        url: '/api/v1/assets/assets/',
        hasTree: true,
        columns: [
-          {
-            prop: 'hostname',
+          'hostname', 'ip', 'hardware_info', 'connectivity', 'actions'
+        ],
+        columnsMeta: {
+          hostname: {
            formatter: DetailFormatter,
-            label: this.$t('assets.Hostname'),
            formatterArgs: {
              route: 'AssetDetail'
            },
            showOverflowTooltip: true
          },
-          {
-            prop: 'ip',
+          ip: {
            sortable: 'custom',
-            label: `IP`,
            width: '140px'
          },
-          {
-            prop: 'domain_display',
-            label: this.$t('assets.Domain')
-          },
-          {
-            prop: 'hardware_info',
-            label: this.$t('assets.HardwareInfo'),
+          hardware_info: {
            showOverflowTooltip: true
          },
-          {
-            prop: 'public_ip',
-            label: this.$t('assets.PublicIp')
-          },
-          {
-            prop: 'platform',
-            label: this.$t('assets.Platform')
-          },
-          {
-            prop: 'connectivity',
+          connectivity: {
            label: this.$t('assets.Reachable'),
            formatter: BooleanFormatter,
            formatterArgs: {
@@ -148,11 +132,8 @@ export default {
            width: '90px',
            align: 'center'
          },
-          {
-            prop: 'actions',
+          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
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/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: [
-          {
-            prop: 'name',
-            label: this.$t('assets.Name'),
-            sortable: 'custom',
-            formatter: DetailFormatter,
+        columns: ['name', 'username', 'protocol', 'login_mode', 'assets_amount', 'comment', 'actions'],
+        columnsMeta: {
+          username: {
            showOverflowTooltip: true
          },
-          {
-            prop: 'username',
-            label: this.$t('assets.Username')
+          protocol: {
+            width: '100px'
          },
-          {
-            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',
+          login_mode: {
            width: '120px'
          },
-          {
-            prop: 'assets_amount',
-            label: this.$t('setting.AssetCount'),
+          assets_amount: {
            width: '80px'
          },
-          {
-            prop: 'comment',
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'actions',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: '150px',
-            formatter: ActionsFormatter,
+          actions: {
            formatterArgs: {
              hasClone: true
            }
          }
-        ]
+        }
      },
      headerActions: {
        hasMoreActions: false,
-        hasColumnSetting: true,
-        defaultColumn: ['name', 'username', 'protocol', 'assets_amount', 'comment', 'actions'],
        createRoute: 'SystemUserCreate'
      },
      helpMessage: this.$t('assets.SystemUserListHelpMessage')
--- a/src/views/sessions/CommandStorageCreateUpdate.vue
+++ b/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>
--- a/src/views/sessions/ReplayStorageCreateUpdate.vue
+++ b/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"
    />