Merge pull request #3199 from jumpserver/pr@dev@perf_select2_componenet

perf: 优化 select2 组件

src/components/FormFields/Select2.vue

@@ -2,10 +2,11 @@
   <el-select
     ref="select"
     v-model="iValue"
-    v-loading="!initialized"
     v-loadmore="loadMore"
     :clearable="clearable"
-    :disabled="selectDisabled"
+    :collapse-tags="collapseTags"
+    :disabled="!!selectDisabled"
+    :loading="!initialized"
     :multiple="multiple"
     :options="iOptions"
     :remote="remote"
@@ -90,6 +91,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    collapseTagsCount: {
+      type: Number,
+      default: 10
     }
   },
   data() {
@@ -128,6 +133,9 @@ export default {
     selectRef() {
       return this.$refs.select
     },
+    collapseTags() {
+      return this.multiple && this.collapseTagsCount > 0 && this.value.length > this.collapseTagsCount
+    },
     optionsValues() {
       return this.iOptions.map((v) => v.value)
     },
@@ -216,7 +224,7 @@ export default {
         this.$log.debug('Value is : ', this.value)
         this.iValue = this.value
         this.initialized = true
-      }, 10)
+      }, 100)
     }
     this.$nextTick(() => {
       // 因为elform存在问题，这个来清楚验证
@@ -318,7 +326,6 @@ export default {
       } else {
         this.remote = false
       }
-      this.iValue = this.value
     },
     refresh() {
       this.resetParams()

src/layout/components/GenericCreateUpdatePage/index.vue

@@ -9,6 +9,7 @@
 import IBox from '@/components/IBox'
 import Page from '@/layout/components/Page'
 import GenericCreateUpdateForm from '../GenericCreateUpdateForm'
+
 export default {
   name: 'GenericCreateUpdatePage',
   components: {
@@ -17,5 +18,8 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+>>> .ibox .el-card__body {
+  padding-top: 30px;
+}
 </style>

src/layout/components/Page/index.vue

@@ -63,7 +63,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .page {
   height: calc(100vh - 50px);
   overflow-y: auto;

src/router/console/acls.js

@@ -189,7 +189,6 @@ export default [
       }
     ]
   },
-
   {
     path: 'connect-method-acls',
     component: globalSubmenu,

src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue

@@ -9,6 +9,7 @@
 <script>
 import { ListTable } from '@/components'
 import { DetailFormatter } from '@/components/TableFormatters'
+import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -27,7 +28,7 @@ export default {
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'command_groups_amount', 'priority',
+            'name', 'command_groups', 'priority',
             'is_active', 'comment', 'actions'
           ]
         },
@@ -37,6 +38,16 @@ export default {
             formatterArgs: {
               route: 'CommandFilterAclDetail'
             }
+          },
+          command_groups: {
+            label: this.$t('acl.CommandGroup'),
+            width: '160px',
+            formatter: AmountFormatter,
+            formatterArgs: {
+              routeQuery: {
+                activeTab: 'GroupUser'
+              }
+            }
           }
         }
       },

src/views/assets/Domain/DomainList.vue

@@ -5,6 +5,7 @@
 <script>
 import { GenericListPage } from '@/layout/components'
 import { DetailFormatter } from '@/components/TableFormatters'
+import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -14,17 +15,21 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/assets/domains/',
-        columnsExclude: ['assets', 'gateway'],
-        columnsExtra: ['asset_count', 'gateway_count'],
+        columnsExclude: ['gateway'],
+        columnsExtra: ['gateway_count'],
         columnsShow: {
           min: ['name', 'actions'],
-          default: ['name', 'asset_count', 'gateway_count', 'comment', 'actions']
+          default: ['name', 'assets', 'gateway_count', 'comment', 'actions']
         },
         columnsMeta: {
-          asset_count: {
+          assets: {
             label: this.$t('assets.Assets'),
-            formatter: function(row) {
-              return <span> {row.assets.length} </span>
+            width: '160px',
+            formatter: AmountFormatter,
+            formatterArgs: {
+              routeQuery: {
+                activeTab: 'GroupUser'
+              }
             }
           },
           gateway_count: {

src/views/assets/Label/LabelList.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
+import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -17,13 +18,23 @@ export default {
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'value', 'asset_count', 'date_created',
+            'name', 'value', 'assets', 'date_created',
             'comment', 'org_name', 'actions'
           ]
         },
         columnsMeta: {
           name: {
             formatter: null
+          },
+          assets: {
+            label: this.$t('assets.Assets'),
+            width: '160px',
+            formatter: AmountFormatter,
+            formatterArgs: {
+              routeQuery: {
+                activeTab: 'GroupUser'
+              }
+            }
           }
         }
       },

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -92,7 +92,6 @@ export default {
           type: 'input',
           label: this.$t('perms.Account'),
           component: AccountFormatter,
-          // helpText: this.$t('perms.AccountsHelp'),
           el: {
             assets: [],
             nodes: []
@@ -134,6 +133,7 @@ export default {
 >>> .el-tree {
   margin-top: 8px;
   border: solid 1px #EBEEF5;
+  padding: 10px 0;
 }
 
 </style>

src/views/users/Group/UserGroupList.vue

@@ -1,9 +1,10 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
+import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
@@ -13,15 +14,24 @@ export default {
     return {
       tableConfig: {
         url: '/api/v1/users/groups/',
-        columnsExclude: ['users'],
         columnsShow: {
-          default: ['name', 'users_amount', 'comment', 'actions'],
+          default: ['name', 'users', '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,
+            formatterArgs: {
+              routeQuery: {
+                activeTab: 'GroupUser'
+              }
+            }
           }
         },
         permissions: {