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,43 +1,38 @@
|
||||
<!-- <app-tabbar></app-tabbar> --> |
||||
<mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme"> |
||||
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;"> |
||||
<div class="biglogobox"> |
||||
<img src="../../assets/images/logo2.png" alt=""> |
||||
</div> |
||||
<div class="navbox"> |
||||
<ul> |
||||
<!-- basicinfo --> |
||||
<li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li> |
||||
<!-- plan --> |
||||
<li [routerLink]="['/datacollection/plan']" routerLinkActive="router-link-active">平面图</li> |
||||
<li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">H5平面图</li> |
||||
<!-- allaround --> |
||||
<li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li> |
||||
<!-- fire-fighting-device --> |
||||
<li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active">消防设施</li> |
||||
<!-- key-site --> |
||||
<li [routerLink]="['/datacollection/key-site']" routerLinkActive="router-link-active">重点部位</li> |
||||
<!-- function-division --> |
||||
<li [routerLink]="['/datacollection/function-division']" routerLinkActive="router-link-active">功能分区</li> |
||||
<!-- realistic-picture --> |
||||
<li [routerLink]="['/datacollection/realistic-picture']" routerLinkActive="router-link-active">实景图</li> |
||||
<!-- uploading-cad --> |
||||
<li [routerLink]="['/datacollection/uploadingCAD']" routerLinkActive="router-link-active">上传CAD图</li> |
||||
</ul> |
||||
</div> |
||||
</mat-sidenav> |
||||
<mat-sidenav-container class="example-container" autosize> |
||||
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;"> |
||||
<div class="biglogobox"> |
||||
<img src="../../assets/images/logo2.png" alt=""> |
||||
</div> |
||||
<div class="navbox"> |
||||
<ul> |
||||
<!-- basicinfo --> |
||||
<li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li> |
||||
<!-- plan --> |
||||
<li [routerLink]="['/datacollection/collectionTools']" routerLinkActive="router-link-active">平面图</li> |
||||
<!-- allaround --> |
||||
<li [routerLink]="['/datacollection/allaround']" routerLinkActive="router-link-active">四周毗邻</li> |
||||
<!-- fire-fighting-device --> |
||||
<li [routerLink]="['/datacollection/fire-fighting-device']" routerLinkActive="router-link-active">消防设施</li> |
||||
<!-- key-site --> |
||||
<li [routerLink]="['/datacollection/key-site']" routerLinkActive="router-link-active">重点部位</li> |
||||
<!-- function-division --> |
||||
<li [routerLink]="['/datacollection/function-division']" routerLinkActive="router-link-active">功能分区</li> |
||||
<!-- realistic-picture --> |
||||
<li [routerLink]="['/datacollection/realistic-picture']" routerLinkActive="router-link-active">实景图</li> |
||||
<!-- uploading-cad --> |
||||
<li [routerLink]="['/datacollection/uploadingCAD']" routerLinkActive="router-link-active">上传CAD图</li> |
||||
</ul> |
||||
</div> |
||||
</mat-sidenav> |
||||
|
||||
<button type="button" mat-button (click)="drawer.toggle()" class="shownav"> |
||||
<mat-icon>menu</mat-icon> |
||||
</button> |
||||
<button type="button" mat-button (click)="drawer.toggle()" class="shownav"><mat-icon>menu</mat-icon></button> |
||||
|
||||
<div class="example-sidenav-content"> |
||||
<div style="height: 64px;"> |
||||
<app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar> |
||||
</div> |
||||
<div style="flex: 1; overflow: hidden;"> |
||||
<router-outlet></router-outlet> |
||||
</div> |
||||
<div class="example-sidenav-content"> |
||||
<div style="height: 64px;"> |
||||
<app-tabbar></app-tabbar> |
||||
</div> |
||||
|
||||
<div style="flex: 1; overflow: hidden;"> |
||||
<router-outlet></router-outlet> |
||||
</div> |
||||
</div> |
||||
</mat-sidenav-container> |
||||
|
||||
@ -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> |
||||
|
||||
@ -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