feat: 允许用户自定义表格列显示功能

src/components/AutoDataTable/index.vue

@@ -142,6 +142,7 @@ export default {
       }
       config.columns = columns
       this.iConfig = config
+      this.$eventBus.$emit('columnsChange', config)
     }
   }
 }

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() {

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() {

src/i18n/langs/cn.json

@@ -58,6 +58,7 @@
     "AdminUserDetail": "管理用户详情",
     "AdminUserListHelpMessage": "管理用户是资产（被控服务器）上的 root，或拥有 NOPASSWD: ALL sudo 权限的用户， JumpServer 使用该用户来 `推送系统用户`、`获取资产硬件信息` 等。\n",
     "Asset": "资产",
+    "HardwareInfo": "硬件信息",
     "AssetDetail": "资产详情",
     "AssetList": "资产列表",
     "AssetListHelpMessage": "左侧是资产树，右击可以新建、删除、更改树节点，授权资产也是以节点方式组织的，右侧是属于该节点下的资产\n",

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",

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

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']
       }
     }
   },

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

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')