134 changed files with 61 additions and 8384 deletions
@ -1 +0,0 @@ |
|||||||
<app-navigation></app-navigation> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { HomeComponent } from './home.component'; |
|
||||||
|
|
||||||
describe('HomeComponent', () => { |
|
||||||
let component: HomeComponent; |
|
||||||
let fixture: ComponentFixture<HomeComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ HomeComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(HomeComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-home', |
|
||||||
templateUrl: './home.component.html', |
|
||||||
styleUrls: ['./home.component.scss'] |
|
||||||
}) |
|
||||||
|
|
||||||
export class HomeComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<div class="pages-lockscreen layout-full"> |
|
||||||
<div class="page h-100-p text-center vertical-align"> |
|
||||||
<div class="page-content auth-box vertical-align-middle"> |
|
||||||
<!-- <div class="avatar s-50 mb-20"> |
|
||||||
<img src="../../../../../assets/images/avatars/tianhun.jpg"> |
|
||||||
</div> --> |
|
||||||
<p class="mt-0 mb-20">锁屏</p> |
|
||||||
<div class="mt-20 mb-20" fxLayout="row" fxLayoutAlign="space-between center"> |
|
||||||
<mat-form-field color-white color="accent" appearance="outline" class="w-100-p"> |
|
||||||
<mat-label>输入密码</mat-label> |
|
||||||
<input matInput type="password" [(ngModel)]="password"> |
|
||||||
<mat-icon matSuffix>lock</mat-icon> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
<p class="mt-0"> |
|
||||||
输入密码以进入 |
|
||||||
</p> |
|
||||||
<button mat-button color="warn" (click)="open()">进入</button> |
|
||||||
<!-- <p class="mt-0"> |
|
||||||
<a routerLink="/general/pages/login">输入您或登录作为一个不同的用户密码检索您的会话</a> |
|
||||||
</p> --> |
|
||||||
<div class="copyright"> |
|
||||||
<p>WEBSITE BY Anxin</p> |
|
||||||
<p>© 2020. All RIGHT RESERVED.</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,111 +0,0 @@ |
|||||||
.pages-lockscreen { |
|
||||||
.page-content { |
|
||||||
display: inline-block; |
|
||||||
width: 400px; |
|
||||||
max-width: 100%; |
|
||||||
padding: 30px; |
|
||||||
} |
|
||||||
.avatar { |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
margin: 0 auto; |
|
||||||
|
|
||||||
img { |
|
||||||
border-radius: 50%; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
.layout-full { |
|
||||||
position: absolute; |
|
||||||
z-index: 0; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
color: #fff; |
|
||||||
font-family: Roboto, sans-serif; |
|
||||||
background: url('../../../assets/images/caiji.jpg'); |
|
||||||
&::before { |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
z-index: -1; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
content: ""; |
|
||||||
background-position: center top; |
|
||||||
background-size: cover; |
|
||||||
} |
|
||||||
|
|
||||||
&::after { |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
z-index: -1; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
content: ""; |
|
||||||
background-color: rgba(33, 33, 33, .6); |
|
||||||
} |
|
||||||
|
|
||||||
.page { |
|
||||||
position: relative; |
|
||||||
height: 100%; |
|
||||||
padding: 0; |
|
||||||
margin: 0; |
|
||||||
background: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.auth-box { |
|
||||||
|
|
||||||
.copyright { |
|
||||||
margin-top: 60px; |
|
||||||
font-size: 12px; |
|
||||||
font-weight: 500; |
|
||||||
letter-spacing: 1px; |
|
||||||
|
|
||||||
p { |
|
||||||
margin: 0 0 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.social { |
|
||||||
mat-icon { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-align { |
|
||||||
&::before { |
|
||||||
display: inline-block; |
|
||||||
height: 100%; |
|
||||||
vertical-align: middle; |
|
||||||
content: ""; |
|
||||||
} |
|
||||||
|
|
||||||
.vertical-align-middle { |
|
||||||
display: inline-block; |
|
||||||
vertical-align: middle; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.pages-login { |
|
||||||
.page-content { |
|
||||||
display: inline-block; |
|
||||||
width: 400px; |
|
||||||
max-width: 100%; |
|
||||||
padding: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
.page-content{ |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
transform: translate(-50%,-50%); |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { LockscreenComponent } from './lockscreen.component'; |
|
||||||
|
|
||||||
describe('LockscreenComponent', () => { |
|
||||||
let component: LockscreenComponent; |
|
||||||
let fixture: ComponentFixture<LockscreenComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ LockscreenComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(LockscreenComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import { Router,ActivatedRoute } from '@angular/router' |
|
||||||
import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务
|
|
||||||
@Component({ |
|
||||||
selector: 'app-lockscreen', |
|
||||||
templateUrl: './lockscreen.component.html', |
|
||||||
styleUrls: ['./lockscreen.component.scss'] |
|
||||||
}) |
|
||||||
export class LockscreenComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private router:Router,private route:ActivatedRoute,private getMenus:CacheTokenService) { } |
|
||||||
password = '' |
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
open(){ |
|
||||||
if(this.password == "12345678"){ |
|
||||||
this.router.navigate(['/datacollection/basicinfo']) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
// import { Routes, RouterModule } from '@angular/router';
|
|
||||||
// import { NgModule } from '@angular/core';
|
|
||||||
// import { PagesComponent } from './pages.component';
|
|
||||||
// import { PersonaldataComponent } from './personaldata/personaldata.component';
|
|
||||||
|
|
||||||
|
|
||||||
// const routes: Routes = [
|
|
||||||
// { path: '', component: PagesComponent},
|
|
||||||
// { path: 'personaldata ', component: PersonaldataComponent},
|
|
||||||
|
|
||||||
// ];
|
|
||||||
|
|
||||||
// @NgModule({
|
|
||||||
// imports: [RouterModule.forChild(routes)],
|
|
||||||
// exports: [RouterModule]
|
|
||||||
// })
|
|
||||||
// export class PagesRoutingModule {}
|
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { PagesComponent } from './pages.component'; |
|
||||||
|
|
||||||
describe('PagesComponent', () => { |
|
||||||
let component: PagesComponent; |
|
||||||
let fixture: ComponentFixture<PagesComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ PagesComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(PagesComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-pages', |
|
||||||
templateUrl: './pages.component.html', |
|
||||||
styleUrls: ['./pages.component.scss'] |
|
||||||
}) |
|
||||||
export class PagesComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,280 +0,0 @@ |
|||||||
<div class="pages-profile"> |
|
||||||
<div fxLayout.gt-sm="row nowrap" fxLayout.lt-md="column nowrap" fxLayoutAlign.gt-sm="space-between start" |
|
||||||
fxLayoutGap="30px" id="xxx"> |
|
||||||
<mat-card fxFlex="30" class="profile-card"> |
|
||||||
<mat-card-content> |
|
||||||
<img mat-card-avatar src=""> |
|
||||||
<mat-card-title class="profile-user">安信科创</mat-card-title> |
|
||||||
<mat-card-subtitle class="profile-job">嘻嘻嘻嘻</mat-card-subtitle> |
|
||||||
<p class="profile-introduction"> |
|
||||||
不要做程序员，要做问题解决者 |
|
||||||
</p> |
|
||||||
<div class="profile-social"> |
|
||||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
|
||||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
|
||||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
|
||||||
<mat-icon size="1" class="secondary-text s-24"></mat-icon> |
|
||||||
</div> |
|
||||||
<button mat-flat-button color="accent">关注</button> |
|
||||||
</mat-card-content> |
|
||||||
<mat-card-actions class="profile-card-footer" fxLayout="row nowrap"> |
|
||||||
<div fxFlex="32"> |
|
||||||
<strong class="profile-stat-count">260</strong> |
|
||||||
<span>粉丝</span> |
|
||||||
</div> |
|
||||||
<div fxFlex="32"> |
|
||||||
<strong class="profile-stat-count">180</strong> |
|
||||||
<span>关注</span> |
|
||||||
</div> |
|
||||||
<div fxFlex="32"> |
|
||||||
<strong class="profile-stat-count">2000</strong> |
|
||||||
<span>博客</span> |
|
||||||
</div> |
|
||||||
</mat-card-actions> |
|
||||||
</mat-card> |
|
||||||
|
|
||||||
<mat-card fxFlex="70" class="profile-board"> |
|
||||||
<mat-tab-group> |
|
||||||
<mat-tab label="活动"> |
|
||||||
<mat-list> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
</mat-list> |
|
||||||
<div class="pt-40 pb-40"> |
|
||||||
<button mat-flat-button class="show-more-btn">更多</button> |
|
||||||
</div> |
|
||||||
</mat-tab> |
|
||||||
<mat-tab label="评论"> |
|
||||||
<mat-list> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
|
|
||||||
|
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
</mat-list> |
|
||||||
</mat-tab> |
|
||||||
<mat-tab label="消息"> |
|
||||||
<mat-list> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
<img src="" alt=""> |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
<mat-list-item> |
|
||||||
<div matLine fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
||||||
<img matListAvatar src=""> |
|
||||||
<div> |
|
||||||
<div>我是假数据 |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
<span class="secondary-text font-size-12">我是假数据</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div matLine class="profile-item-content"> |
|
||||||
我是假数据 |
|
||||||
</div> |
|
||||||
</mat-list-item> |
|
||||||
</mat-list> |
|
||||||
</mat-tab> |
|
||||||
</mat-tab-group> |
|
||||||
</mat-card> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,110 +0,0 @@ |
|||||||
|
|
||||||
#xxx{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
} |
|
||||||
.pages-profile { |
|
||||||
padding: 30px; |
|
||||||
|
|
||||||
.profile-card { |
|
||||||
padding: 9px; |
|
||||||
text-align: center; |
|
||||||
font-family: Roboto, sans-serif; |
|
||||||
width: 500px; |
|
||||||
height: 600px; |
|
||||||
mat-card-content { |
|
||||||
padding: 40px 15px; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.mat-card-avatar { |
|
||||||
width: 130px; |
|
||||||
height: 130px; |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-user { |
|
||||||
margin: 10px 0; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-job { |
|
||||||
margin-bottom: 20px; |
|
||||||
color: #9e9e9e; |
|
||||||
font-weight: 500; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-introduction { |
|
||||||
margin: 0 0 1rem; |
|
||||||
color: #757575; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-social { |
|
||||||
margin: 25px 0; |
|
||||||
|
|
||||||
mat-icon { |
|
||||||
margin: 0 10px; |
|
||||||
color: rgba(66, 66, 66, .4); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
mat-card-actions { |
|
||||||
padding: 10px; |
|
||||||
background: #f6f9fd; |
|
||||||
} |
|
||||||
|
|
||||||
.profile-card-footer { |
|
||||||
display: flex; |
|
||||||
justify-content: space-around; |
|
||||||
.profile-stat-count { |
|
||||||
display: block; |
|
||||||
margin-bottom: 3px; |
|
||||||
font-size: 20px; |
|
||||||
font-weight: bold; |
|
||||||
color: #616161; |
|
||||||
|
|
||||||
+span { |
|
||||||
color: #9e9e9e; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.profile-board { |
|
||||||
padding: 30px; |
|
||||||
width: 500px; |
|
||||||
mat-list { |
|
||||||
padding-bottom: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
mat-list-item { |
|
||||||
height: auto; |
|
||||||
padding: 25px 0; |
|
||||||
margin-left: -16px; |
|
||||||
border-bottom: 1px solid #dfe0df; |
|
||||||
|
|
||||||
.profile-item-content { |
|
||||||
padding: 20px 0 0 56px; |
|
||||||
line-height: 1.571429; |
|
||||||
color: #757575; |
|
||||||
white-space: normal; |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
|
|
||||||
img { |
|
||||||
width: 100%; |
|
||||||
max-width: 220px; |
|
||||||
max-height: 150px; |
|
||||||
padding: 0 20px 20px 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.show-more-btn { |
|
||||||
width: 100%; |
|
||||||
background-color: #eee; |
|
||||||
color: #3949ab; |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { PersonaldataComponent } from './personaldata.component'; |
|
||||||
|
|
||||||
describe('PersonaldataComponent', () => { |
|
||||||
let component: PersonaldataComponent; |
|
||||||
let fixture: ComponentFixture<PersonaldataComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ PersonaldataComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(PersonaldataComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-personaldata', |
|
||||||
templateUrl: './personaldata.component.html', |
|
||||||
styleUrls: ['./personaldata.component.scss'] |
|
||||||
}) |
|
||||||
export class PersonaldataComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
import { TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { HelpFileService } from './help-file.service'; |
|
||||||
|
|
||||||
describe('HelpFileService', () => { |
|
||||||
let service: HelpFileService; |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
TestBed.configureTestingModule({}); |
|
||||||
service = TestBed.inject(HelpFileService); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should be created', () => { |
|
||||||
expect(service).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -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,139 +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' |
|
||||||
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>,@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=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -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,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,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,300 +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-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) { } |
|
||||||
|
|
||||||
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 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 { |
|
||||||
alert('请选择消防要素') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//编辑消防分类窗口
|
|
||||||
@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 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{ |
|
||||||
alert('请选择消防要素') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -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,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)]="fireName" name='name' required> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<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,52 +0,0 @@ |
|||||||
<div class="Box"> |
|
||||||
<div class="left"> |
|
||||||
<div class="magin"> |
|
||||||
消防要素 |
|
||||||
</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 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 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,34 +0,0 @@ |
|||||||
|
|
||||||
.magin { |
|
||||||
margin: 18px 0 17px 10px; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
.Box { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
padding-left: 10px; |
|
||||||
.right { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.mat-tree-node { |
|
||||||
width: 400px; |
|
||||||
position: relative; |
|
||||||
.float { |
|
||||||
position: absolute; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
.maginTop { |
|
||||||
margin: 10px 0; |
|
||||||
} |
|
||||||
|
|
||||||
.example-radio-group { |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.example-radio-button { |
|
||||||
margin: 5px; |
|
||||||
} |
|
||||||
@ -1,226 +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; |
|
||||||
|
|
||||||
//打开创建窗口
|
|
||||||
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()} |
|
||||||
});
|
|
||||||
} |
|
||||||
|
|
||||||
//删除
|
|
||||||
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.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') |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//编辑窗口组件
|
|
||||||
@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}`,{ |
|
||||||
id:this.data.id, |
|
||||||
name:this.fireName, |
|
||||||
order:this.data.order, |
|
||||||
computed:this.data.computed, |
|
||||||
tag:this.data.tag, |
|
||||||
parentId:this.data.parentId |
|
||||||
}).subscribe(data=>{ |
|
||||||
this.dialogRef.close('success') |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -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 pattern="^[0-9]*$" |
|
||||||
name="propertyValue" placeholder="默认值"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div> |
|
||||||
<label>是否必填:</label> |
|
||||||
<mat-radio-group required ngModel name='required' style="margin-left: 5px;"> |
|
||||||
<mat-radio-button value="1">是</mat-radio-button> |
|
||||||
<mat-radio-button value="0">否</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="3" |
|
||||||
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,34 +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) {} |
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
onSubmit(value){ |
|
||||||
let newdate = new Date(); |
|
||||||
let time = format(newdate, 'yyyy-MM-dd')
|
|
||||||
this.http.post("/api/AssetLibraries",{ |
|
||||||
id: "", |
|
||||||
name: value.name, |
|
||||||
order: this.data.allMaterialBank[this.data.allMaterialBank.length - 1].order + 1, |
|
||||||
tag: value.tag, |
|
||||||
enabled: true, |
|
||||||
modifiedTime: time |
|
||||||
}).subscribe(data=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,91 +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 minlength="3" |
|
||||||
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="size"> |
|
||||||
<span class="pigepadding">固定大小：</span> |
|
||||||
<mat-radio-group required name="pige" ngModel #pige="ngModel"> |
|
||||||
<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)="changecolor()">颜色</mat-radio-button> |
|
||||||
<mat-radio-button value="1" (click)="changeimg()">图片</mat-radio-button> |
|
||||||
</mat-radio-group> |
|
||||||
</div> |
|
||||||
<div class="color" *ngIf="isshow"> |
|
||||||
<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> |
|
||||||
<div class="image" *ngIf="!isshow"> |
|
||||||
<span class="pigepadding">图片：(选择后请点击上传)</span> |
|
||||||
<div class="divImg"> |
|
||||||
<img [(src)]="imgsrc" alt="暂无图片" class="img"> |
|
||||||
</div> |
|
||||||
<input required id="selectedfile" type="file" ng2FileSelect [uploader]="uploader" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg"> |
|
||||||
<br> |
|
||||||
<div> |
|
||||||
<button type="button" class="btn-upload" (click)="upload()">上传</button> |
|
||||||
</div> |
|
||||||
</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>消防要素列表</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,176 +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'; |
|
||||||
import { TreeService } from '../../http-interceptors/tree.service' |
|
||||||
import { FileUploader } from 'ng2-file-upload' |
|
||||||
|
|
||||||
import { DomSanitizer } from '@angular/platform-browser' |
|
||||||
@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" |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 = "" |
|
||||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<AddOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,private sanitizer:DomSanitizer) {} |
|
||||||
|
|
||||||
|
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
ngOnInit() { |
|
||||||
this.http.get('/api/FireElements').subscribe(data=>{ |
|
||||||
this.dataSource.data = this.tree.toTree(data) |
|
||||||
}) |
|
||||||
} |
|
||||||
add(e){ |
|
||||||
this.displaynoneid = e.id |
|
||||||
this.displaynonename = e.name |
|
||||||
} |
|
||||||
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 |
|
||||||
} |
|
||||||
changecolor(){ |
|
||||||
this.isshow = true |
|
||||||
} |
|
||||||
changeimg(){ |
|
||||||
this.isshow = false |
|
||||||
} |
|
||||||
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;
|
|
||||||
alert("请选择分辨率为128*128的图片")
|
|
||||||
} |
|
||||||
}, 100); |
|
||||||
} |
|
||||||
upload(){ |
|
||||||
if(!this.uploader.queue[0]){ |
|
||||||
alert("请选择文件") |
|
||||||
}else{ |
|
||||||
this.uploader.queue[0].upload();//开始上传
|
|
||||||
this.uploader.queue[0].onSuccess = (response, status, headers) => {
|
|
||||||
// 上传文件成功
|
|
||||||
if (status == 201) { |
|
||||||
// 上传文件后获取服务器返回的数据
|
|
||||||
alert("上传成功") |
|
||||||
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) { |
|
||||||
alert("无权限上传")
|
|
||||||
} |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
padding = "0" |
|
||||||
onSubmit(value){ |
|
||||||
value.pige=Boolean(Number(value.pige)) |
|
||||||
if(value.padding == "0"){//填充方式为颜色
|
|
||||||
this.http.post(`/api/Assets`,{ |
|
||||||
id:"", |
|
||||||
name:value.name, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
angle: 0, |
|
||||||
interactiveMode: Number(value.tag),//交互方式
|
|
||||||
fixedSize: value.pige, |
|
||||||
fillMode: Number(value.padding),//填充方式
|
|
||||||
color: this.selectedcolor+'80', |
|
||||||
imageUrl:"", |
|
||||||
order: 0, |
|
||||||
enabled: true, |
|
||||||
propertyInfos: [ |
|
||||||
], |
|
||||||
fireElementId:this.displaynoneid |
|
||||||
}, |
|
||||||
{
|
|
||||||
params: { |
|
||||||
libraryId:this.data.node.id, |
|
||||||
} |
|
||||||
}).subscribe((data)=>{ |
|
||||||
this.dialogRef.close("ooo"); |
|
||||||
alert("新建成功") |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
this.http.post(`/api/Assets`,{ |
|
||||||
id:"", |
|
||||||
name:value.name, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
angle: 0, |
|
||||||
interactiveMode: Number(value.tag),//交互方式
|
|
||||||
fixedSize: value.pige, |
|
||||||
fillMode: Number(value.padding),//填充方式
|
|
||||||
color: "", |
|
||||||
imageUrl:'/api/Objects/PlanPlatform/' + this.imgUrl, |
|
||||||
order: 0, |
|
||||||
enabled: true, |
|
||||||
propertyInfos: [ |
|
||||||
], |
|
||||||
fireElementId:this.displaynoneid |
|
||||||
}, {
|
|
||||||
params: { |
|
||||||
libraryId:this.data.node.id, |
|
||||||
} |
|
||||||
}).subscribe((data)=>{ |
|
||||||
this.dialogRef.close("ooo"); |
|
||||||
alert("新建成功") |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,89 +0,0 @@ |
|||||||
<div class="bottomBox"> |
|
||||||
<div class="attribute"> |
|
||||||
<div class="attributeLeft">{{data.name}}</div> |
|
||||||
<div> |
|
||||||
<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_to_photos</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> |
|
||||||
</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,72 +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" pattern="^[0-9]*$" |
|
||||||
name="propertyValue" placeholder="默认值"> |
|
||||||
</mat-form-field> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div> |
|
||||||
<label>是否必填:</label> |
|
||||||
<mat-radio-group required [(ngModel)]="required" name='required' |
|
||||||
style="margin-left: 5px;"> |
|
||||||
<mat-radio-button value="1">是</mat-radio-button> |
|
||||||
<mat-radio-button value="0">否</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 minlength="3" |
|
||||||
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,34 +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) {} |
|
||||||
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,92 +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 minlength="3" |
|
||||||
ngModel #name="ngModel" placeholder="请输入素材名称" [(ngModel)]="defaultname"> |
|
||||||
</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="size"> |
|
||||||
<span class="pigepadding">固定大小：</span> |
|
||||||
<mat-radio-group required name="pige" ngModel #pige="ngModel"> |
|
||||||
<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)="changecolor()">颜色</mat-radio-button> |
|
||||||
<mat-radio-button value="1" (click)="changeimg()">图片</mat-radio-button> |
|
||||||
</mat-radio-group> |
|
||||||
</div> |
|
||||||
<div class="color" *ngIf="isshow"> |
|
||||||
<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> |
|
||||||
<div class="image" *ngIf="!isshow"> |
|
||||||
<span class="pigepadding">图片：(选择后请点击上传)</span> |
|
||||||
<div class="divImg"> |
|
||||||
<img [(src)]="imgsrc" alt="暂无图片" class="img"> |
|
||||||
</div> |
|
||||||
<!-- sssssssssssssssssssssssssssssssssssss上传aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa --> |
|
||||||
<input required id="selectedfile" type="file" ng2FileSelect [uploader]="uploader" (change)="filechange($event)" name="imgFile" accept=".jpg,.png,.jpeg"> |
|
||||||
<br> |
|
||||||
<div> |
|
||||||
<button type="button" class="btn-upload" (click)="upload()">上传</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<mat-form-field class="relevancefire"> |
|
||||||
<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>消防要素列表</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,172 +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'; |
|
||||||
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" |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 = "" |
|
||||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditOriginalCopy>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,private sanitizer:DomSanitizer) {} |
|
||||||
|
|
||||||
|
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
ngOnInit() { |
|
||||||
this.http.get('/api/FireElements').subscribe(data=>{ |
|
||||||
this.dataSource.data = this.tree.toTree(data) |
|
||||||
}) |
|
||||||
} |
|
||||||
add(e){ |
|
||||||
this.displaynoneid = e.id |
|
||||||
this.displaynonename = e.name |
|
||||||
} |
|
||||||
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 = ""//返回来的图片地址后缀
|
|
||||||
defaultname = this.data.Original.name//点击的原件的name
|
|
||||||
OriginalId = this.data.Original.id//点击的原件的id
|
|
||||||
OriginalfireElementId = this.data.Original.fireElementId//点击的原件的消防id
|
|
||||||
selectcolor(item,key){ |
|
||||||
if(this.colorIndex != key){ |
|
||||||
this.colorIndex = key |
|
||||||
} |
|
||||||
this.selectedcolor = item |
|
||||||
} |
|
||||||
changecolor(){ |
|
||||||
this.isshow = true |
|
||||||
} |
|
||||||
changeimg(){ |
|
||||||
this.isshow = false |
|
||||||
} |
|
||||||
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;
|
|
||||||
alert("请选择分辨率为128*128的图片")
|
|
||||||
} |
|
||||||
}, 100); |
|
||||||
} |
|
||||||
//上传图片
|
|
||||||
upload(){ |
|
||||||
if(!this.uploader.queue[0]){ |
|
||||||
alert("请选择文件") |
|
||||||
}else{ |
|
||||||
this.uploader.queue[0].upload();//开始上传
|
|
||||||
this.uploader.queue[0].onSuccess = (response, status, headers) => {
|
|
||||||
// 上传文件成功
|
|
||||||
if (status == 201) { |
|
||||||
// 上传文件后获取服务器返回的数据
|
|
||||||
alert("上传成功") |
|
||||||
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) { |
|
||||||
alert("无权限上传")
|
|
||||||
} |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
padding = "0" |
|
||||||
|
|
||||||
onSubmit(value){ |
|
||||||
value.pige=Boolean(Number(value.pige)) |
|
||||||
if(value.padding == "0"){//填充方式为颜色
|
|
||||||
this.http.put(`/api/Assets/${this.OriginalId}`,{ |
|
||||||
id:this.OriginalId, |
|
||||||
name:value.name, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
angle: 0, |
|
||||||
interactiveMode: Number(value.tag),//交互方式
|
|
||||||
fixedSize: value.pige, |
|
||||||
fillMode: Number(value.padding),//填充方式
|
|
||||||
color: this.selectedcolor+'80', |
|
||||||
imageUrl:"", |
|
||||||
order: 0, |
|
||||||
enabled: true, |
|
||||||
propertyInfos: [ |
|
||||||
], |
|
||||||
fireElementId:this.displaynoneid |
|
||||||
}).subscribe((data)=>{ |
|
||||||
this.dialogRef.close("ooo"); |
|
||||||
alert("修改成功") |
|
||||||
}) |
|
||||||
}else{//填充方式为图片
|
|
||||||
this.http.put(`/api/Assets/${this.OriginalId}`,{ |
|
||||||
id:this.OriginalId, |
|
||||||
name:value.name, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
angle: 0, |
|
||||||
interactiveMode: Number(value.tag),//交互方式
|
|
||||||
fixedSize: value.pige, |
|
||||||
fillMode: Number(value.padding),//填充方式
|
|
||||||
color: "", |
|
||||||
imageUrl:'/api/Objects/PlanPlatform/' + this.imgUrl, |
|
||||||
order: 0, |
|
||||||
enabled: true, |
|
||||||
propertyInfos: [ |
|
||||||
], |
|
||||||
fireElementId:this.displaynoneid |
|
||||||
}).subscribe((data)=>{ |
|
||||||
this.dialogRef.close("ooo"); |
|
||||||
alert("修改成功") |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,66 +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 class="btnBox"> |
|
||||||
<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>{{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}}"> |
|
||||||
<span>{{item.name}}</span> |
|
||||||
<mat-icon *ngIf="!item.enabled" class="blockBtn">block</mat-icon> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
@ -1,255 +0,0 @@ |
|||||||
.content { |
|
||||||
margin: 0 0 0 10px; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
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: #ffe69b; |
|
||||||
} |
|
||||||
.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-top: 10px; |
|
||||||
margin-right: 25px; |
|
||||||
} |
|
||||||
.attributeLeft{ |
|
||||||
flex: 75%; |
|
||||||
} |
|
||||||
} |
|
||||||
.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: 450px; |
|
||||||
height: 32px; |
|
||||||
border-top: 1px solid black; |
|
||||||
text-align: center; |
|
||||||
padding-top: 6px; |
|
||||||
button{ |
|
||||||
margin: 0 6px; |
|
||||||
} |
|
||||||
} |
|
||||||
.mat-radio-button { |
|
||||||
font-size: 13px; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
.topbox{ |
|
||||||
height: 32px; |
|
||||||
border-bottom: 1px solid black; |
|
||||||
|
|
||||||
} |
|
||||||
.mainbox{ |
|
||||||
width: 450px; |
|
||||||
height: 380px; |
|
||||||
.mainleft{ |
|
||||||
height: 370px; |
|
||||||
width: 220px; |
|
||||||
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: 17px; |
|
||||||
height: 17px; |
|
||||||
list-style: none; |
|
||||||
// margin: 2px; |
|
||||||
float: left; |
|
||||||
border: 2px solid white; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.mainright{ |
|
||||||
width: 220px; |
|
||||||
height: 380px; |
|
||||||
float: right; |
|
||||||
overflow: auto; |
|
||||||
label{ |
|
||||||
font-weight: 900; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.coloractive{ |
|
||||||
border: 2px solid black !important; |
|
||||||
|
|
||||||
} |
|
||||||
.pigepadding{ |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.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,145,219,0.5); |
|
||||||
} |
|
||||||
.selecteditem{ |
|
||||||
// background: grey; |
|
||||||
cursor:not-allowed |
|
||||||
} |
|
||||||
.matname{ |
|
||||||
margin-left: 6px; |
|
||||||
|
|
||||||
} |
|
||||||
.divImg{ |
|
||||||
width:100px; |
|
||||||
height: 50px; |
|
||||||
font-size: 15px; |
|
||||||
img{ |
|
||||||
width: 50px; |
|
||||||
} |
|
||||||
} |
|
||||||
.relevancefire{ |
|
||||||
margin-top: 5px; |
|
||||||
} |
|
||||||
.fireli{ |
|
||||||
list-style: none; |
|
||||||
|
|
||||||
} |
|
||||||
.fireli:hover{ |
|
||||||
background: rgba(225, 225, 225, 0.8); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.firebtn{ |
|
||||||
line-height: 24px; |
|
||||||
} |
|
||||||
@ -1,528 +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 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) { } |
|
||||||
|
|
||||||
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 |
|
||||||
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 { |
|
||||||
alert('请选择原件') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//新增素材库
|
|
||||||
addmatlibrary(){ |
|
||||||
const dialogRef = this.dialog.open(AddMatLibrary, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
width: '260px', |
|
||||||
data: {allMaterialBank:this.allMaterialBank} |
|
||||||
}); |
|
||||||
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.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=>{ |
|
||||||
alert("禁用成功") |
|
||||||
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=>{ |
|
||||||
alert("启用成功") |
|
||||||
this.getMaterialBank () |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//新增素材原件
|
|
||||||
addoriginalcopy(node){ |
|
||||||
const dialogRef = this.dialog.open(AddOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
height:"500px", |
|
||||||
data: {allMaterialBank:this.allMaterialBank,node:node} |
|
||||||
}); |
|
||||||
dialogRef.afterClosed().subscribe( |
|
||||||
data=>{ |
|
||||||
if(data){ |
|
||||||
this.getSourceMaterial () |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
//修改素材原件
|
|
||||||
editoriginalcopy(node){ |
|
||||||
if(this.Original){ |
|
||||||
const dialogRef = this.dialog.open(EditOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
height:"500px", |
|
||||||
data: {allMaterialBank:this.allMaterialBank,node:node,Original:this.Original} |
|
||||||
}); |
|
||||||
dialogRef.afterClosed().subscribe( |
|
||||||
data=>{ |
|
||||||
if(data){ |
|
||||||
this.getSourceMaterial () |
|
||||||
} |
|
||||||
} |
|
||||||
); |
|
||||||
}else{ |
|
||||||
alert("请选择原件") |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//禁启用原件
|
|
||||||
disableoriginal(material){ |
|
||||||
if(this.Original){ |
|
||||||
this.http.put(`/api/Assets/${this.Original.id}`,{ |
|
||||||
id:this.Original.id, |
|
||||||
name:this.Original.name, |
|
||||||
width: 0, |
|
||||||
height: 0, |
|
||||||
angle: 0, |
|
||||||
interactiveMode:this.Original.interactiveMode,//交互方式
|
|
||||||
fixedSize: this.Original.fixedSize, |
|
||||||
fillMode: this.Original.fillMode,//填充方式
|
|
||||||
color: this.Original.color, |
|
||||||
imageUrl:this.Original.imageUrl, |
|
||||||
order: 0, |
|
||||||
enabled: !this.Original.enabled, |
|
||||||
propertyInfos: [ |
|
||||||
], |
|
||||||
fireElementId:this.Original.fireElementId |
|
||||||
}).subscribe((data)=>{ |
|
||||||
this.getSourceMaterial () |
|
||||||
}) |
|
||||||
}else{ |
|
||||||
alert("请选择原件") |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//删除原件
|
|
||||||
deleteoriginal(material){ |
|
||||||
if(this.Original){ |
|
||||||
var isdeleted = confirm(`确定要删除当前原件吗？`) |
|
||||||
if(isdeleted){ |
|
||||||
//请求删除接口
|
|
||||||
this.http.delete(`/api/Assets/${this.Original.id}`).subscribe( data=>{
|
|
||||||
this.getSourceMaterial () |
|
||||||
}) |
|
||||||
} |
|
||||||
}else{ |
|
||||||
alert("请选择原件") |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//选择原件素材 material为当前素材库的信息
|
|
||||||
selectoriginal(material){ |
|
||||||
const dialogRef = this.dialog.open(SelectOriginalCopy, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
height:"500px", |
|
||||||
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,) { } |
|
||||||
|
|
||||||
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, |
|
||||||
fixedSize:this.data.fixedSize, |
|
||||||
fillMode:this.data.fillMode, |
|
||||||
color:this.data.color, |
|
||||||
imageUrl:this.data.imageUrl, |
|
||||||
order:this.data.order, |
|
||||||
enabled:this.data.enabled, |
|
||||||
propertyInfos:this.data.propertyInfos, |
|
||||||
fireElementId:this.data.fireElementId |
|
||||||
}).subscribe(data=>{ |
|
||||||
this.dialogRef.close('success') |
|
||||||
alert('保存成功') |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//新增属性弹窗
|
|
||||||
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: '图片数量'},] |
|
||||||
|
|
||||||
//提交表单
|
|
||||||
onSubmit (e) { |
|
||||||
e.order = 0 |
|
||||||
e.enabled = true |
|
||||||
e.visible = true |
|
||||||
e.required=Boolean(Number(e.required)) |
|
||||||
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 = 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:boolean; |
|
||||||
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: '图片数量'},] |
|
||||||
|
|
||||||
//提交表单
|
|
||||||
onSubmit (e) { |
|
||||||
e.order = 0 |
|
||||||
e.enabled = this.data.enabled |
|
||||||
e.visible = this.data.visible |
|
||||||
e.index = this.data.index |
|
||||||
e.required=Boolean(Number(e.required)) |
|
||||||
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}}"> |
|
||||||
<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,104 +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//当前选择原件素材库对应所有原件
|
|
||||||
ngOnInit(): void { |
|
||||||
this.getatpresentSourceMaterial ()//初始化时先获取一下当前素材库对应所有原件，然后在获取指定素材库原件时进行筛选对比
|
|
||||||
let data = { |
|
||||||
libraryId:"5de77a32c40f13242011f054" |
|
||||||
} |
|
||||||
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(); |
|
||||||
} |
|
||||||
|
|
||||||
xxx="5de77a32c40f13242011f054" |
|
||||||
//获得指定素材库所有原件
|
|
||||||
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 () |
|
||||||
} |
|
||||||
aaa = "5de77a32c40f13242011f054" |
|
||||||
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,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 #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,25 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -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,199 +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' |
|
||||||
@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 |
|
||||||
}; |
|
||||||
} |
|
||||||
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/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); |
|
||||||
}); |
|
||||||
|
|
||||||
}) |
|
||||||
} |
|
||||||
//初始化页面时渲染出tree
|
|
||||||
ngOnInit() { |
|
||||||
this.http.get('/api/NavMenus').subscribe((data: any[])=>{
|
|
||||||
this.dataSource.data = this.tree.toTree(data) |
|
||||||
}) |
|
||||||
} |
|
||||||
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} |
|
||||||
}); |
|
||||||
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>,@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=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
}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=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//编辑组件
|
|
||||||
@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>,@Inject(MAT_DIALOG_DATA) public data) {} |
|
||||||
|
|
||||||
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=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,30 +0,0 @@ |
|||||||
<form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container"> |
|
||||||
|
|
||||||
<mat-form-field> |
|
||||||
<input matInput id="name" name="name" type='text' |
|
||||||
required minlength="3" |
|
||||||
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 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,46 +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 minlength="1" |
|
||||||
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> |
|
||||||
<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,35 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -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,465 +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 { 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 |
|
||||||
}; |
|
||||||
} |
|
||||||
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 ) { |
|
||||||
} |
|
||||||
|
|
||||||
//重新获取列表并且展开到上次位置的方法
|
|
||||||
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); |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
//初始化视图
|
|
||||||
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(value){ |
|
||||||
const dialogRef = this.dialog.open(EditOrganization, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
data: {id:value.id,parentId:value.parentId,order:value.order,level:value.level} |
|
||||||
}); |
|
||||||
dialogRef.afterClosed().subscribe( |
|
||||||
data=>{ |
|
||||||
this.getlist() |
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
//删除组织按钮
|
|
||||||
delete(value){ |
|
||||||
var isdeleted = confirm("确定要删除此组织？") |
|
||||||
if(isdeleted){ |
|
||||||
//请求删除接口
|
|
||||||
this.http.delete(`/api/Organizations/${value.id}`).subscribe( data=>{
|
|
||||||
this.getlist() |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
//禁用按钮
|
|
||||||
disable(value){ |
|
||||||
if(!value.enabled){ |
|
||||||
this.http.put( |
|
||||||
`/api/Organizations/${value.id}`,
|
|
||||||
{ |
|
||||||
id:value.id, |
|
||||||
code:"", |
|
||||||
name: value.name, |
|
||||||
level:value.level, |
|
||||||
order: value.order, |
|
||||||
location: null, |
|
||||||
enabled: true, |
|
||||||
parentId: value.parentId |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.snackBar.open('启用成功', '', { |
|
||||||
duration: 3000 |
|
||||||
}); |
|
||||||
this.getlist() |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("操作无效") |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
}else{ |
|
||||||
// var isdeleted = confirm("确定要禁用此组织？")
|
|
||||||
// if(isdeleted){
|
|
||||||
this.http.put( |
|
||||||
`/api/Organizations/${value.id}`,
|
|
||||||
{ |
|
||||||
id:value.id, |
|
||||||
code:"", |
|
||||||
name: value.name, |
|
||||||
level:value.level, |
|
||||||
order: value.order, |
|
||||||
location: null, |
|
||||||
enabled: false, |
|
||||||
parentId: value.parentId |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.snackBar.open('禁用成功', '', { |
|
||||||
duration: 3000 |
|
||||||
}); |
|
||||||
this.getlist() |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("操作无效") |
|
||||||
} |
|
||||||
) |
|
||||||
// }
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//向上箭头
|
|
||||||
updata = [] |
|
||||||
up(node){ |
|
||||||
var olddata = this.data; |
|
||||||
this.updata = [] |
|
||||||
olddata.forEach(item => { |
|
||||||
if(item.id == node.parentId){ |
|
||||||
this.updata = item.children |
|
||||||
} |
|
||||||
}); |
|
||||||
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:"", |
|
||||||
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()
|
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
this.http.put(//更改上一节点为点击节点的order
|
|
||||||
`/api/Organizations/${this.updata[index - 1].id}`,
|
|
||||||
{ |
|
||||||
id:this.updata[index - 1].id, |
|
||||||
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=>{ |
|
||||||
alert("错误") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
//向下箭头
|
|
||||||
downdata = [] |
|
||||||
down(node){ |
|
||||||
var olddata = this.data; |
|
||||||
this.downdata = [] |
|
||||||
olddata.forEach(item => { |
|
||||||
if(item.id == node.parentId){ |
|
||||||
this.downdata = item.children |
|
||||||
} |
|
||||||
}); |
|
||||||
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:"", |
|
||||||
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()
|
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
this.http.put(//更改上一节点为点击节点的order
|
|
||||||
`/api/Organizations/${this.downdata[index + 1].id}`,
|
|
||||||
{ |
|
||||||
id:this.downdata[index + 1].id, |
|
||||||
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=>{ |
|
||||||
alert("错误") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//创建组织
|
|
||||||
@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) {} |
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
onSubmit(value){ |
|
||||||
if(this.data.childlength){//如果点击节点存在children
|
|
||||||
this.http.post( |
|
||||||
'/api/Organizations',
|
|
||||||
{ |
|
||||||
id:"", |
|
||||||
code:value.number, |
|
||||||
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);
|
|
||||||
alert("创建组织成功") |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
}else{ |
|
||||||
this.http.post( |
|
||||||
'/api/Organizations',
|
|
||||||
{ |
|
||||||
id:"", |
|
||||||
code:"", |
|
||||||
name: value.name, |
|
||||||
level:this.data.level + 1, |
|
||||||
order:0, |
|
||||||
location: null, |
|
||||||
enabled: true, |
|
||||||
parentId: this.data.id, |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close(data);
|
|
||||||
alert("创建组织成功") |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
//编辑组件
|
|
||||||
@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 |
|
||||||
}; |
|
||||||
} |
|
||||||
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:any =''//上级组织的名字
|
|
||||||
organizationId:any =''//上级组织的id
|
|
||||||
organizationLevel:number =null//上级组织的层级
|
|
||||||
organizationchildlength:number = null |
|
||||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditOrganization>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService) {} |
|
||||||
//获取所有组织机构
|
|
||||||
getMechanism () { |
|
||||||
this.http.get('/api/Organizations').subscribe( |
|
||||||
(data:any)=>{ |
|
||||||
this.dataSource.data = this.tree.toTree(data); |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
this.getMechanism() |
|
||||||
} |
|
||||||
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, |
|
||||||
name: value.name, |
|
||||||
level:this.organizationLevel + 1, |
|
||||||
order: this.organizationchildlength, |
|
||||||
location: null, |
|
||||||
enabled: true, |
|
||||||
parentId: this.organizationId, |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close();
|
|
||||||
alert("修改成功") |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
}else{ //如果只改了姓名
|
|
||||||
this.http.put( |
|
||||||
`/api/Organizations/${this.data.id}`,
|
|
||||||
{ |
|
||||||
id:this.data.id, |
|
||||||
code:"", |
|
||||||
name: value.name, |
|
||||||
level:this.data.level, |
|
||||||
order: this.data.order, |
|
||||||
location: null, |
|
||||||
enabled: true, |
|
||||||
parentId: this.data.parentId, |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close();
|
|
||||||
alert("修改成功") |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,29 +0,0 @@ |
|||||||
import { MatPaginatorIntl } from '@angular/material/paginator'; |
|
||||||
|
|
||||||
|
|
||||||
const dutchRangeLabel = (page: number, pageSize: number, length: number) => { |
|
||||||
if (length === 0 || pageSize === 0) { return `0 到 ${length}`; } |
|
||||||
length = Math.max(length, 0); |
|
||||||
const startIndex = page * pageSize; |
|
||||||
const endIndex = startIndex < length ? |
|
||||||
Math.min(startIndex + pageSize, length) : |
|
||||||
startIndex + pageSize; |
|
||||||
return `${startIndex + 1} - ${endIndex} / ${length}条`; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
export function myPaginator() { |
|
||||||
|
|
||||||
const paginatorIntl = new MatPaginatorIntl(); |
|
||||||
|
|
||||||
paginatorIntl.itemsPerPageLabel = '每页条数:'; |
|
||||||
|
|
||||||
paginatorIntl.nextPageLabel = '下一页:'; |
|
||||||
|
|
||||||
paginatorIntl.previousPageLabel = '上一页:'; |
|
||||||
|
|
||||||
paginatorIntl.getRangeLabel = dutchRangeLabel; |
|
||||||
|
|
||||||
return paginatorIntl; |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
<mat-paginator |
|
||||||
[length]="100" |
|
||||||
[pageSize]="10" |
|
||||||
[pageSizeOptions]="[5, 10, 25, 100]"> |
|
||||||
</mat-paginator> |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
mat-paginator{ |
|
||||||
margin-top: 50px; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { PaginatorComponent } from './paginator.component'; |
|
||||||
|
|
||||||
describe('PaginatorComponent', () => { |
|
||||||
let component: PaginatorComponent; |
|
||||||
let fixture: ComponentFixture<PaginatorComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ PaginatorComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(PaginatorComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'app-paginator', |
|
||||||
templateUrl: './paginator.component.html', |
|
||||||
styleUrls: ['./paginator.component.scss'] |
|
||||||
}) |
|
||||||
export class PaginatorComponent implements OnInit { |
|
||||||
|
|
||||||
constructor() { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import { NgModule } from '@angular/core'; |
|
||||||
import { CommonModule } from '@angular/common'; |
|
||||||
import { PaginatorComponent } from './paginator.component'; |
|
||||||
import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator'; |
|
||||||
import { myPaginator } from './my-paginator' |
|
||||||
import { UiModule } from '../ui.module'; |
|
||||||
|
|
||||||
|
|
||||||
@NgModule({ |
|
||||||
declarations: [PaginatorComponent], |
|
||||||
imports: [ |
|
||||||
CommonModule, |
|
||||||
MatPaginatorModule |
|
||||||
], |
|
||||||
providers: [ { provide: MatPaginatorIntl, useValue: myPaginator() } ] |
|
||||||
}) |
|
||||||
export class PaginatorModule { } |
|
||||||
@ -1,2 +1 @@ |
|||||||
<!-- <app-unity></app-unity> --> |
|
||||||
<iframe src="unityApp/index.html" name="unityApp" frameborder="0" width="100%" height="100%"></iframe> |
<iframe src="unityApp/index.html" name="unityApp" frameborder="0" width="100%" height="100%"></iframe> |
||||||
|
|||||||
@ -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,21 +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> |
|
||||||
<input matInput id="order" name="order" type='number' |
|
||||||
required minlength="1" |
|
||||||
ngModel #order="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 color="primary">取消</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
</form> |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
<div class="mat-elevation-z8"> |
|
||||||
<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,693 +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' |
|
||||||
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) { } |
|
||||||
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() |
|
||||||
} |
|
||||||
); |
|
||||||
} |
|
||||||
//编辑
|
|
||||||
// edituser(roledata){
|
|
||||||
// const dialogRef = this.dialog.open(EditRole, {//调用open方法打开对话框并且携带参数过去
|
|
||||||
// width: '260px',
|
|
||||||
// data: {id:roledata.id}
|
|
||||||
// });
|
|
||||||
// dialogRef.afterClosed().subscribe(
|
|
||||||
// data=>{
|
|
||||||
// this.dataSource.push(data)
|
|
||||||
// this.http.get('/api/Roles').subscribe( (data:Array<roledata>)=>{
|
|
||||||
// var orderdate = data.sort(this.compare('order'));
|
|
||||||
// this.dataSource = orderdate
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
//删除按钮
|
|
||||||
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(SharePower, {//调用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) {} |
|
||||||
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; |
|
||||||
} |
|
||||||
}) |
|
||||||
this.olddata2.forEach(item=>{ |
|
||||||
if(item.parentId == node.id){ |
|
||||||
this.checkedMap[item.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'] |
|
||||||
var keydata = [] |
|
||||||
var keydata2 = [] |
|
||||||
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])
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
//如果父节点选中过滤子节点不提交
|
|
||||||
keydata2.forEach(item=>{ |
|
||||||
for(let i in this.xxx){ |
|
||||||
if(item == i){ |
|
||||||
this.xxx[i].forEach(i => { |
|
||||||
keydata2.forEach(o=>{ |
|
||||||
if(o == i){ |
|
||||||
var index = keydata2.indexOf(i) |
|
||||||
keydata2.splice(index,1) |
|
||||||
} |
|
||||||
}) |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
keydata.forEach(item=>{ |
|
||||||
for(let i in this.jjj){ |
|
||||||
if(item == i){ |
|
||||||
this.jjj[i].forEach(i => { |
|
||||||
keydata.forEach(o=>{ |
|
||||||
if(o == i){ |
|
||||||
var index = keydata.indexOf(i) |
|
||||||
keydata.splice(index,1) |
|
||||||
} |
|
||||||
}) |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
this.http.post( |
|
||||||
`/api/Roles/${id}/Permissions`, |
|
||||||
keydata2 |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.http.post( |
|
||||||
`/api/Roles/${id}/NavMenus`, |
|
||||||
keydata |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('创建成功') |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('创建失败2') |
|
||||||
} |
|
||||||
) |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('创建失败1') |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("角色名称不符合规范") |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
//编辑角色组件---------->废弃
|
|
||||||
@Component({ |
|
||||||
selector: 'editrole', |
|
||||||
templateUrl: './editrole.component.html', |
|
||||||
styleUrls: ['./role.component.scss'] |
|
||||||
}) |
|
||||||
export class EditRole { |
|
||||||
myControl = new FormControl(); |
|
||||||
//注入MatDialogRef，可以用来关闭对话框
|
|
||||||
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
|
|
||||||
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditRole>,@Inject(MAT_DIALOG_DATA) public data) {} |
|
||||||
info = {} |
|
||||||
ngOnInit(){ |
|
||||||
} |
|
||||||
onNoClick(): void { |
|
||||||
this.dialogRef.close(); |
|
||||||
} |
|
||||||
onSubmit(value){ |
|
||||||
let newdate = new Date(); |
|
||||||
let time = format(newdate, 'yyyy-MM-dd')
|
|
||||||
this.http.put( |
|
||||||
`/api/Roles/${this.data['id']}`,
|
|
||||||
{ |
|
||||||
id:this.data['id'], |
|
||||||
name: value.name, |
|
||||||
order: value.order, |
|
||||||
enabled: true, |
|
||||||
creationTime:time, |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close();
|
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("请填写正确格式") |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//分配权限组件---------->编辑组件
|
|
||||||
@Component({ |
|
||||||
selector: 'sharepower', |
|
||||||
templateUrl: './sharepower.component.html', |
|
||||||
styleUrls: ['./role.component.scss'] |
|
||||||
}) |
|
||||||
export class SharePower { |
|
||||||
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<SharePower>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService) {} |
|
||||||
olddata =[] |
|
||||||
olddata2 =[] |
|
||||||
newdata = [] |
|
||||||
newdata2 = [] |
|
||||||
placeholdername = this.data.name |
|
||||||
xxx1 = {}//存放有children的 父id：子id1 子id2 子id3
|
|
||||||
jjj = {} |
|
||||||
checkedMap = {} |
|
||||||
ngOnInit(){ |
|
||||||
this.http.get(`/api/Roles/${this.data.id}/Permissions`).subscribe((data: any[])=>{
|
|
||||||
this.olddata =data |
|
||||||
|
|
||||||
function getparentNode(parentId){ |
|
||||||
return data.find((item)=>{ |
|
||||||
return item.id == parentId |
|
||||||
}) |
|
||||||
} |
|
||||||
data.forEach(item => { |
|
||||||
if(item.checked){ |
|
||||||
this.checkedMap[item.id] = item.checked; |
|
||||||
} |
|
||||||
var parentNode = getparentNode(item.parentId); |
|
||||||
if(parentNode){ |
|
||||||
if(!parentNode.children){ |
|
||||||
parentNode.children = [] |
|
||||||
} |
|
||||||
parentNode.children.push(item) |
|
||||||
}else{ |
|
||||||
if(!item.parentId){ |
|
||||||
this.newdata.push(item) |
|
||||||
} |
|
||||||
} |
|
||||||
});
|
|
||||||
data.forEach(item=>{ |
|
||||||
//父节点如果被选中子节点则默认选中
|
|
||||||
if(item.checked && item.children){ |
|
||||||
item.children.forEach(n => { |
|
||||||
this.checkedMap[n.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.xxx1[item.id] = childarr |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
this.http.get(`/api/Roles/${this.data.id}/NavMenus`).subscribe((data: any[])=>{
|
|
||||||
this.olddata2 =data |
|
||||||
function getparentNode(parentId){ |
|
||||||
return data.find((item)=>{ |
|
||||||
return item.id == parentId |
|
||||||
}) |
|
||||||
} |
|
||||||
data.forEach(item => { |
|
||||||
if(item.checked){ |
|
||||||
this.checkedMap[item.id] = item.checked; |
|
||||||
} |
|
||||||
|
|
||||||
var parentNode = getparentNode(item.parentId); |
|
||||||
|
|
||||||
if(parentNode){ |
|
||||||
if(!parentNode.children){ |
|
||||||
parentNode.children = [] |
|
||||||
} |
|
||||||
parentNode.children.push(item) |
|
||||||
}else{ |
|
||||||
if(!item.parentId){ |
|
||||||
this.newdata2.push(item) |
|
||||||
} |
|
||||||
} |
|
||||||
});
|
|
||||||
|
|
||||||
data.forEach(item=>{ |
|
||||||
//父节点选中子节点默认选中
|
|
||||||
if(item.checked && item.children){ |
|
||||||
item.children.forEach(n => { |
|
||||||
this.checkedMap[n.id] = true; |
|
||||||
}); |
|
||||||
} |
|
||||||
}) |
|
||||||
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.jjj[item.id] = childarr |
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
selectedAll(event, node){ |
|
||||||
this.olddata.forEach(item=>{ |
|
||||||
if(item.parentId == node.id){ |
|
||||||
this.checkedMap[item.id] = event.checked; |
|
||||||
} |
|
||||||
}) |
|
||||||
this.olddata2.forEach(item=>{ |
|
||||||
if(item.parentId == node.id){ |
|
||||||
this.checkedMap[item.id] = event.checked; |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// xxx(event,form){
|
|
||||||
// const values = form.value;
|
|
||||||
// for (let key in values) {
|
|
||||||
// this.checkedMap[key] = 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.put( |
|
||||||
`/api/Roles/${this.data['id']}`,
|
|
||||||
{ |
|
||||||
id:this.data['id'], |
|
||||||
name: value.name, |
|
||||||
order: this.data.order, |
|
||||||
enabled: true, |
|
||||||
creationTime:time, |
|
||||||
} |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
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])
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
keydata2.forEach(item=>{ |
|
||||||
for(let i in this.xxx1){ |
|
||||||
if(item == i){ |
|
||||||
this.xxx1[i].forEach(i => { |
|
||||||
keydata2.forEach(o=>{ |
|
||||||
if(o == i){ |
|
||||||
var index = keydata2.indexOf(i) |
|
||||||
keydata2.splice(index,1) |
|
||||||
} |
|
||||||
}) |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
keydata.forEach(item=>{ |
|
||||||
for(let i in this.jjj){ |
|
||||||
if(item == i){ |
|
||||||
this.jjj[i].forEach(i => { |
|
||||||
keydata.forEach(o=>{ |
|
||||||
if(o == i){ |
|
||||||
var index = keydata.indexOf(i) |
|
||||||
keydata.splice(index,1) |
|
||||||
} |
|
||||||
}) |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
this.http.post( |
|
||||||
`/api/Roles/${this.data.id}/Permissions`, |
|
||||||
keydata2 |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.http.post( |
|
||||||
`/api/Roles/${this.data.id}/NavMenus`, |
|
||||||
keydata |
|
||||||
).subscribe( |
|
||||||
data=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('编辑成功') |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('分配权限失败2') |
|
||||||
} |
|
||||||
) |
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
this.dialogRef.close(); |
|
||||||
alert('分配权限失败1') |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
|
|
||||||
}, |
|
||||||
err=>{ |
|
||||||
alert("名称格式不正确") |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
@ -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,10 +0,0 @@ |
|||||||
<p>底部提示消息</p> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput value="哈哈" placeholder="提示信息1" #message> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<mat-form-field> |
|
||||||
<input matInput value="嘻嘻" placeholder="提示信息2" #action> |
|
||||||
</mat-form-field> |
|
||||||
|
|
||||||
<button mat-button (click)="openSnackBar(message.value, action.value)">显示出来吧！</button> |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { SnackbarComponent } from './snackbar.component'; |
|
||||||
|
|
||||||
describe('SnackbarComponent', () => { |
|
||||||
let component: SnackbarComponent; |
|
||||||
let fixture: ComponentFixture<SnackbarComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ SnackbarComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(SnackbarComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
|
||||||
import {MatSnackBar} from '@angular/material/snack-bar'; |
|
||||||
@Component({ |
|
||||||
selector: 'app-snackbar', |
|
||||||
templateUrl: './snackbar.component.html', |
|
||||||
styleUrls: ['./snackbar.component.scss'] |
|
||||||
}) |
|
||||||
export class SnackbarComponent implements OnInit { |
|
||||||
|
|
||||||
constructor(private _snackBar: MatSnackBar) { } |
|
||||||
|
|
||||||
ngOnInit() { |
|
||||||
} |
|
||||||
openSnackBar(message: string, action: string) { |
|
||||||
this._snackBar.open(message, action, { |
|
||||||
duration: 2000, |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear"> |
|
||||||
{{!isLinear ? '切换为线性' : '切换为非线性'}} |
|
||||||
</button> |
|
||||||
<!-- 整个流程总标签 --> |
|
||||||
<!-- mat-vertical-stepper是垂直方向 --> |
|
||||||
<!-- labelPosition可以定义标签位置 --> |
|
||||||
<!-- linear控制只有在完成前面步骤才可以进行后续步骤 --> |
|
||||||
<mat-horizontal-stepper [linear]="isLinear" #stepper> |
|
||||||
<!-- 第一步 --> |
|
||||||
<!-- stepControl检查步骤有效性 --> |
|
||||||
<mat-step [stepControl]="firstFormGroup"> |
|
||||||
<form [formGroup]="firstFormGroup"> |
|
||||||
<ng-template matStepLabel>填写姓名</ng-template> |
|
||||||
<mat-form-field> |
|
||||||
<!-- 指定控制器名称 --> |
|
||||||
<!-- 过滤器-必填 --> |
|
||||||
<input matInput placeholder="姓名" formControlName="firstCtrl" required> |
|
||||||
</mat-form-field> |
|
||||||
<div> |
|
||||||
<!-- 必须添加type="button"防止提交 --> |
|
||||||
<button mat-button matStepperNext type="button">下一步</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</mat-step> |
|
||||||
<!-- 第二步 --> |
|
||||||
<!-- optional属性表示可选 --> |
|
||||||
<mat-step [stepControl]="secondFormGroup" optional="true"> |
|
||||||
<form [formGroup]="secondFormGroup"> |
|
||||||
<ng-template matStepLabel>家庭住址</ng-template> |
|
||||||
<mat-form-field> |
|
||||||
<input matInput placeholder="住址" formControlName="secondCtrl" required> |
|
||||||
</mat-form-field> |
|
||||||
<div> |
|
||||||
<!-- 步骤按钮 --> |
|
||||||
<button mat-button matStepperPrevious type="button">上一步</button> |
|
||||||
<button mat-button matStepperNext type="button">下一步</button> |
|
||||||
</div> |
|
||||||
</form> |
|
||||||
</mat-step> |
|
||||||
<!-- 第三步 --> |
|
||||||
<mat-step> |
|
||||||
<ng-template matStepLabel>完成</ng-template> |
|
||||||
你已经完成了 |
|
||||||
<div> |
|
||||||
<button mat-button matStepperPrevious>上一步</button> |
|
||||||
<button mat-button (click)="stepper.reset()">重置</button> |
|
||||||
</div> |
|
||||||
</mat-step> |
|
||||||
</mat-horizontal-stepper> |
|
||||||
|
|
||||||
|
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { StepperComponent } from './stepper.component'; |
|
||||||
|
|
||||||
describe('StepperComponent', () => { |
|
||||||
let component: StepperComponent; |
|
||||||
let fixture: ComponentFixture<StepperComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ StepperComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(StepperComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue