128 changed files with 2 additions and 9886 deletions
@ -1,25 +0,0 @@
|
||||
<div style="height: 90%; overflow-y: auto;"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
</div> |
||||
@ -1,30 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
th,td{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 12px; |
||||
} |
||||
} |
||||
mat-tree{ |
||||
width: 500px; |
||||
button{ |
||||
display: block; |
||||
float: right; |
||||
} |
||||
mat-tree-node{ |
||||
position: relative; |
||||
.deleted{ |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
.create{ |
||||
position: absolute; |
||||
right: 40px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,144 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
export interface authority { |
||||
id: string, |
||||
name: string, |
||||
value: string, |
||||
order: number, |
||||
parentId: string |
||||
} |
||||
@Component({ |
||||
selector: 'app-authority', |
||||
templateUrl: './authority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class AuthorityComponent implements OnInit { |
||||
|
||||
data:any =[] |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
constructor(private http: HttpClient,public dialog: MatDialog,private tree:TreeService) { } |
||||
|
||||
//重新拉去列表函数
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.newdata = this.tree.toTree(data) |
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
//初始化视图
|
||||
ngOnInit() { |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.dataSource.data = this.tree.toTree(data) |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//创建按钮
|
||||
createauthority(value){ |
||||
const dialogRef = this.dialog.open(CreateAuthority, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.newdata = [] |
||||
this.getlist() |
||||
}
|
||||
} |
||||
); |
||||
} |
||||
//删除按钮
|
||||
deleted(authority){ |
||||
var isdeleted = confirm("确定要删除此用户吗？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.newdata = [] |
||||
this.http.delete(`/api/Permissions/${authority.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
//创建组件
|
||||
@Component({ |
||||
selector: 'createauthority', |
||||
templateUrl: './createauthority.component.html', |
||||
styleUrls: ['./authority.component.scss'] |
||||
}) |
||||
export class CreateAuthority { |
||||
myControl = new FormControl(); |
||||
options: string[] = ['0', '1','2', '3','4', '5','6', '7','8']; |
||||
|
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateAuthority>,public snackBar: MatSnackBar, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
|
||||
if(value.parentId == "null"){ |
||||
value.parentId = null |
||||
} |
||||
//编写请求创建用户接口(value是参数)//并且刷新一下
|
||||
this.http.post( |
||||
'/api/Permissions',
|
||||
{ |
||||
id: '', |
||||
name: value.name, |
||||
value: value.value, |
||||
order: Number(value.order), |
||||
parentId: this.data.id |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(data);
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
} |
||||
@ -1,36 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="权限名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="value" name="value" |
||||
required |
||||
ngModel #name="ngModel" placeholder="权限值"> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<mat-form-field class="example-full-width"> |
||||
<input type="text" placeholder="权限顺序" aria-label="Number" matInput [matAutocomplete]="auto1" name="order" ngModel #order="ngModel"> |
||||
<mat-autocomplete #auto1="matAutocomplete"> |
||||
<mat-option *ngFor="let option of options" [value]="option"> |
||||
{{option}} |
||||
</mat-option> |
||||
</mat-autocomplete> |
||||
</mat-form-field> |
||||
|
||||
<!-- <mat-form-field> |
||||
<input matInput id="parentId" name="parentId" type='text' |
||||
required minlength="3" |
||||
ngModel #organizationId="ngModel" placeholder="父级编号"> |
||||
</mat-form-field> |
||||
--> |
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,18 +0,0 @@
|
||||
<p> |
||||
<span matBadge="4" matBadgeOverlap="false">未读信息</span> |
||||
</p> |
||||
|
||||
<p> |
||||
<button |
||||
mat-raised-button color="primary" |
||||
matBadge="8" |
||||
matBadgePosition="after" |
||||
matBadgeColor="accent"> |
||||
按钮徽章 |
||||
</button> |
||||
</p> |
||||
|
||||
<p> |
||||
<mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon> |
||||
</p> |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { BadgeComponent } from './badge.component'; |
||||
|
||||
describe('BadgeComponent', () => { |
||||
let component: BadgeComponent; |
||||
let fixture: ComponentFixture<BadgeComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ BadgeComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(BadgeComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,14 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-badge', |
||||
templateUrl: './badge.component.html', |
||||
styleUrls: ['./badge.component.scss'] |
||||
}) |
||||
export class BadgeComponent implements OnInit { |
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,6 +0,0 @@
|
||||
|
||||
<ul cdkDropList (cdkDropListDropped)="drop($event)"> |
||||
<li *ngFor="let item of data" cdkDrag>{{item.name}}</li> |
||||
</ul> |
||||
|
||||
<mat-checkbox checked="checked" ></mat-checkbox> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ButtonComponent } from './button.component'; |
||||
|
||||
describe('ButtonComponent', () => { |
||||
let component: ButtonComponent; |
||||
let fixture: ComponentFixture<ButtonComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ButtonComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ButtonComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,89 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; |
||||
@Component({ |
||||
selector: 'app-button', |
||||
templateUrl: './button.component.html', |
||||
styleUrls: ['./button.component.scss'] |
||||
}) |
||||
export class ButtonComponent implements OnInit { |
||||
|
||||
constructor(public http: HttpClient) { } |
||||
|
||||
|
||||
data =[ |
||||
{ |
||||
id:"1", |
||||
name:"广西总队", |
||||
order:0, |
||||
parentId:null, |
||||
children:[ |
||||
{ |
||||
id:"2", |
||||
name:"南宁支队", |
||||
order:2, |
||||
parentId:1, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤大队", |
||||
order:0, |
||||
parentId:2, |
||||
children:[ |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤3中队", |
||||
order:3, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤2中队", |
||||
order:2, |
||||
parentId:6, |
||||
}, |
||||
{ |
||||
id:"6", |
||||
name:"南宁特勤1中队", |
||||
order:1, |
||||
parentId:6, |
||||
} |
||||
] |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
id:"3", |
||||
name:"北海支队", |
||||
order:1, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"4", |
||||
name:"梧州支队", |
||||
order:0, |
||||
parentId:1 |
||||
}, |
||||
{ |
||||
id:"5", |
||||
name:"桂林支队", |
||||
order:3, |
||||
parentId:1 |
||||
}, |
||||
] |
||||
} |
||||
] |
||||
|
||||
|
||||
ngOnInit() { |
||||
var str = "xxxx.jjjj" |
||||
// console.log(2222,str.split('.')[1])
|
||||
} |
||||
|
||||
drop(event: CdkDragDrop<string[]>) { |
||||
moveItemInArray(this.data, event.previousIndex, event.currentIndex); |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
<mat-card> |
||||
<mat-card-title>简单的卡片</mat-card-title> |
||||
<mat-card-subtitle>卡片的字幕</mat-card-subtitle> |
||||
<mat-card-content>原来爱情的世界很大,大得可以装下一百种委屈;原来爱情的世界很小,小得三个人就会窒息。</mat-card-content> |
||||
<img mat-card-image src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579480490&di=f80c114e78ea7a439c19cc7f1622227f&src=http://pic1.win4000.com/wallpaper/2017-11-17/5a0e94afc140c.jpg"> |
||||
<mat-card-actions> |
||||
<button mat-raised-button color="primary">我是按钮</button> |
||||
</mat-card-actions> |
||||
<mat-card-footer> |
||||
我要被固定在卡片底部 |
||||
</mat-card-footer> |
||||
</mat-card> |
||||
@ -1,10 +0,0 @@
|
||||
|
||||
mat-card{ |
||||
width: 300px; |
||||
height: 600px; |
||||
img{ |
||||
width: 300px; |
||||
height: 300px; |
||||
padding: 16px; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { CardComponent } from './card.component'; |
||||
|
||||
describe('CardComponent', () => { |
||||
let component: CardComponent; |
||||
let fixture: ComponentFixture<CardComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ CardComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(CardComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-card', |
||||
templateUrl: './card.component.html', |
||||
styleUrls: ['./card.component.scss'] |
||||
}) |
||||
export class CardComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,11 +0,0 @@
|
||||
<mat-form-field> |
||||
<input matInput [matDatepicker]="picker" placeholder="选择日期" (dateInput)="addEvent('日期是：',$event)" (dataChange)="addEvent('日期是：',$event)"> |
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> |
||||
<mat-datepicker #picker></mat-datepicker> |
||||
|
||||
</mat-form-field> |
||||
<div class="example-events"> |
||||
<div *ngFor="let e of events">{{e}}</div> |
||||
</div> |
||||
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.example-events { |
||||
width: 400px; |
||||
height: 200px; |
||||
border: 1px solid #555; |
||||
overflow: auto; |
||||
} |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { DateselectComponent } from './dateselect.component'; |
||||
|
||||
describe('DateselectComponent', () => { |
||||
let component: DateselectComponent; |
||||
let fixture: ComponentFixture<DateselectComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ DateselectComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(DateselectComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,23 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {MatDatepickerInputEvent} from '@angular/material/datepicker'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-dateselect', |
||||
templateUrl: './dateselect.component.html', |
||||
styleUrls: ['./dateselect.component.scss'], |
||||
}) |
||||
|
||||
export class DateselectComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
events: string[] = []; |
||||
|
||||
addEvent(type: string, event: MatDatepickerInputEvent<Date>) { |
||||
this.events.push(`${type}: ${event.value}`); |
||||
} |
||||
} |
||||
@ -1,44 +0,0 @@
|
||||
<h1 mat-dialog-title>创建企业用户</h1> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="loginName" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,19}$" |
||||
required ngModel placeholder="请输入登录账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="tel" name="tel" |
||||
pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$" |
||||
required ngModel placeholder="请输入联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="unitname" name="unitname" |
||||
required ngModel placeholder="请输入单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="creditcode" name="creditcode" |
||||
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
required ngModel placeholder="请输入统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content *ngIf="errmsg"> |
||||
<p style="font-size: 14px; color: red;">{{errmsg}}</p> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,35 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialogRef} from '@angular/material/dialog'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'addenterpriseuser', |
||||
templateUrl: './addenterpriseuser.component.html', |
||||
styleUrls: ['./enterpriseuser.component.scss'] |
||||
}) |
||||
export class AddEnterpriserUser { |
||||
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddEnterpriserUser>) {} |
||||
|
||||
errmsg:any; //捕获错误信息
|
||||
//提交创建表单
|
||||
onSubmit (e) { |
||||
let date = new Date() |
||||
this.http.post('/api/CompanyUsers',{ |
||||
name:e.loginName, |
||||
phone:e.tel, |
||||
enabled:true, |
||||
creationTime:date, |
||||
usci:e.creditcode, |
||||
companyName:e.unitname |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close(data)}, |
||||
error=>{this.errmsg=error} |
||||
) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,40 +0,0 @@
|
||||
<h1 mat-dialog-title>编辑企业用户</h1> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="loginName" disabled |
||||
required [(ngModel)]="data.name" placeholder="登录账号"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="tel" name="tel" |
||||
pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$" |
||||
required [(ngModel)]="companyPhone" placeholder="联系电话"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="unitname" name="unitname" |
||||
required [(ngModel)]="companyName" placeholder="单位名称"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput id="creditcode" name="creditcode" |
||||
pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" |
||||
required [(ngModel)]="companyUsci" placeholder="统一社会信用代码"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,78 +0,0 @@
|
||||
<div class="header"> |
||||
<form #form="ngForm"> |
||||
<div class="queryBox"> |
||||
|
||||
<div class="queryField"> |
||||
<button type="button" mat-raised-button color="primary" (click)='open()'>创建企业用户</button> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">登录账号:</label> |
||||
<input type="text" [(ngModel)]="userLogin" name="userLogin"> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">单位名称:</label> |
||||
<input type="text" [(ngModel)]="userName" name="userName"> |
||||
</div> |
||||
|
||||
<div class="queryField"> |
||||
<label style="margin-right: 10px;">统一社会信用代码:</label> |
||||
<input type="text" [(ngModel)]="creditcode" name="creditcode"> |
||||
</div> |
||||
|
||||
</div> |
||||
<div style="width: 100%;text-align: center;"> |
||||
<button mat-raised-button color="primary" (click)='initData()'>查询</button> |
||||
<button mat-raised-button style="margin-left: 25px;" type="button" (click)='empty()'>重置</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="loginName"> |
||||
<th mat-header-cell *matHeaderCellDef>登录账号</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}<span style="color: red;" *ngIf="element.cancelled">(该账号已被注销)</span></td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="unitName"> |
||||
<th mat-header-cell *matHeaderCellDef>单位名称</th> |
||||
<td mat-cell *matCellDef="let element">{{element.companyName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="creditcode"> |
||||
<th mat-header-cell *matHeaderCellDef>统一社会信用代码</th> |
||||
<td mat-cell *matCellDef="let element">{{element.usci}}</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="time"> |
||||
<th mat-header-cell *matHeaderCellDef>创建时间</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.creationTime|date:'yyyy-MM-dd'}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='reset(element)' *ngIf="!element.cancelled">重置密码</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='see(element)' *ngIf="!element.cancelled">查看</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='edit(element)' *ngIf="!element.cancelled">编辑</button> |
||||
<button mat-raised-button color="primary" class="maginleft" (click)='enabled(element)' *ngIf="!element.cancelled && !element.enabled">启用</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='noEnabled(element)' *ngIf="!element.cancelled && element.enabled">禁用</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='logoff(element)' *ngIf="!element.cancelled">注销</button> |
||||
<button mat-raised-button color="warn" class="maginleft" (click)='delete(element)' *ngIf="element.cancelled">删除</button> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
<mat-paginator [length]="length" |
||||
[pageSize]="pageSize" |
||||
[pageSizeOptions]="pageSizeOptions" |
||||
(page)="chagePage($event)"> |
||||
</mat-paginator> |
||||
|
||||
@ -1,38 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
.maginleft { |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
|
||||
|
||||
.header { |
||||
width: 100%; |
||||
padding: 10px; |
||||
margin-bottom: 10px; |
||||
box-sizing: border-box; |
||||
border-bottom: 1px solid rgba(0,0,0,0.12); |
||||
.queryBox { |
||||
box-sizing: border-box; |
||||
padding: 5px 15px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
align-items:center; |
||||
justify-content:center; |
||||
.queryField { |
||||
margin: 0 15px; |
||||
input { |
||||
width: 180px; |
||||
height: 22px; |
||||
line-height: 22px; |
||||
border-radius: 3px;} |
||||
} |
||||
|
||||
} //queryBox |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { EnterpriseuserComponent } from './enterpriseuser.component'; |
||||
|
||||
describe('EnterpriseuserComponent', () => { |
||||
let component: EnterpriseuserComponent; |
||||
let fixture: ComponentFixture<EnterpriseuserComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ EnterpriseuserComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(EnterpriseuserComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,241 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, Inject } from '@angular/core'; |
||||
import {HttpClient} from '@angular/common/http' |
||||
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatPaginator } from '@angular/material/paginator'; |
||||
import { MatTableDataSource } from '@angular/material/table'; |
||||
import { PageEvent } from '@angular/material/paginator'; |
||||
import { AddEnterpriserUser } from './addenterpriseuser.component' |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-enterpriseuser', |
||||
templateUrl: './enterpriseuser.component.html', |
||||
styleUrls: ['./enterpriseuser.component.scss'] |
||||
}) |
||||
export class EnterpriseuserComponent implements OnInit { |
||||
|
||||
constructor(public http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit() { |
||||
this.initData() |
||||
} |
||||
|
||||
displayedColumns: string[] = ['loginName', 'unitName', 'creditcode','time', 'operation']; |
||||
dataSource:any; //所有企业用户
|
||||
|
||||
userLogin:string; //搜索账号
|
||||
userName:string; //搜索名称
|
||||
creditcode:string//统一社会信用代码
|
||||
//分页
|
||||
@ViewChild(MatPaginator, {static: true})
|
||||
pageEvent: PageEvent; |
||||
paginator: MatPaginator; |
||||
length:any; //共多少条数据
|
||||
pageSize:any; //每页条数
|
||||
pageSizeOptions: number[] = [10] //设置每页条数
|
||||
pageNumber:number = 1; //第几页
|
||||
|
||||
//分页切换
|
||||
chagePage (e) { |
||||
this.pageNumber = e.pageIndex+1 |
||||
let data= { |
||||
Name: this.userLogin || '', |
||||
CompanyName: this.userName || '', |
||||
USCI: this.creditcode || '', |
||||
PageNumber: String(this.pageNumber), |
||||
} |
||||
this.http.get('/api/CompanyUsers',{params:data}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.dataSource = new MatTableDataSource<any>(data.items) |
||||
}) |
||||
} |
||||
|
||||
//页面初始化 + 查询 + 重置
|
||||
initData () { |
||||
let data= { |
||||
Name: this.userLogin || '', |
||||
CompanyName: this.userName || '', |
||||
USCI: this.creditcode || '', |
||||
PageNumber: '1', |
||||
} |
||||
this.http.get('/api/CompanyUsers',{params:data}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.pageEvent.pageIndex = 0 |
||||
this.dataSource = new MatTableDataSource<any>(data.items) |
||||
}) |
||||
} |
||||
|
||||
//更新当前页数据
|
||||
getAllCompanyUsers () { |
||||
let data= { |
||||
Name: this.userLogin || '', |
||||
CompanyName: this.userName || '', |
||||
USCI: this.creditcode || '', |
||||
PageNumber: String(this.pageNumber), |
||||
} |
||||
this.http.get('/api/CompanyUsers',{params:data}).subscribe((data:any)=>{ |
||||
this.length = data.totalCount |
||||
this.pageSize = data.pageSize |
||||
this.dataSource = new MatTableDataSource<any>(data.items) |
||||
}) |
||||
} |
||||
|
||||
//清空搜索
|
||||
empty () { |
||||
this.userLogin = '' |
||||
this.userName = '' |
||||
this.creditcode = '' |
||||
this.initData() |
||||
} |
||||
|
||||
//创建企业用户
|
||||
open(){ |
||||
let dialogRef = this.dialog.open(AddEnterpriserUser); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getAllCompanyUsers()} |
||||
}); |
||||
} |
||||
|
||||
//编辑企业用户
|
||||
edit (e) { |
||||
let dialogRef = this.dialog.open(editenterpriseuser,{data:e}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getAllCompanyUsers()} |
||||
}); |
||||
} |
||||
|
||||
//重置密码
|
||||
reset (e) { |
||||
this.http.put(`/api/CompanyUsers/${e.name}/ResetPassword`,{}).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('重置密码成功!','确定',config); |
||||
}) |
||||
} |
||||
|
||||
//查看企业信息
|
||||
see (e) { |
||||
this.http.get(`/api/CompanyUsers/${e.name}`).subscribe( |
||||
data=> { |
||||
let dialogRef = this.dialog.open(seeenterpriseuser, {data}); |
||||
dialogRef.afterClosed().subscribe();
|
||||
} |
||||
) |
||||
} |
||||
|
||||
//启用
|
||||
enabled (e) { |
||||
this.http.put(`/api/CompanyUsers/${e.name}`,{ |
||||
name:e.name, |
||||
phone:e.phone, |
||||
enabled:true, |
||||
creationTime:e.creationTime, |
||||
usci:e.usci, |
||||
companyId:e.companyId, |
||||
companyName:e.companyName |
||||
}).subscribe(data=>{ |
||||
this.getAllCompanyUsers() |
||||
}) |
||||
} |
||||
|
||||
//禁用
|
||||
noEnabled (e) { |
||||
this.http.put(`/api/CompanyUsers/${e.name}`,{ |
||||
name:e.name, |
||||
phone:e.phone, |
||||
enabled:false, |
||||
creationTime:e.creationTime, |
||||
usci:e.usci, |
||||
companyId:e.companyId, |
||||
companyName:e.companyName |
||||
}).subscribe(data=>{ |
||||
this.getAllCompanyUsers() |
||||
}) |
||||
} |
||||
|
||||
//注销用户
|
||||
logoff (e) { |
||||
let isTrue = confirm('注销是不可逆操作,您确定要注销吗') |
||||
if (isTrue) { |
||||
this.http.delete(`/api/CompanyUsers/${e.name}/Cancel`).subscribe(data=>{ |
||||
this.getAllCompanyUsers() }) |
||||
} |
||||
} |
||||
|
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm('您确定要删除吗') |
||||
if (isTrue) { |
||||
this.http.delete(`/api/CompanyUsers/${e.name}`).subscribe(data=>{ |
||||
this.getAllCompanyUsers() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑企业用户
|
||||
@Component({ |
||||
selector: 'app-editenterpriseuser', |
||||
templateUrl: './editenterpriseuser.html', |
||||
styleUrls: ['./enterpriseuser.component.scss'] |
||||
}) |
||||
export class editenterpriseuser { |
||||
|
||||
constructor(public http: HttpClient,public dialog: MatDialog, |
||||
@Inject(MAT_DIALOG_DATA) public data,public dialogRef: MatDialogRef<any>,) { } |
||||
|
||||
ngOnInit() { |
||||
this.companyName = this.data.companyName |
||||
this.companyPhone = this.data.phone |
||||
this.companyUsci = this.data.usci |
||||
} |
||||
|
||||
companyName:any; //企业单位名称
|
||||
companyPhone:any; //企业电话
|
||||
companyUsci:any; //企业统一社会信用代码
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
this.http.put(`/api/CompanyUsers/${this.data.name}`,{ |
||||
name:this.data.name, |
||||
phone:e.tel, |
||||
enabled:this.data.enabled, |
||||
creationTime:this.data.creationTime, |
||||
usci:e.creditcode, |
||||
companyId:this.data.companyId, |
||||
companyName:e.unitname |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//查看企业用户
|
||||
@Component({ |
||||
selector: 'app-seeenterpriseuser', |
||||
templateUrl: './seeenterpriseuser.html', |
||||
styleUrls: ['./enterpriseuser.component.scss'] |
||||
}) |
||||
export class seeenterpriseuser { |
||||
|
||||
constructor(public http: HttpClient,public dialog: MatDialog, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit() {} |
||||
|
||||
} |
||||
@ -1,29 +0,0 @@
|
||||
<span mat-dialog-title>查看企业用户</span> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-list role="list"> |
||||
<mat-list-item role="listitem">登录账号: |
||||
<span class="maginleft">{{data.name}}</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem">单位名称: |
||||
<span class="maginleft">{{data.companyName}}</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem">联系电话: |
||||
<span class="maginleft">{{data.phone}}</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem">统一社会信用代码: |
||||
<span class="maginleft">{{data.usci}}</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem">创建时间: |
||||
<span class="maginleft">{{data.creationTime|date:'yyyy-MM-dd'}}</span> |
||||
</mat-list-item> |
||||
<mat-list-item role="listitem">是否禁用: |
||||
<span class="maginleft" *ngIf="data.enabled">否</span> |
||||
<span class="maginleft" *ngIf="!data.enabled">是</span> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" mat-dialog-close>关闭</button> |
||||
</div> |
||||
@ -1,20 +0,0 @@
|
||||
<div mat-dialog-title>新增内置分组</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="name" placeholder="内置分组名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,34 +0,0 @@
|
||||
<div mat-dialog-title>新增内置分组属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="name" placeholder="内置分组属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div style="margin-bottom: 20px;"> |
||||
<label>是否逐层统计:</label> |
||||
<mat-radio-group required ngModel name='isEachFloor' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div style="margin-bottom: 20px;"> |
||||
<label>是否合并:</label> |
||||
<mat-radio-group required ngModel name='isMerged' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,20 +0,0 @@
|
||||
<div mat-dialog-title>新增消防设施模板</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="name" placeholder="消防设施模板名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,37 +0,0 @@
|
||||
<div mat-dialog-title>新增可选分组</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="name" placeholder="可选分组名"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select placeholder="分组类型" ngModel name="type" required> |
||||
<mat-option value="0">表单</mat-option> |
||||
<mat-option value="1">表格</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select placeholder="数据行为" ngModel name="addMode" required> |
||||
<mat-option value="0">不新增</mat-option> |
||||
<mat-option value="1">新增行</mat-option> |
||||
<mat-option value="2">新增组</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,71 +0,0 @@
|
||||
<div mat-dialog-title>新增可选分组属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="propertyName" placeholder="可选分组属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="类型" ngModel name="propertyType" required> |
||||
<mat-option *ngFor="let item of propertyType" [value]="item.value"> |
||||
{{item.viewValue}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput ngModel |
||||
name="propertyValue" placeholder="默认值"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<label>是否必填:</label> |
||||
<mat-radio-group ngModel name='required' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="验证规则" ngModel name="ruleName"> |
||||
<mat-option value="None">不验证</mat-option> |
||||
<mat-option value="≥">≥</mat-option> |
||||
<mat-option value="≤">≤</mat-option> |
||||
<mat-option value="Range">区间</mat-option> |
||||
<mat-option value="Regex">正则匹配</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput ngModel name="ruleValue"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
name="physicalUnit" placeholder="单位"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
name="tag" placeholder="注释说明"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,40 +0,0 @@
|
||||
<div mat-dialog-title>编辑内置分组属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="attributeName" |
||||
required name="name" placeholder="内置分组属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
<div style="margin-bottom: 20px;"> |
||||
<label>是否逐层统计:</label> |
||||
<mat-radio-group required [(ngModel)]="attributeIsEachFloor" name='isEachFloor' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div style="margin-bottom: 20px;"> |
||||
<label>是否合并:</label> |
||||
<mat-radio-group required [(ngModel)]="attributeIsMerged" name='isMerged' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div> |
||||
<mat-form-field> |
||||
<input type="number" matInput [(ngModel)]="attributeOrder" |
||||
required name="order" placeholder="手动排序,数值越大,排序越靠后"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,20 +0,0 @@
|
||||
<div mat-dialog-title>编辑消防设施模板</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="templateName" |
||||
required name="name" placeholder="消防设施模板名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,76 +0,0 @@
|
||||
<div mat-dialog-title>编辑可选分组属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="propertyName" |
||||
required name="propertyName" placeholder="属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="类型" [(ngModel)]="propertyType" name="propertyType" required> |
||||
<mat-option *ngFor="let item of type" [value]="item.value"> |
||||
{{item.viewValue}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput [(ngModel)]="propertyValue" |
||||
name="propertyValue" placeholder="默认值"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<label>是否必填:</label> |
||||
<mat-radio-group [(ngModel)]="required" name='required' |
||||
style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="验证规则" [(ngModel)]="ruleName" name="ruleName"> |
||||
<mat-option value="None">不验证</mat-option> |
||||
<mat-option value="≥">≥</mat-option> |
||||
<mat-option value="≤">≤</mat-option> |
||||
<mat-option value="Range">区间</mat-option> |
||||
<mat-option value="Regex">正则匹配</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput [(ngModel)]="ruleValue" name="ruleValue"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="physicalUnit" |
||||
name="physicalUnit" placeholder="单位"> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="number" matInput [(ngModel)]="order" |
||||
name="order" placeholder="手动排序,数值越大,排序越靠后"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="tag" |
||||
name="tag" placeholder="注释说明"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,189 +0,0 @@
|
||||
<div class="content"> |
||||
<div class="leftBox"> |
||||
<div class="bank"> |
||||
<span>消防设施模板</span> |
||||
<div class="btnBox"> |
||||
<button mat-icon-button (click)='addTemplate()'> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)='editTemplate()'> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)='enabledTemplate()'> |
||||
<mat-icon>block</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)='deleteTemplate()'> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div *ngFor="let item of allFireProtectionFacilities,let key=index" class="material" |
||||
(click)='selectFire(item,key)' [ngClass]="{'active': key === FireProtectionFacilitiesIndex}"> |
||||
<span class="overFlowText" [title]='item.name'>{{item.name}}</span> |
||||
<mat-icon *ngIf="!item.enabled" class="blockBtn">block</mat-icon> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="rightBox"> |
||||
|
||||
<mat-tab-group style="height: 100%;"> |
||||
<mat-tab label="内置分组"> |
||||
<div class="groupingContent"> |
||||
<div class="groupingButton"> |
||||
<label *ngIf="selectFireProtectionFacilities" style="margin-right: 10px;">{{selectFireProtectionFacilities.name}}</label> |
||||
<button mat-raised-button color="primary" (click)="addBuiltIn()">新增内置分组</button> |
||||
<mat-icon title="上移" (click)='topBuilt()'>arrow_upward</mat-icon> |
||||
<mat-icon title="下移" (click)='bottomBuilt()'>arrow_downward</mat-icon> |
||||
</div> |
||||
|
||||
<div *ngFor="let item of builtInGrouping;let key = index"> |
||||
<p class="groupingHeader"> |
||||
<mat-checkbox (change)='changeBuilt($event,item)'></mat-checkbox> |
||||
<label style="margin: 0 10px;">{{item.name}}</label> |
||||
<mat-icon (click)='addBuiltInAttribute(item)'>add_box</mat-icon> |
||||
<mat-icon style="color:#999" *ngIf="!item.enabled" (click)='enabledBuilt(item)'>block</mat-icon> |
||||
<mat-icon style="color:red" *ngIf="item.enabled" (click)='enabledBuilt(item)'>block</mat-icon> |
||||
<mat-icon (click)='deleteBuilt(item)'>delete</mat-icon> |
||||
</p> |
||||
<div class="overFlow"> |
||||
<table mat-table [dataSource]="item.facilityItems"> |
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"></td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>名称</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.name}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="isEachFloor"> |
||||
<th mat-header-cell *matHeaderCellDef>是否逐层统计</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.isEachFloor">是</label> |
||||
<label *ngIf="!element.isEachFloor">否</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="isMerged"> |
||||
<th mat-header-cell *matHeaderCellDef>是否合并</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.isMerged">是</label> |
||||
<label *ngIf="!element.isMerged">否</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-icon title="编辑" (click)='editBuiltInAttribute(item,element)'> border_color</mat-icon> |
||||
<mat-icon title="删除" (click)='deleteBuiltInAttribute(item,element)'>delete</mat-icon> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumn; sticky: true"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</mat-tab> |
||||
|
||||
<mat-tab label="可选分组"> |
||||
<div class="groupingContent"> |
||||
<div class="groupingButton"> |
||||
<label *ngIf="selectFireProtectionFacilities" style="margin-right: 10px;">{{selectFireProtectionFacilities.name}}</label> |
||||
<button mat-raised-button color="primary" (click)='addOptional()'>新增可选分组</button> |
||||
<mat-icon title="上移" (click)='topOptional()'>arrow_upward</mat-icon> |
||||
<mat-icon title="下移" (click)='bottomOptional()'>arrow_downward</mat-icon> |
||||
</div> |
||||
|
||||
<div *ngFor="let item of optionalGrouping"> |
||||
<p class="groupingHeader"> |
||||
<mat-checkbox (change)='changeOptional($event,item)'></mat-checkbox> |
||||
<label style="margin: 0 10px;">{{item.name}}</label> |
||||
<mat-icon (click)='addOptionalAttribute(item)'>add_box</mat-icon> |
||||
<mat-icon *ngIf="!item.isOptional" (click)='isOptional(item)'>star</mat-icon> |
||||
<mat-icon *ngIf="item.isOptional" (click)='isOptional(item)'>star_border</mat-icon> |
||||
<mat-icon style="color:#999" *ngIf="!item.enabled" (click)='enabledOptional(item)'>block</mat-icon> |
||||
<mat-icon style="color:red" *ngIf="item.enabled" (click)='enabledOptional(item)'>block</mat-icon> |
||||
<mat-icon (click)='deleteOptional(item)'>delete</mat-icon> |
||||
</p> |
||||
<div> |
||||
<table mat-table [dataSource]="item.propertyInfos"> |
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef></th> |
||||
<td mat-cell *matCellDef="let element"></td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>名称</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.propertyName}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="type"> |
||||
<th mat-header-cell *matHeaderCellDef>类型</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.propertyType==0">单行文本</label> |
||||
<label *ngIf="element.propertyType==1">多行文本</label> |
||||
<label *ngIf="element.propertyType==2">数值</label> |
||||
<label *ngIf="element.propertyType==3">图片</label> |
||||
<label *ngIf="element.propertyType==4">图片数量</label> |
||||
<label *ngIf="element.propertyType==5">方向</label> |
||||
<label *ngIf="element.propertyType==6">布尔值</label> |
||||
<label *ngIf="element.propertyType==7">供给区域</label> |
||||
<label *ngIf="element.propertyType==8">供给类型</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="default"> |
||||
<th mat-header-cell *matHeaderCellDef>默认值</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.propertyValue}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="required"> |
||||
<th mat-header-cell *matHeaderCellDef>必填</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.required">是</label> |
||||
<label *ngIf="!element.required">否</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="physicalUnit"> |
||||
<th mat-header-cell *matHeaderCellDef>单位</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.physicalUnit}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-icon title="编辑" (click)='editOptionalAttribute(item,element)'> border_color</mat-icon> |
||||
<mat-icon title="删除" (click)='deleteOptionalAttribute(item,element)'> delete</mat-icon> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</mat-tab> |
||||
|
||||
</mat-tab-group> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,80 +0,0 @@
|
||||
.content { |
||||
margin: 0 0 0 10px; |
||||
width: 100%; |
||||
height: 90%; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
.leftBox { |
||||
flex: 20%; |
||||
padding-top: 10px; |
||||
} |
||||
.rightBox { |
||||
border-left: 1px solid #999; |
||||
flex: 80%; |
||||
overflow-y: auto; |
||||
} |
||||
} |
||||
|
||||
//左侧样式 |
||||
.bank { |
||||
display: flex; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
} |
||||
.mat-icon { |
||||
width: 18px; |
||||
height: 18px; |
||||
vertical-align:top; |
||||
margin-right: 8px; |
||||
cursor:pointer; |
||||
} |
||||
.material { |
||||
cursor:pointer; |
||||
height: 30px; |
||||
font-size: 16px; |
||||
margin-top: 10px; |
||||
padding-left: 25px; |
||||
.overFlowText { |
||||
width: 135px; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.blockBtn { |
||||
float: right; |
||||
margin-right: 12px; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
} |
||||
//选择样式 |
||||
.active { |
||||
background-color: rgba(225,225,225,0.8) |
||||
} |
||||
|
||||
//右侧样式 |
||||
.groupingContent { |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
.groupingButton{ |
||||
padding-left: 10px; |
||||
margin: 10px 0; |
||||
.mat-icon{ |
||||
margin: 5px 0 0 15px;} |
||||
} |
||||
.groupingHeader{ |
||||
background-color: #d7d7d7; |
||||
padding: 5px 0 0 25px; |
||||
height: 30px; |
||||
display: flex; |
||||
.mat-icon {margin: 0 5px;} |
||||
} |
||||
} |
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { FireFightingFacilitiesFormworkComponent } from './fire-fighting-facilities-formwork.component'; |
||||
|
||||
describe('FireFightingFacilitiesFormworkComponent', () => { |
||||
let component: FireFightingFacilitiesFormworkComponent; |
||||
let fixture: ComponentFixture<FireFightingFacilitiesFormworkComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ FireFightingFacilitiesFormworkComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(FireFightingFacilitiesFormworkComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,806 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatSnackBarConfig, MatSnackBar } from '@angular/material/snack-bar'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-fire-fighting-facilities-formwork', |
||||
templateUrl: './fire-fighting-facilities-formwork.component.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class FireFightingFacilitiesFormworkComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
displayedColumn = ['checked','name','isEachFloor','isMerged','operation'] |
||||
displayedColumns = ['checked','name', 'type', 'default','required','physicalUnit','operation']; |
||||
|
||||
ngOnInit(): void { |
||||
this.http.get('/api/FacilityCategories').subscribe(data=>{ |
||||
this.allFireProtectionFacilities = data |
||||
this.selectFireProtectionFacilities = data[0] |
||||
this.getBuiltInGrouping() |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} |
||||
|
||||
allFireProtectionFacilities:any = []; //所有的消防设施模板
|
||||
selectFireProtectionFacilities:any; //选中的消防设施模板
|
||||
FireProtectionFacilitiesIndex:any = 0; //选中的消防设施模板下标
|
||||
builtInGrouping:any = []; //当前模板的内置分组
|
||||
optionalGrouping:any = []; //当前模板的可选分组
|
||||
|
||||
//获取所有的消防设施模板
|
||||
getAllTemplate () { |
||||
this.http.get('/api/FacilityCategories').subscribe(data=>{ |
||||
this.allFireProtectionFacilities = data |
||||
this.selectFireProtectionFacilities = data[this.FireProtectionFacilitiesIndex] |
||||
}) |
||||
} |
||||
|
||||
//获取当前模板内置分组
|
||||
getBuiltInGrouping () { |
||||
if (this.selectFireProtectionFacilities){ |
||||
let id = {categoryId: this.selectFireProtectionFacilities.id} |
||||
this.http.get(`/api/FacilityGroups`,{params:id}).subscribe(data=>{ |
||||
this.builtInGrouping = data |
||||
this.selectBuiltIn = [] |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//获取当前模板可选分组
|
||||
getOptionalGrouping () { |
||||
if (this.selectFireProtectionFacilities){ |
||||
let id = {categoryId: this.selectFireProtectionFacilities.id} |
||||
this.http.get(`/api/OptionalGroups`,{params:id}).subscribe(data=>{ |
||||
this.optionalGrouping = data |
||||
this.selectOptional = [] |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//切换左侧模板时
|
||||
selectFire (e,index) { |
||||
if (this.FireProtectionFacilitiesIndex != index) { |
||||
this.selectFireProtectionFacilities = e |
||||
this.FireProtectionFacilitiesIndex = index |
||||
this.selectBuiltIn = [] |
||||
this.selectOptional = [] |
||||
this.getBuiltInGrouping() |
||||
this.getOptionalGrouping() |
||||
} |
||||
} |
||||
|
||||
//新增消防设施模板
|
||||
addTemplate () { |
||||
const dialogRef = this.dialog.open(addFireFightingFacilitiesFormworkComponent,{}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getAllTemplate()} |
||||
}); |
||||
} |
||||
|
||||
//编辑消防设施模板
|
||||
editTemplate () { |
||||
if (this.selectFireProtectionFacilities) { |
||||
let data = this.selectFireProtectionFacilities |
||||
const dialogRef = this.dialog.open(editFireFightingFacilitiesFormworkComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getAllTemplate()} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
//禁启用消防设施模板
|
||||
enabledTemplate () { |
||||
if (this.selectFireProtectionFacilities) { |
||||
let data = this.selectFireProtectionFacilities |
||||
if (data.enabled) { |
||||
let newDate = { |
||||
id: data.id, |
||||
name: data.name, |
||||
enabled: false} |
||||
this.http.put(`/api/FacilityCategories/${data.id}`,newDate).subscribe(data=>{ |
||||
this.getAllTemplate()}) |
||||
} else{ |
||||
let newDate = { |
||||
id: data.id, |
||||
name: data.name, |
||||
enabled: true} |
||||
this.http.put(`/api/FacilityCategories/${data.id}`,newDate).subscribe(data=>{ |
||||
this.getAllTemplate()}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
//删除消防设施模板
|
||||
deleteTemplate () { |
||||
if (this.selectFireProtectionFacilities) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
this.http.delete(`/api/FacilityCategories/${this.selectFireProtectionFacilities.id}`).subscribe(data=>{ |
||||
this.http.get('/api/FacilityCategories').subscribe(data=>{ |
||||
this.allFireProtectionFacilities = data |
||||
this.selectFireProtectionFacilities = data[this.FireProtectionFacilitiesIndex] |
||||
this.builtInGrouping = [] |
||||
this.optionalGrouping = [] |
||||
this.getBuiltInGrouping() |
||||
this.getOptionalGrouping() })//http.get
|
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
//新增内置分组
|
||||
addBuiltIn () { |
||||
if (this.selectFireProtectionFacilities) { |
||||
let data = {template:this.selectFireProtectionFacilities, order:this.builtInGrouping[this.builtInGrouping.length-1]} |
||||
const dialogRef = this.dialog.open(addBuiltInComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getBuiltInGrouping()} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
//禁启用内置分组
|
||||
enabledBuilt (e) { |
||||
if (e.enabled) { |
||||
let data = { |
||||
id: e.id, |
||||
name: e.name, |
||||
order:e.order, |
||||
enabled: false, |
||||
facilityItems: e.facilityItems, |
||||
facilityCategoryId: e.facilityCategoryId} |
||||
this.http.put(`/api/FacilityGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('禁用成功','确定',config); |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
} else { |
||||
let data = { |
||||
id: e.id, |
||||
name: e.name, |
||||
order:e.order, |
||||
enabled: true, |
||||
facilityItems: e.facilityItems, |
||||
facilityCategoryId: e.facilityCategoryId} |
||||
this.http.put(`/api/FacilityGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('启用成功','确定',config); |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//删除内置分组
|
||||
deleteBuilt (e) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
this.http.delete(`/api/FacilityGroups/${e.id}`).subscribe(data=>{ |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//新增内置分组属性
|
||||
addBuiltInAttribute (e) { |
||||
let data = e |
||||
const dialogRef = this.dialog.open(addBuiltInAttributeComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getBuiltInGrouping()} |
||||
}); |
||||
} |
||||
|
||||
//编辑内置分组属性
|
||||
editBuiltInAttribute (e,element) { |
||||
let data = {grouping:e, attribute: element} |
||||
const dialogRef = this.dialog.open(editBuiltInAttributeComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getBuiltInGrouping()} |
||||
}); |
||||
} |
||||
|
||||
//删除内置分组属性
|
||||
deleteBuiltInAttribute (e,element){ |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
e.facilityItems.splice(e.facilityItems.findIndex(item=>item==element),1) |
||||
this.http.put(`/api/FacilityGroups/${e.id}`,e).subscribe(data=>{ |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//内置分组排序
|
||||
selectBuiltIn = []; //checked选中的内置分组
|
||||
|
||||
//内置分组change时
|
||||
changeBuilt (e,item) { |
||||
if (e.checked) { |
||||
this.selectBuiltIn.push(item) |
||||
} else{this.selectBuiltIn.splice(this.selectBuiltIn.findIndex(items=>items==item),1)} |
||||
} |
||||
|
||||
//内置分组上移
|
||||
topBuilt () { |
||||
if(this.selectBuiltIn.length) { |
||||
let attribute = this.selectBuiltIn[this.selectBuiltIn.length-1] //选中分组最后一项
|
||||
let newOrder = attribute.order //选中项的order
|
||||
let index = this.builtInGrouping.findIndex(item=>item==attribute) //选中项在数组中的位置
|
||||
if (index!=0) { |
||||
this.builtInGrouping[index].order = this.builtInGrouping[index-1].order |
||||
this.http.put(`/api/FacilityGroups/${this.builtInGrouping[index].id}`,this.builtInGrouping[index]).subscribe(data=>{ |
||||
this.builtInGrouping[index-1].order = newOrder |
||||
this.http.put(`/api/FacilityGroups/${this.builtInGrouping[index-1].id}`,this.builtInGrouping[index-1]).subscribe(data=>{ |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
//内置分组下移
|
||||
bottomBuilt () { |
||||
if(this.selectBuiltIn.length) { |
||||
let attribute = this.selectBuiltIn[this.selectBuiltIn.length-1] //选中分组最后一项
|
||||
let newOrder = attribute.order //最后一项的order
|
||||
let index = this.builtInGrouping.findIndex(item=>item==attribute) |
||||
if (index!= this.builtInGrouping.length-1) { |
||||
this.builtInGrouping[index].order = this.builtInGrouping[index+1].order |
||||
this.http.put(`/api/FacilityGroups/${this.builtInGrouping[index].id}`,this.builtInGrouping[index]).subscribe(data=>{ |
||||
this.builtInGrouping[index+1].order = newOrder |
||||
this.http.put(`/api/FacilityGroups/${this.builtInGrouping[index+1].id}`,this.builtInGrouping[index+1]).subscribe(data=>{ |
||||
this.getBuiltInGrouping() |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//新增可选分组
|
||||
addOptional () { |
||||
if (this.selectFireProtectionFacilities) { |
||||
let data = {template:this.selectFireProtectionFacilities, order:this.optionalGrouping[this.optionalGrouping.length-1]} |
||||
const dialogRef = this.dialog.open(addOptionalComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getOptionalGrouping()} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
//是否可选-可选分组
|
||||
isOptional (e) { |
||||
if (e.isOptional) { |
||||
let data = { |
||||
facilityCategoryId: e.facilityCategoryId, |
||||
id: e.id, |
||||
name: e.name, |
||||
type: e.type, |
||||
addMode: e.addMode, |
||||
isOptional: false, |
||||
order: e.order, |
||||
enabled: e.enabled, |
||||
propertyInfos: e.propertyInfos} |
||||
this.http.put(`/api/OptionalGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('现状态为不可选','确定',config); |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} else { |
||||
let data = { |
||||
facilityCategoryId: e.facilityCategoryId, |
||||
id: e.id, |
||||
name: e.name, |
||||
type: e.type, |
||||
addMode: e.addMode, |
||||
isOptional: true, |
||||
order: e.order, |
||||
enabled: e.enabled, |
||||
propertyInfos: e.propertyInfos} |
||||
this.http.put(`/api/OptionalGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('现状态为可选','确定',config); |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//禁启用可选分组
|
||||
enabledOptional (e) { |
||||
if (e.enabled) { |
||||
let data = { |
||||
facilityCategoryId: e.facilityCategoryId, |
||||
id: e.id, |
||||
name: e.name, |
||||
type: e.type, |
||||
addMode: e.addMode, |
||||
isOptional: e.isOptional, |
||||
order: e.order, |
||||
enabled: false, |
||||
propertyInfos: e.propertyInfos} |
||||
this.http.put(`/api/OptionalGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('禁用成功','确定',config); |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} else { |
||||
let data = { |
||||
facilityCategoryId: e.facilityCategoryId, |
||||
id: e.id, |
||||
name: e.name, |
||||
type: e.type, |
||||
addMode: e.addMode, |
||||
isOptional: e.isOptional, |
||||
order: e.order, |
||||
enabled: true, |
||||
propertyInfos: e.propertyInfos} |
||||
this.http.put(`/api/OptionalGroups/${e.id}`,data).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('启用成功','确定',config); |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//删除可选分组
|
||||
deleteOptional (e) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
this.http.delete(`/api/OptionalGroups/${e.id}`).subscribe(data=>{ |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//新增可选分组属性
|
||||
addOptionalAttribute (e) { |
||||
let data = e |
||||
const dialogRef = this.dialog.open(addOptionalAttributeComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getOptionalGrouping()} |
||||
}); |
||||
} |
||||
|
||||
//编辑可选分组属性
|
||||
editOptionalAttribute (e,element) { |
||||
let data = {grouping:e, attribute: element} |
||||
const dialogRef = this.dialog.open(editOptionalAttributeComponent,{data}); |
||||
dialogRef.afterClosed().subscribe(data=>{ |
||||
if (data) {this.getOptionalGrouping()} |
||||
}); |
||||
} |
||||
|
||||
//删除可选分组属性
|
||||
deleteOptionalAttribute (e,element) { |
||||
let isDelete = confirm('您确定要删除吗') |
||||
if (isDelete) { |
||||
e.propertyInfos.splice(e.propertyInfos.findIndex(item=>item==element),1) |
||||
this.http.put(`/api/OptionalGroups/${e.id}`,e).subscribe(data=>{ |
||||
this.getOptionalGrouping() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//可选分组排序
|
||||
selectOptional = []; //checked选中的可选分组
|
||||
|
||||
//可选分组change时
|
||||
changeOptional (e,item) { |
||||
if (e.checked) { |
||||
this.selectOptional.push(item) |
||||
} else{this.selectOptional.splice(this.selectOptional.findIndex(items=>items==item),1)} |
||||
} |
||||
|
||||
//可选分组上移
|
||||
topOptional () { |
||||
if(this.selectOptional.length) { |
||||
let attribute = this.selectOptional[this.selectOptional.length-1] //选中分组最后一项
|
||||
let newOrder = attribute.order //选中项的order
|
||||
let index = this.optionalGrouping.findIndex(item=>item==attribute) //选中项在数组中的位置
|
||||
if (index!=0) { |
||||
this.optionalGrouping[index].order = this.optionalGrouping[index-1].order |
||||
this.http.put(`/api/OptionalGroups/${this.optionalGrouping[index].id}`,this.optionalGrouping[index]).subscribe(data=>{ |
||||
this.optionalGrouping[index-1].order = newOrder |
||||
this.http.put(`/api/OptionalGroups/${this.optionalGrouping[index-1].id}`,this.optionalGrouping[index-1]).subscribe(data=>{ |
||||
this.getOptionalGrouping() |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
//可选分组下移
|
||||
bottomOptional () { |
||||
if(this.selectOptional.length) { |
||||
let attribute = this.selectOptional[this.selectOptional.length-1] //选中分组最后一项
|
||||
let newOrder = attribute.order //选中项的order
|
||||
let index = this.optionalGrouping.findIndex(item=>item==attribute) //选中项在数组中的位置
|
||||
if (index!=this.optionalGrouping.length-1) { |
||||
this.optionalGrouping[index].order = this.optionalGrouping[index+1].order |
||||
this.http.put(`/api/OptionalGroups/${this.optionalGrouping[index].id}`,this.optionalGrouping[index]).subscribe(data=>{ |
||||
this.optionalGrouping[index+1].order = newOrder |
||||
this.http.put(`/api/OptionalGroups/${this.optionalGrouping[index+1].id}`,this.optionalGrouping[index+1]).subscribe(data=>{ |
||||
this.getOptionalGrouping() |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防设施模板
|
||||
@Component({ |
||||
selector: 'app-addFireFightingFacilitiesFormwork', |
||||
templateUrl: './addFireFightingFacilitiesFormwork.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class addFireFightingFacilitiesFormworkComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<addFireFightingFacilitiesFormworkComponent>) { } |
||||
|
||||
ngOnInit(): void { |
||||
|
||||
} |
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
name: e.name, |
||||
enabled: true |
||||
} |
||||
this.http.post('/api/FacilityCategories',data).subscribe(data=>{ |
||||
this.dialogRef.close(data); |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑消防设施模板
|
||||
@Component({ |
||||
selector: 'app-editFireFightingFacilitiesFormwork', |
||||
templateUrl: './editFireFightingFacilitiesFormwork.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class editFireFightingFacilitiesFormworkComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<editFireFightingFacilitiesFormworkComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.templateName = this.data.name |
||||
} |
||||
|
||||
templateName:any; //模板名字
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
id: this.data.id, |
||||
name: this.templateName, |
||||
enabled: this.data.enabled} |
||||
this.http.put(`/api/FacilityCategories/${this.data.id}`,data).subscribe(data=>{ |
||||
this.dialogRef.close('success'); |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防设施模板内置分组
|
||||
@Component({ |
||||
selector: 'app-addBuiltIn', |
||||
templateUrl: './addBuilt-in.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class addBuiltInComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<addBuiltInComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.order) { |
||||
this.order = this.data.order.order+1 |
||||
} else{this.order=0} |
||||
} |
||||
|
||||
order:number; //order
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
name: e.name, |
||||
order: this.order, |
||||
enabled: true, |
||||
facilityItems: [], |
||||
facilityCategoryId: this.data.template.id} |
||||
this.http.post(`/api/FacilityGroups`,data).subscribe(data=>{ |
||||
this.dialogRef.close(data) |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防设施模板内置分组属性
|
||||
@Component({ |
||||
selector: 'app-addBuiltInAttribute', |
||||
templateUrl: './addBuilt-inAttribute.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class addBuiltInAttributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<addBuiltInAttributeComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.facilityItems.length) { |
||||
this.order = this.data.facilityItems[this.data.facilityItems.length-1].order+1 |
||||
} else{ |
||||
this.order = 0 |
||||
} |
||||
} |
||||
|
||||
order:number; //order
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let newFacilityItems = {name:e.name,isEachFloor:e.isEachFloor=='true'? true: false,order:this.order,isMerged:e.isMerged=='true'? true: false,} |
||||
this.data.facilityItems.push(newFacilityItems) |
||||
let data = { |
||||
id: this.data.id, |
||||
name: this.data.name, |
||||
order: this.data.order, |
||||
enabled: this.data.enabled, |
||||
facilityItems: this.data.facilityItems, |
||||
facilityCategoryId: this.data.facilityCategoryId} |
||||
this.http.put(`/api/FacilityGroups/${this.data.id}`,data).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑消防设施模板内置分组属性
|
||||
@Component({ |
||||
selector: 'app-editBuiltInAttribute', |
||||
templateUrl: './editBuilt-inAttribute.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class editBuiltInAttributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<editBuiltInAttributeComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.attributeName = this.data.attribute.name |
||||
this.attributeIsEachFloor = String(this.data.attribute.isEachFloor) |
||||
this.attributeIsMerged = String(this.data.attribute.isMerged) |
||||
this.attributeOrder = this.data.attribute.order |
||||
} |
||||
|
||||
attributeName:any; //属性名
|
||||
attributeIsEachFloor:any; //是否逐层统计
|
||||
attributeIsMerged:any; //是否合并
|
||||
attributeOrder:number; //属性order
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
name: e.name, |
||||
isEachFloor: e.isEachFloor=='true'? true: false, |
||||
isMerged: e.isMerged=='true'? true: false, |
||||
order: e.order} |
||||
this.data.grouping.facilityItems.splice(this.data.grouping.facilityItems.findIndex(item=>item==this.data.attribute),1) |
||||
this.data.grouping.facilityItems.push(data) |
||||
this.http.put(`/api/FacilityGroups/${this.data.grouping.id}`,this.data.grouping).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防设施模板可选分组
|
||||
@Component({ |
||||
selector: 'app-addOptional', |
||||
templateUrl: './addOptional.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class addOptionalComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<addOptionalComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.order) { |
||||
this.order = this.data.order.order+1 |
||||
} else{this.order=0} |
||||
} |
||||
|
||||
order:number; //order
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
facilityCategoryId: this.data.template.id, |
||||
name: e.name, |
||||
type: Number(e.type), |
||||
addMode: Number(e.addMode), |
||||
isOptional: true, |
||||
order: this.order, |
||||
enabled: true, |
||||
propertyInfos: [] |
||||
} |
||||
this.http.post('/api/OptionalGroups',data).subscribe(data=>{ |
||||
this.dialogRef.close(data) |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
export interface Food { |
||||
value: number; |
||||
viewValue: string; |
||||
} |
||||
//新增消防设施模板可选分组属性
|
||||
@Component({ |
||||
selector: 'app-addOptionalAttribute', |
||||
templateUrl: './addOptionalAttribute.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class addOptionalAttributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<addOptionalAttributeComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.propertyInfos.length) { |
||||
this.order = this.data.propertyInfos[this.data.propertyInfos.length-1].order+1 |
||||
} else{ |
||||
this.order = 0 |
||||
} |
||||
} |
||||
|
||||
//定义属性数据
|
||||
propertyType:Food[]=[ |
||||
{value:0, viewValue: '单行文本'}, |
||||
{value:1, viewValue: '多行文本'}, |
||||
{value:2, viewValue: '数值'}, |
||||
{value:3, viewValue: '图片'}, |
||||
{value:4, viewValue: '图片数量'}, |
||||
{value:5, viewValue: '方向'}, |
||||
{value:6, viewValue: '布尔值'}, |
||||
{value:7, viewValue: '供给区域'}, |
||||
{value:8, viewValue: '供给类型'}] |
||||
|
||||
|
||||
order:number; //order
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
propertyName: e.propertyName, |
||||
propertyValue: e.propertyValue, |
||||
propertyType: e.propertyType, |
||||
required: e.required=='true'? true: false, |
||||
ruleName: e.ruleName, |
||||
ruleValue: e.ruleValue, |
||||
physicalUnit: e.physicalUnit, |
||||
order: this.order, |
||||
enabled: true, |
||||
visible: true, |
||||
tag: e.tag} |
||||
this.data.propertyInfos.push(data) |
||||
this.http.put(`/api/OptionalGroups/${this.data.id}`,this.data).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑消防设施模板可选分组属性
|
||||
@Component({ |
||||
selector: 'app-editOptionalAttribute', |
||||
templateUrl: './editOptionalAttribute.html', |
||||
styleUrls: ['./fire-fighting-facilities-formwork.component.scss'] |
||||
}) |
||||
export class editOptionalAttributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialogRef: MatDialogRef<editOptionalAttributeComponent>, |
||||
@Inject(MAT_DIALOG_DATA) public data) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.propertyName = this.data.attribute.propertyName, |
||||
this.propertyType = this.data.attribute.propertyType |
||||
this.propertyValue = this.data.attribute.propertyValue, |
||||
this.required = String(this.data.attribute.required), |
||||
this.ruleName = this.data.attribute.ruleName, |
||||
this.ruleValue = this.data.attribute.ruleValue, |
||||
this.physicalUnit = this.data.attribute.physicalUnit, |
||||
this.order = this.data.attribute.order, |
||||
this.tag = this.data.attribute.tag |
||||
} |
||||
|
||||
//定义属性数据
|
||||
type:Food[]=[ |
||||
{value:0, viewValue: '单行文本'}, |
||||
{value:1, viewValue: '多行文本'}, |
||||
{value:2, viewValue: '数值'}, |
||||
{value:3, viewValue: '图片'}, |
||||
{value:4, viewValue: '图片数量'}, |
||||
{value:5, viewValue: '方向'}, |
||||
{value:6, viewValue: '布尔值'}, |
||||
{value:7, viewValue: '供给区域'}, |
||||
{value:8, viewValue: '供给类型'}] |
||||
|
||||
propertyName:any; //属性名
|
||||
propertyType:number; //属性类型
|
||||
propertyValue:any; //默认值
|
||||
required:any; //是否必填
|
||||
ruleName:any; //验证规则
|
||||
ruleValue:any; //验证内容
|
||||
physicalUnit:any; //单位
|
||||
order:number; //order
|
||||
tag:any; //注释说明
|
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
let data = { |
||||
propertyName: e.propertyName, |
||||
propertyValue: e.propertyValue, |
||||
propertyType: e.propertyType, |
||||
required: e.required=='true'? true: false, |
||||
ruleName: e.ruleName, |
||||
ruleValue: e.ruleValue, |
||||
physicalUnit: e.physicalUnit, |
||||
order: e.order, |
||||
enabled: true, |
||||
visible: true, |
||||
tag: e.tag} |
||||
this.data.grouping.propertyInfos.splice(this.data.grouping.propertyInfos.findIndex(item=>item==this.data.attribute),1) |
||||
this.data.grouping.propertyInfos.push(data) |
||||
this.http.put(`/api/OptionalGroups/${this.data.grouping.id}`,this.data.grouping).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,45 +0,0 @@
|
||||
<div mat-dialog-title>编辑消防要素模板</div> |
||||
|
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素模板名称" [(ngModel)]="fireName" |
||||
name='name' required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- <mat-checkbox>全选</mat-checkbox> --> |
||||
<label>请选择消防要素</label> |
||||
</div> |
||||
|
||||
<div class="tree"> |
||||
<mat-tree [dataSource]="newDataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
<mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button type="button" |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<mat-checkbox (change)='changed($event,node.id)' [checked]='node.checked'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,36 +0,0 @@
|
||||
<div class="magin"> |
||||
消防要素模板 |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='establish()'> |
||||
创建模板 |
||||
</button> |
||||
</div> |
||||
<table mat-table [dataSource]="aLLFireFighting" class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>模板名称</th> |
||||
<td mat-cell *matCellDef="let element"> {{element.name}} </td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
||||
编辑 |
||||
</button> |
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='enable(element)' |
||||
*ngIf="!element.enabled"> |
||||
启用 |
||||
</button> |
||||
<button mat-raised-button color="warn" class="marginLeft" (click)='prohibit(element)' |
||||
*ngIf="element.enabled"> |
||||
禁用 |
||||
</button> |
||||
<button mat-raised-button color="warn" class="marginLeft" (click)='delete(element.id)'> |
||||
删除 |
||||
</button> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
@ -1,18 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
.magin { |
||||
margin: 10px; |
||||
font-weight: 600; |
||||
} |
||||
.marginLeft { |
||||
margin-left: 5px; |
||||
} |
||||
.tree { |
||||
height: 450px; |
||||
overflow: auto; |
||||
} |
||||
@ -1,309 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-fire-fighting-template', |
||||
templateUrl: './fire-fighting-template.component.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class FireFightingTemplateComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getAllFireFighting() |
||||
} |
||||
|
||||
displayedColumns: string[] = ['name','operation']; |
||||
aLLFireFighting:any; //所有消防要素模板
|
||||
|
||||
//获取所有消防要素模板
|
||||
getAllFireFighting () { |
||||
this.http.get('/api/FireCategories').subscribe(data=>{ |
||||
this.aLLFireFighting=data |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防模块窗口
|
||||
establish () { |
||||
let dialogRef = this.dialog.open(NewFireFighting,
|
||||
{ |
||||
width:'600px', |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getAllFireFighting()} |
||||
});
|
||||
} |
||||
|
||||
//编辑消防模块窗口
|
||||
edit (e) { |
||||
let dialogRef = this.dialog.open(EditFireClassification,
|
||||
{ |
||||
width:'600px', |
||||
data:{e} |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getAllFireFighting()} |
||||
});
|
||||
} |
||||
|
||||
//启用
|
||||
enable (e) { |
||||
this.http.put(`/api/FireCategories/${e.id}`,{ |
||||
id:e.id, |
||||
name:e.name, |
||||
enabled:true, |
||||
fireElements:e.fireElements |
||||
}).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
|
||||
//禁用
|
||||
prohibit (e) { |
||||
this.http.put(`/api/FireCategories/${e.id}`,{ |
||||
id:e.id, |
||||
name:e.name, |
||||
enabled:false, |
||||
fireElements:e.fireElements |
||||
}).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
|
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm('您确定要删除吗') |
||||
if (isTrue) { |
||||
this.http.delete(`/api/FireCategories/${e}`).subscribe(data=>{ |
||||
this.getAllFireFighting() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增消防分类窗口
|
||||
@Component({ |
||||
selector: 'app-newFireFighting', |
||||
templateUrl: './newFireFighting.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class NewFireFighting { |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag, |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient,public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<NewFireFighting>) {} |
||||
|
||||
ngOnInit(): void {
|
||||
this.rendering() |
||||
} |
||||
|
||||
|
||||
|
||||
checkedAll:boolean=false; //全选
|
||||
checkedList:any=[]; //选中的消防要素
|
||||
|
||||
//渲染Tree
|
||||
rendering () { |
||||
this.http.get('/api/FireElements').subscribe((data:any)=>{ |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
this.treeControl.expandAll() |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//change时判断是否选中
|
||||
changed (e,id) { |
||||
if (e.checked) { |
||||
this.checkedList.push(id) |
||||
} else if (e.checked == false) { |
||||
this.checkedList.splice(this.checkedList.findIndex(item => item === id), 1) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//提交创建
|
||||
onSubmit (e) { |
||||
if(this.checkedList.length) { |
||||
this.http.post('/api/FireCategories',{ |
||||
name:e.name, |
||||
enabled:true, |
||||
fireElements:this.checkedList |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
}else { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择消防要素','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//编辑消防分类窗口
|
||||
@Component({ |
||||
selector: 'app-editingFire', |
||||
templateUrl: './editingFireControl.html', |
||||
styleUrls: ['./fire-fighting-template.component.scss'] |
||||
}) |
||||
export class EditFireClassification { |
||||
newdata = []; |
||||
|
||||
private transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag, |
||||
checked:node.checked, |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this.transformer, node => node.level, node => node.expandable, node => node.children); |
||||
newDataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient,public snackBar: MatSnackBar, |
||||
public dialogRef: MatDialogRef<EditFireClassification>, |
||||
@Inject(MAT_DIALOG_DATA) public newdate) {} |
||||
|
||||
ngOnInit(): void {
|
||||
this.fireID=this.newdate.e.id |
||||
this.fireName=this.newdate.e.name |
||||
this.rendering() |
||||
} |
||||
|
||||
|
||||
|
||||
fireID:any; //模板id
|
||||
fireName:any; //模板name
|
||||
checkedAll:boolean=false; //全选
|
||||
checkedList:any=[]; //选中的消防要素
|
||||
|
||||
//渲染Tree
|
||||
rendering () { |
||||
this.http.get(`/api/FireCategories/${this.newdate.e.id}/FireElements`).subscribe((data:any)=>{ |
||||
data.forEach(item=>{ |
||||
if (item.checked === true) { |
||||
this.checkedList.push(item.id) |
||||
} |
||||
}) |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.newDataSource.data = this.newdata; |
||||
this.treeControl.expandAll() |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//change时判断是否选中
|
||||
changed (e,id) { |
||||
if (e.checked) { |
||||
this.checkedList.push(id) |
||||
} else if (e.checked == false) { |
||||
this.checkedList.splice(this.checkedList.findIndex(item => item === id), 1) |
||||
} |
||||
} |
||||
|
||||
//提交编辑修改
|
||||
onSubmit (e) { |
||||
if (this.checkedList.length) { |
||||
this.http.put(`/api/FireCategories/${this.fireID}`,{ |
||||
id:this.fireID, |
||||
name:e.name, |
||||
enabled:this.newdate.e.enabled, |
||||
fireElements:this.checkedList |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择消防要素','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,44 +0,0 @@
|
||||
<div mat-dialog-title>创建消防要素模板</div> |
||||
|
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素模板名称" ngModel name='name' required> |
||||
</mat-form-field> |
||||
<div> |
||||
<!-- <mat-checkbox>全选</mat-checkbox> --> |
||||
<label>请选择消防要素</label> |
||||
</div> |
||||
|
||||
<div class="tree"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
<mat-checkbox (change)='changed($event,node.id)'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button type="button" |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<mat-checkbox (change)='changed($event,node.id)'> |
||||
{{node.name}} |
||||
</mat-checkbox> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,47 +0,0 @@
|
||||
<div mat-dialog-title>编辑消防要素</div> |
||||
<div> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素名称" [(ngModel)]="fireName" name='name' required> |
||||
</mat-form-field> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<input matInput placeholder="手动排序:数值越大,排序越靠后" [(ngModel)]="data.order" name='order' type="number"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div class="maginTop"> |
||||
<label>是否统计:</label> |
||||
<mat-radio-group class="example-radio-group" [(ngModel)]="data.computed" name='radio' required> |
||||
<mat-radio-button class="example-radio-button" [value]="true"> |
||||
是 |
||||
</mat-radio-button> |
||||
<mat-radio-button class="example-radio-button" [value]="false"> |
||||
否 |
||||
</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select required [(ngModel)]="data.tag" name="tag" placeholder='消防要素录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -1,41 +0,0 @@
|
||||
<div mat-dialog-title>创建消防要素</div> |
||||
<div> |
||||
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput placeholder="消防要素名称"ngModel name='name' required> |
||||
</mat-form-field> |
||||
|
||||
<div class="maginTop"> |
||||
<label>是否统计:</label> |
||||
<mat-radio-group class="example-radio-group" ngModel name='radio' required> |
||||
<mat-radio-button class="example-radio-button" [value]="true"> |
||||
是 |
||||
</mat-radio-button> |
||||
<mat-radio-button class="example-radio-button" [value]="false"> |
||||
否 |
||||
</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div> |
||||
<mat-form-field> |
||||
<mat-select required ngModel name="tag" placeholder='消防要素录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
@ -1,67 +0,0 @@
|
||||
<div class="Box"> |
||||
<div class="left"> |
||||
<div class="magin"> |
||||
消防要素 |
||||
<button mat-icon-button class="create" (click)="addNew()" title="创建"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
</div> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<div class="float"> |
||||
<button mat-icon-button class="create" (click)="establish(node)" title="创建"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)" title="编辑"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button *ngIf="node.computed" (click)='noStatistics(node)' title="取消统计"> |
||||
<mat-icon>assessment</mat-icon> |
||||
</button> |
||||
<button mat-icon-button *ngIf="!node.computed" (click)='statistics(node)'title="确定统计"> |
||||
<mat-icon style="color: #999;">assessment</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)" title="删除"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<div class="float"> |
||||
<button mat-icon-button class="create" (click)="establish(node)" title="创建"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)" title="编辑"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button *ngIf="node.computed" (click)='noStatistics(node)' title="取消统计"> |
||||
<mat-icon>assessment</mat-icon> |
||||
</button> |
||||
<button mat-icon-button *ngIf="!node.computed" (click)='statistics(node)'title="确定统计"> |
||||
<mat-icon style="color: #999;">assessment</mat-icon> |
||||
</button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)" title="删除"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<app-fire-fighting-template></app-fire-fighting-template> |
||||
</div> |
||||
</div> |
||||
@ -1,36 +0,0 @@
|
||||
|
||||
.magin { |
||||
margin: 8px 0 8px 10px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.Box { |
||||
width: 100%; |
||||
height: 90%; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
padding-left: 10px; |
||||
.right { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.mat-tree-node { |
||||
width: 380px; |
||||
position: relative; |
||||
.float { |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
} |
||||
.maginTop { |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.example-radio-group { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.example-radio-button { |
||||
margin: 5px; |
||||
} |
||||
@ -1,284 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree'; |
||||
import { FlatTreeControl } from '@angular/cdk/tree'; |
||||
|
||||
@Component({ |
||||
selector: 'app-fire-protection-elements', |
||||
templateUrl: './fire-protection-elements.component.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class FireProtectionElementsComponent implements OnInit { |
||||
data:any =[] |
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
computed:node.computed, |
||||
order:node.order, |
||||
children:node.children ||'', |
||||
tag:node.tag |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getAllfireControl() |
||||
} |
||||
|
||||
//获取所有消防要素
|
||||
getAllfireControl () { |
||||
this.http.get('/api/FireElements').subscribe( |
||||
(data:any)=>{ |
||||
this.newdata=[] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
} |
||||
|
||||
) |
||||
} |
||||
|
||||
//更新数据后重新渲染Tree
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/FireElements').subscribe( |
||||
(data:any)=>{ |
||||
this.newdata = [] |
||||
function getparentNode(parentId){ |
||||
return data.find((item)=>{ |
||||
return item.id == parentId |
||||
}) |
||||
} |
||||
data.forEach(item => { |
||||
var parentNode = getparentNode(item.parentId); |
||||
if(parentNode){ |
||||
if(!parentNode.children){ |
||||
parentNode.children = [] |
||||
} |
||||
parentNode.children.push(item) |
||||
}else{ |
||||
if(!item.parentId){ |
||||
this.newdata.push(item) |
||||
} |
||||
} |
||||
}); |
||||
|
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
} |
||||
) |
||||
} |
||||
|
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//打开创建一级消防要素窗口
|
||||
addNew () { |
||||
let dialogRef = this.dialog.open(Establish); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getlist()} |
||||
});
|
||||
} |
||||
|
||||
//打开创建窗口
|
||||
establish (e) { |
||||
let dialogRef = this.dialog.open(Establish,
|
||||
{ |
||||
data:e |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getlist()} |
||||
});
|
||||
} |
||||
|
||||
//打开编辑窗口
|
||||
edit (e) { |
||||
let dialogRef = this.dialog.open(EditingFireControl,
|
||||
{ |
||||
data:e |
||||
}); |
||||
dialogRef.afterClosed().subscribe((data)=>{ |
||||
if (data) {this.getlist()} |
||||
});
|
||||
} |
||||
|
||||
//取消统计
|
||||
noStatistics (e) { |
||||
this.http.put(`/api/FireElements/${e.id}`,{ |
||||
expandable:e.expandable, |
||||
id:e.id, |
||||
name:e.name, |
||||
level:e.level, |
||||
order:e.order, |
||||
computed:false, |
||||
tag:e.tag, |
||||
parentId:e.parentId, |
||||
children:e.children |
||||
}).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
} |
||||
|
||||
//确定统计
|
||||
statistics (e) { |
||||
this.http.put(`/api/FireElements/${e.id}`,{ |
||||
expandable:e.expandable, |
||||
id:e.id, |
||||
name:e.name, |
||||
level:e.level, |
||||
order:e.order, |
||||
computed:true, |
||||
tag:e.tag, |
||||
parentId:e.parentId, |
||||
children:e.children |
||||
}).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
} |
||||
|
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm(`您确定要删除${e.name}吗`) |
||||
if (isTrue) { |
||||
this.http.delete(`/api/FireElements/${e.id}`).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//创建窗口组件
|
||||
@Component({ |
||||
selector: 'app-establish', |
||||
templateUrl: './establish.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class Establish { |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<Establish>, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
ngOnInit(): void {} |
||||
|
||||
order:any; //创建消防要素order排序值
|
||||
|
||||
//提交创建消防要素
|
||||
onSubmit (e) { |
||||
if (this.data) { |
||||
if(this.data.children == '') { |
||||
this.order=0 |
||||
} else if (this.data.children.length) { |
||||
this.order=this.data.children[this.data.children.length-1].order+1 |
||||
} |
||||
this.http.post('/api/FireElements',{ |
||||
name:e.name, |
||||
order:this.order, |
||||
computed:e.radio, |
||||
tag:e.tag, |
||||
parentId:this.data.id |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} else { |
||||
this.http.post('/api/FireElements',{ |
||||
name:e.name, |
||||
order:0, |
||||
computed:e.radio, |
||||
tag:e.tag, |
||||
parentId:null |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑窗口组件
|
||||
@Component({ |
||||
selector: 'app-editingFireControl', |
||||
templateUrl: './editingFireControl.html', |
||||
styleUrls: ['./fire-protection-elements.component.scss'] |
||||
}) |
||||
export class EditingFireControl { |
||||
|
||||
constructor(private http:HttpClient, |
||||
public dialogRef: MatDialogRef<EditingFireControl>, |
||||
@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
ngOnInit(): void { |
||||
this.fireName=this.data.name |
||||
} |
||||
|
||||
fireName:any; //消防要素name
|
||||
|
||||
//编辑提交
|
||||
onSubmit (e) { |
||||
this.http.put(`/api/FireElements/${this.data.id}`,{ |
||||
expandable:this.data.expandable, |
||||
id:this.data.id, |
||||
name:e.name, |
||||
level:this.data.level, |
||||
order:e.order, |
||||
computed:this.data.computed, |
||||
tag:this.data.tag, |
||||
parentId:this.data.parentId, |
||||
children:this.data.children |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,34 +0,0 @@
|
||||
<h1>网格列表</h1> |
||||
<mat-grid-list cols="2" rowHeight="2:1" gutterSize="1px"> |
||||
<mat-grid-tile> |
||||
<mat-grid-tile-header>我是页眉</mat-grid-tile-header> |
||||
<img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&f=JPEG?w=1280&h=853" alt=""> |
||||
<mat-grid-tile-footer>我是页脚</mat-grid-tile-footer> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile><img src="http://t9.baidu.com/it/u=3363001160,1163944807&fm=79&app=86&f=JPEG?w=1280&h=830" alt=""></mat-grid-tile> |
||||
<mat-grid-tile><img src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&f=JPEG?w=1280&h=853" alt=""></mat-grid-tile> |
||||
<mat-grid-tile><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578887209526&di=fad671fc33c930b0bce56d44ee89ac1f&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Fo_1cqcn9cruusp5k1paa10ak1s98r.jpg" alt=""></mat-grid-tile> |
||||
</mat-grid-list> |
||||
|
||||
|
||||
<br><br><br> |
||||
<mat-grid-list cols="4"> |
||||
<mat-grid-tile [rowspan]="2"> |
||||
<img src="https://pinimg.ibenchu.net/564x/b8/43/42/b8434218b90dbc45b7c0d8156a4131e6.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/29/da/12/29da12d800c0fa53ec5899e29a3fb50e.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/11/24/5e/11245e128eb31ecb38471a1a3b54474e.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/d1/7e/da/d17edaf30276ac0c1cc24cc8bf1d7c41.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile [colspan]="2"> |
||||
<img src="https://pinimg.ibenchu.net/564x/b4/8f/f5/b48ff5c6f0932cf3d34beaccd7ca7ea5.jpg"> |
||||
</mat-grid-tile> |
||||
<mat-grid-tile> |
||||
<img src="https://pinimg.ibenchu.net/564x/83/61/d3/8361d3cea8c217262d0ba0d9a43e4370.jpg"> |
||||
</mat-grid-tile> |
||||
</mat-grid-list> |
||||
@ -1,12 +0,0 @@
|
||||
mat-grid-tile { |
||||
background: lightblue; |
||||
} |
||||
h1{ |
||||
font-size: 26px; |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { GridComponent } from './grid.component'; |
||||
|
||||
describe('GridComponent', () => { |
||||
let component: GridComponent; |
||||
let fixture: ComponentFixture<GridComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ GridComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(GridComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-grid', |
||||
templateUrl: './grid.component.html', |
||||
styleUrls: ['./grid.component.scss'] |
||||
}) |
||||
export class GridComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,63 +0,0 @@
|
||||
<!-- <mat-list> |
||||
<h3 mat-subheader>Folders</h3> |
||||
<mat-list-item *ngFor="let folder of folders; last as last"> |
||||
<mat-icon mat-list-icon>folder</mat-icon> |
||||
<h4 mat-line>{{folder.name}}</h4> |
||||
<p mat-line class="demo-2"> {{folder.updated}} </p> |
||||
<mat-divider [inset]="true" *ngIf="!last"></mat-divider> |
||||
</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<h3 mat-subheader>Notes</h3> |
||||
<mat-list-item *ngFor="let note of notes"> |
||||
<mat-icon mat-list-icon>note</mat-icon> |
||||
<h4 mat-line>{{note.name}}</h4> |
||||
<p mat-line class="demo-2"> {{note.updated}} </p> |
||||
</mat-list-item> |
||||
</mat-list> --> |
||||
<h1>列表分隔线</h1> |
||||
<mat-list> |
||||
<mat-list-item>Item 1</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<mat-list-item>Item 2</mat-list-item> |
||||
<mat-divider></mat-divider> |
||||
<mat-list-item>Item 3</mat-list-item> |
||||
</mat-list> |
||||
<br><br><br> |
||||
<h1>导航列表</h1> |
||||
<mat-nav-list> |
||||
<mat-list-item *ngFor="let link of links"> |
||||
<a matLine href="/ui/list">{{ link.name }}</a> |
||||
<button mat-icon-button (click)="showInfo(link)"> |
||||
跳转到编辑页面 |
||||
</button> |
||||
</mat-list-item> |
||||
</mat-nav-list> |
||||
<br><br><br> |
||||
<h1>行动列表</h1> |
||||
<mat-action-list> |
||||
<button mat-list-item (click)="save()"> 行动一 </button> |
||||
<button mat-list-item (click)="undo()"> 行动二 </button> |
||||
</mat-action-list> |
||||
<br><br><br> |
||||
<h1>选择列表</h1> |
||||
<mat-selection-list #shoes> |
||||
<mat-list-option *ngFor="let shoe of typesOfShoes"> |
||||
{{shoe}} |
||||
</mat-list-option> |
||||
</mat-selection-list> |
||||
<p> |
||||
已选: {{shoes.selectedOptions.selected.length}}种 |
||||
</p> |
||||
<br><br><br> |
||||
<h1>多行列表且带图标</h1> |
||||
<mat-list> |
||||
<mat-list-item> |
||||
<mat-icon matListIcon>folder</mat-icon> |
||||
<h3 matLine> item标题 </h3> |
||||
<p matLine> |
||||
<span> 我是 </span> |
||||
<span class="demo-2"> -- xxx </span> |
||||
</p> |
||||
</mat-list-item> |
||||
</mat-list> |
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ListComponent } from './list.component'; |
||||
|
||||
describe('ListComponent', () => { |
||||
let component: ListComponent; |
||||
let fixture: ComponentFixture<ListComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ListComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ListComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,28 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { Router,ActivatedRoute } from '@angular/router' |
||||
@Component({ |
||||
selector: 'app-list', |
||||
templateUrl: './list.component.html', |
||||
styleUrls: ['./list.component.scss'] |
||||
}) |
||||
export class ListComponent implements OnInit { |
||||
|
||||
constructor(private router:Router,private route:ActivatedRoute) { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
links = [ |
||||
{id:0,name:'小红'}, |
||||
{id:1,name:'小绿'}, |
||||
{id:2,name:'小兰'} |
||||
] |
||||
typesOfShoes: string[] = ['耐克', '阿迪达斯', '彪马', '亚瑟士', '斯凯奇']; |
||||
showInfo(link){ |
||||
this.router.navigate([link.id],{relativeTo:this.route}) |
||||
} |
||||
save () { |
||||
|
||||
} |
||||
|
||||
undo () {} |
||||
} |
||||
@ -1,71 +0,0 @@
|
||||
<div mat-dialog-title>新增属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
required name="propertyName" placeholder="属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="类型" ngModel name="propertyType" required> |
||||
<mat-option *ngFor="let item of propertyType" [value]="item.value"> |
||||
{{item.viewValue}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput ngModel |
||||
name="propertyValue" placeholder="默认值"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<label>是否必填:</label> |
||||
<mat-radio-group ngModel name='required' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="验证规则" ngModel name="ruleName"> |
||||
<mat-option value="None">不验证</mat-option> |
||||
<mat-option value="≥">≥</mat-option> |
||||
<mat-option value="≤">≤</mat-option> |
||||
<mat-option value="Range">区间</mat-option> |
||||
<mat-option value="Regex">正则匹配</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput ngModel name="ruleValue"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
name="physicalUnit" placeholder="单位"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput ngModel |
||||
name="tag" placeholder="注释说明"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,23 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<span mat-dialog-title>创建素材库</span> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required minlength="1" |
||||
ngModel #name="ngModel" placeholder="请输入素材名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<mat-select required [(ngModel)]="data.tag" name="tag" placeholder='素材库录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,52 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||
import format from 'date-fns/format'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'addmatlibrary', |
||||
templateUrl: './addmatlibrary.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class AddMatLibrary { |
||||
myControl = new FormControl(); |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddMatLibrary>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.length) { |
||||
this.order = this.data[this.data.length - 1].order + 1 |
||||
} else { |
||||
this.order =0 |
||||
} |
||||
} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
|
||||
order:number; //order
|
||||
|
||||
onSubmit(value){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.post("/api/AssetLibraries",{ |
||||
id: "", |
||||
name: value.name, |
||||
order: this.order, |
||||
tag: value.tag, |
||||
enabled: true, |
||||
modifiedTime: time |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close(); |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,147 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<div class="topbox"> |
||||
<span mat-dialog-title>新增原件</span> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<div class="mainleft"> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入素材名称"> |
||||
</mat-form-field> |
||||
<mat-form-field> |
||||
<mat-select required name="tag" placeholder="请选择交互方式" ngModel #tag="ngModel"> |
||||
<mat-option value="0">点</mat-option> |
||||
<mat-option value="1">多点连线</mat-option> |
||||
<mat-option value="2">多边形</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<div class="from"> |
||||
<span class="pigepadding">是否来自建筑：</span> |
||||
<mat-radio-group required name="from" [(ngModel)]="from"> |
||||
<mat-radio-button value="1">是</mat-radio-button> |
||||
<mat-radio-button value="0">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="connect" style="margin-bottom: 5px;"> |
||||
<span class="pigepadding">是否允许连接：</span> |
||||
<mat-radio-group required name="connect" [(ngModel)]="connect"> |
||||
<mat-radio-button value="1" (click)="isallowconnect1()">是</mat-radio-button> |
||||
<mat-radio-button value="0" (click)="isallowconnect2()">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div *ngIf="isallowconnect" style="margin: 6px 0px;"> |
||||
<div> |
||||
<span>最大连接数：</span> |
||||
<input type="number" name="maxconnect" ngModel #connect="ngModel" style="width: 60px;"> |
||||
</div> |
||||
</div> |
||||
<div class="size"> |
||||
<span class="pigepadding">固定大小：</span> |
||||
<mat-radio-group required name="pige" [(ngModel)]="pige"> |
||||
<mat-radio-button value="1">是</mat-radio-button> |
||||
<mat-radio-button value="0">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="padding"> |
||||
<span class="pigepadding">填充方式：</span> |
||||
<mat-radio-group required name="padding" [(ngModel)]="padding"> |
||||
<mat-radio-button value="0" (click)="selectedcolor2()">颜色</mat-radio-button> |
||||
<mat-radio-button value="1" (click)="selectedimg2()">图片</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="color" *ngIf="isImg"> |
||||
<ul class="color1"> |
||||
<li (click)="selectcolor(item,key)" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}" [ngClass]="{'coloractive':key === colorIndex}"></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<mat-form-field style="margin-top: 8px;"> |
||||
<mat-select (selectionChange)="changeshowtype($event)" required name="showtype" placeholder="请选择渲染方式" [(ngModel)]="showtype"> |
||||
<mat-option value="0">简单</mat-option> |
||||
<mat-option value="1">九宫格</mat-option> |
||||
<mat-option value="2">平铺</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
|
||||
<div class="border" *ngIf="isbordernum"> |
||||
<span class="bordernum">九宫格边框数值：</span> |
||||
<div class="borderinputbox"> |
||||
<span>左：</span> |
||||
<input type="number" name="left" ngModel #left="ngModel"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>右：</span> |
||||
<input type="number" name="right" ngModel #right="ngModel"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>上：</span> |
||||
<input type="number" name="top" ngModel #top="ngModel"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>下：</span> |
||||
<input type="number" name="bottom" ngModel #bottom="ngModel"> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
<div class="image" > |
||||
<span class="pigepadding">图片:</span> |
||||
<div class="divImg" style="position: relative;"> |
||||
<img [(src)]="imgsrc" alt="" class="img"> |
||||
<input class="Input" required id="selectedfile" type="file" ng2FileSelect [uploader]="uploader" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg" > |
||||
</div> |
||||
|
||||
<!-- <input class="Input" required id="selectedfile" type="file" ng2FileSelect [uploader]="uploader" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg" [ngClass]="{'positionup': isImg,'isbordernum':isbordernum}" > --> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
<mat-form-field > |
||||
<input matInput id="none" name="none" type='text' |
||||
required minlength="1" |
||||
ngModel #none="ngModel" placeholder="" [(ngModel)]="displaynonename" placeholder="关联消防要素" disabled> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="mainright"> |
||||
<label style="margin-left: 10px;">消防要素列表</label> |
||||
<div class="treebox"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="smalltreebox" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="fireli" (click)='add(node)'> |
||||
<button mat-icon-button disabled class="firebtn"></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="fireli" (click)='add(node)'> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name" |
||||
type="button" |
||||
class="firebtn" |
||||
> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button > |
||||
<li >{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="addbtn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,242 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import format from 'date-fns/format'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { FileUploader } from 'ng2-file-upload' |
||||
import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { DomSanitizer } from '@angular/platform-browser' |
||||
import { NgZone } from '@angular/core'; |
||||
import { ChangeDetectorRef } from '@angular/core' |
||||
@Component({ |
||||
selector: 'addoriginalcopy', |
||||
templateUrl: './addoriginalcopy.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class AddOriginalCopy { |
||||
|
||||
uploader:FileUploader = new FileUploader({
|
||||
url: "/api/Objects/PlanPlatform",
|
||||
method: "POST",
|
||||
itemAlias: "uploadedfile", |
||||
removeAfterUpload:true |
||||
}); |
||||
|
||||
|
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children:node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
displaynoneid = ""//选择的关联消防id
|
||||
displaynonename = "" |
||||
padding = "0" |
||||
pige = "1" |
||||
from = "1" |
||||
connect = "1" |
||||
isallowconnect :boolean = true |
||||
constructor(public changeDetectorRef:ChangeDetectorRef,private zone: NgZone,private http: HttpClient,public dialogRef: MatDialogRef<AddOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,private sanitizer:DomSanitizer,public snackBar: MatSnackBar) {} |
||||
|
||||
isallowconnect1(){ |
||||
this.isallowconnect = true |
||||
} |
||||
isallowconnect2(){ |
||||
this.isallowconnect = false |
||||
} |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
ngOnInit() { |
||||
// console.log(222,this.data.sourceMaterial)
|
||||
//获取所有的消防要素
|
||||
this.http.get('/api/FireElements').subscribe(data=>{ |
||||
this.dataSource.data = this.tree.toTree(data) |
||||
}) |
||||
} |
||||
add(e){ |
||||
this.displaynoneid = e.id |
||||
this.displaynonename = e.name |
||||
} |
||||
isImg = true |
||||
selectedcolor2(){ |
||||
this.isImg = true |
||||
this.selectedcolor ="#066eed" |
||||
this.colorIndex = 0 |
||||
} |
||||
selectedimg2(){ |
||||
this.isImg = false |
||||
this.selectedcolor ="" |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
colors = ['#066eed','#00e5ef','#00ef76','#ffff00','#efb522','#20b4ac','#836eff','#ff8d00','#ef00ef','#ffa17a','#ff6a6a','#ff0000','#ff6eb5','#00bfff','#54ff9f','#00cd00','#00ffff','#6495ed','#ffdbb9','#836eff'] |
||||
isshow = true//选择颜色或者上传图片
|
||||
colorIndex:any=0; //选中的颜色的index
|
||||
selectedcolor = "#066eed" |
||||
imgUrl = ""//返回来的图片地址后缀
|
||||
selectcolor(item,key){ |
||||
if(this.colorIndex != key){ |
||||
this.colorIndex = key |
||||
} |
||||
this.selectedcolor = item |
||||
} |
||||
|
||||
imgsrc = "../../../assets/images/upload2.png" |
||||
|
||||
filechange(e){ |
||||
const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片
|
||||
var reader = new FileReader(); |
||||
reader.readAsDataURL(file); |
||||
var image:any = new Image(); |
||||
reader.onload = function(){ |
||||
image.src = reader.result |
||||
} |
||||
setTimeout(() => { |
||||
if(image.width > 128 && image.height > 128){
|
||||
var obj = document.getElementById('selectedfile') ;
|
||||
obj.outerHTML=obj.outerHTML;
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择分辨率小于128*128的图片','确定',config);
|
||||
}else{ |
||||
this.upload() |
||||
} |
||||
}, 100); |
||||
} |
||||
|
||||
upload(){ |
||||
if(!this.uploader.queue[0]){ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择文件','确定',config);
|
||||
}else{ |
||||
this.uploader.queue[0].upload();//开始上传
|
||||
this.uploader.queue[0].onSuccess = (response, status, headers) => {
|
||||
// 上传文件成功
|
||||
if (status == 201) { |
||||
// 上传文件后获取服务器返回的数据
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('上传成功','确定',config);
|
||||
|
||||
let tempRes = JSON.parse(response); |
||||
this.imgUrl = tempRes.objectName
|
||||
this.imgsrc = '/api/Objects/PlanPlatform/' + this.imgUrl |
||||
}else {
|
||||
// 上传文件后获取服务器返回的数据错误
|
||||
} |
||||
}; |
||||
this.uploader.queue[0].onError = (response, status, headers) => {
|
||||
if (status == 401) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('上传失败','确定',config);
|
||||
} |
||||
}; |
||||
} |
||||
|
||||
} |
||||
showtype:string = '0' //默认渲染方式
|
||||
isbordernum:boolean = false |
||||
changeshowtype(e){ |
||||
if(e.value == "1"){ |
||||
this.isbordernum = true |
||||
}else{ |
||||
this.isbordernum = false |
||||
} |
||||
} |
||||
onSubmit(value){ |
||||
value.pige=Boolean(Number(value.pige)) |
||||
value.from=Boolean(Number(value.from)) |
||||
value.connect=Boolean(Number(value.connect)) |
||||
if(value.showtype == "1"){ |
||||
this.http.post(`/api/Assets`,{ |
||||
id:"", |
||||
name:value.name, |
||||
width: 0, |
||||
height: 0, |
||||
angle: 0, |
||||
interactiveMode: Number(value.tag),//交互方式
|
||||
isFromBuilding:value.from, |
||||
canConnect:value.connect, |
||||
holeMaxCount:value.connect ? value.maxconnect : 0, |
||||
fixedSize: value.pige, |
||||
fillMode: Number(value.padding),//填充方式
|
||||
color: this.selectedcolor+'80', |
||||
imageUrl:'/api/Objects/PlanPlatform/' + this.imgUrl, |
||||
drawMode: Number(value.showtype) , //渲染方式
|
||||
border:{ |
||||
x: value.left, |
||||
y: value.bottom, |
||||
z: value.right, |
||||
w: value.top |
||||
}, |
||||
order: this.data.sourceMaterial.length, |
||||
enabled: true, |
||||
propertyInfos: [], |
||||
fireElementId:this.displaynoneid |
||||
}, |
||||
{
|
||||
params: { |
||||
libraryId:this.data.node.id, |
||||
} |
||||
}).subscribe((data)=>{ |
||||
this.dialogRef.close("ooo"); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('新建成功','确定',config);
|
||||
}) |
||||
}else{ |
||||
this.http.post(`/api/Assets`,{ |
||||
id:"", |
||||
name:value.name, |
||||
width: 0, |
||||
height: 0, |
||||
angle: 0, |
||||
interactiveMode: Number(value.tag),//交互方式
|
||||
isFromBuilding:value.from, |
||||
canConnect:value.connect, |
||||
holeMaxCount:value.connect ? value.maxconnect : 0, |
||||
fixedSize: value.pige, |
||||
fillMode: Number(value.padding),//填充方式
|
||||
color: this.selectedcolor+'80', |
||||
imageUrl:'/api/Objects/PlanPlatform/' + this.imgUrl, |
||||
drawMode: Number(value.showtype) , //渲染方式
|
||||
border:{}, |
||||
order: this.data.sourceMaterial.length, |
||||
enabled: true, |
||||
propertyInfos: [], |
||||
fireElementId:this.displaynoneid |
||||
}, |
||||
{
|
||||
params: { |
||||
libraryId:this.data.node.id, |
||||
} |
||||
}).subscribe((data)=>{ |
||||
this.dialogRef.close("ooo"); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('新建成功','确定',config);
|
||||
}) |
||||
} |
||||
} |
||||
} |
||||
@ -1,94 +0,0 @@
|
||||
<div class="bottomBox"> |
||||
<div class="attribute"> |
||||
<div class="attributeLeft">{{data.name}}</div> |
||||
<div class="btnBox"> |
||||
<button mat-icon-button (click)='preservation()' title="保存"> |
||||
<mat-icon>description</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)='toTop()' title="上移"> |
||||
<mat-icon>arrow_upward</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)='toBottom()' title="下移"> |
||||
<mat-icon>arrow_downward</mat-icon> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="overFlow"> |
||||
<table mat-table [dataSource]="dataSource"> |
||||
|
||||
<ng-container matColumnDef="checked"> |
||||
<th mat-header-cell *matHeaderCellDef> |
||||
<mat-icon title="创建"(click)='add()'>add_box</mat-icon> |
||||
</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-checkbox (change)='checkedChange($event,element.index)'></mat-checkbox> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef>名称</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.propertyName}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="type"> |
||||
<th mat-header-cell *matHeaderCellDef>类型</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.propertyType==0">单行文本</label> |
||||
<label *ngIf="element.propertyType==1">多行文本</label> |
||||
<label *ngIf="element.propertyType==2">数值</label> |
||||
<label *ngIf="element.propertyType==3">图片</label> |
||||
<label *ngIf="element.propertyType==4">图片数量</label> |
||||
<label *ngIf="element.propertyType==5">方向</label> |
||||
<label *ngIf="element.propertyType==6">布尔值</label> |
||||
<label *ngIf="element.propertyType==7">供给区域</label> |
||||
<label *ngIf="element.propertyType==8">供给类型</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="default"> |
||||
<th mat-header-cell *matHeaderCellDef>默认值</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.propertyValue}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="required"> |
||||
<th mat-header-cell *matHeaderCellDef>必填</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<label *ngIf="element.required">是</label> |
||||
<label *ngIf="!element.required">否</label> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="physicalUnit"> |
||||
<th mat-header-cell *matHeaderCellDef>单位</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
{{element.physicalUnit}} |
||||
</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<mat-icon title="编辑" (click)='edit(element.index)'> border_color</mat-icon> |
||||
<mat-icon title="显示" *ngIf="!element.visible" |
||||
(click)='visible(element.index)'>visibility</mat-icon> |
||||
<mat-icon title="隐藏" *ngIf="element.visible" |
||||
(click)='noVisible(element.index)'>visibility_off</mat-icon> |
||||
<mat-icon title="启用" *ngIf="!element.enabled" style="color:#999" |
||||
(click)='enabled(element.index)'>block</mat-icon> |
||||
<mat-icon title="禁用" *ngIf="element.enabled" style="color:red" |
||||
(click)='noEnabled(element.index)'>block</mat-icon> |
||||
<mat-icon title="删除" (click)='delete(element.index)'>delete</mat-icon> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
@ -1,71 +0,0 @@
|
||||
<div mat-dialog-title>编辑属性</div> |
||||
<div> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm"> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="propertyName" |
||||
required name="propertyName" placeholder="属性名"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="类型" [(ngModel)]="propertyType" name="propertyType" required> |
||||
<mat-option *ngFor="let item of type" [value]="item.value"> |
||||
{{item.viewValue}} |
||||
</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput [(ngModel)]="propertyValue" |
||||
name="propertyValue" placeholder="默认值"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div> |
||||
<label>是否必填:</label> |
||||
<mat-radio-group [(ngModel)]="required" name='required' style="margin-left: 5px;"> |
||||
<mat-radio-button value=true style="margin-left: 5px;">是</mat-radio-button> |
||||
<mat-radio-button value=false style="margin-left: 5px;">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<mat-select placeholder="验证规则" [(ngModel)]="ruleName" name="ruleName"> |
||||
<mat-option value="None">不验证</mat-option> |
||||
<mat-option value="≥">≥</mat-option> |
||||
<mat-option value="≤">≤</mat-option> |
||||
<mat-option value="Range">区间</mat-option> |
||||
<mat-option value="Regex">正则匹配</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<mat-form-field style="margin-left: 10px;"> |
||||
<input type="text" matInput [(ngModel)]="ruleValue" name="ruleValue"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="physicalUnit" |
||||
name="physicalUnit" placeholder="单位"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-content> |
||||
<mat-form-field> |
||||
<input type="text" matInput [(ngModel)]="tag" |
||||
name="tag" placeholder="注释说明"> |
||||
</mat-form-field> |
||||
</div> |
||||
|
||||
<div mat-dialog-actions> |
||||
<button mat-raised-button color="primary" type="submit" |
||||
[disabled]="!form.form.valid"> |
||||
确定 |
||||
</button> |
||||
<button mat-raised-button mat-dialog-close>取消</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
@ -1,23 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<span mat-dialog-title>修改素材库</span> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required |
||||
[(ngModel)]="name" placeholder="请输入素材名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<mat-select required [(ngModel)]="input" name="tag" placeholder='素材库录入源'> |
||||
<mat-option value="INPUT">信息录入</mat-option> |
||||
<mat-option value="PLAN">预案管理</mat-option> |
||||
<mat-option value="COMMAND">指挥系统</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,41 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||
import format from 'date-fns/format'; |
||||
@Component({ |
||||
selector: 'editmatlibrary', |
||||
templateUrl: './editmatlibrary.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class EditMatLibrary { |
||||
myControl = new FormControl(); |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditMatLibrary>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
name:any |
||||
input:any |
||||
ngOnInit(): void { |
||||
this.name = this.data.material.name |
||||
this.input = this.data.material.tag |
||||
} |
||||
onNoClick(): void { |
||||
|
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.put(`/api/AssetLibraries/${this.data.material.id}`,{ |
||||
id: this.data.material.id, |
||||
name: value.name, |
||||
order: this.data.material.order, |
||||
tag: value.tag, |
||||
enabled: true, |
||||
modifiedTime: time |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close(); |
||||
}) |
||||
} |
||||
} |
||||
@ -1,149 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<div class="topbox"> |
||||
<span mat-dialog-title>编辑原件</span> |
||||
</div> |
||||
<div class="mainbox"> |
||||
<div class="mainleft"> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入素材名称" [(ngModel)]="defaultname"> |
||||
</mat-form-field> |
||||
<mat-form-field> |
||||
<mat-select required name="tag" placeholder="请选择交互方式" [(ngModel)]="OriginalinteractiveMode"> |
||||
<mat-option value="0">点</mat-option> |
||||
<mat-option value="1">多点连线</mat-option> |
||||
<mat-option value="2">多边形</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<div class="from"> |
||||
<span class="pigepadding">是否来自建筑：</span> |
||||
<mat-radio-group required name="from" [(ngModel)]="from"> |
||||
<mat-radio-button value="1">是</mat-radio-button> |
||||
<mat-radio-button value="0">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="connect" style="margin-bottom: 5px;"> |
||||
<span class="pigepadding">是否允许连接：</span> |
||||
<mat-radio-group required name="connect" [(ngModel)]="connect"> |
||||
<mat-radio-button value="1" (click)="isallowconnect1()">是</mat-radio-button> |
||||
<mat-radio-button value="0" (click)="isallowconnect2()">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div *ngIf="isallowconnect" style="margin: 6px 0px;"> |
||||
<div> |
||||
<span>最大连接数：</span> |
||||
<input type="number" name="maxconnect" [(ngModel)]="connectvalue" style="width: 60px;"> |
||||
</div> |
||||
</div> |
||||
<div class="size"> |
||||
<span class="pigepadding">固定大小：</span> |
||||
<mat-radio-group required name="pige" [(ngModel)]="OriginalfixedSize"> |
||||
<mat-radio-button value="1">是</mat-radio-button> |
||||
<mat-radio-button value="0">否</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
|
||||
<div class="padding"> |
||||
<span class="pigepadding">填充方式：</span> |
||||
<mat-radio-group required name="padding" [(ngModel)]="Originalpadding"> |
||||
<mat-radio-button value="0" (click)="selcolor()">颜色</mat-radio-button> |
||||
<mat-radio-button value="1" (click)="selimg()">图片</mat-radio-button> |
||||
</mat-radio-group> |
||||
</div> |
||||
<div class="color" *ngIf="isxxx"> |
||||
<ul class="color1"> |
||||
<li (click)="selectcolor(item,key)" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}" [ngClass]="{'coloractive':key === colorIndex}"></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<mat-form-field style="margin-top: 8px;" > |
||||
<mat-select (selectionChange)="changeshowtype($event)" required name="showtype" placeholder="请选择渲染方式" [(ngModel)]="showtype"> |
||||
<mat-option value="0">简单</mat-option> |
||||
<mat-option value="1">九宫格</mat-option> |
||||
<mat-option value="2">平铺</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
|
||||
<div class="border" *ngIf="isbordernum"> |
||||
<p class="bordernum">九宫格边框数值：</p> |
||||
<div> |
||||
<div class="borderinputbox"> |
||||
<span>左：</span> |
||||
<input type="number" name="left" [(ngModel)]="left"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>右：</span> |
||||
<input type="number" name="right" [(ngModel)]="right"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>上：</span> |
||||
<input type="number" name="top" [(ngModel)]="top"> |
||||
</div> |
||||
<div class="borderinputbox"> |
||||
<span>下：</span> |
||||
<input type="number" name="bottom" [(ngModel)]="bottom"> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="image"> |
||||
<span class="pigepadding">图片:</span> |
||||
<div class="divImg" style="position: relative;"> |
||||
<img [(src)]="Originalimageurl" alt="暂无图片" class="img"> |
||||
<input class="Input" required id="selectedfile" type="file" ng2FileSelect [uploader]="uploader" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg" > |
||||
</div> |
||||
|
||||
</div> |
||||
<mat-form-field class="relevancefire"> |
||||
<input matInput id="none" name="none" type='text' |
||||
required minlength="1" |
||||
ngModel #none="ngModel" placeholder="" [(ngModel)]="OriginalfireElementName" placeholder="关联消防要素" disabled> |
||||
</mat-form-field> |
||||
</div> |
||||
<div class="mainright"> |
||||
<label style="margin-left: 10px;">消防要素列表</label> |
||||
<div class="treebox"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="smalltreebox" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="fireli" (click)='add(node)'> |
||||
<button mat-icon-button disabled class="firebtn"></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="fireli" (click)='add(node)'> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name" |
||||
type="button" |
||||
class="firebtn" |
||||
> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button > |
||||
<li >{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="addbtn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,305 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import format from 'date-fns/format'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { FileUploader } from 'ng2-file-upload' |
||||
import { DomSanitizer } from '@angular/platform-browser' |
||||
@Component({ |
||||
selector: 'editoriginalcopy', |
||||
templateUrl: './editoriginalcopy.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class EditOriginalCopy { |
||||
|
||||
uploader:FileUploader = new FileUploader({
|
||||
url: "/api/Objects/PlanPlatform",
|
||||
method: "POST",
|
||||
itemAlias: "uploadedfile", |
||||
removeAfterUpload:true |
||||
}); |
||||
|
||||
|
||||
|
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children:node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
|
||||
displaynonename = "" |
||||
iscolor =null |
||||
isimg = null |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,private sanitizer:DomSanitizer,public snackBar: MatSnackBar) {} |
||||
|
||||
colors = ['#066eed','#00e5ef','#00ef76','#ffff00','#efb522','#20b4ac','#836eff','#ff8d00','#ef00ef','#ffa17a','#ff6a6a','#ff0000','#ff6eb5','#00bfff','#54ff9f','#00cd00','#00ffff','#6495ed','#ffdbb9','#836eff'] |
||||
isshow = true//选择颜色或者上传图片
|
||||
colorIndex:any=0; //选中的颜色的index
|
||||
selectedcolor = "#066eed" |
||||
imgUrl = ""//返回来的图片地址后缀
|
||||
defaultname = this.data.Original.name//点击的原件的name
|
||||
OriginalId = this.data.Original.id//点击的原件的id
|
||||
OriginalfireElementId = this.data.Original.fireElementId//点击的原件的消防id
|
||||
displaynoneid = this.OriginalfireElementId//选择的关联消防id
|
||||
OriginalfireElementName = null //点击的原件的消防name
|
||||
OriginalpropertyInfos = this.data.Original.propertyInfos//点击原件的属性信息
|
||||
OriginalinteractiveMode = String(this.data.Original.interactiveMode) //点击原件的交互方式
|
||||
OriginalfixedSize = String(Number(this.data.Original.fixedSize))//点击原件的固定大小
|
||||
from = String(Number(this.data.Original.isFromBuilding)) |
||||
Originalpadding = null |
||||
Originalimageurl = this.data.Original.imageUrl//点击原件的图片地址
|
||||
Originalcolor = this.data.Original.color |
||||
padding = "0"//
|
||||
showtype:any//默认渲染方式
|
||||
|
||||
left:number |
||||
right:number |
||||
top:number |
||||
bottom:number |
||||
isbordernum:boolean |
||||
connect:any |
||||
isallowconnect :boolean = true |
||||
connectvalue:any |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
isallowconnect1(){ |
||||
this.isallowconnect = true |
||||
} |
||||
isallowconnect2(){ |
||||
this.isallowconnect = false |
||||
} |
||||
changeshowtype(e){ |
||||
if(e.value == "1"){ |
||||
this.isbordernum = true |
||||
}else{ |
||||
this.isbordernum = false |
||||
} |
||||
} |
||||
ngOnInit() { |
||||
// console.log(this.data.Original)
|
||||
if(this.data.Original.drawMode == 1){ |
||||
this.isbordernum = true |
||||
}else{ |
||||
this.isbordernum = false |
||||
} |
||||
this.connectvalue = this.data.Original.holeMaxCount |
||||
if(this.data.Original.canConnect){ |
||||
this.connect = "1" |
||||
}else{ |
||||
this.connect = "0" |
||||
} |
||||
this.isallowconnect = this.data.Original.canConnect |
||||
|
||||
this.showtype = this.data.Original.drawMode + '' |
||||
if(this.data.Original.border){ |
||||
this.left = this.data.Original.border.x
|
||||
this.bottom = this.data.Original.border.y
|
||||
this.right = this.data.Original.border.z |
||||
this.top = this.data.Original.border.w |
||||
} |
||||
|
||||
if(this.data.Original.fillMode == 1){ |
||||
this.isxxx = false |
||||
this.colorIndex = null |
||||
} |
||||
if(this.Originalcolor){//如果该原件有颜色
|
||||
let Originalcolordata =(this.Originalcolor).slice(0,7) |
||||
this.colors.forEach((item,index)=>{ |
||||
if(item == Originalcolordata){ |
||||
this.colorIndex = index |
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
this.http.get('/api/FireElements').subscribe((data:any)=>{ |
||||
this.dataSource.data = this.tree.toTree(data) |
||||
data.forEach(item=>{ |
||||
if(item.id === this.OriginalfireElementId){ |
||||
this.OriginalfireElementName = item.name |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
this.dataSource.data.forEach(item=>{ |
||||
|
||||
}) |
||||
|
||||
if(this.data.Original.fillMode == 0){ |
||||
this.Originalpadding ="0" |
||||
}else{ |
||||
this.Originalpadding ="1" |
||||
} |
||||
} |
||||
add(e){ |
||||
this.displaynoneid = e.id |
||||
this.OriginalfireElementName = e.name |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
//控制20种颜色是否显示
|
||||
isxxx = true |
||||
//点击选择颜色
|
||||
selcolor(){ |
||||
this.isxxx = true |
||||
if(this.data.Original.fillMode == 1){ |
||||
this.colorIndex = null |
||||
} |
||||
} |
||||
//点击选择图片
|
||||
selimg(){ |
||||
this.isxxx = false |
||||
} |
||||
selectcolor(item,key){ |
||||
if(this.colorIndex != key){ |
||||
this.colorIndex = key |
||||
} |
||||
this.selectedcolor = item |
||||
} |
||||
imgsrc = "" |
||||
filechange(e){ |
||||
const file = e.srcElement.files[0]; // 获取图片这里只操作一张图片
|
||||
var reader = new FileReader(); |
||||
reader.readAsDataURL(file); |
||||
var image:any = new Image(); |
||||
reader.onload = function(){ |
||||
image.src = reader.result |
||||
} |
||||
setTimeout(() => { |
||||
if(image.width > 128 && image.height > 128){
|
||||
var obj = document.getElementById('selectedfile') ;
|
||||
obj.outerHTML=obj.outerHTML;
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择分辨率小于128*128的图片','确定',config); |
||||
}else{ |
||||
this.upload() |
||||
} |
||||
}, 100); |
||||
} |
||||
upload(){ |
||||
if(!this.uploader.queue[0]){ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择文件','确定',config); |
||||
}else{ |
||||
this.uploader.queue[0].upload();//开始上传
|
||||
this.uploader.queue[0].onSuccess = (response, status, headers) => {
|
||||
// 上传文件成功
|
||||
if (status == 201) { |
||||
// 上传文件后获取服务器返回的数据
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('上传成功','确定',config); |
||||
let tempRes = JSON.parse(response); |
||||
this.imgUrl = tempRes.objectName
|
||||
this.Originalimageurl = '/api/Objects/PlanPlatform/' + this.imgUrl |
||||
}else {
|
||||
// 上传文件后获取服务器返回的数据错误
|
||||
} |
||||
}; |
||||
this.uploader.queue[0].onError = (response, status, headers) => {
|
||||
if (status == 401) { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('无权限上传','确定',config);
|
||||
} |
||||
}; |
||||
} |
||||
|
||||
} |
||||
newimageUrl = "" |
||||
onSubmit(value){ |
||||
// console.log(value)
|
||||
if(!this.imgUrl){//判断编辑时是否重新上传了照片
|
||||
this.newimageUrl = this.Originalimageurl |
||||
}else{ |
||||
this.newimageUrl = '/api/Objects/PlanPlatform/' + this.imgUrl |
||||
} |
||||
value.from=Boolean(Number(value.from)) |
||||
value.pige=Boolean(Number(value.pige)) |
||||
value.connect=Boolean(Number(value.connect)) |
||||
if(value.showtype == "1"){ |
||||
this.http.put(`/api/Assets/${this.OriginalId}`,{ |
||||
id:this.OriginalId, |
||||
name:value.name, |
||||
width: 0, |
||||
height: 0, |
||||
angle: 0, |
||||
interactiveMode: Number(value.tag),//交互方式
|
||||
isFromBuilding:value.from, |
||||
canConnect:value.connect, |
||||
holeMaxCount:value.connect ? value.maxconnect : 0, |
||||
fixedSize: value.pige, |
||||
fillMode: Number(value.padding),//填充方式
|
||||
color: this.selectedcolor+'80', |
||||
imageUrl:this.newimageUrl, |
||||
drawMode: Number(value.showtype) , //渲染方式
|
||||
border: { |
||||
x: value.left, |
||||
y: value.bottom, |
||||
z: value.right, |
||||
w: value.top |
||||
}, |
||||
order: this.data.Original.order, |
||||
enabled: true, |
||||
propertyInfos: this.OriginalpropertyInfos, |
||||
fireElementId:this.displaynoneid |
||||
}).subscribe((data)=>{ |
||||
this.dialogRef.close("ooo"); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('修改成功','确定',config); |
||||
}) |
||||
}else{ |
||||
this.http.put(`/api/Assets/${this.OriginalId}`,{ |
||||
id:this.OriginalId, |
||||
name:value.name, |
||||
width: 0, |
||||
height: 0, |
||||
angle: 0, |
||||
interactiveMode: Number(value.tag),//交互方式
|
||||
isFromBuilding:value.from, |
||||
canConnect:value.connect, |
||||
holeMaxCount:value.connect ? value.maxconnect : 0, |
||||
fixedSize: value.pige, |
||||
fillMode: Number(value.padding),//填充方式
|
||||
color: this.selectedcolor+'80', |
||||
imageUrl:this.newimageUrl, |
||||
drawMode: Number(value.showtype) , //渲染方式
|
||||
border: {}, |
||||
order: this.data.Original.order, |
||||
enabled: true, |
||||
propertyInfos: this.OriginalpropertyInfos, |
||||
fireElementId:this.displaynoneid |
||||
}).subscribe((data)=>{ |
||||
this.dialogRef.close("ooo"); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('修改成功','确定',config); |
||||
}) |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
@ -1,68 +0,0 @@
|
||||
<div class="content"> |
||||
<div class="leftBox"> |
||||
<div class="bank"> |
||||
<mat-icon (click)="showlist()" *ngIf="isshow">keyboard_arrow_down</mat-icon> |
||||
<mat-icon (click)="showlist()" *ngIf="!isshow">chevron_right</mat-icon> |
||||
<span>素材库管理</span> |
||||
<div> |
||||
<button mat-icon-button (click)="addmatlibrary()"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="editmatlibrary()"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="disabled()"> |
||||
<mat-icon>block</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="delete()"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
<div *ngIf="isshow"> |
||||
<div *ngFor="let item of allMaterialBank,let key=index" class="material" |
||||
(click)='add(item,key)' [ngClass]="{'active': key === materialIndex}"> |
||||
<mat-icon class="btn">folder</mat-icon><span class="matname">{{item.name}}</span> |
||||
<mat-icon *ngIf="!item.enabled" class="blockBtn">block</mat-icon> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="rightBox"> |
||||
<div class="topBox"> |
||||
<div class="originalScript"> |
||||
<p *ngIf="material">{{material.name}}</p> |
||||
<div> |
||||
<button mat-icon-button (click)="addoriginalcopy(material)"> |
||||
<mat-icon>add_circle_outline</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="editoriginalcopy(material)"> |
||||
<mat-icon>create</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="disableoriginal(material)"> |
||||
<mat-icon>block</mat-icon> |
||||
</button> |
||||
<button mat-icon-button (click)="deleteoriginal(material)"> |
||||
<mat-icon>delete</mat-icon> |
||||
</button> |
||||
<button mat-raised-button color="primary" style="margin-right: 10px;" |
||||
(click)='viewProperties()'>查看属性</button> |
||||
<button mat-raised-button color="primary" (click)="selectoriginal(material)">选择原件</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="imgBox"> |
||||
<div class="imgDiv" *ngFor="let item of sourceMaterial,let key=index" |
||||
(click)='addOriginal(item,key)'[ngClass]="{'OriginalActive':key===OriginalIndex}"> |
||||
<img src="{{item.imageUrl}}" onerror="javascript:this.src='../../../assets/images/noImg.png'"> |
||||
<span>{{item.name}}</span> |
||||
<mat-icon *ngIf="!item.enabled" class="blockBtn">block</mat-icon> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
</div> |
||||
@ -1,310 +0,0 @@
|
||||
.content { |
||||
padding: 0 0 0 10px; |
||||
width: 100%; |
||||
height: 90%; |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
display: flex; |
||||
.leftBox { |
||||
flex: 20%; |
||||
padding-top: 10px; |
||||
} |
||||
.rightBox { |
||||
border-left: 1px solid #999; |
||||
flex: 80%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.topBox { |
||||
flex:1; |
||||
.originalScript { |
||||
border-bottom: 1px solid #999; |
||||
background-color: #fafafa; |
||||
padding:5px 0; |
||||
width: 100%; |
||||
padding-left: 20px; |
||||
font-weight: 500; |
||||
display: flex; |
||||
flex-direction: row; |
||||
p{ |
||||
margin-top: 11px; |
||||
} |
||||
.mat-icon { |
||||
vertical-align:middle; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.bank { |
||||
display: flex; |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.mat-icon { |
||||
width: 18px; |
||||
height: 18px; |
||||
vertical-align:top; |
||||
margin-right: 8px; |
||||
cursor:pointer; |
||||
} |
||||
.material { |
||||
cursor:pointer; |
||||
height: 30px; |
||||
font-size: 16px; |
||||
margin-top: 10px; |
||||
padding-left: 25px; |
||||
.btn { |
||||
color: #FFC122; |
||||
} |
||||
.blockBtn { |
||||
float: right; |
||||
margin-right: 15px; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
} |
||||
.imgBox { |
||||
padding: 5px 0 0 5px; |
||||
margin-top: 5px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
.imgDiv { |
||||
span{ |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
} |
||||
display: inline-block; |
||||
margin-right: 10px; |
||||
margin-bottom: 10px; |
||||
width: 90px; |
||||
height: 165px; |
||||
text-align: center; |
||||
img { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.attribute { |
||||
padding-left: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
background-color: #d7d7d7; |
||||
div { |
||||
margin-right: 25px; |
||||
} |
||||
.attributeLeft{ |
||||
padding-top: 8px; |
||||
flex: 75%; |
||||
} |
||||
} |
||||
.btnBox .mat-icon{ |
||||
padding: 8px; |
||||
} |
||||
.overFlow { |
||||
height: 500px; |
||||
overflow: auto; |
||||
} |
||||
table { |
||||
width: 100%; |
||||
text-align: center; |
||||
.cdk-header-cell { |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.active { |
||||
background-color: rgba(225,225,225,0.8) |
||||
} |
||||
.OriginalActive { |
||||
background-color: rgba(225,225,225,0.8); |
||||
} |
||||
|
||||
.btn{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 8px; |
||||
} |
||||
} |
||||
.addbtn{ |
||||
width: 584px; |
||||
height: 32px; |
||||
border-top: 1px solid black; |
||||
text-align: center; |
||||
padding-top: 6px; |
||||
button{ |
||||
margin: 0 6px; |
||||
} |
||||
} |
||||
.mat-radio-button { |
||||
font-size: 14px; |
||||
margin-right: 5px; |
||||
} |
||||
.topbox{ |
||||
height: 32px; |
||||
border-bottom: 1px solid black; |
||||
|
||||
} |
||||
.mainbox{ |
||||
position: relative; |
||||
width: 582px; |
||||
height: 656px; |
||||
.mainleft{ |
||||
height: 646px; |
||||
width: 290px; |
||||
float: left; |
||||
border-right: 1px solid black; |
||||
padding-top: 10px; |
||||
mat-form-field{ |
||||
display: block; |
||||
width: 220px; |
||||
} |
||||
.padding{ |
||||
margin-top: 12px; |
||||
} |
||||
.color{ |
||||
height: 50px; |
||||
.color1{ |
||||
|
||||
margin-bottom: 5px; |
||||
margin-top: 12px; |
||||
li{ |
||||
width: 23px; |
||||
height: 23px; |
||||
list-style: none; |
||||
// margin: 2px; |
||||
float: left; |
||||
border: 2px solid white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.mainright{ |
||||
width: 288px; |
||||
height: 654px; |
||||
float: left; |
||||
overflow: auto; |
||||
label{ |
||||
font-weight: 900; |
||||
} |
||||
} |
||||
} |
||||
.coloractive{ |
||||
border: 2px solid black !important; |
||||
|
||||
} |
||||
.pigepadding{ |
||||
font-size: 16px; |
||||
} |
||||
.selectoriginalcopybox{ |
||||
width: 423px; |
||||
height: 300px; |
||||
border: 1px solid black; |
||||
overflow: auto; |
||||
margin-bottom: 10px; |
||||
} |
||||
.originalcopyimg{ |
||||
width: 100px; |
||||
height: 120px; |
||||
float: left; |
||||
text-align: center; |
||||
img{ |
||||
width: 70px; |
||||
height: 70px; |
||||
} |
||||
p{ |
||||
font-size: 11px; |
||||
height: 11px; |
||||
} |
||||
|
||||
} |
||||
.selectedback{ |
||||
background-color:rgba(0,165,219,0.5); |
||||
} |
||||
.selecteditem{ |
||||
// background: grey; |
||||
cursor:not-allowed; |
||||
background-color: rgba(225, 225, 225, 0.8) |
||||
} |
||||
.selecteditemimg{ |
||||
opacity: 0.3; |
||||
filter: alpha(opacity=30); |
||||
} |
||||
.matname{ |
||||
margin-left: 6px; |
||||
|
||||
} |
||||
.divImg{ |
||||
width: 95px; |
||||
height: 95px; |
||||
font-size: 15px; |
||||
margin-left: 48px; |
||||
margin-top: -11px; |
||||
border: 1px dashed grey; |
||||
padding: 4px; |
||||
img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
} |
||||
} |
||||
.Input{ |
||||
width: 102px; |
||||
height: 103px; |
||||
position: absolute; |
||||
left:0px; |
||||
top: 0px; |
||||
cursor: pointer; |
||||
opacity:0 |
||||
} |
||||
.relevancefire{ |
||||
margin-top: 5px; |
||||
} |
||||
.fireli{ |
||||
list-style: none; |
||||
|
||||
} |
||||
.fireli:hover{ |
||||
background: rgba(225, 225, 225, 0.8); |
||||
cursor: pointer; |
||||
} |
||||
.firebtn{ |
||||
line-height: 24px; |
||||
} |
||||
.image{ |
||||
margin-bottom: 6px; |
||||
} |
||||
|
||||
.positionup{ |
||||
position: absolute; |
||||
top:407px; |
||||
left: 50px |
||||
} |
||||
.isbordernum{ |
||||
position: absolute; |
||||
top: 410px; |
||||
left: 50px |
||||
} |
||||
.from{ |
||||
margin-bottom: 10px; |
||||
} |
||||
.border{ |
||||
.bordernum{ |
||||
display: block; |
||||
} |
||||
.borderinputbox{ |
||||
float: left; |
||||
width: 142px; |
||||
input{ |
||||
width: 98px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -1,572 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
||||
import { AddMatLibrary } from './addmatlibrary.component' |
||||
import { EditMatLibrary } from './editmatlibrary.component' |
||||
import { AddOriginalCopy } from './addoriginalcopy.component' |
||||
import { MatTableDataSource } from '@angular/material/table'; |
||||
import { EditOriginalCopy } from './editoriginalcopy.component' |
||||
import { SelectOriginalCopy } from './selectoriginalcopy.component' |
||||
import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import format from 'date-fns/format'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-material-bank', |
||||
templateUrl: './material-bank.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class MaterialBankComponent implements OnInit { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.http.get('/api/AssetLibraries').subscribe(data=>{ |
||||
this.material = data[0] |
||||
this.allMaterialBank = data |
||||
this.getSourceMaterial() |
||||
}) |
||||
} |
||||
|
||||
allMaterialBank:any = []; //所有素材库
|
||||
material:any={name:''}; //选中的素材库
|
||||
materialIndex:any=0; //选中的素材库index
|
||||
|
||||
sourceMaterial:any; //素材库对应所有原件
|
||||
Original:any; //选中的原件
|
||||
OriginalIndex:any=null; //选中的原件index
|
||||
isshow = true//左侧列表的显示隐藏
|
||||
|
||||
//收起左侧列表
|
||||
showlist(){ |
||||
this.isshow = !this.isshow |
||||
} |
||||
//获取所有素材库
|
||||
getMaterialBank () { |
||||
this.http.get('/api/AssetLibraries').subscribe(data=>{ |
||||
this.allMaterialBank = data |
||||
this.material = data[this.materialIndex] |
||||
}) |
||||
} |
||||
|
||||
//获得指定素材库所有原件
|
||||
getSourceMaterial () { |
||||
this.sourceMaterial = null |
||||
if (this.material) { |
||||
let data = { |
||||
libraryId:this.material.id |
||||
} |
||||
this.http.get('/api/Assets',{ |
||||
params:data |
||||
}).subscribe(data=>{ |
||||
this.sourceMaterial = data |
||||
this.Original = data[this.OriginalIndex] |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//选中素材库
|
||||
add (e,index) { |
||||
this.Original = null |
||||
this.OriginalIndex = null |
||||
if (this.materialIndex != index) { |
||||
this.material = e |
||||
this.materialIndex = index |
||||
this.getSourceMaterial() |
||||
} |
||||
} |
||||
|
||||
//选中原件
|
||||
addOriginal (e,index) { |
||||
this.Original = e |
||||
this.OriginalIndex = index |
||||
} |
||||
|
||||
//打开查看属性弹窗
|
||||
viewProperties () { |
||||
if(this.Original){ |
||||
let data = this.Original |
||||
const dialogRef = this.dialog.open(attributeComponent, |
||||
{width: '1000px',data}); |
||||
dialogRef.afterClosed().subscribe( |
||||
(data)=>{if(data){this.getSourceMaterial()}} |
||||
) |
||||
}else { |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择原件','确定',config); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
//新增素材库
|
||||
addmatlibrary(){ |
||||
let data = this.allMaterialBank || [] |
||||
const dialogRef = this.dialog.open(AddMatLibrary, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.getMaterialBank () |
||||
} |
||||
); |
||||
} |
||||
|
||||
//编辑素材库
|
||||
editmatlibrary(){ |
||||
const dialogRef = this.dialog.open(EditMatLibrary, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {allMaterialBank:this.allMaterialBank,material:this.material} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.getMaterialBank () |
||||
} |
||||
); |
||||
} |
||||
|
||||
//删除素材库
|
||||
delete(){ |
||||
var isdeleted = confirm(`确定要删除${this.material.name}素材库吗？`) |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.http.delete(`/api/AssetLibraries/${this.material.id}`).subscribe( data=>{
|
||||
this.materialIndex -= 1//删除之后焦点前移
|
||||
this.getMaterialBank () |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//禁启用素材库
|
||||
disabled(){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
if(this.material.enabled){ |
||||
this.http.put(`/api/AssetLibraries/${this.material.id}`,{ |
||||
id: this.material.id, |
||||
name: this.material.name, |
||||
order: this.material.order, |
||||
tag: this.material.tag, |
||||
enabled: false, |
||||
modifiedTime: time |
||||
}).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('禁用成功','确定',config); |
||||
this.getMaterialBank () |
||||
}) |
||||
}else{ |
||||
this.http.put(`/api/AssetLibraries/${this.material.id}`,{ |
||||
id: this.material.id, |
||||
name: this.material.name, |
||||
order: this.material.order, |
||||
tag: this.material.tag, |
||||
enabled: true, |
||||
modifiedTime: time |
||||
}).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('启用成功','确定',config); |
||||
this.getMaterialBank () |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
//新增素材原件
|
||||
addoriginalcopy(node){ |
||||
const dialogRef = this.dialog.open(AddOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
||||
// height:"715px",
|
||||
width:"640px", |
||||
data: {allMaterialBank:this.allMaterialBank,node:node,sourceMaterial:this.sourceMaterial} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.getSourceMaterial () |
||||
} |
||||
|
||||
} |
||||
); |
||||
} |
||||
//修改素材原件
|
||||
editoriginalcopy(node){ |
||||
if(this.Original){ |
||||
const dialogRef = this.dialog.open(EditOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
||||
// height:"580px",
|
||||
width:"640px", |
||||
data: {allMaterialBank:this.allMaterialBank,node:node,Original:this.Original} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.getSourceMaterial () |
||||
} |
||||
} |
||||
); |
||||
}else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择原件','确定',config); |
||||
} |
||||
|
||||
} |
||||
|
||||
//禁启用原件
|
||||
disableoriginal(material){ |
||||
if(this.Original){ |
||||
this.http.put(`/api/Assets/${this.Original.id}`,{ |
||||
id:this.Original.id, |
||||
name:this.Original.name, |
||||
width: this.Original.width, |
||||
height: this.Original.height, |
||||
angle: this.Original.angle, |
||||
interactiveMode:this.Original.interactiveMode,//交互方式
|
||||
fixedSize: this.Original.fixedSize, |
||||
fillMode: this.Original.fillMode,//填充方式
|
||||
color: this.Original.color, |
||||
imageUrl:this.Original.imageUrl, |
||||
order: this.Original.order, |
||||
enabled: !this.Original.enabled, |
||||
propertyInfos: this.Original.propertyInfos, |
||||
fireElementId:this.Original.fireElementId |
||||
}).subscribe((data)=>{ |
||||
this.getSourceMaterial () |
||||
}) |
||||
}else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择原件','确定',config); |
||||
} |
||||
} |
||||
|
||||
//删除原件
|
||||
deleteoriginal(material){ |
||||
if(this.Original){ |
||||
var isdeleted = confirm(`确定要删除当前原件吗？`) |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.http.delete(`/api/Assets`,{ |
||||
params:{ |
||||
libraryId:material.id, |
||||
id:this.Original.id |
||||
} |
||||
}).subscribe( data=>{
|
||||
this.getSourceMaterial () |
||||
}) |
||||
} |
||||
}else{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请选择原件','确定',config); |
||||
} |
||||
} |
||||
|
||||
//选择原件素材 material为当前素材库的信息
|
||||
selectoriginal(material){ |
||||
const dialogRef = this.dialog.open(SelectOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
||||
// height:"525px",
|
||||
data: {allMaterialBank:this.allMaterialBank,material:material} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.getSourceMaterial () |
||||
} |
||||
|
||||
} |
||||
); |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//原件对应所有属性弹窗
|
||||
@Component({ |
||||
selector: 'app-attribute', |
||||
templateUrl: './attribute.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class attributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog, |
||||
public dialogRef: MatDialogRef<attributeComponent >, |
||||
@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) { } |
||||
|
||||
ngOnInit(): void { |
||||
if (this.data.propertyInfos == null) { |
||||
this.data.propertyInfos = [] |
||||
} |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos) |
||||
} |
||||
|
||||
displayedColumns = ['checked', 'name', 'type', 'default','required','physicalUnit','operation']; |
||||
dataSource:any=[]; //当前原件属性渲染table
|
||||
dataSourceIndex:any=[]; //选中属性的index
|
||||
|
||||
|
||||
|
||||
//封装函数每次更改,重新获取下标
|
||||
setIndex () { |
||||
if (this.data.propertyInfos) { |
||||
this.data.propertyInfos.forEach((item,index)=>{ |
||||
item.index = index |
||||
}) |
||||
} |
||||
} |
||||
|
||||
//点击checked框获取当前属性index
|
||||
checkedChange (e,index) { |
||||
if (e.checked) { |
||||
this.dataSourceIndex.push(index) |
||||
} else { |
||||
this.dataSourceIndex.splice(this.dataSourceIndex.findIndex(item=>item==index),1) |
||||
} |
||||
} |
||||
|
||||
//上移
|
||||
toTop () { |
||||
if(this.dataSourceIndex.length) { |
||||
let index = this.dataSourceIndex[this.dataSourceIndex.length-1] |
||||
if (index != 0) { |
||||
let data = this.data.propertyInfos[index] |
||||
this.data.propertyInfos[index]=this.data.propertyInfos[index-1] |
||||
this.data.propertyInfos[index-1] = data |
||||
this.dataSourceIndex[this.dataSourceIndex.length-1] = index-1 |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos) |
||||
} |
||||
} |
||||
} |
||||
|
||||
//下移
|
||||
toBottom () { |
||||
if(this.dataSourceIndex.length) { |
||||
let index = this.dataSourceIndex[this.dataSourceIndex.length-1] |
||||
if (index != this.data.propertyInfos.length-1) { |
||||
let data = this.data.propertyInfos[index] |
||||
this.data.propertyInfos[index]=this.data.propertyInfos[index+1] |
||||
this.data.propertyInfos[index+1] = data |
||||
this.dataSourceIndex[this.dataSourceIndex.length-1] = index+1 |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//新增属性弹窗
|
||||
add () { |
||||
const dialogRef = this.dialog.open(addAttributeComponent); |
||||
dialogRef.afterClosed().subscribe( |
||||
(data)=>{ |
||||
if (data) { |
||||
this.data.propertyInfos.push(data) |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos)} |
||||
}) |
||||
} |
||||
|
||||
//编辑属性弹窗
|
||||
edit (e) { |
||||
|
||||
let data = this.data.propertyInfos[e] |
||||
const dialogRef = this.dialog.open(editAttribute,{data}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if (data) { |
||||
this.data.propertyInfos[data.index] = data |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos)} |
||||
}) |
||||
} |
||||
|
||||
//显示
|
||||
visible (e) { |
||||
this.data.propertyInfos[e].visible = true |
||||
} |
||||
//隐藏
|
||||
noVisible (e) { |
||||
this.data.propertyInfos[e].visible = false |
||||
} |
||||
//启用
|
||||
enabled (e) { |
||||
this.data.propertyInfos[e].enabled = true |
||||
} |
||||
//禁用
|
||||
noEnabled (e) { |
||||
this.data.propertyInfos[e].enabled = false |
||||
} |
||||
//删除
|
||||
delete (e) { |
||||
let isTrue = confirm('您确定要删除吗') |
||||
if (isTrue) { |
||||
this.data.propertyInfos.splice(e,1) |
||||
this.setIndex() |
||||
this.dataSource = new MatTableDataSource<any>(this.data.propertyInfos) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//原件属性保存
|
||||
preservation () { |
||||
if (this.data.propertyInfos.length) { |
||||
this.data.propertyInfos.forEach(item => { |
||||
delete item.index |
||||
}); |
||||
this.submit() |
||||
} else { |
||||
this.submit() |
||||
} |
||||
} |
||||
|
||||
//提交保存
|
||||
submit () { |
||||
this.http.put(`/api/Assets/${this.data.id}`,{ |
||||
id:this.data.id, |
||||
name:this.data.name, |
||||
width:this.data.width, |
||||
height:this.data.height, |
||||
angle:this.data.angle, |
||||
interactiveMode:this.data.interactiveMode, |
||||
isFromBuilding: this.data.isFromBuilding, |
||||
canConnect:this.data.canConnect, |
||||
holeMaxCount:this.data.holeMaxCount, |
||||
fixedSize:this.data.fixedSize, |
||||
fillMode:this.data.fillMode, |
||||
color:this.data.color, |
||||
imageUrl:this.data.imageUrl, |
||||
drawMode:this.data.drawMode, |
||||
border:this.data.border, |
||||
order:this.data.order, |
||||
enabled:this.data.enabled, |
||||
propertyInfos:this.data.propertyInfos, |
||||
fireElementId:this.data.fireElementId |
||||
}).subscribe(data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('保存成功','确定',config); |
||||
this.dialogRef.close('success') |
||||
}) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//新增属性弹窗
|
||||
export interface Food { |
||||
value: number; |
||||
viewValue: string; |
||||
} |
||||
@Component({ |
||||
selector: 'app-addAttribute', |
||||
templateUrl: './addAttribute.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class addAttributeComponent { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog, |
||||
public dialogRef: MatDialogRef<addAttributeComponent>,) { } |
||||
|
||||
ngOnInit(): void {} |
||||
|
||||
//定义属性数据
|
||||
propertyType:Food[]=[ |
||||
{value:0, viewValue: '单行文本'}, |
||||
{value:1, viewValue: '多行文本'}, |
||||
{value:2, viewValue: '数值'}, |
||||
{value:3, viewValue: '图片'}, |
||||
{value:4, viewValue: '图片数量'}, |
||||
{value:5, viewValue: '方向'}, |
||||
{value:6, viewValue: '布尔值'}, |
||||
{value:7, viewValue: '供给区域'}, |
||||
{value:8, viewValue: '供给类型'}] |
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
e.order = 0 |
||||
e.enabled = true |
||||
e.visible = true |
||||
e.required = e.required=='true'? true: false, |
||||
this.dialogRef.close(e) |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//编辑属性弹窗
|
||||
@Component({ |
||||
selector: 'app-editAttribute', |
||||
templateUrl: './editAttribute.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class editAttribute { |
||||
|
||||
constructor(private http:HttpClient,public dialog: MatDialog, |
||||
public dialogRef: MatDialogRef<editAttribute>, |
||||
@Inject(MAT_DIALOG_DATA) public data,) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.propertyName = this.data.propertyName |
||||
this.propertyValue = this.data.propertyValue |
||||
this.propertyType = this.data.propertyType |
||||
this.required = String(this.data.required) |
||||
this.ruleName = this.data.ruleName |
||||
this.ruleValue = this.data.ruleValue |
||||
this.physicalUnit = this.data.physicalUnit |
||||
this.tag = this.data.tag} |
||||
|
||||
|
||||
propertyName:any |
||||
propertyValue:any; |
||||
propertyType:number; |
||||
required:any; |
||||
ruleName:any; |
||||
ruleValue:any; |
||||
physicalUnit:any; |
||||
tag:any; |
||||
|
||||
//定义属性数据
|
||||
type:Food[]=[ |
||||
{value:0, viewValue: '单行文本'}, |
||||
{value:1, viewValue: '多行文本'}, |
||||
{value:2, viewValue: '数值'}, |
||||
{value:3, viewValue: '图片'}, |
||||
{value:4, viewValue: '图片数量'}, |
||||
{value:5, viewValue: '方向'}, |
||||
{value:6, viewValue: '布尔值'}, |
||||
{value:7, viewValue: '供给区域'}, |
||||
{value:8, viewValue: '供给类型'}] |
||||
|
||||
//提交表单
|
||||
onSubmit (e) { |
||||
e.order = 0 |
||||
e.enabled = this.data.enabled |
||||
e.visible = this.data.visible |
||||
e.index = this.data.index |
||||
e.required = e.required=='true'? true: false, |
||||
this.dialogRef.close(e) |
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
@ -1,22 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<span mat-dialog-title>选择原件</span> |
||||
<mat-form-field> |
||||
<mat-select required name="tag" placeholder='素材库选择' [(ngModel)]="aaa"> |
||||
<mat-option *ngFor="let item of matlibrary" [value]="item.id" (click)="selectmatlibrart(item)" >{{item.name}}</mat-option> |
||||
</mat-select> |
||||
</mat-form-field> |
||||
<div class="selectoriginalcopybox"> |
||||
<div class="originalcopyimg" *ngFor="let item of sourceMaterial" (click)="clickimg(item)" [ngClass]="{'selectedback': item.istrue}" [ngClass]="{'selecteditem': item.isselected}"> |
||||
<img src="{{item.imageUrl}}" [ngClass]="{'selecteditemimg': item.isselected}"> |
||||
<p>{{item.name}}</p> |
||||
<!-- <p *ngIf="item.isselected">(已拥有)</p> --> |
||||
<!-- <mat-icon *ngIf="!item.enabled" class="blockBtn">block</mat-icon> --> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,103 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
||||
import format from 'date-fns/format'; |
||||
@Component({ |
||||
selector: 'selectoriginalcopy', |
||||
templateUrl: './selectoriginalcopy.component.html', |
||||
styleUrls: ['./material-bank.component.scss'] |
||||
}) |
||||
export class SelectOriginalCopy { |
||||
myControl = new FormControl(); |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<SelectOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
matlibrary = this.data.allMaterialBank//所有素材库
|
||||
selectedmatlibraryid = ""//当前下拉框选中的素材库id
|
||||
sourceMaterial:any; //指定素材库对应所有原件
|
||||
atpresentSourceMaterial:any//当前选择原件素材库对应所有原件
|
||||
aaa = this.data.allMaterialBank[0].id//默认显示第一个素材库
|
||||
ngOnInit(): void { |
||||
this.getatpresentSourceMaterial ()//初始化时先获取一下当前素材库对应所有原件，然后在获取指定素材库原件时进行筛选对比
|
||||
let data = { |
||||
libraryId:this.data.allMaterialBank[0].id |
||||
} |
||||
this.http.get('/api/Assets',{ |
||||
params:data |
||||
}).subscribe((data : any)=>{ |
||||
data.forEach(item => { |
||||
this.atpresentSourceMaterial.forEach(n=>{ |
||||
if(n.id == item.id){ |
||||
item.isselected = true |
||||
} |
||||
}) |
||||
}); |
||||
this.sourceMaterial = data |
||||
}) |
||||
|
||||
} |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
|
||||
//获得指定素材库所有原件
|
||||
getSourceMaterial () { |
||||
let data = { |
||||
libraryId:this.selectedmatlibraryid |
||||
} |
||||
this.http.get('/api/Assets',{ |
||||
params:data |
||||
}).subscribe((data : any)=>{ |
||||
data.forEach(item => { |
||||
this.atpresentSourceMaterial.forEach(n=>{ |
||||
if(n.id == item.id){ |
||||
item.isselected = true |
||||
} |
||||
}) |
||||
}); |
||||
this.sourceMaterial = data |
||||
}) |
||||
} |
||||
//获得当前素材库所有原件
|
||||
getatpresentSourceMaterial (){ |
||||
let data = { |
||||
libraryId:this.data.material.id |
||||
} |
||||
this.http.get('/api/Assets',{ |
||||
params:data |
||||
}).subscribe(data=>{ |
||||
this.atpresentSourceMaterial = data |
||||
}) |
||||
} |
||||
selectmatlibrart(item){//点击下拉框中的一项
|
||||
this.selectedmatlibraryid = item.id |
||||
this.getSourceMaterial () |
||||
} |
||||
selectedimg = []//需要提交的原件id数组
|
||||
clickimg(item){//点击选择原件的多张图片
|
||||
if(!item.isselected){ |
||||
if(item.istrue){//如果图片已经被选中，此时点击
|
||||
item.istrue = false |
||||
this.selectedimg.forEach((n,index) => { |
||||
if(n == item.id){//将此id从数组中移除
|
||||
this.selectedimg.splice(index,1) |
||||
} |
||||
}); |
||||
}else{//如果图片还没有被选中
|
||||
item.istrue = true |
||||
this.selectedimg.push(item.id)//将选中图片id存入数组
|
||||
} |
||||
} |
||||
|
||||
} |
||||
onSubmit(value){ |
||||
this.http.post("/api/Assets/Select",{ |
||||
assetLibraryId:this.data.material.id , |
||||
assetIds: this.selectedimg |
||||
}).subscribe(data=>{ |
||||
this.dialogRef.close('ooo'); |
||||
}) |
||||
} |
||||
} |
||||
@ -1,66 +0,0 @@
|
||||
<button mat-button [matMenuTriggerFor]="menu">菜单</button> |
||||
<mat-menu #menu="matMenu"> |
||||
<button mat-menu-item>我是老大</button> |
||||
<button mat-menu-item>我是老二</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="appMenu"> |
||||
<mat-icon>more_vert</mat-icon> |
||||
</button> |
||||
<!-- <mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item>设置</button> |
||||
<button mat-menu-item>帮助</button> |
||||
</mat-menu> --> |
||||
|
||||
<mat-menu #appMenu="matMenu"> |
||||
<button mat-menu-item> |
||||
<mat-icon>dialpad</mat-icon> |
||||
<span>重播</span> |
||||
</button> |
||||
<button mat-menu-item disabled> |
||||
<mat-icon>voicemail</mat-icon> |
||||
<span>检查邮件</span> |
||||
</button> |
||||
<button mat-menu-item> |
||||
<mat-icon>notifications_off</mat-icon> |
||||
<span>禁止弹出框</span> |
||||
</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<button mat-icon-button [matMenuTriggerFor]="rootMenu"> |
||||
动物 |
||||
</button> |
||||
<mat-menu #rootMenu="matMenu"> |
||||
<!-- 延时渲染 --> |
||||
<ng-template matMenuContent> |
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu">家养</button> |
||||
<button mat-menu-item>野生</button> |
||||
</ng-template> |
||||
|
||||
</mat-menu> |
||||
|
||||
<mat-menu #subMenu="matMenu"> |
||||
<button mat-menu-item [matMenuTriggerFor]="subMenu2">小狗</button> |
||||
<button mat-menu-item>小猫</button> |
||||
<button mat-menu-item>小乌龟</button> |
||||
</mat-menu> |
||||
<mat-menu #subMenu2="matMenu"> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
<button mat-menu-item>小黑狗</button> |
||||
</mat-menu> |
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { MenuComponent } from './menu.component'; |
||||
|
||||
describe('MenuComponent', () => { |
||||
let component: MenuComponent; |
||||
let fixture: ComponentFixture<MenuComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ MenuComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(MenuComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-menu', |
||||
templateUrl: './menu.component.html', |
||||
styleUrls: ['./menu.component.scss'] |
||||
}) |
||||
export class MenuComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,24 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入菜单名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="icon" name="icon" |
||||
ngModel #icon="ngModel" placeholder="请输入图标地址"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="url" name="url" |
||||
ngModel #url="ngModel" placeholder="请输入路径地址"> |
||||
</mat-form-field> |
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,24 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" |
||||
required |
||||
[(ngModel)]="menuname" placeholder="修改菜单名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="icon" name="icon" |
||||
[(ngModel)]="menuiconurl" placeholder="修改图标地址"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="url" name="url" |
||||
[(ngModel)]="menuweburl" placeholder="修改路径地址"> |
||||
</mat-form-field> |
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,27 +0,0 @@
|
||||
<div style="height: 90%; overflow-y: auto;"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="createauthority(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="deleted(node)"><mat-icon>delete</mat-icon></button> |
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
</div> |
||||
@ -1,34 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
th,td{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 12px; |
||||
} |
||||
} |
||||
mat-tree{ |
||||
width: 500px; |
||||
button{ |
||||
display: block; |
||||
float: right; |
||||
} |
||||
mat-tree-node{ |
||||
position: relative; |
||||
.deleted{ |
||||
position: absolute; |
||||
right: 0; |
||||
} |
||||
.create{ |
||||
position: absolute; |
||||
right: 80px; |
||||
} |
||||
.edit{ |
||||
position: absolute; |
||||
right: 40px; |
||||
} |
||||
} |
||||
} |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { NavmenusComponent } from './navmenus.component'; |
||||
|
||||
describe('NavmenusComponent', () => { |
||||
let component: NavmenusComponent; |
||||
let fixture: ComponentFixture<NavmenusComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ NavmenusComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(NavmenusComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,228 +0,0 @@
|
||||
import { Component, OnInit,Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
|
||||
|
||||
|
||||
@Component({ |
||||
selector: 'app-navmenus', |
||||
templateUrl: './navmenus.component.html', |
||||
styleUrls: ['./navmenus.component.scss'] |
||||
}) |
||||
export class NavmenusComponent implements OnInit { |
||||
newdata = []; |
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children:node.children, |
||||
url:node.url, |
||||
icon:node.icon |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
constructor(private http: HttpClient,public dialog: MatDialog,private tree:TreeService,public snackBar: MatSnackBar) { } |
||||
getlist = ():void=>{ |
||||
this.http.get('/api/NavMenus').subscribe((data: any[])=>{
|
||||
this.newdata = this.tree.toTree(data) |
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
|
||||
}) |
||||
} |
||||
treedata:any |
||||
//初始化页面时渲染出tree
|
||||
ngOnInit() { |
||||
this.http.get('/api/NavMenus').subscribe((data: any[])=>{
|
||||
// console.log(111,this.data)
|
||||
// this.treedata = this.tree.toTree(data)
|
||||
let _data = this.tree.toTree(data)
|
||||
this.dataSource.data = _data |
||||
this.treedata = _data |
||||
console.log(111,this.treedata) |
||||
}) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//弹出创建窗口按钮
|
||||
createauthority(value){ |
||||
const dialogRef = this.dialog.open(CreateMenus, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id,children:value.children,icon:value.icon,url:value.url} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.newdata = [] |
||||
this.getlist()
|
||||
} |
||||
); |
||||
} |
||||
//删除按钮
|
||||
deleted(authority){ |
||||
var isdeleted = confirm("确定要删除此用户吗？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.newdata = [] |
||||
this.http.delete(`/api/NavMenus/${authority.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
//编辑按钮
|
||||
edit(value){ |
||||
const dialogRef = this.dialog.open(EditMenus, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id,parentId:value.parentId,order:value.order,node:value} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.newdata = [] |
||||
this.getlist()
|
||||
} |
||||
); |
||||
} |
||||
} |
||||
|
||||
//创建组件
|
||||
@Component({ |
||||
selector: 'createmenus', |
||||
templateUrl: './createmenus.component.html', |
||||
styleUrls: ['./navmenus.component.scss'] |
||||
}) |
||||
export class CreateMenus { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateMenus>, |
||||
public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
if(this.data.children){ |
||||
this.http.post( |
||||
'/api/NavMenus',
|
||||
{ |
||||
id: '', |
||||
name: value.name, |
||||
icon: value.icon, |
||||
url: value.url, |
||||
order:this.data.children[this.data.children.length -1].order + 1, |
||||
parentId: this.data.id |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close();
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
}else{ |
||||
this.http.post( |
||||
'/api/NavMenus',
|
||||
{ |
||||
id: '', |
||||
name: value.name, |
||||
icon: value.icon, |
||||
url: value.url, |
||||
order:0, |
||||
parentId: this.data.id |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close();
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
//编辑组件
|
||||
@Component({ |
||||
selector: 'editmenus', |
||||
templateUrl: './editmenus.component.html', |
||||
styleUrls: ['./navmenus.component.scss'] |
||||
}) |
||||
export class EditMenus { |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditMenus>,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data) {} |
||||
menuname:any //菜单名称
|
||||
menuiconurl:any //菜单图标地址
|
||||
menuweburl:any //菜单地址
|
||||
ngOnInit(): void { |
||||
this.menuname = this.data.node.name; |
||||
this.menuiconurl = this.data.node.icon; |
||||
this.menuweburl = this.data.node.url; |
||||
} |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
onSubmit(value){ |
||||
if(value.icon){ |
||||
this.data.icon = value.icon |
||||
} |
||||
if(value.url){ |
||||
this.data.url = value.url |
||||
} |
||||
this.http.put( |
||||
` /api/NavMenus/${this.data.id}`,
|
||||
{ |
||||
id: this.data.id, |
||||
name: value.name, |
||||
icon: this.data.icon, |
||||
url: this.data.url, |
||||
order:this.data.order, |
||||
parentId: this.data.parentId |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close();
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
} |
||||
@ -1,33 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required |
||||
ngModel #name="ngModel" placeholder="请输入组织名称"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="number" name="number" type='text' |
||||
ngModel #number="ngModel" placeholder="请输入机构代码"> |
||||
</mat-form-field> |
||||
|
||||
<mat-form-field> |
||||
<input matInput id="division" name="division" type='text' |
||||
ngModel #division="ngModel" placeholder="请输入区划"> |
||||
</mat-form-field> |
||||
<!-- <mat-form-field class="example-full-width"> |
||||
<input type="text" placeholder="是否拥有权限" aria-label="Number" matInput [matAutocomplete]="auto1" name="enabled" ngModel #enabled="ngModel"> |
||||
<mat-autocomplete #auto1="matAutocomplete"> |
||||
<mat-option *ngFor="let option of options2" [value]="option"> |
||||
{{option}} |
||||
</mat-option> |
||||
</mat-autocomplete> |
||||
</mat-form-field> --> |
||||
|
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,50 +0,0 @@
|
||||
|
||||
<div class="leftbox"> |
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required |
||||
[(ngModel)]="organizationname" placeholder="修改组织名称"> |
||||
</mat-form-field> |
||||
<mat-form-field> |
||||
<input matInput id="number" name="number" type='text' |
||||
[(ngModel)]="organizationcode" placeholder="修改机构代码"> |
||||
</mat-form-field> |
||||
<mat-form-field> |
||||
<input matInput id="division" name="division" type='text' |
||||
[(ngModel)]="division" placeholder="修改区划"> |
||||
</mat-form-field> |
||||
<mat-form-field> |
||||
<label>所属上级组织</label> |
||||
<input type="text" matInput name='organizationName' |
||||
required [(ngModel)]="organizationName" disabled> |
||||
</mat-form-field> |
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
<div class="treebox"> |
||||
<label>请选择机构</label> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="smalltreebox"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="orilist" (click)='add(node)'> |
||||
<button mat-icon-button disabled ></button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="orilist" (click)='add(node)'> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
<li>{{node.name}}</li> |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
@ -1,42 +0,0 @@
|
||||
<div style="height: 100%; overflow-y: auto;position: relative"> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" > |
||||
<mat-tree-node *matTreeNodeDef="let node;" matTreeNodePadding> |
||||
<button mat-icon-button disabled ></button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> |
||||
<button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button> |
||||
<button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button> |
||||
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button> |
||||
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button> |
||||
|
||||
</mat-tree-node> |
||||
|
||||
|
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<button mat-icon-button |
||||
matTreeNodeToggle |
||||
[attr.aria-label]="'toggle ' + node.name"> |
||||
<mat-icon class="mat-icon-rtl-mirror"> |
||||
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} |
||||
</mat-icon> |
||||
</button> |
||||
{{node.name}} |
||||
<button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button> |
||||
<button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button> |
||||
<button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button> |
||||
<button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button> |
||||
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button> |
||||
<button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button> |
||||
<button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button> |
||||
|
||||
</mat-tree-node> |
||||
|
||||
</mat-tree> |
||||
<div *ngIf="isloading" style="position: absolute;width: 100%;height: 100%;background-color: rgba(125, 125, 125, 0.3);z-index: 999;left: 0;top: 0;text-align: center;"> |
||||
<mat-spinner style="position: fixed;top: 40%;left: 50%;transform: translate(-40%,-50%);"></mat-spinner> |
||||
<p style="position: fixed;top:53%;left: 53%;transform: translate(-53%,-50%);">努力加载中...</p> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -1,71 +0,0 @@
|
||||
mat-tree{ |
||||
width:800px; |
||||
button{ |
||||
display: block; |
||||
float: right; |
||||
} |
||||
mat-tree-node{ |
||||
position: relative; |
||||
|
||||
.deleted{ |
||||
position: absolute; |
||||
right: 0px; |
||||
} |
||||
|
||||
.disabled{ |
||||
position: absolute; |
||||
right: 40px; |
||||
} |
||||
|
||||
.edit{ |
||||
position: absolute; |
||||
right:160px; |
||||
} |
||||
.create{ |
||||
position: absolute; |
||||
right: 200px; |
||||
} |
||||
.up{ |
||||
position: absolute; |
||||
right: 120px; |
||||
} |
||||
.down{ |
||||
position: absolute; |
||||
right: 80px; |
||||
} |
||||
} |
||||
} |
||||
form{ |
||||
text-align: center; |
||||
button{ |
||||
margin: 0 8px; |
||||
margin-top: 8px; |
||||
} |
||||
} |
||||
|
||||
.leftbox{ |
||||
width: 300px; |
||||
float: left; |
||||
} |
||||
.treebox{ |
||||
float: right; |
||||
height: 250px; |
||||
width: 300px; |
||||
/* overflow: auto; */ |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
} |
||||
.smalltreebox{ |
||||
width: 300px; |
||||
mat-tree-node{ |
||||
width: 300px; |
||||
} |
||||
} |
||||
.orilist{ |
||||
list-style: none; |
||||
|
||||
} |
||||
.orilist:hover{ |
||||
cursor: pointer; |
||||
background-color: rgba(225, 225, 225, 0.8); |
||||
} |
||||
@ -1,558 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
@Component({ |
||||
selector: 'app-organization', |
||||
templateUrl: './organization.component.html', |
||||
styleUrls: ['./organization.component.scss'] |
||||
}) |
||||
export class OrganizationComponent implements OnInit { |
||||
data:any =[] //存储所有组织机构
|
||||
newdata = []; |
||||
|
||||
private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
|
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
enabled:node.enabled, |
||||
order:node.order, |
||||
children:node.children, |
||||
isTop:node.isTop, |
||||
isBottom:node.isBottom, |
||||
code:node.code, |
||||
division:node.division |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
constructor(private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,private tree: TreeService) { |
||||
} |
||||
isloading:any = false //loading效果
|
||||
//重新获取列表并且展开到上次位置的方法
|
||||
getlist = ():void=>{ |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.data = data; |
||||
this.newdata = this.tree.toTree(data) |
||||
|
||||
const nodes = this.treeControl.dataNodes; |
||||
const expandNodes = []; |
||||
nodes.forEach((item) => { |
||||
if(item.expandable && this.treeControl.isExpanded(item)){ |
||||
expandNodes.push(item.id); |
||||
} |
||||
}); |
||||
|
||||
|
||||
this.dataSource.data = this.newdata; |
||||
let newNodes = this.treeControl.dataNodes; |
||||
newNodes = newNodes.filter(n => { |
||||
return expandNodes.indexOf(n.id) >= 0; |
||||
}); |
||||
newNodes.forEach(item => { |
||||
this.treeControl.expand(item); |
||||
}); |
||||
this.isloading = false |
||||
|
||||
} |
||||
) |
||||
} |
||||
//初始化视图
|
||||
ngOnInit() { |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.data = data; |
||||
this.dataSource.data = this.tree.toTree(data); |
||||
this.treeControl.expand(this.treeControl.dataNodes[0]); |
||||
} |
||||
) |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
//创建组织按钮
|
||||
create(value){ |
||||
const dialogRef = this.dialog.open(CreateOrganization, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '260px', |
||||
data: {id:value.id,childlength:value.children,level:value.level} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
if(data){ |
||||
this.getlist() |
||||
}
|
||||
} |
||||
); |
||||
} |
||||
//编辑组织按钮
|
||||
edit(node){ |
||||
const dialogRef = this.dialog.open(EditOrganization, {//调用open方法打开对话框并且携带参数过去
|
||||
data: node |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
} |
||||
); |
||||
} |
||||
//删除组织按钮
|
||||
delete(value){ |
||||
var isdeleted = confirm("确定要删除此组织？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.isloading = true |
||||
this.http.delete(`/api/Organizations/${value.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
|
||||
}) |
||||
} |
||||
} |
||||
//禁用按钮
|
||||
disable(value){ |
||||
this.isloading = true |
||||
if(!value.enabled){ |
||||
this.http.put( |
||||
`/api/Organizations/${value.id}`,
|
||||
{ |
||||
id:value.id, |
||||
code:value.code, |
||||
name: value.name, |
||||
level:value.level, |
||||
order: value.order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: value.parentId |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('启用成功','确定',config); |
||||
this.getlist() |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('操作无效','确定',config); |
||||
this.isloading = false |
||||
} |
||||
) |
||||
|
||||
}else{ |
||||
// var isdeleted = confirm("确定要禁用此组织？")
|
||||
// if(isdeleted){
|
||||
this.http.put( |
||||
`/api/Organizations/${value.id}`,
|
||||
{ |
||||
id:value.id, |
||||
code:value.code, |
||||
name: value.name, |
||||
level:value.level, |
||||
order: value.order, |
||||
location: null, |
||||
enabled: false, |
||||
parentId: value.parentId |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('禁用成功','确定',config); |
||||
this.getlist() |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('操作无效','确定',config); |
||||
this.isloading = false |
||||
} |
||||
) |
||||
// }
|
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
//向上箭头
|
||||
updata = [] |
||||
up(node){ |
||||
this.isloading = true |
||||
var olddata = this.data; |
||||
// console.log(1,olddata)
|
||||
// console.log(2,node)
|
||||
this.updata = [] |
||||
olddata.forEach(item => { |
||||
if(item.id == node.parentId){ |
||||
this.updata = item.children |
||||
} |
||||
}); |
||||
// console.log(this.updata)
|
||||
this.updata.forEach((item,index)=>{ |
||||
if(item.name == node.name){ |
||||
this.http.put(//更改点击的节点为上一节点的order
|
||||
`/api/Organizations/${this.updata[index].id}`,
|
||||
{ |
||||
id:this.updata[index].id, |
||||
code:this.updata[index].code, |
||||
name: this.updata[index].name, |
||||
level: this.updata[index].level, |
||||
order: this.updata[index - 1].order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.updata[index].parentId, |
||||
} |
||||
).subscribe( |
||||
data=>{
|
||||
// this.getlist()
|
||||
this.http.put(//更改上一节点为点击节点的order
|
||||
`/api/Organizations/${this.updata[index - 1].id}`,
|
||||
{ |
||||
id:this.updata[index - 1].id, |
||||
code:this.updata[index - 1].code, |
||||
name: this.updata[index - 1].name, |
||||
level: this.updata[index - 1].level, |
||||
order: this.updata[index].order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.updata[index].parentId, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('更改order失败','确定',config); |
||||
this.isloading = false |
||||
} |
||||
) |
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('更改order失败','确定',config); |
||||
this.isloading = false |
||||
} |
||||
) |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
}) |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
//向下箭头
|
||||
downdata = [] |
||||
down(node){ |
||||
this.isloading = true |
||||
var olddata = this.data; |
||||
this.downdata = [] |
||||
olddata.forEach(item => { |
||||
if(item.id == node.parentId){ |
||||
this.downdata = item.children |
||||
} |
||||
}); |
||||
// console.log(this.downdata)
|
||||
this.downdata.forEach((item,index)=>{ |
||||
if(item.name == node.name){ |
||||
this.http.put(//更改点击的节点为下一节点的order
|
||||
`/api/Organizations/${this.downdata[index].id}`,
|
||||
{ |
||||
id:this.downdata[index].id, |
||||
code:this.downdata[index].code, |
||||
name: this.downdata[index].name, |
||||
level: this.downdata[index].level, |
||||
order: this.downdata[index + 1].order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.downdata[index].parentId, |
||||
} |
||||
).subscribe( |
||||
data=>{
|
||||
// this.getlist()
|
||||
this.http.put(//更改上一节点为点击节点的order
|
||||
`/api/Organizations/${this.downdata[index + 1].id}`,
|
||||
{ |
||||
id:this.downdata[index + 1].id, |
||||
code:this.downdata[index + 1].code, |
||||
name: this.downdata[index + 1].name, |
||||
level: this.downdata[index + 1].level, |
||||
order: this.downdata[index].order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.downdata[index].parentId, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('更改order失败','确定',config); |
||||
this.isloading = false |
||||
} |
||||
)
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('更改order失败','确定',config); |
||||
this.isloading = false |
||||
} |
||||
) |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
}) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//创建组织
|
||||
@Component({ |
||||
selector: 'createorganization', |
||||
templateUrl: './createorganization.component.html', |
||||
styleUrls: ['./organization.component.scss'] |
||||
}) |
||||
export class CreateOrganization { |
||||
myControl = new FormControl(); |
||||
ishttp: boolean =false |
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateOrganization>,@Inject(MAT_DIALOG_DATA) public data, |
||||
public snackBar: MatSnackBar) {} |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
|
||||
onSubmit(value){ |
||||
if(this.data.childlength){//如果点击节点存在children
|
||||
this.http.post( |
||||
'/api/Organizations',
|
||||
{ |
||||
id:"", |
||||
code:value.number, |
||||
division:value.division, |
||||
name: value.name, |
||||
level:this.data.level + 1, |
||||
order: this.data.childlength[this.data.childlength.length -1].order + 1, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.data.id, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(data);
|
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('创建组织成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
}else{ |
||||
this.http.post( |
||||
'/api/Organizations',
|
||||
{ |
||||
id:"", |
||||
code:value.number, |
||||
division:value.division, |
||||
name: value.name, |
||||
level:this.data.level + 1, |
||||
order:0, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.data.id, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(data); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('创建组织成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
//编辑组件
|
||||
@Component({ |
||||
selector: 'editorganization', |
||||
templateUrl: './editorganization.component.html', |
||||
styleUrls: ['./organization.component.scss'] |
||||
}) |
||||
export class EditOrganization { |
||||
newdata = []; |
||||
private _transformer = (node, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id: node.id, |
||||
parentId: node.parentId, |
||||
children:node.children, |
||||
division:node.division |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable); |
||||
treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
organizationname:string=""//自己组织的名字
|
||||
organizationcode:any//自己组织的编号
|
||||
organizationName:any =''//上级组织的名字
|
||||
organizationId:any =''//上级组织的id
|
||||
organizationLevel:number =null//上级组织的层级
|
||||
organizationchildlength:number = null |
||||
allOrganizations:any //所有组织机构
|
||||
division:any //区划
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditOrganization>,@Inject(MAT_DIALOG_DATA) public data, |
||||
private tree:TreeService,public snackBar: MatSnackBar) {} |
||||
|
||||
//获取所有组织机构
|
||||
getMechanism () { |
||||
this.http.get('/api/Organizations').subscribe( |
||||
(data:any)=>{ |
||||
this.allOrganizations = data |
||||
this.dataSource.data = this.tree.toTree(data); |
||||
data.forEach(item=>{ |
||||
if(item.id == this.data.parentId){ |
||||
this.organizationName = item.name |
||||
} |
||||
}) |
||||
} |
||||
) |
||||
} |
||||
|
||||
ngOnInit() { |
||||
// console.log(this.data)
|
||||
this.getMechanism() |
||||
this.organizationname = this.data.name |
||||
this.organizationcode = this.data.code |
||||
this.division = this.data.division |
||||
} |
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
add(e){ |
||||
this.organizationName=e.name |
||||
this.organizationId=e.id |
||||
this.organizationLevel=e.level |
||||
if(e.children){//如果点击的父组织有子节点
|
||||
this.organizationchildlength = e.children.length |
||||
}else{ |
||||
this.organizationchildlength = 0 |
||||
} |
||||
} |
||||
onSubmit(value){ |
||||
if(this.organizationLevel){//如果点击了右边的树
|
||||
this.http.put( |
||||
`/api/Organizations/${this.data.id}`,
|
||||
{ |
||||
id:this.data.id, |
||||
code:value.number, |
||||
division:value.division, |
||||
name: value.name, |
||||
level:this.organizationLevel + 1, |
||||
order: this.organizationchildlength, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.organizationId, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('修改成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
}else{ //如果只改了姓名
|
||||
this.http.put( |
||||
`/api/Organizations/${this.data.id}`,
|
||||
{ |
||||
id:this.data.id, |
||||
code: value.number, |
||||
division:value.division, |
||||
name: value.name, |
||||
level:this.data.level, |
||||
order: this.data.order, |
||||
location: null, |
||||
enabled: true, |
||||
parentId: this.data.parentId, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('修改成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('请填写正确格式','确定',config); |
||||
} |
||||
) |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
<mat-spinner color="warn"></mat-spinner> |
||||
<br> |
||||
<h1>确定进度条</h1> |
||||
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar> |
||||
<br> |
||||
<h1>不确定进度条</h1> |
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar> |
||||
<br> |
||||
<h1>缓冲进度条</h1> |
||||
<mat-progress-bar mode="buffer"></mat-progress-bar> |
||||
<br> |
||||
<h1>查询进度条</h1> |
||||
<mat-progress-bar mode="query"></mat-progress-bar> |
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
||||
import { ProgressComponent } from './progress.component'; |
||||
|
||||
describe('ProgressComponent', () => { |
||||
let component: ProgressComponent; |
||||
let fixture: ComponentFixture<ProgressComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ ProgressComponent ] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ProgressComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-progress', |
||||
templateUrl: './progress.component.html', |
||||
styleUrls: ['./progress.component.scss'] |
||||
}) |
||||
export class ProgressComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit() { |
||||
} |
||||
|
||||
} |
||||
@ -1,54 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
||||
|
||||
<span mat-dialog-title>创建新角色</span> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required minlength="1" |
||||
ngModel #name="ngModel" placeholder="请输入角色名"> |
||||
</mat-form-field> |
||||
<span mat-dialog-title>分配权限</span> |
||||
<div class="bigbox"> |
||||
|
||||
|
||||
<div class="leftbox"> |
||||
<span>关联数据权限</span> |
||||
<mat-checkbox (change)="leftTreeAll($event,form)">全选</mat-checkbox> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding > |
||||
<!-- 单个复选框 --> |
||||
<mat-checkbox name="first.{{node.id}}" ngModel #first.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]" checked="checked"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<!-- 全选对应小组 --> |
||||
<mat-checkbox (change)="selectedAll($event, node)" name="first.{{node.id}}" #first.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
<div class="rightbox"> |
||||
<span>关联导航菜单</span> |
||||
<mat-checkbox (change)="rightTreeAll($event,form)">全选</mat-checkbox> |
||||
<mat-tree [dataSource]="dataSource2" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding > |
||||
<!-- 单个复选框 --> |
||||
<mat-checkbox name="second.{{node.id}}" ngModel #second.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<!-- 全选对应小组 --> |
||||
<mat-checkbox (change)="selectedAll($event, node)" name="second.{{node.id}}" ngModel #second.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,57 +0,0 @@
|
||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container shareform" > |
||||
|
||||
<span mat-dialog-title>编辑角色</span> |
||||
<mat-form-field> |
||||
<input matInput id="name" name="name" type='text' |
||||
required minlength="1" |
||||
ngModel #name="ngModel" placeholder="请输入角色名" [(ngModel)]="placeholdername"> |
||||
</mat-form-field> |
||||
|
||||
|
||||
<span mat-dialog-title>分配权限</span> |
||||
|
||||
<div class="bigbox"> |
||||
<div class="leftbox"> |
||||
<span>关联数据权限</span> |
||||
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding > |
||||
<!-- 单个复选框 --> |
||||
<mat-checkbox name="first.{{node.id}}" ngModel #first.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
<!-- 如果有children --> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<!-- 全选对应小组 --> |
||||
<mat-checkbox (change)="selectedAll($event, node)" name="first.{{node.id}}" ngModel #first.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
|
||||
|
||||
<div class="rightbox"> |
||||
<span>关联导航菜单</span> |
||||
<mat-tree [dataSource]="dataSource2" [treeControl]="treeControl"> |
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding > |
||||
<!-- 单个复选框 --> |
||||
<mat-checkbox name="second.{{node.id}}" ngModel #second.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
<!-- 如果有children --> |
||||
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> |
||||
<!-- 全选对应小组 --> |
||||
<mat-checkbox (change)="selectedAll($event, node)" name="second.{{node.id}}" ngModel #second.{{node.id}}="ngModel" [(ngModel)]="checkedMap[node.id]"></mat-checkbox> |
||||
{{node.name}} |
||||
</mat-tree-node> |
||||
</mat-tree> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
<div class="btn"> |
||||
<button type="submit" class="savebtn" mat-raised-button color="primary" [disabled]='form.invalid'>确定</button> |
||||
<button type="button" mat-button (click)="onNoClick()" mat-raised-button>取消</button> |
||||
</div> |
||||
|
||||
</form> |
||||
@ -1,42 +0,0 @@
|
||||
<div style="height: 90%; overflow-y: auto;"> |
||||
<button mat-raised-button color="primary" (click)="createuser()" style=" margin: 10px">创建角色</button> |
||||
<table mat-table [dataSource]="dataSource"> |
||||
|
||||
<ng-container matColumnDef="name"> |
||||
<th mat-header-cell *matHeaderCellDef> 角色名称 </th> |
||||
<td mat-cell *matCellDef="let roledata"> {{roledata.name}} </td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="createtiome"> |
||||
<th mat-header-cell *matHeaderCellDef> 创建/修改时间 </th> |
||||
<td mat-cell *matCellDef="let roledata"> {{roledata.creationTime | time }} </td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="enabled"> |
||||
<th mat-header-cell *matHeaderCellDef> 是否启用 </th> |
||||
<td mat-cell *matCellDef="let roledata"> {{roledata.enabled | isno}} </td> |
||||
</ng-container> |
||||
|
||||
|
||||
<ng-container matColumnDef="edit"> |
||||
<th mat-header-cell *matHeaderCellDef> 操作 </th> |
||||
<td mat-cell *matCellDef="let roledata"> |
||||
<!-- <button mat-raised-button (click)="edituser(roledata)">编辑</button> --> |
||||
<button mat-icon-button class="up" (click)="up(roledata)" [disabled]="!roledata.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button> |
||||
<button mat-icon-button class="down" (click)="down(roledata)" [disabled]="!roledata.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button> |
||||
<button mat-raised-button (click)="allot(roledata)" color="primary">编辑</button> |
||||
<button mat-raised-button (click)="open(roledata)" *ngIf="!roledata.enabled">启用</button> |
||||
<button mat-raised-button (click)="open(roledata)" *ngIf="roledata.enabled" color="warn">禁用</button> |
||||
<button mat-raised-button (click)="deleteduser(roledata)" color="warn">删除</button> |
||||
</td> |
||||
</ng-container> |
||||
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
</table> |
||||
|
||||
<!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> --> |
||||
</div> |
||||
|
||||
@ -1,49 +0,0 @@
|
||||
table { |
||||
width: 100%; |
||||
th,td{ |
||||
text-align: center; |
||||
} |
||||
button{ |
||||
margin: 0 3px; |
||||
} |
||||
|
||||
} |
||||
form{ |
||||
// text-align: center; |
||||
|
||||
button{ |
||||
|
||||
margin: 0 8px; |
||||
margin-bottom: 30px; |
||||
} |
||||
.mat-checkbox{ |
||||
display: block; |
||||
text-align: left; |
||||
} |
||||
.btn{ |
||||
padding-top: 18px; |
||||
text-align: center; |
||||
} |
||||
mat-form-field{ |
||||
margin-right:80px; |
||||
} |
||||
span{ |
||||
display: block; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
.shareform{ |
||||
height: 300px; |
||||
} |
||||
.leftbox{ |
||||
width: 250px; |
||||
float: left; |
||||
} |
||||
.rightbox{ |
||||
width: 250px; |
||||
float: right; |
||||
} |
||||
.bigbox{ |
||||
height: 400px; |
||||
overflow: auto; |
||||
} |
||||
@ -1,644 +0,0 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
||||
import {FormControl} from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { CacheTokenService } from '../../http-interceptors/cache-token.service' |
||||
import format from 'date-fns/format'; |
||||
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; |
||||
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; |
||||
import {FlatTreeControl} from '@angular/cdk/tree'; |
||||
import { TreeService } from '../../http-interceptors/tree.service' |
||||
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||
|
||||
|
||||
|
||||
export interface roledata { |
||||
id: string, |
||||
name: string,//名称
|
||||
order: number, |
||||
enabled: boolean, |
||||
creationTime: string |
||||
} |
||||
@Component({ |
||||
selector: 'app-role', |
||||
templateUrl: './role.component.html', |
||||
styleUrls: ['./role.component.scss'] |
||||
}) |
||||
|
||||
export class RoleComponent implements OnInit { |
||||
constructor(private http: HttpClient,public dialog: MatDialog,public createtime:CacheTokenService,private tree:TreeService,public snackBar: MatSnackBar) { } |
||||
displayedColumns: string[] = ['name','createtiome', 'edit']; |
||||
dataSource: any |
||||
|
||||
public compare(property){ |
||||
return function(a,b){ |
||||
var value1 = a[property]; |
||||
var value2 = b[property]; |
||||
return value1 - value2; |
||||
} |
||||
} |
||||
//获取角色列表并且给排头和排尾赋是否为首尾
|
||||
getlist(){ |
||||
this.http.get('/api/Roles').subscribe( (data:Array<roledata>)=>{
|
||||
this.dataSource = data |
||||
this.dataSource[0].isTop = true; |
||||
this.dataSource[this.dataSource.length-1].isBottom = true |
||||
}) |
||||
} |
||||
//初始化视图
|
||||
ngOnInit() {
|
||||
this.getlist() |
||||
} |
||||
//向上按钮
|
||||
up(node){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.put(//把上一节点order换成点击的节点
|
||||
`/api/Roles/${this.dataSource[node.order -1].id}`,
|
||||
{ |
||||
id:this.dataSource[node.order -1].id,
|
||||
name: this.dataSource[node.order -1].name, |
||||
order: node.order, |
||||
enabled: true, |
||||
creationTime:time, |
||||
} |
||||
).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
|
||||
this.http.put(//把当前节点order换成上一点击的节点
|
||||
`/api/Roles/${node.id}`,
|
||||
{ |
||||
id:node.id, |
||||
name: node.name, |
||||
order: node.order-1, |
||||
enabled: true, |
||||
creationTime:time, |
||||
} |
||||
).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
|
||||
} |
||||
//向下按钮
|
||||
down(node){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.put(//把下一节点order换成点击的节点
|
||||
`/api/Roles/${this.dataSource[node.order + 1].id}`,
|
||||
{ |
||||
id:this.dataSource[node.order + 1].id,
|
||||
name: this.dataSource[node.order + 1].name, |
||||
order: node.order, |
||||
enabled: true, |
||||
creationTime:time, |
||||
} |
||||
).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
|
||||
this.http.put(//把当前节点order换成下一点击的节点
|
||||
`/api/Roles/${node.id}`,
|
||||
{ |
||||
id:node.id, |
||||
name: node.name, |
||||
order: node.order + 1, |
||||
enabled: true, |
||||
creationTime:time, |
||||
} |
||||
).subscribe(data=>{ |
||||
this.getlist() |
||||
}) |
||||
} |
||||
//创建按钮并且弹出对话框
|
||||
createuser(){ |
||||
const dialogRef = this.dialog.open(CreateRole, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '600px', |
||||
height:'658px', |
||||
data: {name: this.createuser.name,data: this.dataSource,length:this.dataSource.length} |
||||
}); |
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
} |
||||
); |
||||
} |
||||
|
||||
//删除按钮
|
||||
deleteduser(roledata){ |
||||
var isdeleted = confirm("确定要删除此用户吗？") |
||||
if(isdeleted){ |
||||
//请求删除接口
|
||||
this.http.delete(`/api/Roles/${roledata.id}`).subscribe( data=>{
|
||||
this.getlist() |
||||
}) |
||||
} |
||||
} |
||||
//编辑按钮
|
||||
allot(roledata){ |
||||
const dialogRef = this.dialog.open(EditRole, {//调用open方法打开对话框并且携带参数过去
|
||||
width: '600px', |
||||
height:'658px', |
||||
data: {id:roledata.id,name:roledata.name,order:roledata.order}//把点击的id传过去
|
||||
}); |
||||
|
||||
dialogRef.afterClosed().subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
} |
||||
); |
||||
} |
||||
|
||||
//启用或禁用按钮
|
||||
open(roledata){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.put( |
||||
`/api/Roles/${roledata['id']}`,
|
||||
{ |
||||
id:roledata['id'], |
||||
name: roledata.name, |
||||
order: roledata.order, |
||||
enabled: !roledata.enabled, |
||||
creationTime: time, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
this.getlist() |
||||
} |
||||
) |
||||
} |
||||
|
||||
drop(event: CdkDragDrop<string[]>) {//拖拽函数
|
||||
moveItemInArray(this.dataSource, event.previousIndex, event.currentIndex); |
||||
this.dataSource.forEach((item, index) => { |
||||
item.order = index; |
||||
}) |
||||
const a = [...this.dataSource]; |
||||
this.dataSource = []; |
||||
setTimeout(() => { |
||||
this.dataSource = a; |
||||
}, 10); |
||||
}; |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//创建角色组件
|
||||
@Component({ |
||||
selector: 'createrole', |
||||
templateUrl: './createrole.component.html', |
||||
styleUrls: ['./role.component.scss'] |
||||
}) |
||||
export class CreateRole { |
||||
private _transformer = (node: any, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id:node.id |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>( |
||||
node => node.level, node => node.expandable); |
||||
|
||||
treeFlattener = new MatTreeFlattener( |
||||
this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
|
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
dataSource2 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateRole>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,public snackBar: MatSnackBar) {} |
||||
olddata =[] |
||||
olddata2 = [] |
||||
xxx = {} |
||||
jjj = {} |
||||
//用于存放选中的数组
|
||||
checkedMap = {} |
||||
//初始化两棵tree
|
||||
ngOnInit(){ |
||||
this.http.get('/api/Permissions').subscribe((data: any[])=>{
|
||||
this.olddata =data |
||||
this.dataSource.data = this.tree.toTree(data); |
||||
this.treeControl.expandAll() |
||||
this.dataSource.data.forEach(item=>{ |
||||
if(item.children){ |
||||
var childarr = [] |
||||
item.children.forEach(n => { |
||||
childarr.push(n.id) |
||||
}) |
||||
this.xxx[item.id] = childarr |
||||
} |
||||
}) |
||||
|
||||
}) |
||||
|
||||
this.http.get('/api/NavMenus').subscribe((data: any[])=>{
|
||||
this.olddata2 =data |
||||
this.dataSource2.data = this.tree.toTree(data); |
||||
this.treeControl.expandAll() |
||||
this.dataSource2.data.forEach(item=>{ |
||||
if(item.children){ |
||||
var childarr = [] |
||||
item.children.forEach(n => { |
||||
childarr.push(n.id) |
||||
}) |
||||
this.jjj[item.id] = childarr |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
//选中后子节点默认选中
|
||||
selectedAll(event, node){ |
||||
this.olddata.forEach(item=>{ |
||||
if(item.parentId == node.id){ |
||||
this.checkedMap[item.id] = event.checked; |
||||
} |
||||
}) |
||||
|
||||
// console.log(this.olddata2,node )
|
||||
var menus =[] //导航菜单可能有三级 用于存储第二级
|
||||
//选中一级菜单
|
||||
this.olddata2.forEach(item=>{ |
||||
if(item.parentId == node.id){ |
||||
this.checkedMap[item.id] = event.checked; |
||||
menus.push(item) |
||||
} |
||||
}) |
||||
//将二级菜单也选中
|
||||
menus.forEach(item=>{ |
||||
if(item.children){ |
||||
item.children.forEach(n => { |
||||
this.checkedMap[n.id] = event.checked; |
||||
}); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
//数据权限tree的全选功能
|
||||
leftTreeAll(event,form){ |
||||
const values = form.value; |
||||
for (let key in values) { |
||||
if(key.indexOf("second")){ |
||||
this.checkedMap[key.split('.')[1]] = event.checked; |
||||
} |
||||
} |
||||
} |
||||
//菜单权限tree的全选功能
|
||||
rightTreeAll(event,form){ |
||||
const values = form.value; |
||||
for (let key in values) { |
||||
if(key.indexOf("first")){ |
||||
this.checkedMap[key.split('.')[1]] = event.checked; |
||||
} |
||||
} |
||||
} |
||||
|
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
//提交
|
||||
onSubmit(value){ |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
this.http.post( |
||||
'/api/Roles',
|
||||
{ |
||||
id:"", |
||||
name: value.name, |
||||
order: this.data.data[this.data.data.length - 1].order + 1, |
||||
enabled: true, |
||||
creationTime: time, |
||||
} |
||||
).subscribe( |
||||
data=>{ |
||||
var id = data['id'] |
||||
// console.log(value)
|
||||
var keydata = [] //菜单权限id集合
|
||||
var keydata2 = [] //数据权限id集合
|
||||
for(let i in value){ |
||||
if(value[i]){ |
||||
if(i.indexOf("first") && i!="name"){ |
||||
keydata.push(i.split('.')[1])
|
||||
} |
||||
if(i.indexOf("second") && i!="name"){ |
||||
keydata2.push(i.split('.')[1])
|
||||
} |
||||
} |
||||
} |
||||
|
||||
function includes(arr1, arr2) { |
||||
return arr2.every(val => arr1.includes(val)); |
||||
} |
||||
const orginalList = [...keydata2]; |
||||
orginalList.forEach((item) => { // forEach 里面 splice 有问题，详见 https://blog.csdn.net/qq_38128179/article/details/92798157
|
||||
if (item in this.xxx) { // 根据 key，可以直接在 对象 里面获取数据
|
||||
const datachildarrboxArr = this.xxx[item]; |
||||
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
|
||||
keydata2.splice(keydata2.findIndex(items => items == item), 1); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
this.http.post( |
||||
`/api/Roles/${id}/Permissions`, |
||||
keydata2 |
||||
).subscribe( |
||||
data=>{ |
||||
this.http.post( |
||||
`/api/Roles/${id}/NavMenus`, |
||||
keydata |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('创建成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('创建菜单权限失败','确定',config); |
||||
} |
||||
) |
||||
}, |
||||
err=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('创建数据权限失败','确定',config); |
||||
} |
||||
) |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('角色名称不符合规范','确定',config); |
||||
} |
||||
) |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//编辑组件
|
||||
@Component({ |
||||
selector: 'editrole', |
||||
templateUrl: './editrole.component.html', |
||||
styleUrls: ['./role.component.scss'] |
||||
}) |
||||
export class EditRole { |
||||
private _transformer = (node: any, level: number) => { |
||||
return { |
||||
expandable: !!node.children && node.children.length > 0, |
||||
name: node.name, |
||||
level: level, |
||||
id:node.id, |
||||
children:node.children |
||||
}; |
||||
} |
||||
treeControl = new FlatTreeControl<any>( |
||||
node => node.level, node => node.expandable); |
||||
|
||||
treeFlattener = new MatTreeFlattener( |
||||
this._transformer, node => node.level, node => node.expandable, node => node.children); |
||||
|
||||
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
dataSource2 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); |
||||
|
||||
myControl = new FormControl(); |
||||
//注入MatDialogRef，可以用来关闭对话框
|
||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditRole>,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService) {} |
||||
|
||||
olddata =[] //原始所有--数据权限
|
||||
olddata2 =[] //原始所有--菜单权限
|
||||
newdata = [] |
||||
newdata2 = [] |
||||
placeholdername = this.data.name |
||||
datachildarrbox = {} //数据权限存放有children的 父id：子id1 子id2 子id3
|
||||
menuchildarrbox = {} //菜单权限存放有children的 父id：子id1 子id2 子id3
|
||||
checkedMap = {} |
||||
ngOnInit(){ |
||||
//获得角色的数据权限，选中的checked为true
|
||||
this.http.get(`/api/Roles/${this.data.id}/Permissions`).subscribe((data: any[])=>{
|
||||
this.olddata =data |
||||
this.newdata = this.tree.toTree(this.olddata) |
||||
|
||||
//如果子节点存在选中则父节点默认选中
|
||||
this.newdata.forEach(item=>{ |
||||
if(item.children){ |
||||
item.children.forEach(element => { |
||||
if(element.checked){ |
||||
this.checkedMap[item.id] = true |
||||
} |
||||
}); |
||||
} |
||||
}) |
||||
|
||||
data.forEach(item=>{ |
||||
if(item.checked){ |
||||
this.checkedMap[item.id] = true; |
||||
} |
||||
|
||||
}) |
||||
this.dataSource.data = this.newdata; |
||||
this.treeControl.expandAll() |
||||
this.dataSource.data.forEach(item=>{ |
||||
if(item.children){ |
||||
var childarr = [] |
||||
item.children.forEach(n => { |
||||
childarr.push(n.id) |
||||
}) |
||||
this.datachildarrbox[item.id] = childarr |
||||
} |
||||
}) |
||||
}) |
||||
|
||||
|
||||
//获得角色的菜单权限，选中的checked为true
|
||||
this.http.get(`/api/Roles/${this.data.id}/NavMenus`).subscribe((data: any[])=>{
|
||||
this.olddata2 =data |
||||
this.newdata2 = this.tree.toTree(this.olddata2) |
||||
data.forEach(item => { |
||||
if(item.checked){ |
||||
this.checkedMap[item.id] = item.checked; |
||||
} |
||||
});
|
||||
|
||||
this.dataSource2.data = this.newdata2; |
||||
this.treeControl.expandAll() |
||||
|
||||
this.dataSource2.data.forEach(item=>{ |
||||
if(item.children){ |
||||
var childarr = [] |
||||
item.children.forEach(n => { |
||||
childarr.push(n.id) |
||||
}) |
||||
this.menuchildarrbox[item.id] = childarr |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
//选中对应小组
|
||||
selectedAll(event, node){ |
||||
this.olddata.forEach(item=>{ |
||||
if(item.parentId == node.id){ |
||||
this.checkedMap[item.id] = event.checked; |
||||
} |
||||
}) |
||||
// console.log(this.olddata2,node )
|
||||
var menus =[] //导航菜单可能有三级 用于存储第二级
|
||||
//选中一级菜单
|
||||
this.olddata2.forEach(item=>{ |
||||
if(item.parentId == node.id){ |
||||
this.checkedMap[item.id] = event.checked; |
||||
menus.push(item) |
||||
} |
||||
}) |
||||
//将二级菜单也选中
|
||||
menus.forEach(item=>{ |
||||
if(item.children){ |
||||
item.children.forEach(n => { |
||||
this.checkedMap[n.id] = event.checked; |
||||
}); |
||||
} |
||||
}) |
||||
} |
||||
|
||||
hasChild = (_: number, node: any) => node.expandable; |
||||
|
||||
onNoClick(): void { |
||||
this.dialogRef.close(); |
||||
} |
||||
|
||||
|
||||
onSubmit(value){ |
||||
var keydata = [] //存储选中的菜单权限
|
||||
var keydata2 = [] //存储选中的数据权限
|
||||
|
||||
for(let i in value){ |
||||
if(value[i]){ |
||||
if(i.indexOf("first") && i!="name" && i!="order"){ |
||||
keydata.push(i.split('.')[1])
|
||||
} |
||||
if(i.indexOf("second") && i!="name" && i!="order"){ |
||||
keydata2.push(i.split('.')[1])
|
||||
} |
||||
} |
||||
} |
||||
let newdate = new Date(); |
||||
let time = format(newdate, 'yyyy-MM-dd')
|
||||
if(this.data['id'] != "0" && this.data['id'] != "1"){ |
||||
this.http.put( |
||||
`/api/Roles/${this.data['id']}`,
|
||||
{ |
||||
id:this.data['id'], |
||||
name: value.name, |
||||
order: this.data.order, |
||||
enabled: true, |
||||
creationTime:time, |
||||
} |
||||
).subscribe(data=>{ |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('修改角色姓名请求失败','确定',config); |
||||
}) |
||||
function includes(arr1, arr2) { |
||||
return arr2.every(val => arr1.includes(val)); |
||||
} |
||||
const orginalList = [...keydata2]; |
||||
orginalList.forEach((item) => { // forEach 里面 splice 有问题，详见 https://blog.csdn.net/qq_38128179/article/details/92798157
|
||||
if (item in this.datachildarrbox) { // 根据 key，可以直接在 对象 里面获取数据
|
||||
const datachildarrboxArr = this.datachildarrbox[item]; |
||||
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
|
||||
keydata2.splice(keydata2.findIndex(items => items == item), 1); |
||||
} |
||||
} |
||||
}); |
||||
this.http.post( |
||||
`/api/Roles/${this.data.id}/Permissions`, |
||||
keydata2 |
||||
).subscribe(data=>{ |
||||
|
||||
}, |
||||
err=>{ |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('分配数据权限请求失败','确定',config); |
||||
}) |
||||
} |
||||
this.http.post( |
||||
`/api/Roles/${this.data.id}/NavMenus`, |
||||
keydata |
||||
).subscribe( |
||||
data=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('编辑成功','确定',config); |
||||
}, |
||||
err=>{ |
||||
this.dialogRef.close(); |
||||
const config = new MatSnackBarConfig(); |
||||
config.verticalPosition = 'top'; |
||||
config.duration = 3000 |
||||
this.snackBar.open('分配菜单权限失败','确定',config); |
||||
} |
||||
) |
||||
// this.http.put(
|
||||
// `/api/Roles/${this.data['id']}`,
|
||||
// {
|
||||
// id:this.data['id'],
|
||||
// name: value.name,
|
||||
// order: this.data.order,
|
||||
// enabled: true,
|
||||
// creationTime:time,
|
||||
// }
|
||||
// ).subscribe(
|
||||
// data=>{
|
||||
|
||||
|
||||
|
||||
// },
|
||||
// err=>{
|
||||
// const config = new MatSnackBarConfig();
|
||||
// config.verticalPosition = 'top';
|
||||
// config.duration = 3000
|
||||
// this.snackBar.open('名称格式不正确','确定',config);
|
||||
// }
|
||||
// )
|
||||
|
||||
|
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<mat-slide-toggle [(checked)]="xxx" (click)="sss()">{{xxx}}</mat-slide-toggle> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue