topology.component.ts

import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {TopologyService} from '../../topology.service';
import {NzMessageService} from 'ng-zorro-antd';
import {SelectRoleComponent} from '../../../modal/select-role/select-role.component';

@Component({
    selector: 'smart-topology',
    templateUrl: './topology.component.html',
    styles: []
})
export class TopologyComponent implements OnInit {
    @ViewChild('smartSelectRole') smartSelectRole: SelectRoleComponent;
    @Output() done = new EventEmitter();

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

    pageNum;
    pageCount;

    userGroup = [];  //用户角色组

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

    ngOnInit() {
        this.initForm();
    }

    initForm() {
        this.validateForm = this.fb.group(
            {
                name: ['', [Validators.required]],
                refreshRete: [''],
                json: [''],
                users: [[]],
                userGroups: [[]]
            }
        );
        this.userGroup = [];
    }

    showAddMOodal() {
        this.isVisible = true;
        this.title = '添加拓扑图';
    }

    showEditModal(id) {
        this.title = '编辑拓扑图';
        this.isVisible = true;
        this.topoId = id;
        this.topologySer.findItem(id).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.validateForm.patchValue(res.data);
                    res.data.userGroups.forEach(r => {
                        const data = {
                            userGroupId: r.userGroupId,
                            name: r.name,
                            permission: r.permission === 3,
                        };
                        this.userGroup.push(data);
                    });

                } else {
                    this.message.create('error', `${res.errMsg}`);
                }
            }
        );
    }

    //permission 2=只读， 3=读写
    handleOk() {
        for (let i  in this.validateForm.controls) {
            this.validateForm.controls[i].markAsDirty();
            this.validateForm.controls[i].updateValueAndValidity();
        }
        if (this.validateForm.invalid) {
            return false;
        }
        const userGroup = [];
        this.userGroup.forEach(e => {
            const data = {
                userGroupId: e.userGroupId,
                name: e.name,
                permission: e.permission == true ? 3 : 2,
            };
            userGroup.push(data);
        });
        this.validateForm.patchValue({
            userGroups: userGroup
        });
        if (this.title == '添加拓扑图') {
            this.create();
        }
        if (this.title == '编辑拓扑图') {
            this.update();
        }
    }

    create() {
        this.topologySer.create(this.validateForm.value).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.initForm();
                    this.message.create('success', `创建成功`);
                    this.isVisible = false;
                    this.done.emit();
                } else {
                    this.message.create('error', `${res.errMsg}`);
                }
            }
        );
    }

    update() {
        this.validateForm.addControl('id', new FormControl(this.topoId));
        this.topologySer.update(this.validateForm.value).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.initForm();
                    this.message.create('success', `编辑成功`);
                    this.done.emit();
                    this.isVisible = false;
                } else {
                    this.message.create('error', `${res.errMsg}`);
                }
            }
        );
    }

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

    //选择角色
    add() {
        this.smartSelectRole.showModal('选择角色', null);
    }

    //移除
    remove(index) {
        this.userGroup.splice(index, 1);
    }

    //permission 2=只读， 3=读写
    setRole(e) {
        const idArr = this.userGroup.map(m => {
            return m.userGroupId;
        });
        e.forEach(f => {
            if (idArr.indexOf(f.id) == -1) {
                const data = {
                    userGroupId: f.id,
                    name: f.name,
                    permission: false,
                };
                this.userGroup.push(data);
            }
        });
    }

}