icon.component.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {NzMessageService, UploadFile} from 'ng-zorro-antd';
import {TopologyService} from '../../topology.service';
import {FormBuilder, FormGroup, Validator, Validators} from '@angular/forms';
import {filter} from 'rxjs/operators';

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

    isVisible = false;
    fileList: UploadFile[] = [];
    validateForm: FormGroup;
    title = '添加图标';
    options: any;
    childrenList = [];

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

    values;

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

    initForm() {
        this.validateForm = this.fb.group({
            firstTypeId: [null, [Validators.required]],
            secondTypeId: [null],
            iconType: ['0'],
            defaultIcon: ['0'],
            name: [''],
        });
        this.fileList = [];
    }

    getList() {
        this.topologySer.findTreeWithWeb().subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.options = res.data;
                } else {
                    this.message.error(res.errMSg);
                }
            }
        );
    }

    beforeUpload = (file: UploadFile): boolean => {
        const isLt2M = file.size / 1024 < 300;
        if (!isLt2M) {
            this.message.error('图标必须小于300kb!');
        } else {
            this.fileList.push(file);
        }
        return false;
    };

    showModal() {
        this.isVisible = true;
    }

    handleOk() {
        if (this.fileList.length == 0) {
            this.message.error('请选择图标');
            return false;
        }
        for (let i in this.validateForm.controls) {
            this.validateForm.controls[i].markAsDirty();
            this.validateForm.controls[i].updateValueAndValidity();
        }
        if (this.validateForm.invalid) {
            return false;
        }
        const formData = new FormData();
        this.fileList.forEach((file: any) => {
            formData.append('file', file);
        });
        formData.append('iconType', this.validateForm.value.iconType);
        formData.append('defaultIcon', this.validateForm.value.defaultIcon);
        formData.append('firstTypeId', this.validateForm.value.firstTypeId);
        formData.append('secondTypeId', this.validateForm.value.secondTypeId);
        formData.append('name', this.validateForm.value.name);
        console.log(this.validateForm.value);
        this.topologySer.iconUpload(formData).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.message.success('添加成功');
                    this.isVisible = false;
                    this.initForm();
                    this.done.emit();
                } else {
                    this.message.error(res.errMsg);
                }
            }
        );
    }

    onChanges(e) {
        this.childrenList = [];
        console.log(e);
        if (!isNaN(e)) {
            console.log('网站监测');
            this.validateForm.get('secondTypeId').clearValidators();
            this.validateForm.value.iconType = '1';
        } else {
            this.validateForm.get('secondTypeId').setValidators(Validators.required);
            console.log('主机资源');
        }
        this.options.forEach(res => {
            if (res.id == e) {
                this.childrenList = res.childs;
            }
        });
    }

    handleCancel() {
        this.isVisible = false;
    }

}