76 changed files with 2038 additions and 216 deletions
@ -0,0 +1 @@
|
||||
<p>addequipment works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-addequipment', |
||||
templateUrl: './addequipment.component.html', |
||||
styleUrls: ['./addequipment.component.scss'] |
||||
}) |
||||
export class AddequipmentComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>editequipment works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-editequipment', |
||||
templateUrl: './editequipment.component.html', |
||||
styleUrls: ['./editequipment.component.scss'] |
||||
}) |
||||
export class EditequipmentComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,82 @@
|
||||
<!-- <p>器材管理</p> --> |
||||
<div class="box" id="equipmentInfo"> |
||||
<div class="content"> |
||||
<div class="title"> |
||||
<app-title [name]="'编辑器材信息'"></app-title> |
||||
</div> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>消防器材列表</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入器材名称" formControlName="search" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> |
||||
<button nz-button (click)="add()">新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<div class="table"> |
||||
<div nz-row class="th"> |
||||
<div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;"> |
||||
消防器材 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
规格 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
购入日期 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
生产日期 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
有效期至 |
||||
</div> |
||||
<div nz-col nzSpan="3"> |
||||
操作 |
||||
</div> |
||||
</div> |
||||
<div class="tbody"> |
||||
<div nz-row class="tr" *ngFor="let item of arr"> |
||||
<div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;"> |
||||
干粉灭火器 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
普通 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
2021.01.05 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
2021.01.05 |
||||
</div> |
||||
<div nz-col nzSpan="4"> |
||||
2021.01.05 |
||||
</div> |
||||
<div nz-col nzSpan="3" class="btn"> |
||||
<span> |
||||
编辑 |
||||
</span> |
||||
<span> |
||||
删除 |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="pagination"> |
||||
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" |
||||
nzShowQuickJumper></nz-pagination> |
||||
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,117 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.content { |
||||
width: 1000px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.title { |
||||
height: 48px; |
||||
width: 100%; |
||||
margin: 16px 0; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 1000px; |
||||
height: 34px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 16px; |
||||
|
||||
.lefttop { |
||||
span { |
||||
color: #C4E2FC; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
height: 34px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
background: #143c61; |
||||
color: #91CCFF; |
||||
border-radius: 0px; |
||||
border: 1px solid #36A2FF; |
||||
width: 64px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
overflow: hidden; |
||||
|
||||
.table { |
||||
color: white; |
||||
flex: 1; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
font-size: 16px; |
||||
|
||||
.th { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
color: #23D9FF; |
||||
background: rgba(35, 153, 255, 0.2); |
||||
border: 1px solid rgba(35, 217, 255, 0.4); |
||||
// box-shadow: 0 0 3px 1px rgba(35, 217, 255, 0.4); |
||||
} |
||||
|
||||
.tbody { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
color: #C4E2FC; |
||||
font-size: 15px; |
||||
|
||||
.tr { |
||||
height: 40px; |
||||
line-height: 40px; |
||||
border-bottom: 1px solid #115188; |
||||
|
||||
.btn { |
||||
span { |
||||
color: #2399FF; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
span:nth-child(1) { |
||||
margin-right: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pagination { |
||||
height: 32px; |
||||
margin: 15px 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
::-webkit-scrollbar { |
||||
width: 0px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-equipment-info', |
||||
templateUrl: './equipment-info.component.html', |
||||
styleUrls: ['./equipment-info.component.scss'] |
||||
}) |
||||
export class EquipmentInfoComponent implements OnInit { |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder) { } |
||||
arr = [1,1,1,1,1,1,1,1,1] |
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null] |
||||
}); |
||||
} |
||||
submitForm(){ |
||||
|
||||
} |
||||
add(){ |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1 @@
|
||||
<p>oil-station-info works!</p> |
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
@Component({ |
||||
selector: 'app-oil-station-info', |
||||
templateUrl: './oil-station-info.component.html', |
||||
styleUrls: ['./oil-station-info.component.scss'] |
||||
}) |
||||
export class OilStationInfoComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
} |
||||
@ -1 +1,38 @@
|
||||
<p>系统管理页面</p> |
||||
<!-- <p>系统管理页面</p> --> |
||||
<nz-layout> |
||||
<nz-sider [nzWidth]='300'> |
||||
<div class="logo"> |
||||
<img src="../../../assets/images/logo.png" alt=""> |
||||
</div> |
||||
<div class="headPortrait"> |
||||
<div class="photograph"> |
||||
<img src="../../../assets/images/userbig.png" alt=""> |
||||
</div> |
||||
<span>Administrator</span> |
||||
<span><img src="../../../assets/images/icon/admin.png" alt=""> 管理员</span> |
||||
</div> |
||||
<div class="nav"> |
||||
<ul> |
||||
<li [routerLink]="['/system/organization']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/organization.png" alt="">组织机构管理</li> |
||||
<li [routerLink]="['/system/user']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/user.png" alt="">用户管理</li> |
||||
<li [routerLink]="['/system/role']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/role.png" alt="">角色管理</li> |
||||
</ul> |
||||
</div> |
||||
</nz-sider> |
||||
<nz-layout> |
||||
<nz-header> |
||||
<span>Hey，欢迎登录中化油站可视化智能安全管理系统</span> |
||||
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'> |
||||
<i nz-icon nzType="setting"></i> |
||||
</a> |
||||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
<ul nz-menu nzSelectable> |
||||
<li nz-menu-item (click)="signOut()">退出</li> |
||||
</ul> |
||||
</nz-dropdown-menu> |
||||
</nz-header> |
||||
<nz-content> |
||||
<router-outlet></router-outlet> |
||||
</nz-content> |
||||
</nz-layout> |
||||
</nz-layout> |
||||
|
||||
@ -0,0 +1,78 @@
|
||||
nz-layout { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #fff; |
||||
font-size: 16px !important; |
||||
} |
||||
|
||||
nz-sider { |
||||
background: #001B3B; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
|
||||
.logo { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.headPortrait { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
margin-top: 46px; |
||||
margin-bottom: 46px; |
||||
|
||||
.photograph { |
||||
// width: 140px; |
||||
// height: 140px; |
||||
// border: 4px solid #FFFFFF; |
||||
// opacity: 1; |
||||
// border-radius: 32px; |
||||
} |
||||
|
||||
span { |
||||
margin-top: 18px; |
||||
} |
||||
} |
||||
|
||||
.nav { |
||||
ul { |
||||
li { |
||||
width: 300px; |
||||
height: 40px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: left; |
||||
margin-bottom: 16px; |
||||
box-sizing: border-box; |
||||
padding-left: 26%; |
||||
img{ |
||||
margin-right: 8px; |
||||
} |
||||
} |
||||
|
||||
.router-link-active { |
||||
background: linear-gradient(90deg, rgba(0, 13, 33, 0) 0%, #2399FF 52%, rgba(0, 13, 33, 0) 100%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
nz-header { |
||||
height: 56px; |
||||
background: #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 16px; |
||||
} |
||||
|
||||
nz-content { |
||||
background: #F2F2F2; |
||||
box-sizing: border-box; |
||||
padding: 16px; |
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<!-- <nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple"> |
||||
<nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option> |
||||
</nz-select> |
||||
<ng-template #renderTemplate> |
||||
<nz-spin *ngIf="isLoading"></nz-spin> |
||||
</ng-template> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,26 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-addor', |
||||
templateUrl: './addor.component.html', |
||||
styleUrls: ['./addor.component.scss'] |
||||
}) |
||||
export class AddorComponent implements OnInit { |
||||
|
||||
@Input() title?: string; |
||||
@Input() subtitle?: string; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,21 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<!-- <nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple"> |
||||
<nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option> |
||||
</nz-select> |
||||
<ng-template #renderTemplate> |
||||
<nz-spin *ngIf="isLoading"></nz-spin> |
||||
</ng-template> |
||||
</nz-form-control> |
||||
</nz-form-item> --> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,27 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-editor', |
||||
templateUrl: './editor.component.html', |
||||
styleUrls: ['./editor.component.scss'] |
||||
}) |
||||
export class EditorComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
power: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1 +1,43 @@
|
||||
<p>organization works!</p> |
||||
<div class="orbox" id="orbox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>组织机构列表</span> |
||||
<span><img style="vertical-align: top;" src="../../../assets/images/icon/orgrey.png" alt=""> {{totalCount}}个单位</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<!-- <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入单位" formControlName="search" [(ngModel)]="searchValue"/> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> --> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入单位" [(ngModel)]="searchValue"/> |
||||
</nz-input-group> |
||||
<button nz-button nzType="primary" (click)="addOr()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="treeTitle"> |
||||
<span>组织机构</span> |
||||
<span>操作</span> |
||||
</div> |
||||
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandAll]="nzExpandAll" [nzExpandedKeys]="defaultExpandedKeys" |
||||
(nzClick)="nzClick($event)" (nzContextMenu)="nzClick($event)" (nzCheckBoxChange)="nzCheck($event)" |
||||
(nzExpandChange)="nzCheck($event)" [nzTreeTemplate]="nzTreeTemplate"> |
||||
</nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div class="nodebox"> |
||||
<span class="name">{{ node.title }}</span> |
||||
<span class="operation"> |
||||
<span (click)="addOr(node)">新增</span> |
||||
<span (click)="editOr(node)">编辑</span> |
||||
<span (click)="deleteOr(node)">删除</span> |
||||
</span> |
||||
</div> |
||||
</ng-template> |
||||
</div> |
||||
|
||||
@ -0,0 +1,78 @@
|
||||
.orbox { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow-y: auto; |
||||
background: #fff; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.topbox { |
||||
width: 700px; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
height: 36px; |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.treeTitle { |
||||
width: 700px; |
||||
height: 36px; |
||||
line-height: 36px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
color: #000D21; |
||||
box-sizing: border-box; |
||||
padding-left: 30px; |
||||
padding-right: 180px; |
||||
background: rgba(145, 204, 255, 0.2); |
||||
margin: 12px 0; |
||||
} |
||||
|
||||
.nodebox { |
||||
font-size: 15px; |
||||
|
||||
} |
||||
|
||||
.operation { |
||||
position: absolute; |
||||
right: 0; |
||||
|
||||
span { |
||||
margin-left: 40px; |
||||
} |
||||
|
||||
span:nth-child(1), |
||||
span:nth-child(2) { |
||||
color: #2399FF; |
||||
} |
||||
|
||||
span:nth-child(3) { |
||||
color: rgba(0, 13, 33, 0.48); |
||||
} |
||||
} |
||||
@ -1,15 +1,182 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { AddorComponent } from './addor/addor.component'; |
||||
import { EditorComponent } from './editor/editor.component'; |
||||
@Component({ |
||||
selector: 'app-organization', |
||||
templateUrl: './organization.component.html', |
||||
styleUrls: ['./organization.component.scss'] |
||||
}) |
||||
export class OrganizationComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null] |
||||
}); |
||||
this.getAllOrganization() |
||||
} |
||||
//搜索框提交
|
||||
submitForm(): void { |
||||
console.log(12345) |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
} |
||||
|
||||
//获取所有组织机构
|
||||
searchValue = ''; |
||||
nzExpandAll = false; |
||||
totalCount:string |
||||
getAllOrganization() { |
||||
this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
// console.log('组织机构',data.result.totalCount)
|
||||
data.result.items.forEach(element => { |
||||
element.key = element.code |
||||
element.title = element.displayName |
||||
element.selectable = false |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||
// this.nzExpandAll = true;
|
||||
this.nzTreeComponent.getExpandedNodeList().forEach((item) => { |
||||
this.defaultExpandedKeys.push(item.key) |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
|
||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||
|
||||
defaultExpandedKeys = []; |
||||
|
||||
nodes: any[] = [] |
||||
|
||||
nzClick(event: NzFormatEmitEvent): void { |
||||
// console.log(event);
|
||||
console.log('展开节点', this.nzTreeComponent.getExpandedNodeList()) |
||||
|
||||
|
||||
} |
||||
|
||||
nzCheck(event: NzFormatEmitEvent): void { |
||||
console.log(event); |
||||
} |
||||
|
||||
// nzSelectedKeys change
|
||||
nzSelect(keys: string[]): void { |
||||
console.log(keys, this.nzTreeComponent.getSelectedNodeList()); |
||||
} |
||||
|
||||
ngAfterViewInit(): void { |
||||
// get node by key: '10011'
|
||||
console.log(this.nzTreeComponent.getTreeNodeByKey('10011')); |
||||
// use tree methods
|
||||
console.log( |
||||
this.nzTreeComponent.getTreeNodes(), |
||||
this.nzTreeComponent.getCheckedNodeList(), |
||||
this.nzTreeComponent.getSelectedNodeList(), |
||||
this.nzTreeComponent.getExpandedNodeList() |
||||
); |
||||
} |
||||
|
||||
addOr(node?: any) { |
||||
const modal = this.modal.create({ |
||||
nzTitle: node ? '新增组织机构' : '新增一级组织机构', |
||||
nzContent: AddorComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
title: '', |
||||
subtitle: '' |
||||
}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
|
||||
} |
||||
this.http.post('/api/services/app/User/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '创建失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
|
||||
} |
||||
editOr(node) { |
||||
console.log(node) |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑组织机构', |
||||
nzContent: EditorComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
data: node, |
||||
}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
|
||||
} |
||||
this.http.post('/api/services/app/User/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '编辑成功！'); |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '创建失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
deleteOr(item) { |
||||
console.log(item) |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.title}这个机构吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'danger', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Role/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功！'); |
||||
}) |
||||
}, |
||||
nzCancelText: '取消', |
||||
nzOnCancel: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple"> |
||||
<nz-option *ngFor="let o of optionList" [nzValue]="o" [nzLabel]="o.displayName"></nz-option> |
||||
</nz-select> |
||||
<ng-template #renderTemplate> |
||||
<nz-spin *ngIf="isLoading"></nz-spin> |
||||
</ng-template> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,38 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-addrole', |
||||
templateUrl: './addrole.component.html', |
||||
styleUrls: ['./addrole.component.scss'] |
||||
}) |
||||
export class AddroleComponent implements OnInit { |
||||
|
||||
@Input() title?: string; |
||||
@Input() subtitle?: string; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.loadMore(); |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
power: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
optionList = []; |
||||
isLoading = false; |
||||
//获取权限列表
|
||||
loadMore() { |
||||
this.isLoading = true; |
||||
this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data:any) => { |
||||
this.isLoading = false; |
||||
this.optionList = data.result.items |
||||
console.log('所有权限',data) |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control nzErrorTip="请输入名称"> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data.name" nz-input type="text" formControlName="name" placeholder="请输入名称" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select [(ngModel)]="multipleValue" formControlName="power" nzPlaceHolder="请选择权限" (nzScrollToBottom)="loadMore()" nzMode="multiple"> |
||||
<nz-option *ngFor="let o of optionList" [nzValue]="o.name" [nzLabel]="o.displayName"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,38 @@
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
@Component({ |
||||
selector: 'app-editrole', |
||||
templateUrl: './editrole.component.html', |
||||
styleUrls: ['./editrole.component.scss'] |
||||
}) |
||||
export class EditroleComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { } |
||||
|
||||
multipleValue:any |
||||
ngOnInit(): void { |
||||
this.multipleValue = this.data.grantedPermissions |
||||
this.loadMore(); |
||||
this.validateForm = this.fb.group({ |
||||
name: [null, [Validators.required]], |
||||
power: [null, [Validators.required]] |
||||
}); |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
optionList = []; |
||||
//获取权限列表
|
||||
loadMore() { |
||||
this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data:any) => { |
||||
this.optionList = data.result.items |
||||
console.log('所有权限',data) |
||||
}) |
||||
} |
||||
|
||||
} |
||||
@ -1 +1,38 @@
|
||||
<p>role works!</p> |
||||
<div class="roleBox" id="roleBox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>角色列表</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<button nz-button nzType="primary" (click)="addRole()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<nz-table #basicTable [nzData]="listOfData" [nzShowPagination]='false' [nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th style="padding-left: 40px;">角色</th> |
||||
<th>权限</th> |
||||
<th>创建/修改时间</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td>{{data.name}}</td> |
||||
<td> |
||||
<span *ngFor="let item of data.grantedFlatPermissions">{{item.displayName}}</span> |
||||
</td> |
||||
<td> |
||||
{{(data.lastModificationTime ? data.lastModificationTime : data.creationTime) | date:"yyyy-MM-dd HH:mm:ss"}} |
||||
</td> |
||||
<td class="operation"> |
||||
<a (click)="edit(data)">编辑</a> |
||||
<a (click)="delete(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,54 @@
|
||||
.roleBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #FFFFFF; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
tbody { |
||||
tr { |
||||
td { |
||||
span { |
||||
margin-right: 18px; |
||||
} |
||||
} |
||||
td:nth-child(1){ |
||||
padding-left: 40px; |
||||
} |
||||
} |
||||
.operation { |
||||
a { |
||||
color: #2399FF; |
||||
margin-right: 8px; |
||||
} |
||||
a:last-child { |
||||
color: rgba(0, 13, 33, 0.48); |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
.lefttop { |
||||
span { |
||||
color: #000D21; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
|
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="account" placeholder="请输入账号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="name" placeholder="请输入姓名" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-tree-select formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"> |
||||
|
||||
</nz-tree-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple"> |
||||
<nz-option *ngFor="let item of listOfData" [nzValue]="item.name" [nzLabel]="item.displayName"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input nz-input type="text" formControlName="phonenum" placeholder="请输入手机号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,54 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
@Component({ |
||||
selector: 'app-adduser', |
||||
templateUrl: './adduser.component.html', |
||||
styleUrls: ['./adduser.component.scss'] |
||||
}) |
||||
export class AdduserComponent implements OnInit { |
||||
|
||||
@Input() title?: string; |
||||
@Input() subtitle?: string; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
account: [null, [Validators.required]], |
||||
name: [null, [Validators.required]], |
||||
organization: [null, [Validators.required]], |
||||
role: [null, [Validators.required]], |
||||
phonenum: [null, [Validators.required]] |
||||
}); |
||||
|
||||
this.getAllRoles() |
||||
this.getAllOrganization() |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
listOfData: any[] = []; |
||||
|
||||
//获取角色列表
|
||||
getAllRoles() { |
||||
this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => { |
||||
console.log('角色列表', data.result.items) |
||||
this.listOfData = data.result.items |
||||
}) |
||||
} |
||||
//获取所有组织机构
|
||||
nodes:any = [] |
||||
getAllOrganization() { |
||||
this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { |
||||
data.result.items.forEach(element => { |
||||
element.key = element.code |
||||
element.title = element.displayName |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
<div class="box"> |
||||
<form nz-form [formGroup]="validateForm"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data.userName" nz-input type="text" formControlName="account" placeholder="请输入账号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data.name" nz-input type="text" formControlName="name" placeholder="请输入姓名" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-tree-select [(ngModel)]="data.organizationId" formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"> |
||||
|
||||
</nz-tree-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-select [(ngModel)]="data.roleNames" formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple"> |
||||
<nz-option *ngFor="let item of listOfData" [nzValue]="item.name" [nzLabel]="item.displayName"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group> |
||||
<input [(ngModel)]="data.phoneNumber" nz-input type="text" formControlName="phonenum" placeholder="请输入手机号" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
@ -0,0 +1,57 @@
|
||||
import { Component, OnInit, Input } from '@angular/core'; |
||||
import { NzModalRef } from 'ng-zorro-antd/modal'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
|
||||
@Component({ |
||||
selector: 'app-edituser', |
||||
templateUrl: './edituser.component.html', |
||||
styleUrls: ['./edituser.component.scss'] |
||||
}) |
||||
export class EdituserComponent implements OnInit { |
||||
|
||||
@Input() data?: any; |
||||
validateForm!: FormGroup; |
||||
constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
account: [null, [Validators.required]], |
||||
name: [null, [Validators.required]], |
||||
organization: [null, [Validators.required]], |
||||
role: [null, [Validators.required]], |
||||
phonenum: [null, [Validators.required]] |
||||
}); |
||||
|
||||
|
||||
console.log(this.data) |
||||
this.getAllRoles() |
||||
this.getAllOrganization() |
||||
} |
||||
destroyModal(): void { |
||||
this.modal.destroy({ data: 'this the result data' }); |
||||
} |
||||
|
||||
listOfData: any[] = []; |
||||
|
||||
//获取角色列表
|
||||
getAllRoles() { |
||||
this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => { |
||||
console.log('角色列表', data.result.items) |
||||
this.listOfData = data.result.items |
||||
}) |
||||
} |
||||
//获取所有组织机构
|
||||
nodes:any = [] |
||||
getAllOrganization() { |
||||
this.http.get('/api/services/app/Organization/GetAll').subscribe((data: any) => { |
||||
data.result.items.forEach(element => { |
||||
element.key = element.code |
||||
element.title = element.displayName |
||||
}); |
||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
||||
}) |
||||
} |
||||
|
||||
} |
||||
@ -1 +1,63 @@
|
||||
<p>user works!</p> |
||||
<div class="userBox" id="userBox"> |
||||
<div class="topbox"> |
||||
<div class="lefttop"> |
||||
<span>用户列表</span> |
||||
<span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span> |
||||
</div> |
||||
<div class="righttop"> |
||||
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||
<nz-form-item> |
||||
<nz-form-control> |
||||
<nz-input-group nzPrefixIcon="search"> |
||||
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" /> |
||||
</nz-input-group> |
||||
</nz-form-control> |
||||
<button style="display: none;" type="submit"></button> |
||||
</nz-form-item> |
||||
</form> |
||||
<button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle" |
||||
nzTheme="outline"></i>新增</button> |
||||
</div> |
||||
</div> |
||||
<div class="tablebox"> |
||||
<nz-table #basicTable [nzData]="usersLIst" [nzShowPagination]='false' [nzPageSize]='16'> |
||||
<thead> |
||||
<tr> |
||||
<th></th> |
||||
<th>账号</th> |
||||
<th>姓名</th> |
||||
<th>角色</th> |
||||
<th>所属机构</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let data of basicTable.data"> |
||||
<td><img src="../../../assets/images/user.png" alt=""></td> |
||||
<td>{{ data.userName }}</td> |
||||
<td>{{ data.name }}</td> |
||||
<td> |
||||
<span *ngFor="let item of data.roleNames">{{item}}</span> |
||||
</td> |
||||
<td> |
||||
<div class="ortype"> |
||||
自营 |
||||
</div> |
||||
{{data.organization}} |
||||
</td> |
||||
<td class="operation"> |
||||
<a (click)="editUser(data)">编辑</a> |
||||
<a (click)="resetPassword(data)">重置密码</a> |
||||
<a (click)="delete(data)">删除</a> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</nz-table> |
||||
</div> |
||||
<div class="pagination"> |
||||
<nz-pagination [nzHideOnSinglePage]="true" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="1" |
||||
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||
</nz-pagination> |
||||
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,87 @@
|
||||
.userBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #FFFFFF; |
||||
box-sizing: border-box; |
||||
padding: 20px; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
thead {} |
||||
|
||||
tbody { |
||||
tr { |
||||
td:nth-child(1) { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.operation { |
||||
a { |
||||
color: #2399FF; |
||||
margin-right: 18px; |
||||
} |
||||
|
||||
a:last-child { |
||||
color: rgba(0, 13, 33, 0.48); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.topbox { |
||||
width: 100%; |
||||
height: 36px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-bottom: 12px; |
||||
|
||||
.lefttop { |
||||
span:nth-child(1) { |
||||
color: #000D21; |
||||
margin-right: 16px; |
||||
} |
||||
|
||||
span:nth-child(2) { |
||||
color: rgba(36, 36, 36, 0.24); |
||||
} |
||||
} |
||||
|
||||
.righttop { |
||||
display: flex; |
||||
|
||||
button { |
||||
margin-left: 16px; |
||||
} |
||||
|
||||
nz-input-group { |
||||
height: 32px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tablebox { |
||||
flex: 1; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
.pagination { |
||||
margin: 15px 0; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.ortype { |
||||
width: 36px; |
||||
height: 20px; |
||||
background: #2399FF; |
||||
opacity: 1; |
||||
border-radius: 2px; |
||||
font-size: 12px; |
||||
margin-right: 8px; |
||||
color: #fff; |
||||
text-align: center; |
||||
} |
||||
@ -1,15 +1,193 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
||||
import { AdduserComponent } from './adduser/adduser.component'; |
||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { EdituserComponent } from './edituser/edituser.component'; |
||||
@Component({ |
||||
selector: 'app-user', |
||||
templateUrl: './user.component.html', |
||||
styleUrls: ['./user.component.scss'] |
||||
}) |
||||
export class UserComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
search: [null] |
||||
}); |
||||
this.getAllUsers() |
||||
} |
||||
|
||||
|
||||
//获取所有用户
|
||||
usersLIst: any = [] |
||||
usersNum:string |
||||
|
||||
SkipCount: number = 0 //0 16 32 48
|
||||
MaxResultCount: number = 16 |
||||
getAllUsers() { |
||||
let params = { |
||||
SkipCount: String(this.SkipCount), |
||||
MaxResultCount: String(this.MaxResultCount) |
||||
} |
||||
this.http.get('/api/services/app/User/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.usersLIst = data.result.items |
||||
this.usersNum = data.result.totalCount |
||||
console.log('所有用户', this.usersLIst) |
||||
}) |
||||
} |
||||
|
||||
pageChange($event){ |
||||
console.log('页码改变',$event) |
||||
} |
||||
|
||||
|
||||
|
||||
//搜索框提交
|
||||
submitForm(): void { |
||||
console.log(12345) |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
} |
||||
|
||||
//新增用户
|
||||
addUser(): void { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增用户', |
||||
nzContent: AdduserComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
title: '', |
||||
subtitle: '' |
||||
}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
userName: instance.validateForm.value.account, |
||||
name: instance.validateForm.value.name, |
||||
organizationId: instance.validateForm.value.organization, |
||||
roleNames: instance.validateForm.value.role, |
||||
phoneNumber: instance.validateForm.value.phonenum, |
||||
isActive: true |
||||
} |
||||
this.http.post('/api/services/app/User/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
this.getAllUsers() |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '创建失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!')); |
||||
// Return a result when closed
|
||||
modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result)); |
||||
} |
||||
|
||||
//编辑用户
|
||||
editUser(data): void { |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑用户', |
||||
nzContent: EdituserComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
data: data, |
||||
}, |
||||
nzOnOk: async () => { |
||||
console.log('hhhhhhh', instance.validateForm) |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
let body = { |
||||
userName: instance.validateForm.value.account, |
||||
name: instance.validateForm.value.name, |
||||
organizationId: instance.validateForm.value.organization, |
||||
roleNames: instance.validateForm.value.role, |
||||
phoneNumber: instance.validateForm.value.phonenum, |
||||
isActive: true |
||||
} |
||||
this.http.post('/api/services/app/User/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功！'); |
||||
this.getAllUsers() |
||||
return true |
||||
}, err => { |
||||
resolve(err) |
||||
this.message.create('warning', '创建失败'); |
||||
return false |
||||
}) |
||||
}) |
||||
} else { |
||||
this.message.create('warning', '请填写完整！'); |
||||
return false |
||||
} |
||||
} |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
|
||||
//重置密码
|
||||
resetPassword(item) { |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要重置${item.userName}这个账户的密码吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Role/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '重置成功！'); |
||||
this.getAllUsers() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消', |
||||
nzOnCancel: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
//删除
|
||||
delete(item) { |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.userName}这个账户吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'danger', |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Role/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功！'); |
||||
this.getAllUsers() |
||||
}) |
||||
}, |
||||
nzCancelText: '取消', |
||||
nzOnCancel: () => { |
||||
|
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 387 B |
|
After Width: | Height: | Size: 484 B |
|
After Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 404 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
Loading…
Reference in new issue