From 06d6c54db81c1ae1c28c722ecacbe57ddfb91d82 Mon Sep 17 00:00:00 2001
From: Orange <orangemtony@gmail.com>
Date: Thu, 10 Dec 2020 14:26:17 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TableAction/ColumnSettingPopover.vue      | 81 +++++++++++++++++++
 .../ListTable/TableAction/RightSide.vue       | 14 +++-
 src/components/ListTable/index.vue            | 35 +++++++-
 src/i18n/langs/cn.json                        |  1 +
 src/i18n/langs/en.json                        |  1 +
 src/store/getters.js                          |  3 +-
 src/store/modules/table.js                    | 27 +++++++
 src/store/modules/users.js                    |  1 -
 .../assets/SystemUser/SystemUserList.vue      |  2 +
 9 files changed, 159 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ListTable/TableAction/ColumnSettingPopover.vue
 create mode 100644 src/store/modules/table.js

diff --git a/src/components/ListTable/TableAction/ColumnSettingPopover.vue b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
new file mode 100644
index 000000000..5f55361bf
--- /dev/null
+++ b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
@@ -0,0 +1,81 @@
+<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-checkbox-group v-model="columnList">
+      <el-checkbox
+        v-for="item in totalColumns"
+        :key="item.prop"
+        :label="item.prop"
+        :disabled="item.prop==='id'"
+      >
+        {{ item.label }}
+      </el-checkbox>
+    </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>
diff --git a/src/components/ListTable/TableAction/RightSide.vue b/src/components/ListTable/TableAction/RightSide.vue
index dd81c40b7..7497cca70 100644
--- a/src/components/ListTable/TableAction/RightSide.vue
+++ b/src/components/ListTable/TableAction/RightSide.vue
@@ -2,21 +2,25 @@
   <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: {
@@ -37,6 +41,13 @@ export default {
         this.$eventBus.$emit('showImportDialog', { selectedRows })
       }
     },
