check.component.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {NzFormatEmitEvent, NzMessageService, NzTreeNode} from 'ng-zorro-antd';
import {TopologyService} from '../../topology.service';
import {type} from 'os';

@Component({
    selector: 'smart-check',
    templateUrl: './check.component.html',
    styles: []
})
export class CheckComponent implements OnInit {
    @Output() done = new EventEmitter<any>();

    isVisible = false;
    title: string;
    validateForm:FormGroup;

    nodes;
    nodeList;
    selectId;
    fontSizeList = ['8','9','10','11','12','13','14','16','18','20','28','36','48','72'];

    constructor(private fb:FormBuilder,private topologySer:TopologyService,
                private message:NzMessageService) {
    }

    ngOnInit() {
        this.initForm();
        this.findTree();
    }

    initForm(){
        this.validateForm = this.fb.group({
            name:['',[Validators.required]],
            fontSize:['12',[Validators.required]],
        })
    }

    showAddModal() {
        this.isVisible = true;
        this.title = '添加监测点';
    }

    showEditModal() {
        this.title = '编辑监测点';
        this.isVisible = true;
    }

    //查询树
    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;
                        res.disabled = true;
                    });
                    this.nodeList = option;
                    this.toNode(option);
                } else {
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    toNode(data) {
        this.nodes = data.map(res => {
            return new NzTreeNode(res);
        });
    }

    //获取下级
    mouseAction(name: string, event: NzFormatEmitEvent) {
        let type;
        if(event.node.level == 0){
            type = "host";   //主机
        }
        if(event.node.level == 1){
            type = "web";  //网站监测
        }
        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(type == "host"){
                            res.disabled = true;
                        }
                    });
                    event.node.addChildren(dataSet);
                    this.nodeList[index].children = dataSet;
                    this.nodeList[index].expanded = true;
                } else {
                    event.node.addChildren([]);
                    this.message.warning('该下级为空');
                }

            }
        );
        setTimeout(_ => {
        }, 1000);
    }

    //选择树节点
    selectCheckTree(event: NzFormatEmitEvent) {
            this.selectId = event.node.origin.id;
    }

    handleOk(){
        for(let i  in this.validateForm.controls){
            this.validateForm.controls[i].markAsDirty();
            this.validateForm.controls[i].updateValueAndValidity();
        }
        if(this.validateForm.invalid){
            return false;
        }
        if(this.title == "添加监测点"){
            this.create();
        }
        if(this.title == "编辑监测点"){
            this.update();
        }
    }

    create(){
        this.validateForm.addControl('id',new FormControl(this.selectId));
        const str = JSON.stringify(this.validateForm.value);
        this.isVisible = false;
        this.initForm();
        this.done.emit(str);
    }

    update(){}

    handleCancel() {
        this.isVisible = false;
    }
}