perf: 优化 tree nodes

perf: 修改 tree 节点 perf: 修改树 init
jumpserver · Dec 28, 2023 · 0e25a6e · 0e25a6e
1 parent bfb6ef1
commit 0e25a6e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 34 deletions.
diff --git a/src/app/elements/asset-tree/asset-tree.component.ts b/src/app/elements/asset-tree/asset-tree.component.ts
@@ -9,13 +9,13 @@ import {connectEvt, DEFAULT_ORG_ID, SYSTEM_ORG_ID} from '@app/globals';
 import * as _ from 'lodash';
 import {
   AppService,
+  ConnectTokenService,
   HttpService,
   I18nService,
   LogService,
   OrganizationService,
   SettingService,
   TreeFilterService,
-  ConnectTokenService,
   ViewService
 } from '@app/services';
 import {ConnectEvt, InitTreeConfig, TreeNode} from '@app/model';
@@ -50,14 +50,17 @@ class Tree {
   search: boolean;
   checkbox: boolean;
   ztree: any;
+  config: any;
+  inited = false;
 
-  constructor(name, label, open, loading, search, checkbox) {
+  constructor(name, label, open, loading, search, checkbox, config = null) {
     this.name = name;
     this.label = label;
     this.open = open;
     this.loading = loading;
     this.search = search;
     this.checkbox = checkbox;
+    this.config = config;
   }
 }
 
@@ -213,11 +216,9 @@ export class ElementAssetTreeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this._settingSvc.isLoadTreeAsync$.subscribe((state) => {
-      this.isLoadTreeAsync = state;
-    });
     this.currentOrgID = this._cookie.get('X-JMS-LUNA-ORG') || this._cookie.get('X-JMS-ORG');
     this._settingSvc.initialized$.subscribe((state) => {
+      this.isLoadTreeAsync = this._settingSvc.isLoadTreeAsync();
       if (state) {
         if (!this._settingSvc.hasXPack() && this.currentOrgID === SYSTEM_ORG_ID) {
           this.currentOrgID = DEFAULT_ORG_ID;
@@ -271,7 +272,7 @@ export class ElementAssetTreeComponent implements OnInit {
     );
     const token = this._route.snapshot.queryParams.token;
     const url = `/api/v1/perms/users/self/nodes/children-with-k8s/tree/?token=${token}`;
-    this.initTreeInfo(tree, {
+    const config = {
       refresh,
       url,
       setting: {
@@ -286,53 +287,67 @@ export class ElementAssetTreeComponent implements OnInit {
         }
       },
       showFavoriteAssets: false
-    }).then();
+    };
+    if (!refresh) {
+      this.trees.push(tree);
+    }
+    this.initTreeInfo(tree, config).then();
   }
 
   async initAssetTree(refresh = false) {
+    const config = {
+      refresh,
+      apiName: 'getMyGrantedNodes',
+      showFavoriteAssets: true,
+      loadTreeAsyncUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/?'
+    };
     const tree = new Tree(
       'AssetTree',
       'My assets',
+      false,
       true,
       true,
       true,
-      true
+      config
     );
-    await this.initTreeInfo(tree, {
-      refresh,
-      apiName: 'getMyGrantedNodes',
-      showFavoriteAssets: true,
-      loadTreeAsyncUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/?'
-    });
+    if (!refresh) {
+      this.trees.push(tree);
+    }
+    this.initTreeInfo(tree, config).then();
   }
 
   async initTypeTree(refresh = false) {
-    const tree = new Tree(
-      'AssetTypeTree',
-      this._i18n.instant('Type tree'),
-      true,
-      true,
-      false,
-      true
-    );
-    await this.initTreeInfo(tree, {
+    const config = {
       refresh,
       apiName: 'getAssetTypeTree',
       showFavoriteAssets: false,
       loadTreeAsyncUrl: '/api/v1/perms/users/self/nodes/children-with-assets/category/tree/?',
       setting: {
         async: {
-          autoParam: ['type']
+          autoParam: ['type', 'category']
         }
       },
-    });
+    };
+    const tree = new Tree(
+      'AssetTypeTree',
+      this._i18n.instant('Type tree'),
+      true,
+      true,
+      false,
+      true,
+      config
+    );
+    if (!refresh) {
+      this.trees.push(tree);
+    } else {
+      this.initTreeInfo(tree, config).then();
+    }
   }
 
   async initTreeInfo(tree: Tree, config: InitTreeConfig) {
+    tree.inited = true;
     if (config.refresh) {
       tree = this.trees.find(t => t.name === tree.name);
-    } else {
-      this.trees.push(tree);
     }
     let setting = Object.assign({}, this.setting);
     setting['callback'] = {
@@ -429,13 +444,10 @@ export class ElementAssetTreeComponent implements OnInit {
     this.searchValue = '';
     if (this.isK8s) {
       this.initK8sTree(true).then();
-    } else {
-      if (tree.name === 'AssetTree') {
-        this.initAssetTree(true).then();
-      }
-      if (tree.name === 'AssetTypeTree') {
-        this.initTypeTree(true).then();
-      }
+    } else if (tree.name === 'AssetTree') {
+      this.initAssetTree(true).then();
+    } else if (tree.name === 'AssetTypeTree') {
+      this.initTypeTree(true).then();
     }
   }
 
@@ -742,6 +754,10 @@ export class ElementAssetTreeComponent implements OnInit {
 
   foldTree(tree: Tree) {
     this.trees.map(item => {
+      if (!tree.inited) {
+        this.initTreeInfo(tree, tree.config).then(() => {
+        });
+      }
       if (tree.name === item.name) {
         item.open = !item.open;
       } else {

diff --git a/src/app/services/setting.ts b/src/app/services/setting.ts
@@ -116,6 +116,10 @@ export class SettingService {
     this.isLoadTreeAsync$.next(this.setting.basic.is_async_asset_tree);
   }
 
+  isLoadTreeAsync() {
+    return this.setting.basic.is_async_asset_tree;
+  }
+
   setAppletConnectMethod() {
     this.appletConnectMethod$.next(this.setting.graphics.applet_connection_method);
   }