[Update] 修改树搜索的bug

src/app/elements/asset-tree/asset-tree.component.ts

-import {Component, Input, OnInit, Inject, SimpleChanges, OnChanges} from '@angular/core';
+import {Component, Input, OnInit, Inject, SimpleChanges, OnChanges, EventEmitter} from '@angular/core';
 import {NavList, View} from '../../pages/control/control/control.component';
 import {AppService, LogService} from '../../app.service';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 
 declare var $: any;
 
@@ -14,6 +15,7 @@ declare var $: any;
 export class ElementAssetTreeComponent implements OnInit, OnChanges {
   @Input() Data: any;
   @Input() query: string;
+  @Input() searchEvt$: BehaviorSubject<string>;
   nodes = [];
   setting = {
     view: {
@@ -43,12 +45,19 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   constructor(private _appService: AppService,
               public _dialog: MatDialog,
               public _logger: LogService) {
+    this.searchEvt$ = new BehaviorSubject<string>(this.query);
   }
 
   ngOnInit() {
     if (this.Data) {
       this.draw();
     }
+    this.searchEvt$.asObservable()
+      .debounceTime(300)
+      .distinctUntilChanged()
+      .subscribe((n) => {
+        this.filter();
+      });
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -56,7 +65,8 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
       this.draw();
     }
     if (changes['query'] && !changes['query'].firstChange) {
-      this.filter();
+      this.searchEvt$.next(this.query);
+      // this.filter();
     }
   }
 
@@ -174,25 +184,53 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     return user;
   }
 
-  filter() {
-    const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
-    const _keywords = $('#keyword').val();
-    zTreeObj.showNodes(this.hiddenNodes);
+  recurseParent(node) {
+    const parentNode = node.getParentNode();
+    if (parentNode && parentNode.pId) {
+      return [parentNode, ...this.recurseParent(parentNode)];
+    } else if (parentNode) {
+      return [parentNode];
+    } else {
+      return [];
+    }
+  }
 
-    function filterFunc(node) {
-      if (node.isParent || node.name.indexOf(_keywords) !== -1) {
-        return false;
+  recurseChildren(node) {
+    if (!node.isParent) {
+      return [];
     }
-      return true;
+    const children = node.children;
+    if (!children) {
+      return [];
+    }
+    children.forEach((n) => {
+      return [...children, ...this.recurseChildren(n)];
+    });
+    return [];
   }
 
-    this.hiddenNodes = zTreeObj.getNodesByFilter(filterFunc);
-    zTreeObj.hideNodes(this.hiddenNodes);
-    if (_keywords) {
-      zTreeObj.expandAll(true);
-    } else {
-      zTreeObj.expandAll(false);
+  filter() {
+    const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
+    if (!zTreeObj) {
+      return null;
     }
+    const _keywords = this.query;
+    const nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
+    if (!_keywords) {
+      zTreeObj.showNodes(nodes);
+      return null;
+    }
+    let shouldShow = [];
+    nodes.forEach((node) => {
+      if (shouldShow.indexOf(node) === -1 && node.name.indexOf(_keywords) !== -1) {
+        const parents = this.recurseParent(node);
+        const children = this.recurseChildren(node);
+        shouldShow = [...shouldShow, ...parents, ...children, node];
+      }
+    });
+    zTreeObj.hideNodes(nodes);
+    zTreeObj.showNodes(shouldShow);
+    zTreeObj.expandAll(true);
   }
 }
 

src/app/pages/control/cleftbar/cleftbar.component.html

 <div class="sidebar" fxLayout="column" ngxSplit="column">
   <div fxflex="0 0 30px" class="search">
-    <input id="keyword" class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q"
+    <input #keyword id="keyword" class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q"
            autocomplete="off"
            title="Search"
-           type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
+           type="text" tabindex="1" spellcheck="false" [(ngModel)]="q">
   </div>
   <div class="overflow ngx-scroll-overlay" fxflex="1 1 90%">
     <elements-asset-tree [Data]="zNodes" [query]="q"></elements-asset-tree>

src/app/pages/control/cleftbar/cleftbar.component.ts

@@ -7,7 +7,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, Inject, OnInit, ViewChild, ElementRef} from '@angular/core';
 import {AppService, HttpService, LogService} from '../../../app.service';
 import {SearchComponent} from '../search/search.component';
 import {DataStore} from '../../../globals';
@@ -17,6 +17,7 @@ import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {ElementServerMenuComponent} from '../../../elements/server-menu/server-menu.component';
 import {DialogService} from '../../../elements/dialog/dialog.service';
+import {Observable} from '../../../../../node_modules/rxjs';
 
 export interface HostGroup {
   name: string;
@@ -102,7 +103,6 @@ export class CleftbarComponent implements OnInit {
       });
   }
 
-
   Search(q) {
     this._search.Search(q);
   }