update

src/main/webapp/app/modal/select-group/select-group.component.html

+<!--添加资源-->
+<nz-modal [nzWidth]="780" [(nzVisible)]="isValiaible" [nzTitle]="title"
+          (nzOnCancel)="handleEditCancel()" (nzOnOk)="handEditleOk()">
+  <div nz-form class="ant-advanced-search-form form-select">
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="4" nzRequired nzFor="host1">选择设备</nz-form-label>
+      <nz-form-control [nzSpan]="14">
+        <div class="tree-div" style="height: 300px">
+          <nz-tree #nzTree
+                   [(ngModel)]="nodes"
+                   [nzAsyncData]="true"
+                   [nzCheckStrictly]="true"
+                   (nzClick)="mouseAction('expand',$event)"
+                   (nzExpandChange)="mouseAction('expand',$event)" >
+            <ng-template #nzTreeTemplate let-node>
+                <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="node.isSelected">
+                    <label *ngIf="node.level == 0"> {{node.title}}</label>
+                    <label [(ngModel)]="node.isChecked" (click)="selectItem($event,node)" *ngIf="node.level == 1" nz-checkbox> {{node.title}}</label>
+                </span>
+            </ng-template>
+
+          </nz-tree>
+        </div>
+      </nz-form-control>
+
+    </nz-form-item>
+  </div>
+</nz-modal>

src/main/webapp/app/modal/select-group/select-group.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
+import {TopologyService} from '../../netTopology/topology.service';
+
+@Component({
+    selector: 'smart-select-group',
+    templateUrl: './select-group.component.html',
+    styles: []
+})
+export class SelectGroupComponent implements OnInit {
+
+    @Output() done = new EventEmitter<any>();
+
+    isValiaible;
+    title;
+
+    nodes;
+    nodeList;
+    selectList = [];
+
+    constructor(private topologySer: TopologyService,
+                private message: NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.initForm();
+    }
+
+    showAddModal(title) {
+        this.title = title;
+        this.isValiaible = true;
+        this.initForm();
+        this.findTree();
+    }
+
+    initForm() {
+        this.nodes = null;
+        this.nodeList = [];
+        this.selectList = [];
+    }
+
+    //查询树--- 分组
+    findTree() {
+        const data = {
+            id: '',
+            type: 'group'
+        };
+        this.topologySer.findTree(data).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    let option = res.data;
+                    option.forEach(res => {
+                        res.title = res.name;
+                        res.key = res.id;
+                    });
+                    this.nodeList = option;
+                    this.toNode(option);
+                } else {
+                    this.message.info(res.errMsg);
+                }
+            }
+        );
+    }
+
+    toNode(data) {
+        this.nodes = data.map(res => {
+            return new NzTreeNode(res);
+        });
+        console.log(this.nodes);
+    }
+
+    //获取下级
+    mouseAction(name: string, event: NzFormatEmitEvent) {
+        let type;
+        setTimeout(_ => {
+        }, 1000);
+        if (event.node.level == 0) {
+            type = 'host';   //主机
+        }
+        if (event.node.level == 1) {
+            type = 'item';  //监控项
+        }
+        if (this.title == '选择资源' && event.node.level == 1) {
+            return false;
+        }
+        const index = <any>event.node.key - 1;
+        const data = {
+            'id': event.node.origin.id,
+            'type': type
+        };
+        this.topologySer.findTree(data).subscribe(
+            (res) => {
+                if (res.data) {
+                    const dataSet = res.data;
+                    dataSet.forEach(res => {
+                        res.title = res.name;
+                        res.key = res.id;
+                        if (this.title == '选择资源') {
+                            res.isLeaf = true;
+                        }
+                    });
+                    event.node.addChildren(dataSet);
+                    this.nodeList[index].children = dataSet;
+                    this.nodeList[index].expanded = true;
+                } else {
+                    event.node.addChildren([]);
+                    this.message.warning('该下级为空');
+                }
+
+            }
+        );
+    }
+
+    //选择树节点
+    selectItem(event,node) {
+        if (node.isChecked) {
+            this.selectList.push(node.origin.id);   //主机
+
+        } else {
+            const index = this.selectList.indexOf(node.origin.id);
+            this.selectList.splice(index, 1);
+        }
+    }
+
+    handEditleOk() {
+        if (this.title == '选择资源') {
+            this.select();
+        }
+
+    }
+
+    select() {
+        this.done.emit(this.selectList);
+        this.isValiaible = false;
+    }
+
+    handleEditCancel() {
+        this.initForm();
+        this.isValiaible = false;
+    }
+
+}