+    hasColumnSetting: defaultFalse,
+    handleColumnConfig: {
+      type: Function,
+      default: function({ selectedRows }) {
+        this.$eventBus.$emit('showColumnSettingPopover')
+      }
+    },
     hasRefresh: defaultTrue,
     selectedRows: {
       type: Array,
@@ -54,6 +65,7 @@ export default {
   data() {
     return {
       defaultRightSideActions: [
+        { name: 'actionColumnSetting', fa: 'fa-cog', tip: this.$t('common.Setting'), 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 }
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 354b5dd6e..6ee14b906 100644
--- 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="headerActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
+    <TableAction :table-url="iTableConfig.url" :search-table="search" :date-pick="handleDateChange" v-bind="iHeaderActions" :selected-rows="selectedRows" :reload-table="reloadTable" />
     <IBox class="table-content">
       <AutoDataTable ref="dataTable" :config="iTableConfig" @selection-change="handleSelectionChange" v-on="$listeners" />
     </IBox>
@@ -13,6 +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: {
@@ -41,6 +42,7 @@ export default {
     }
   },
   computed: {
+
     dataTable() {
       return this.$refs.dataTable.$refs.dataTable
     },
@@ -65,13 +67,24 @@ export default {
       }
       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 config
-    }
+      return this.getActiveColumns(config)
+    },
+    ...mapGetters({
+      tableColConfig: 'tableConfig'
+    })
   },
   watch: {
     extraQuery: {
@@ -86,6 +99,22 @@ export default {
     this.$log.debug(this.iTableConfig)
   },
   methods: {
+    getActiveColumns(config) {
+      const ACTIVE_COLUMN_KEY = this.$route.name
+      const hasColumnSetting = _.get(this.headerActions, 'hasColumnSetting', false)
+      const defaultColumn = _.get(this.headerActions, 'defaultColumn', [])
+      if (hasColumnSetting) {
+        const currentColumnSetting = _.get(this.tableColConfig, ACTIVE_COLUMN_KEY, defaultColumn || [])
+        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
     },
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 15ed7c8ce..58a68d4ea 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -182,6 +182,7 @@
     "Action": "动作",
     "RequestTickets": "申请工单",
     "Actions": "操作",
+    "CustomCol":"自定义列表字段",
     "Activate": "激活",
     "Active": "激活中",
     "actionsTips":"剪切板权限控制目前仅支持 RDP/VNC 协议的连接",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 508615069..09fc01562 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -180,6 +180,7 @@
   "common": {
     "Nothing": "Nothing",
     "Action": "Action",
+    "CustomCol":"Custom table col",
     "RequestTickets": "Request tickets",
     "Actions": "Actions",
     "Activate": "Activate",
diff --git a/src/store/getters.js b/src/store/getters.js
index 08793243e..68c3e9b30 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -13,6 +13,7 @@ const getters = {
   currentOrgRoles: state => state.users.roles,
   currentOrgPerms: state => state.users.perms,
   MFAVerifyAt: state => state.users.MFAVerifyAt,
-  MFA_TTl: state => state.settings.publicSettings.SECURITY_MFA_VERIFY_TTL
+  MFA_TTl: state => state.settings.publicSettings.SECURITY_MFA_VERIFY_TTL,
+  tableConfig: state => state.table.tableConfig
 }
 export default getters
diff --git a/src/store/modules/table.js b/src/store/modules/table.js
new file mode 100644
index 000000000..6dc328fc1
--- /dev/null
+++ b/src/store/modules/table.js
@@ -0,0 +1,27 @@
+import VueCookie from 'vue-cookie'
+
+function getTableConfigfromCookie() {
+  return JSON.parse(VueCookie.get('tableConfig')) || {}
+}
+
+const state = {
+  tableConfig: getTableConfigfromCookie()
+}
+
+const mutations = {
+  SET_TABLE_CONFIG: (state, tableConfig) => {
+    state.tableConfig[tableConfig.key] = tableConfig.value
+    VueCookie.set('tableConfig', JSON.stringify(state.tableConfig), 14)
+  }
+}
+
+const actions = {
+
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/users.js b/src/store/modules/users.js
index 88ae95fee..05139e1a2 100644
--- a/src/store/modules/users.js
+++ b/src/store/modules/users.js
@@ -38,7 +38,6 @@ const mutations = {
     state.orgs = orgs
   },
   MODIFY_ORG: (state, org) => {
-    // console.log(state.orgs)
     state.orgs = state.orgs.map(oldOrg => {
       if (oldOrg.id === org.id) {
         oldOrg.name = org.name
diff --git a/src/views/assets/SystemUser/SystemUserList.vue b/src/views/assets/SystemUser/SystemUserList.vue
index 9abe90e0d..bfea2a14c 100644
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserList.vue
@@ -72,6 +72,8 @@ export default {
       headerActions: {
         hasBulkDelete: false,
         hasMoreActions: false,
+        hasColumnSetting: true,
+        defaultColumn: ['name', 'username'],
         createRoute: 'SystemUserCreate'
       },
       helpMessage: this.$t('assets.SystemUserListHelpMessage')

From 3b664ee1dccc8275fbdaabc00d72da36eed42d32 Mon Sep 17 00:00:00 2001
From: Orange <orangemtony@gmail.com>
Date: Wed, 30 Dec 2020 19:59:23 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataTable/index.vue        |  1 +
 .../TableAction/ColumnSettingPopover.vue      | 31 ++++++++++-----
 src/components/ListTable/index.vue            |  6 +++
 src/i18n/langs/cn.json                        |  1 +
 src/i18n/langs/en.json                        |  1 +
 src/store/modules/table.js                    |  6 ++-
 src/userviews/assets/index.vue                |  9 ++++-
 src/views/assets/Asset/AssetList.vue          | 39 ++++++++++++++-----
 .../assets/SystemUser/SystemUserList.vue      |  2 +-
 9 files changed, 74 insertions(+), 22 deletions(-)

diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index b49c1721f..dd564e872 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -142,6 +142,7 @@ export default {
       }
       config.columns = columns
       this.iConfig = config
+      this.$eventBus.$emit('columnsChange', config)
     }
   }
 }
diff --git a/src/components/ListTable/TableAction/ColumnSettingPopover.vue b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
index 5f55361bf..79b2e4943 100644
--- a/src/components/ListTable/TableAction/ColumnSettingPopover.vue
+++ b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
@@ -9,15 +9,25 @@
     top="10%"
     @confirm="handleColumnConfirm()"
   >
-    <el-checkbox-group v-model="columnList">
-      <el-checkbox
-        v-for="item in totalColumns"
-        :key="item.prop"
-        :label="item.prop"
-        :disabled="item.prop==='id'"
-      >
-        {{ item.label }}
-      </el-checkbox>
+    <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>
@@ -58,7 +68,10 @@ export default {
     this.$eventBus.$on('showColumnSettingPopover', () => {
       this.showColumnSettingPopover = true
     })
+    console.log(this.tableConfig, this.$route.name, this.defaultColumn)
     this.columnList = _.get(this.tableConfig, this.$route.name, this.defaultColumn || [])
+    console.log(this.columnList)
+    console.log(this.totalColumns)
   },
   methods: {
     handleColumnConfirm() {
diff --git a/src/components/ListTable/index.vue b/src/components/ListTable/index.vue
index 6ee14b906..af46fee1f 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/ListTable/index.vue
@@ -92,6 +92,12 @@ export default {
         this.$log.debug('ListTable: found extraQuery change')
       },
       deep: true
+    },
+    tableColConfig: {
+      handler() {
+        this.$log.debug('ListTable: found colConfig change')
+      },
+      deep: true
     }
   },
   mounted() {
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 58a68d4ea..6b74b13b1 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -58,6 +58,7 @@
     "AdminUserDetail": "管理用户详情",
     "AdminUserListHelpMessage": "管理用户是资产（被控服务器）上的 root，或拥有 NOPASSWD: ALL sudo 权限的用户， JumpServer 使用该用户来 `推送系统用户`、`获取资产硬件信息` 等。\n",
     "Asset": "资产",
+    "HardwareInfo": "硬件信息",
     "AssetDetail": "资产详情",
     "AssetList": "资产列表",
     "AssetListHelpMessage": "左侧是资产树，右击可以新建、删除、更改树节点，授权资产也是以节点方式组织的，右侧是属于该节点下的资产\n",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 09fc01562..a078842bc 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -58,6 +58,7 @@
     "AdminUserDetail": "Admin user detail",
     "AdminUserListHelpMessage": "Admin users are asset (charged server) on the root, or have NOPASSWD: ALL sudo permissions users, JumpServer users of the system using the user to `push system user`, `get assets hardware information`, etc.\n",
     "Asset": "Asset",
+    "HardwareInfo": "Hardware info",
     "AssetDetail": "Asset detail",
     "AssetList": "Asset list",
     "AssetListHelpMessage": "The left side is the asset tree, right click to create, delete, and change the tree node, authorization asset is also organized as a node, and the right side is the asset under that node\n",
diff --git a/src/store/modules/table.js b/src/store/modules/table.js
index 6dc328fc1..2c57da539 100644
--- a/src/store/modules/table.js
+++ b/src/store/modules/table.js
@@ -1,7 +1,9 @@
 import VueCookie from 'vue-cookie'
+import Vue from 'vue'
 
 function getTableConfigfromCookie() {
-  return JSON.parse(VueCookie.get('tableConfig')) || {}
+  console.log(VueCookie.get('tableConfig') ? JSON.parse(VueCookie.get('tableConfig')) : {})
+  return VueCookie.get('tableConfig') ? JSON.parse(VueCookie.get('tableConfig')) : {}
 }
 
 const state = {
@@ -10,7 +12,7 @@ const state = {
 
 const mutations = {
   SET_TABLE_CONFIG: (state, tableConfig) => {
-    state.tableConfig[tableConfig.key] = tableConfig.value
+    Vue.set(state.tableConfig, tableConfig.key, tableConfig.value)
     VueCookie.set('tableConfig', JSON.stringify(state.tableConfig), 14)
   }
 }
diff --git a/src/userviews/assets/index.vue b/src/userviews/assets/index.vue
index b5ef1ef1c..73ddecf40 100644
--- a/src/userviews/assets/index.vue
+++ b/src/userviews/assets/index.vue
@@ -90,6 +90,11 @@ export default {
               }
             }
           },
+          {
+            prop: 'platform',
+            label: this.$t('assets.Platform'),
+            width: '120px'
+          },
           {
             prop: 'comment',
             label: this.$t('assets.Comment'),
@@ -146,7 +151,9 @@ export default {
         hasExport: false,
         hasImport: false,
         hasLeftActions: false,
-        hasSearch: true
+        hasSearch: true,
+        hasColumnSetting: true,
+        defaultColumn: ['hostname', 'ip', 'SystemUsers', 'comment', 'id']
       }
     }
   },
diff --git a/src/views/assets/Asset/AssetList.vue b/src/views/assets/Asset/AssetList.vue
index fd9b82506..66b5529b8 100644
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -95,24 +95,40 @@ export default {
         url: '/api/v1/assets/assets/',
         hasTree: true,
         columns: [
-          'hostname', 'ip', 'hardware_info', 'connectivity', 'actions'
-        ],
-        columnsMeta: {
-          hostname: {
+          {
+            prop: '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: {
@@ -129,8 +145,11 @@ export default {
             width: '90px',
             align: 'center'
           },
-          actions: {
+          {
+            prop: 'actions',
             formatter: ActionsFormatter,
+            label: this.$t('common.Actions'),
+            width: '140px',
             formatterArgs: {
               performDelete: ({ row, col }) => {
                 const id = row.id
@@ -139,9 +158,11 @@ export default {
               }
             }
           }
-        }
+        ]
       },
       headerActions: {
+        hasColumnSetting: true,
+        defaultColumn: ['name', 'username', 'protocol', 'assets_amount', 'comment', 'actions'],
         createRoute: {
           name: 'AssetCreate',
           query: this.$route.query
diff --git a/src/views/assets/SystemUser/SystemUserList.vue b/src/views/assets/SystemUser/SystemUserList.vue
index bfea2a14c..b19a1442b 100644
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserList.vue
@@ -73,7 +73,7 @@ export default {
         hasBulkDelete: false,
         hasMoreActions: false,
         hasColumnSetting: true,
-        defaultColumn: ['name', 'username'],
+        defaultColumn: ['name', 'username', 'protocol', 'assets_amount', 'comment', 'id'],
         createRoute: 'SystemUserCreate'
       },
       helpMessage: this.$t('assets.SystemUserListHelpMessage')

From 5735a591ba264cb3353580f65bfb1d68074e3148 Mon Sep 17 00:00:00 2001
From: Orange <orangemtony@gmail.com>
Date: Wed, 30 Dec 2020 20:08:58 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E5=85=81=E8=AE=B8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActionsGroup/index.vue                         | 2 +-
 src/components/ListTable/TableAction/ColumnSettingPopover.vue | 3 +++
 src/components/ListTable/TableAction/RightSide.vue            | 2 +-
 src/i18n/langs/cn.json                                        | 1 +
 src/i18n/langs/en.json                                        | 1 +
 5 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ActionsGroup/index.vue b/src/components/ActionsGroup/index.vue
index d9f11442d..c88b0e07b 100644
--- 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'].indexOf(item.name) !== -1" effect="dark" :content="item.tip" placement="top">
+      <el-tooltip v-if="['actionExport', 'actionImport', 'actionRefresh','actionColumnSetting'].indexOf(item.name) !== -1" effect="dark" :content="item.tip" placement="top">
         <i v-if="item.fa" :class="'fa ' + item.fa" />{{ item.title }}
       </el-tooltip>
       <span v-else>
diff --git a/src/components/ListTable/TableAction/ColumnSettingPopover.vue b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
index 79b2e4943..e24ba3386 100644
--- a/src/components/ListTable/TableAction/ColumnSettingPopover.vue
+++ b/src/components/ListTable/TableAction/ColumnSettingPopover.vue
@@ -9,6 +9,9 @@
     top="10%"
     @confirm="handleColumnConfirm()"
   >
+    <el-alert type="success">
+      {{ this.$t('common.TableColSettingInfo') }}
+    </el-alert>
     <el-checkbox-group
       v-model="columnList"
     >
diff --git a/src/components/ListTable/TableAction/RightSide.vue b/src/components/ListTable/TableAction/RightSide.vue
index 7497cca70..5794cc106 100644
--- a/src/components/ListTable/TableAction/RightSide.vue
+++ b/src/components/ListTable/TableAction/RightSide.vue
@@ -65,7 +65,7 @@ export default {
   data() {
     return {
       defaultRightSideActions: [
-        { name: 'actionColumnSetting', fa: 'fa-cog', tip: this.$t('common.Setting'), has: this.hasColumnSetting, callback: this.handleColumnConfig.bind(this) },
+        { 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 }
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 6b74b13b1..ed5b6d679 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -187,6 +187,7 @@
     "Activate": "激活",
     "Active": "激活中",
     "actionsTips":"剪切板权限控制目前仅支持 RDP/VNC 协议的连接",
+    "TableColSettingInfo": "请选择您想显示的列表详细信息。",
     "Add": "添加",
     "AddSuccessMsg": "添加成功",
     "Auth": "认证",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index a078842bc..91c168a17 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -187,6 +187,7 @@
     "Activate": "Activate",
     "actionsTips":"Clipboard's copy and paste control only support RDP/VNC protocol.",
     "Active": "Active",
+    "TableColSettingInfo": "Please select the list details you want to display",
     "Add": "Add",
     "AddSuccessMsg": "Add success",
     "Auth": "Authorization",