perf: 优化节点树 (#3670)

Co-authored-by: ibuler <ibuler@qq.com>

src/views/assets/Domain/DomainList.vue

@@ -5,7 +5,6 @@
 <script>
 import { GenericListPage } from '@/layout/components'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
-import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -17,20 +16,16 @@ export default {
         url: '/api/v1/assets/domains/',
         columnsExclude: ['gateway'],
         columnsExtra: ['gateway_count'],
+        columns: ['name', 'assets_amount', 'gateway_count', 'comment', 'actions'],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'assets', 'gateway_count', 'comment', 'actions']
+          default: ['name', 'assets_amount', 'gateway_count', 'comment', 'actions']
         },
         columnsMeta: {
-          assets: {
+          assets_amount: {
             label: this.$t('assets.Assets'),
             width: '160px',
-            formatter: AmountFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'GroupUser'
-              }
-            }
+            formatter: DetailFormatter
           },
           gateway_count: {
             label: this.$t('assets.Gateway'),

src/views/perms/AssetPermission/AssetPermissionList.vue

@@ -21,6 +21,7 @@ import PermBulkUpdateDialog from './components/PermBulkUpdateDialog'
 import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter'
 import { mapGetters } from 'vuex'
 import { AccountLabelMapper, AssetPermissionListPageSearchConfigOptions } from '../const'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -44,11 +45,15 @@ export default {
         url: '/api/v1/perms/asset-permissions/',
         hasTree: true,
         columnsExtra: ['action'],
+        columns: [
+          'name', 'users_amount', 'user_groups_amount', 'assets_amount', 'nodes_amount',
+          'accounts', 'is_expired', 'from_ticket', 'actions'
+        ],
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'users', 'user_groups', 'assets',
-            'nodes', 'accounts', 'is_valid', 'actions'
+            'name', 'users_amount', 'user_groups_amount', 'assets_amount',
+            'nodes_amount', 'accounts', 'is_valid', 'actions'
           ]
         },
         columnsMeta: {
@@ -82,40 +87,40 @@ export default {
               showFalse: false
             }
           },
-          users: {
+          users_amount: {
             label: this.$t('perms.User'),
             width: '60px',
-            formatter: AmountFormatter,
+            formatter: DetailFormatter,
             formatterArgs: {
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
             }
           },
-          user_groups: {
+          user_groups_amount: {
             label: this.$t('perms.UserGroups'),
             width: '100px',
-            formatter: AmountFormatter,
+            formatter: DetailFormatter,
             formatterArgs: {
               routeQuery: {
                 activeTab: 'AssetPermissionUser'
               }
             }
           },
-          assets: {
+          assets_amount: {
             label: this.$t('perms.Asset'),
             width: '60px',
-            formatter: AmountFormatter,
+            formatter: DetailFormatter,
             formatterArgs: {
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'
               }
             }
           },
-          nodes: {
+          nodes_amount: {
             label: this.$t('perms.Node'),
             width: '60px',
-            formatter: AmountFormatter,
+            formatter: DetailFormatter,
             formatterArgs: {
               routeQuery: {
                 activeTab: 'AssetPermissionAsset'

src/views/users/Group/UserGroupList.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -14,25 +14,27 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/users/groups/',
+        columns: ['name', 'users_amount', 'comment', 'actions'],
         columnsShow: {
-          default: ['name', 'users', 'comment', 'actions'],
+          default: ['name', 'users_amount', 'comment', 'actions'],
           min: ['name', 'action']
         },
         columnsMeta: {
           users_amount: {
             label: this.$t('users.Users'),
-            width: '120px'
-          },
-          users: {
-            label: this.$t('perms.User'),
-            width: '160px',
-            formatter: AmountFormatter,
+            width: '120px',
+            formatter: DetailFormatter,
             formatterArgs: {
-              getItem(item) {
-                return item.is_service_account ? null : item.name
-              },
-              routeQuery: {
-                activeTab: 'GroupUser'
+              getRoute({ row }) {
+                return {
+                  name: 'UserGroupDetail',
+                  params: {
+                    id: row.id
+                  },
+                  query: {
+                    activeTab: 'GroupUser'
+                  }
+                }
               }
             }
           }

src/views/users/Role/RoleList/BaseRoleList.vue

@@ -31,6 +31,25 @@ export default {
           default: ['display_name', 'users_amount', 'builtin', 'comment', 'actions']
         },
         columnsMeta: {
+          users_amount: {
+            label: this.$t('users.Users'),
+            width: '120px',
+            formatter: DetailFormatter,
+            formatterArgs: {
+              getRoute({ row }) {
+                return {
+                  name: 'RoleDetail',
+                  params: {
+                    id: row.id
+                  },
+                  query: {
+                    activeTab: 'RoleUsers',
+                    scope: vm.scope
+                  }
+                }
+              }
+            }
+          },
           display_name: {
             label: this.$t('common.Name'),
             formatter: DetailFormatter,