Commit b35fea57 authored by wangqinghua's avatar wangqinghua

拓扑图增加权限

style update
parent b7e6df37
......@@ -25,7 +25,7 @@
</nz-select>
</div>
<div nz-col nzSpan="3">
<nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
<nz-select style="width: 100%;" nzShowSearch nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
<ng-container *ngFor="let item of groupList;">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
</ng-container>
......
......@@ -33,8 +33,7 @@
</nz-select>
</div>
<div nz-col nzSpan="7">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()"
[nzButtonStyle]="'solid'">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()">
<label nz-radio-button nzValue="1">今天</label>
<label nz-radio-button nzValue="2">昨天</label>
<label nz-radio-button nzValue="3">三天</label>
......
......@@ -20,7 +20,7 @@
</div>
<div nz-row [nzGutter]="4" class="search-form" >
<div nz-col nzSpan="4">
<nz-select style="width: 100%;" nzPlaceHolder="所有分组" [(ngModel)]="obj.groupid">
<nz-select style="width: 100%;" nzPlaceHolder="所有分组" nzShowSearch [(ngModel)]="obj.groupid">
<ng-container *ngFor="let item of groupList">
<nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
</ng-container>
......
......@@ -20,7 +20,7 @@
</div>
<div nz-row [nzGutter]="4" class="search-form">
<div nz-col nzSpan="4">
<nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid">
<nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch [(ngModel)]="obj.groupid">
<ng-container *ngFor="let item of groupList">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
</ng-container>
......
......@@ -23,14 +23,14 @@
</div>
<div nz-row [nzGutter]="4" class="search-form">
<div nz-col nzSpan="6">
<nz-select style="width: 100%;" nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList()">
<nz-select style="width: 100%;" nzPlaceHolder="选择分组" nzShowSearch [(ngModel)]="obj.groupid" (ngModelChange)="getList()">
<ng-container *ngFor="let item of groupList">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
</ng-container>
</nz-select>
</div>
<div nz-col nzSpan="6">
<nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
<nz-select style="width: 100%;" nzPlaceHolder="选择主机资源" nzShowSearch nzAllowClear [(ngModel)]="obj.hostid" (ngModelChange)="getListIO()">
<ng-container *ngFor="let item of hostList;">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
</ng-container>
......
<nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<form [formGroup]="validateForm" nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="name">拓扑图名称</nz-form-label>
<nz-form-control [nzSpan]="12">
<input type="text" nz-input name="name" formControlName="name" placeholder="名称" >
<nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入拓扑图名称</nz-form-explain>
</nz-form-control>
</nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="7" nzRequired nzFor="refreshRete">刷新频率</nz-form-label>-->
<!--<nz-form-control [nzSpan]="12">-->
<form [formGroup]="validateForm" nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="name">拓扑图名称</nz-form-label>
<nz-form-control [nzSpan]="12">
<input type="text" nz-input name="name" formControlName="name" placeholder="名称">
<nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">请输入拓扑图名称
</nz-form-explain>
</nz-form-control>
</nz-form-item>
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="7" nzRequired nzFor="refreshRete">刷新频率</nz-form-label>-->
<!--<nz-form-control [nzSpan]="12">-->
<!--<input style="width: 100px;margin-right: 10px" type="text" nz-input formControlName="refreshRete" placeholder="名称" >分钟-->
<!--<nz-form-explain *ngIf="validateForm.get('refreshRete').dirty && validateForm.get('refreshRete').errors">请输入刷新频率</nz-form-explain>-->
<!--</nz-form-control>-->
<!--</nz-form-item>-->
<!--<nz-form-item>-->
<!--<nz-form-label [nzSpan]="7" nzRequired nzFor="json">共享角色</nz-form-label>-->
<!--<nz-form-control [nzSpan]="12">-->
<!--<input type="text" nz-input name="json" formControlName="json" placeholder="名称" >-->
<!--<nz-form-explain *ngIf="validateForm.get('json').dirty && validateForm.get('json').errors">请输入分组名称</nz-form-explain>-->
<!--</nz-form-control>-->
<!--</nz-form-item>-->
</form>
<!--</nz-form-control>-->
<!--</nz-form-item>-->
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="json">共享角色</nz-form-label>
<nz-form-control [nzSpan]="12">
<div>
<button (click)="add()" nz-button nzType="primary">添加</button>
</div>
<nz-row>
<nz-col nzSpan="10">用户角色</nz-col>
<nz-col nzSpan="10">权限</nz-col>
<nz-col nzSpan="4">操作</nz-col>
</nz-row>
<nz-row *ngFor="let user of userGroup;let i = index;">
<nz-col nzSpan="10">{{user.name}}</nz-col>
<nz-col nzSpan="10">
<nz-switch [(ngModel)]="user.permission" nzCheckedChildren="读写" [ngModelOptions]="{standalone: true}"
nzUnCheckedChildren="只读"></nz-switch>
</nz-col>
<nz-col nzSpan="4">
<i (click)="remove(i)" class="anticon anticon-close main-color cursor"></i>
</nz-col>
</nz-row>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!--授予角色-->
<smart-select-role #smartSelectRole (done)="setRole($event)"></smart-select-role>
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
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',
......@@ -9,34 +10,38 @@ import {NzMessageService} from 'ng-zorro-antd';
styles: []
})
export class TopologyComponent implements OnInit {
@ViewChild('smartSelectRole') smartSelectRole: SelectRoleComponent;
@Output() done = new EventEmitter();
isVisible = false;
title: string;
validateForm:FormGroup;
validateForm: FormGroup;
topoId;
pageNum;
pageCount;
constructor(private fb:FormBuilder,private topologySer:TopologyService,
private message:NzMessageService) {
userGroup = []; //用户角色组
constructor(private fb: FormBuilder, private topologySer: TopologyService,
private message: NzMessageService) {
}
ngOnInit() {
this.initForm();
}
initForm(){
initForm() {
this.validateForm = this.fb.group(
{
name:['',[Validators.required]],
refreshRete:[''],
json:[''],
users:[[]],
userGroups:[[]]
name: ['', [Validators.required]],
refreshRete: [''],
json: [''],
users: [[]],
userGroups: [[]]
}
)
);
this.userGroup = [];
}
showAddMOodal() {
......@@ -51,59 +56,81 @@ export class TopologyComponent implements OnInit {
this.topologySer.findItem(id).subscribe(
(res) => {
if (res.errCode == 10000) {
this.validateForm.patchValue(res.data);
}else{
this.message.create('error',`${res.errMsg}`);
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}`);
}
}
);
}
handleOk(){
for(let i in this.validateForm.controls){
//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){
if (this.validateForm.invalid) {
return false;
}
if(this.title == "添加拓扑图"){
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 == "编辑拓扑图"){
if (this.title == '编辑拓扑图') {
this.update();
}
}
create(){
create() {
this.topologySer.create(this.validateForm.value).subscribe(
(res)=>{
if(res.errCode == 10000){
(res) => {
if (res.errCode == 10000) {
this.initForm();
this.message.create('success', `创建成功`);
this.isVisible = false;
this.done.emit();
}else{
} else {
this.message.create('error', `${res.errMsg}`);
}
}
)
);
}
update(){
this.validateForm.addControl('id',new FormControl(this.topoId));
update() {
this.validateForm.addControl('id', new FormControl(this.topoId));
this.topologySer.update(this.validateForm.value).subscribe(
(res)=>{
if(res.errCode == 10000){
(res) => {
if (res.errCode == 10000) {
this.initForm();
this.message.create('success', `编辑成功`);
this.done.emit();
this.isVisible = false;
}else{
} else {
this.message.create('error', `${res.errMsg}`);
}
}
)
);
}
handleCancel() {
......@@ -111,4 +138,31 @@ export class TopologyComponent implements OnInit {
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);
}
});
}
}
......@@ -39,7 +39,7 @@
<ng-container *ngIf="editType == '只读模式'">
<nz-select style="width: 200px;" nzPlaceHolder="选择背景色" [(ngModel)]="backgroundColor"
(ngModelChange)="changeColor()">
<nz-option nzLabel="深蓝" nzValue="#132c4c"></nz-option>
<nz-option nzLabel="深蓝" nzValue="#003880"></nz-option>
<nz-option nzLabel="白色" nzValue="#ffffff"></nz-option>
<nz-option nzLabel="淡绿" nzValue="#cadf91"></nz-option>
<nz-option nzLabel="棕色" nzValue="#cbb492"></nz-option>
......
......@@ -24,7 +24,7 @@ export class UserComponent implements OnInit {
validateForm:FormGroup;
userId;
genderList = [{value:1,label:'男'},{value:0,label:'女'}];
positionList = [{value:1,label:'组长'},{value:2,label:'组员'}];
positionList = [{value:1,label:'组长'},{value:0,label:'组员'}];
constructor(private fb:FormBuilder,private systemSer:SystemService,
private message:NzMessageService) {
......
......@@ -4,6 +4,11 @@
border-bottom: 1px solid #eeeeee;
}
nz-header {
background: #ffffff;
padding: 0 16px;
}
//自己写的
//主机详情
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment