perf: 优化各页面列控制 (#652)

perf: 优化页面列表col Co-authored-by: ibuler <ibuler@qq.com>
2026-01-25 14:34:46 +00:00 · 2021-03-11 20:24:03 +08:00
parent c94a451df9
commit 30a7063999
20 changed files with 146 additions and 47 deletions
--- a/src/components/ListTable/formatters/BooleanFormatter.vue
+++ b/src/components/ListTable/formatters/BooleanFormatter.vue
@@ -0,0 +1,42 @@
+<template>
+  <i :class="'fa ' + iconClass" />
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'ChoicesFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          iconChoices: {
+            true: 'fa-check text-primary',
+            false: 'fa-times text-danger'
+          },
+          typeChange(val) {
+            return !!val
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    iconClass() {
+      const key = this.formatterArgs.typeChange(this.cellValue)
+      return this.formatterArgs.iconChoices[key]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/ListTable/formatters/index.js
+++ b/src/components/ListTable/formatters/index.js
@@ -1,7 +1,8 @@
 import DetailFormatter from './DetailFormatter'
 import ArrayFormatter from './ArrayFormatter'
 import DisplayFormatter from './DisplayFormatter'
-import BooleanFormatter from './ChoicesFormatter'
+import BooleanFormatter from './BooleanFormatter'
+import ChoicesFormatter from './ChoicesFormatter'
 import ActionsFormatter from './ActionsFormatter'
 import DeleteActionFormatter from './DeleteActionFormatter'
 import DateFormatter from './DateFormatter'
@@ -14,6 +15,7 @@ export default {
  DetailFormatter,
  DisplayFormatter,
  BooleanFormatter,
+  ChoicesFormatter,
  ActionsFormatter,
  DeleteActionFormatter,
  DateFormatter,
@@ -28,6 +30,7 @@ export {
  DetailFormatter,
  DisplayFormatter,
  BooleanFormatter,
+  ChoicesFormatter,
  ActionsFormatter,
  DeleteActionFormatter,
  DateFormatter,
--- a/src/views/applications/DatabaseApp/DatabaseAppList.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppList.vue
@@ -15,7 +15,8 @@ export default {
      tableConfig: {
        url: '/api/v1/applications/applications/?category=db',
        columns: [
-          'name', 'type_display', 'attrs.host', 'attrs.port', 'attrs.database', 'date_created', 'comment', 'actions'
+          'name', 'type_display', 'attrs.host', 'attrs.port', 'attrs.database',
+          'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['name', 'actions'],
--- a/src/views/applications/KubernetesApp/KubernetesAppList.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppList.vue
@@ -14,7 +14,8 @@ export default {
      tableConfig: {
        url: '/api/v1/applications/applications/?category=cloud',
        columns: [
-          'name', 'type', 'attrs.cluster', 'date_created', 'comment', 'actions'
+          'name', 'type', 'attrs.cluster',
+          'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['name', 'actions'],
--- a/src/views/applications/RemoteApp/RemoteAppList.vue
+++ b/src/views/applications/RemoteApp/RemoteAppList.vue
@@ -17,7 +17,8 @@ export default {
      tableConfig: {
        url: '/api/v1/applications/applications/?category=remote_app',
        columns: [
-          'name', 'type', 'attrs.asset', 'date_created', 'comment', 'actions'
+          'name', 'type', 'attrs.asset',
+          'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['name', 'actions'],
--- a/src/views/assets/AdminUser/AdminUserList.vue
+++ b/src/views/assets/AdminUser/AdminUserList.vue
@@ -13,7 +13,10 @@ export default {
    return {
      tableConfig: {
        url: '/api/v1/assets/admin-users/',
-        columns: ['name', 'username', 'assets_amount', 'date_created', 'comment', 'actions'],
+        columns: [
+          'name', 'username', 'assets_amount',
+          'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
+        ],
        columnsShow: {
          min: ['name', 'actions'],
          default: ['name', 'username', 'assets_amount', 'comment', 'actions']
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -98,7 +98,15 @@ export default {
        url: '/api/v1/assets/assets/',
        hasTree: true,
        columns: [
-          'hostname', 'ip', 'admin_user_display', 'platform', 'hardware_info', 'cpu_model', 'disk_info', 'memory', 'os', 'number', 'public_ip', 'connectivity', 'actions'
+          'hostname', 'ip', 'public_ip', 'admin_user_display',
+          'protocols',
+          'platform', 'hardware_info', 'model',
+          'cpu_model', 'cpu_cores', 'cpu_count', 'cpu_vcpus',
+          'disk_info', 'disk_total', 'memory',
+          'os', 'os_arch', 'os_version',
+          'number', 'vendor', 'sn',
+          'connectivity',
+          'created_by', 'date_created', 'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['hostname', 'ip', 'actions'],
@@ -119,6 +127,15 @@ export default {
          hardware_info: {
            showOverflowTooltip: true
          },
+          cpu_model: {
+            showOverflowTooltip: true
+          },
+          sn: {
+            showOverflowTooltip: true
+          },
+          comment: {
+            showOverflowTooltip: true
+          },
          connectivity: {
            label: this.$t('assets.Reachable'),
            formatter: BooleanFormatter,
--- a/src/views/assets/CommandFilter/CommandFilterList.vue
+++ b/src/views/assets/CommandFilter/CommandFilterList.vue
@@ -14,7 +14,10 @@ export default {
    return {
      tableConfig: {
        url: '/api/v1/assets/cmd-filters/',
-        columns: ['name', 'rules', 'system_users', 'is_active', 'date_created', 'comment', 'actions'],
+        columns: [
+          'name', 'rules', 'system_users', 'is_active',
+          'created_by', 'date_created', 'comment', 'org_name', 'actions'
+        ],
        columnsShow: {
          min: ['name', 'actions'],
          default: ['name', 'rules', 'system_users', 'comment', 'actions']
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -15,7 +15,8 @@ export default {
      tableConfig: {
        url: '/api/v1/assets/domains/',
        columns: [
-          'name', 'asset_count', 'application_count', 'gateway_count', 'date_created', 'comment', 'actions'
+          'name', 'asset_count', 'application_count', 'gateway_count', 'date_created',
+          'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['name', 'actions'],
--- a/src/views/assets/Label/LabelList.vue
+++ b/src/views/assets/Label/LabelList.vue
@@ -13,7 +13,10 @@ export default {
    return {
      tableConfig: {
        url: '/api/v1/assets/labels/',
-        columns: ['name', 'value', 'asset_count', 'actions'],
+        columns: [
+          'name', 'value', 'asset_count',
+          'date_created', 'comment', 'org_name', 'actions'
+        ],
        columnsMeta: {
          name: {
            formatter: null
@@ -24,11 +27,6 @@ export default {
        }
      },
      headerActions: {
-        hasRightActions: false,
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasSearch: true,
        hasMoreActions: false,
        createRoute: 'LabelCreate'
      }
--- a/src/views/assets/Platform/PlatformList.vue
+++ b/src/views/assets/Platform/PlatformList.vue
@@ -13,7 +13,8 @@ export default {
      tableConfig: {
        url: '/api/v1/assets/platforms/',
        columns: [
-          'name', 'base', 'comment', 'actions'
+          'name', 'base',
+          'comment', 'actions'
        ],
        columnsMeta: {
          base: {
@@ -32,11 +33,7 @@ export default {
        }
      },
      headerActions: {
-        hasRightActions: false,
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: false,
-        hasSearch: false,
+        hasRightActions: true,
        hasMoreActions: false,
        hasBulkDelete: false,
        createRoute: 'PlatformCreate'
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserList.vue
@@ -15,7 +15,11 @@ export default {
    return {
      tableConfig: {
        url: '/api/v1/assets/system-users/',
-        columns: ['name', 'username', 'username_same_with_user', 'protocol', 'login_mode', 'assets_amount', 'priority', 'date_created', 'comment', 'actions'],
+        columns: [
+          'name', 'username', 'username_same_with_user', 'protocol', 'login_mode',
+          'assets_amount', 'priority',
+          'created_by', 'date_created', 'date_updated', 'comment', 'org_name', 'actions'
+        ],
        columnsShow: {
          min: ['name', 'actions'],
          default: ['name', 'username', 'protocol', 'login_mode', 'assets_amount', 'comment', 'actions']
--- a/src/views/perms/ApplicationPermission/ApplicationPermissionList.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionList.vue
@@ -18,9 +18,11 @@ export default {
      tableConfig: {
        url: '/api/v1/perms/application-permissions/',
        columns: [
-          'name', 'type_display', 'category_display', 'users_amount', 'user_groups_amount',
-          'applications_amount', 'system_users_amount', 'date_created', 'date_expired',
-          'is_valid', 'actions'
+          'name', 'type_display', 'category_display',
+          'users_amount', 'user_groups_amount',
+          'applications_amount', 'system_users_amount',
+          'date_expired', 'is_valid',
+          'created_by', 'date_created', 'comment', 'org_name', 'actions'
        ],
        columnsShow: {
          min: ['name', 'actions'],
@@ -101,7 +103,10 @@ export default {
        moreActionsType: 'primary',
        moreCreates: {
          callback: (option) => {
-            vm.$router.push({ name: 'SystemUserCreate', query: { protocol: option.type }})
+            vm.$router.push({ name: 'ApplicationPermissionCreate', query: {
+              category: option.category.toLowerCase(),
+              type: option.name.toLowerCase()
+            }})
          },
          dropdown: ApplicationTypes
        }
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -23,7 +23,12 @@ export default {
      tableConfig: {
        url: '/api/v1/perms/asset-permissions/',
        hasTree: true,
-        columns: ['name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount', 'date_created', 'date_expired', 'is_valid', 'actions'],
+        columns: [
+          'name',
+          'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount',
+          'date_expired', 'is_valid', 'is_expired', 'is_active',
+          'created_by', 'date_created', 'comment', 'org_name', 'actions'
+        ],
        columnsShow: {
          min: ['name', 'actions'],
          default: ['name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount', 'system_users_amount', 'is_valid', 'actions']
--- a/src/views/perms/const.js
+++ b/src/views/perms/const.js
@@ -19,24 +19,28 @@ export const REMOTE_APP = [
    title: i18n.t(`applications.applicationsType.${CHROME}`),
    type: 'primary',
    group: i18n.t('applications.RemoteApp'),
+    category: REMOTEAPP_CATEGORY,
    has: hasValidLicense
  },
  {
    name: MYSQL_WORKBENCH,
    title: i18n.t(`applications.applicationsType.${MYSQL_WORKBENCH}`),
    type: 'primary',
+    category: REMOTEAPP_CATEGORY,
    has: hasValidLicense
  },
  {
    name: VMWARE_CLIENT,
    title: i18n.t(`applications.applicationsType.${VMWARE_CLIENT}`),
    type: 'primary',
+    category: REMOTEAPP_CATEGORY,
    has: hasValidLicense
  },
  {
    name: CUSTOM,
    title: i18n.t(`applications.applicationsType.${CUSTOM}`),
    type: 'primary',
+    category: REMOTEAPP_CATEGORY,
    has: hasValidLicense
  }
 ]
@@ -52,6 +56,7 @@ export const DATABASE = [
    name: MYSQL,
    title: i18n.t(`applications.applicationsType.${MYSQL}`),
    type: 'primary',
+    category: DATABASE_CATEGORY,
    has: true,
    group: i18n.t('applications.Database')
  },
@@ -59,18 +64,21 @@ export const DATABASE = [
    name: ORACLE,
    title: i18n.t(`applications.applicationsType.${ORACLE}`),
    type: 'primary',
+    category: DATABASE_CATEGORY,
    has: hasValidLicense
  },
  {
    name: POSTGRESQL,
    title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
    type: 'primary',
+    category: DATABASE_CATEGORY,
    has: hasValidLicense
  },
  {
    name: MARIADB,
    title: i18n.t(`applications.applicationsType.${MARIADB}`),
    type: 'primary',
+    category: DATABASE_CATEGORY,
    has: hasValidLicense
  }
 ]
@@ -84,6 +92,7 @@ export const CLOUD = [
    title: i18n.t(`applications.applicationsType.${KUBERNETES}`),
    group: i18n.t('applications.Cloud'),
    type: 'primary',
+    category: CLOUD_CATEGORY,
    has: true
  }
 ]
--- a/src/views/sessions/CommandList.vue
+++ b/src/views/sessions/CommandList.vue
@@ -51,6 +51,7 @@ export default {
          expandCol: {
            type: 'expand',
            prop: 'output',
+            label: '>',
            formatter: OutputExpandFormatter
          },
          risk_level: {
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -30,7 +30,8 @@ export default {
        url: this.url,
        columns: [
          'index', 'user', 'asset', 'system_user', 'remote_addr', 'protocol', 'login_from',
-          'command_amount', 'date_start', 'date_end', 'duration', 'actions'
+          'command_amount', 'date_start', 'date_end', 'duration',
+          'org_name', 'actions'
        ],
        columnsShow: {
          min: ['index', 'actions'],
--- a/src/views/sessions/TerminalList.vue
+++ b/src/views/sessions/TerminalList.vue
@@ -92,15 +92,13 @@ export default {
      },
      tableConfig: {
        url: '/api/v1/terminal/terminals/',
-        columns: ['name', 'remote_addr', 'session_online',
-          'state.session_active_count',
-          'state.system_cpu_load_1',
-          'state.system_disk_used_percent',
-          'state.system_memory_used_percent',
+        columns: [
+          'name', 'remote_addr', 'session_online',
+          'state.session_active_count', 'state.system_cpu_load_1',
+          'state.system_disk_used_percent', 'state.system_memory_used_percent',
          'status_display',
-          'is_active',
-          'is_alive',
-          'actions'],
+          'is_active', 'is_alive', 'actions'
+        ],
        columnsMeta: {
          name: {
            sortable: 'custom'
--- a/src/views/users/Group/UserGroupList.vue
+++ b/src/views/users/Group/UserGroupList.vue
@@ -13,7 +13,11 @@ export default {
    return {
      tableConfig: {
        url: '/api/v1/users/groups/',
-        columns: ['name', 'users_amount', 'comment', 'actions'],
+        columns: ['name', 'users_amount', 'date_created', 'created_by', 'org_name', 'comment', 'actions'],
+        columnsShow: {
+          default: ['name', 'users_amount', 'comment', 'actions'],
+          min: ['name', 'action']
+        },
        columnsMeta: {
          users_amount: {
            label: this.$t('users.Users'),
--- a/src/views/users/User/UserList.vue
+++ b/src/views/users/User/UserList.vue
@@ -35,22 +35,27 @@ export default {
      tableConfig: {
        url: '/api/v1/users/users/',
        columns: [
-          'name',
-          'username',
-          'groups_display',
-          'total_role_display',
-          'source',
-          'is_valid',
-          'actions'
+          'name', 'username', 'email', 'phone', 'wechat',
+          'groups_display', 'total_role_display', 'source',
+          'is_valid', 'login_blocked', 'mfa_enabled', 'is_expired',
+          'mfa_force_enabled',
+          'last_login', 'date_joined', 'date_password_last_updated',
+          'comment', 'created_by', 'actions'
        ],
-        // columnsShow: {
-        //   min: ['name', 'username', 'actions'],
-        //   default: ['name', 'username', 'groups_display']
-        // },
+        columnsShow: {
+          min: ['name', 'username', 'actions'],
+          default: [
+            'name', 'username', 'groups_display', 'total_role_display',
+            'source', 'is_valid', 'actions'
+          ]
+        },
        columnsMeta: {
          username: {
            showOverflowTooltip: true
          },
+          email: {
+            showOverflowTooltip: true
+          },
          source: {
            width: '120px'
          },