diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
index 402c78e..2f58651 100644
--- a/src/app/home/home.module.ts
+++ b/src/app/home/home.module.ts
@@ -35,6 +35,12 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzMessageModule } from 'ng-zorro-antd/message';
+import { AdduserComponent } from './system-management/user/adduser/adduser.component';
+import { EdituserComponent } from './system-management/user/edituser/edituser.component';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { AddorComponent } from './system-management/or/addor/addor.component';
+import { EditorComponent } from './system-management/or/editor/editor.component';
@NgModule({
declarations: [
NavComponent,
@@ -56,7 +62,11 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
StationTaskApplyComponent,
StationWeeklyPlanComponent,
AddroleComponent,
- EditroleComponent
+ EditroleComponent,
+ AdduserComponent,
+ EdituserComponent,
+ AddorComponent,
+ EditorComponent
],
imports: [
CommonModule,
@@ -75,8 +85,10 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
ReactiveFormsModule,
NzModalModule,
NzMessageModule,
- NzInputModule
+ NzInputModule,
+ NzPaginationModule,
+ NzTreeModule
],
- entryComponents: [AddroleComponent, EditroleComponent]
+ entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent]
})
export class HomeModule { }
diff --git a/src/app/home/nav/nav.component.scss b/src/app/home/nav/nav.component.scss
index 19bd89a..58d88fe 100644
--- a/src/app/home/nav/nav.component.scss
+++ b/src/app/home/nav/nav.component.scss
@@ -13,11 +13,15 @@ nz-header {
align-items: center;
padding: 0 20px;
.logobox{
+ width: 220px;
img{
margin-right: 8px;
}
+ font-size: 16px;
}
.headerbtn{
+ text-align: right;
+ width: 220px;
a{
color: #fff;
}
@@ -35,6 +39,7 @@ nz-header {
justify-content: center;
align-items: center;
cursor: pointer;
+ font-size: 16px;
}
}
diff --git a/src/app/home/system-management/or/addor/addor.component.html b/src/app/home/system-management/or/addor/addor.component.html
new file mode 100644
index 0000000..027be1f
--- /dev/null
+++ b/src/app/home/system-management/or/addor/addor.component.html
@@ -0,0 +1,23 @@
+<div class="box">
+ <form nz-form [formGroup]="validateForm">
+ <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-input-group>
+ <input nz-input type="text" formControlName="code" placeholder="请输入编码" />
+ </nz-input-group>
+ </nz-form-control>
+ </nz-form-item> -->
+ <nz-form-item>
+ <nz-form-control>
+ <label nz-checkbox formControlName="isGasStation">是否为加油站</label>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+</div>
\ No newline at end of file
diff --git a/src/app/home/system-management/or/addor/addor.component.scss b/src/app/home/system-management/or/addor/addor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/system-management/or/addor/addor.component.ts b/src/app/home/system-management/or/addor/addor.component.ts
new file mode 100644
index 0000000..7fd172c
--- /dev/null
+++ b/src/app/home/system-management/or/addor/addor.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } 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 {
+
+ validateForm!: FormGroup;
+ constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient) { }
+
+ ngOnInit(): void {
+ this.validateForm = this.fb.group({
+ name: [null, [Validators.required]],
+ // code: [null, [Validators.required]],
+ isGasStation: [false]
+ });
+ }
+ destroyModal(): void {
+ this.modal.destroy({ data: 'this the result data' });
+ }
+
+
+}
diff --git a/src/app/home/system-management/or/editor/editor.component.html b/src/app/home/system-management/or/editor/editor.component.html
new file mode 100644
index 0000000..2351467
--- /dev/null
+++ b/src/app/home/system-management/or/editor/editor.component.html
@@ -0,0 +1,24 @@
+<div class="box">
+ <form nz-form [formGroup]="validateForm">
+ <nz-form-item>
+ <nz-form-control nzErrorTip="请输入名称">
+ <nz-input-group>
+ <input [(ngModel)]="datacopy.name" nz-input type="text" formControlName="name"
+ placeholder="请输入名称" />
+ </nz-input-group>
+ </nz-form-control>
+ </nz-form-item>
+ <!-- <nz-form-item>
+ <nz-form-control>
+ <nz-input-group>
+ <input [(ngModel)]="datacopy.code" nz-input type="text" formControlName="code" placeholder="请输入编码" />
+ </nz-input-group>
+ </nz-form-control>
+ </nz-form-item> -->
+ <nz-form-item>
+ <nz-form-control>
+ <label [(ngModel)]="datacopy.isGasStation" nz-checkbox formControlName="isGasStation">是否为加油站</label>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+</div>
\ No newline at end of file
diff --git a/src/app/home/system-management/or/editor/editor.component.scss b/src/app/home/system-management/or/editor/editor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/system-management/or/editor/editor.component.ts b/src/app/home/system-management/or/editor/editor.component.ts
new file mode 100644
index 0000000..96a960b
--- /dev/null
+++ b/src/app/home/system-management/or/editor/editor.component.ts
@@ -0,0 +1,29 @@
+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) { }
+
+ datacopy: any
+ ngOnInit(): void {
+ this.validateForm = this.fb.group({
+ name: [null, [Validators.required]],
+ // code: [null, [Validators.required]],
+ isGasStation: []
+ });
+ this.datacopy = JSON.parse(JSON.stringify(this.data))
+ }
+ destroyModal(): void {
+ this.modal.destroy({ data: 'this the result data' });
+ }
+
+
+}
diff --git a/src/app/home/system-management/or/or.component.html b/src/app/home/system-management/or/or.component.html
index fe5f013..5a32310 100644
--- a/src/app/home/system-management/or/or.component.html
+++ b/src/app/home/system-management/or/or.component.html
@@ -1 +1,43 @@
-<p>or 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">
+ <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" [nzTreeTemplate]="nzTreeTemplate" nzDraggable
+ nzBlockNode (nzOnDrop)="nzEvent($event)" [nzBeforeDrop]="beforeDrop" [nzExpandedIcon]="multiExpandedIconTpl">
+ </nz-tree>
+ <ng-template #nzTreeTemplate let-node let-origin="origin">
+ <div class="nodebox">
+ <span class="name">{{ node.title }}</span>
+ <span class="operation">
+ <span class="blue" (click)="addOr(node)" *ngIf="!node.origin.isGasStation">新增</span>
+ <span class="blue" (click)="editOr(node)">编辑</span>
+ <span class="red" (click)="deleteOr(node)">删除</span>
+ </span>
+ </div>
+ </ng-template>
+ <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+ <ng-container *ngIf="node.children.length == 0; else elseTemplate">
+
+ </ng-container>
+ <ng-template #elseTemplate>
+ <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+ class="ant-tree-switcher-line-icon"></i>
+ </ng-template>
+ </ng-template>
+</div>
\ No newline at end of file
diff --git a/src/app/home/system-management/or/or.component.scss b/src/app/home/system-management/or/or.component.scss
index e69de29..8497646 100644
--- a/src/app/home/system-management/or/or.component.scss
+++ b/src/app/home/system-management/or/or.component.scss
@@ -0,0 +1,70 @@
+.orbox {
+ width: 650px;
+ height: 100%;
+ overflow-y: auto;
+ background: #fff;
+ box-sizing: border-box;
+ padding: 20px;
+ font-size: 15px;
+}
+
+.topbox {
+ width: 100%;
+ 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: 100%;
+ height: 40px;
+ line-height: 40px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ color: #000D21;
+ box-sizing: border-box;
+ padding-left: 30px;
+ padding-right: 95px;
+ border-bottom: 1px solid #E4E7EC;
+}
+
+.nodebox {
+ font-size: 14px;
+ text-align: left;
+}
+
+.operation {
+ position: absolute;
+ right: 0;
+
+ span {
+ margin-left: 20px;
+ }
+
+}
diff --git a/src/app/home/system-management/or/or.component.ts b/src/app/home/system-management/or/or.component.ts
index 7999f38..e5d4c7a 100644
--- a/src/app/home/system-management/or/or.component.ts
+++ b/src/app/home/system-management/or/or.component.ts
@@ -1,5 +1,17 @@
-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';
+import { NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
+import { Observable, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy';
@Component({
selector: 'app-or',
templateUrl: './or.component.html',
@@ -7,9 +19,297 @@ import { Component, OnInit } from '@angular/core';
})
export class OrComponent 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()
+
+ this.deleteRouteSnapshot();
+ }
+ deleteRouteSnapshot() {
+ CustomReuseStrategy.deleteRouteSnapshot('/system/host');
+ }
+ //搜索框提交
+ submitForm(): void {
+ for (const i in this.validateForm.controls) {
+ this.validateForm.controls[i].markAsDirty();
+ this.validateForm.controls[i].updateValueAndValidity();
+ }
+ }
+
+ //获取所有组织机构
+ searchValue = '';
+ nzExpandAll = false;
+ totalCount: string
+
+ allOrList: any
+ getAllOrganization() {
+ let OrganizationUnitId = ''
+ let params = {
+ // OrganizationUnitId: OrganizationUnitId,
+ // IsContainsChildren: "true"
+ ContainsChildren: true,
+ pageSize: 9999
+ }
+ this.http.get('/api/Organizations', {
+ params: params
+ }).subscribe((data: any) => {
+ console.log('组织机构列表', data)
+ this.totalCount = data.totalCount
+ data.items.forEach(element => {
+ element.key = element.id
+ element.title = element.name
+ element.selectable = false
+ });
+ this.allOrList = data.items
+ this.nodes = [...this.toTree.toTree(data.items)]
+ this.defaultExpandedKeys = [this.nodes[0].id]
+ this.defaultExpandedKeys = [...this.defaultExpandedKeys]
+ })
+ }
+
+
+ @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+
+ defaultExpandedKeys = [];
+
+ nodes: any[] = []
+
+
+ addOr(node?: any) {
+ console.log(node)
+ const modal = this.modal.create({
+ nzTitle: node ? '新增组织机构' : '新增一级组织机构',
+ nzContent: AddorComponent,
+ nzViewContainerRef: this.viewContainerRef,
+ nzWidth: 288,
+ nzComponentParams: {},
+ nzOnOk: async () => {
+ if (instance.validateForm.valid) {
+ await new Promise(resolve => {
+ let body = {
+ name: instance.validateForm.value.name,
+ parentId: node ? Number(node.key) : null,
+ isGasStation: instance.validateForm.value.isGasStation
+ }
+ this.http.post('/api/Organizations', body).subscribe(data => {
+ resolve(data)
+ this.message.create('success', '创建成功！');
+ this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
+ this.defaultExpandedKeys.push(item.key)
+ })
+ this.getAllOrganization()
+ 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.origin,
+ },
+ nzOnOk: async () => {
+ if (instance.validateForm.valid) {
+ await new Promise(resolve => {
+ let body = {
+ name: instance.validateForm.value.name,
+ isGasStation: instance.validateForm.value.isGasStation,
+ parentId: node.origin.parentId
+ }
+ this.http.put(`/api/Organizations/${node.origin.id}`, body).subscribe(data => {
+ resolve(data)
+ this.message.create('success', '编辑成功！');
+ this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
+ this.defaultExpandedKeys.push(item.key)
+ })
+ this.getAllOrganization()
+ 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)
+ if (item.origin.children && item.origin.children.length != 0) {
+ this.message.create('warning', '请先删除所有子节点');
+ } else {
+ this.modal.confirm({
+ nzTitle: `确定要删除${item.title}这个机构吗?`,
+ nzOkText: '确定',
+ nzOkType: 'primary',
+ nzOnOk: () => {
+ this.http.delete(`/api/Organizations/${item.origin.id}`).subscribe(data => {
+ this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
+ this.defaultExpandedKeys.push(item.key)
+ })
+ this.getAllOrganization()
+ this.message.create('success', '删除成功！');
+ })
+ },
+ nzCancelText: '取消',
+ nzOnCancel: () => {
+
+ }
+ });
+ }
+
}
+
+ nzEvent(event: NzFormatEmitEvent): void {
+ console.log('event', event)
+ if (this.isDrag) {
+ let parentId
+ if (this.pos == 0) {//目标节点内部
+ parentId = event.node.key
+ } else {
+ if (event.node.level == 0) {
+ parentId = null
+ } else {
+ parentId = event.node.origin.parentId
+ }
+ }
+
+ let body = {
+ parentId: parentId,
+ name: event.dragNode.origin.name,
+ isGasStation: event.dragNode.origin.isGasStation
+ }
+ this.http.put(`/api/Organizations/${event.dragNode.origin.id}`, body).subscribe(data => {
+ this.message.create('success', '拖拽成功！');
+ this.nzTreeComponent.getExpandedNodeList().forEach((item) => {
+ this.defaultExpandedKeys.push(item.key)
+ })
+ this.getAllOrganization()
+ return true
+ }, err => {
+ this.message.create('warning', '拖拽失败');
+ return false
+ })
+
+
+ // console.log('this.allOrList', this.allOrList)
+ // let orders = {}
+ // let originalData = JSON.parse(JSON.stringify(this.allOrList || [])) //tree原始数据
+ // let targetNodeData = []//拖动移入节点的数据，用于遍历求出放在该数组的第几位
+ //找到需要重新排序的数组
+ // if (this.pos == 0) {
+ // originalData.forEach(item => {
+ // if (item.parentId == event.node.key) {
+ // targetNodeData.push(item)
+ // }
+ // })
+ // } else {
+ // if (event.node.origin.parentId) {//如果拖动目标为非一级节点
+ // originalData.forEach(item => {
+ // if (item.parentId == event.node.origin.parentId) {
+ // targetNodeData.push(item)
+ // }
+ // })
+ // } else {//如果拖动目标为一级节点
+ // originalData.forEach(item => {
+ // if (!item.parentId) {
+ // targetNodeData.push(item)
+ // }
+ // })
+ // }
+ // }
+
+
+ // let idArr = []
+ // targetNodeData.forEach(i => {
+ // idArr.push(i.id)
+ // })
+ // if (this.pos == 0 && event.node.origin.children.length == 1) {
+ // // console.log("移入,没有兄弟")
+ // let key = event.dragNode.key
+ // orders[key] = 0
+ // parentId = event.node.key
+ // } else {
+
+ // let array = []
+ // targetNodeData.forEach(item => {
+ // if (item.id != event.dragNode.key) { //将拖动项先移除掉
+ // array.push(item)
+ // }
+ // })
+ // if (event.dragNode.isEnd[event.dragNode.isEnd.length - 1]) { //如果移入到最后一个
+ // // console.log("最后")
+ // array.push(event.dragNode.origin)
+ // } else if (event.dragNode.isStart[event.dragNode.isStart.length - 1]) {//如果移入到第一个
+ // // console.log("第一")
+ // array.unshift(event.dragNode.origin)
+ // } else {//如果移入中间位置
+ // // console.log("中间")
+ // array.splice(event.node.origin.order, 0, event.dragNode.origin)
+ // }
+ // array.forEach((item, key) => {
+ // orders[item.id] = key
+ // })
+ // console.log("移入,多个兄弟",orders)
+ // }
+
+ // let obj = {
+ // id: event.dragNode.origin.id,
+ // parentId: parentId,
+ // orders: orders
+ // }
+
+ // this.http.put("/api/DisposalNodes/Sort", obj).subscribe(data => {
+ // const config = new MatSnackBarConfig();
+ // config.verticalPosition = 'top';
+ // config.duration = 3000
+ // this.snackBar.open('排序成功', '确定', config)
+ // this.refurbishTreeData()
+ // })
+
+
+
+ }
+ }
+ isDrag //是否可以拖动
+ pos//放置位置
+ beforeDrop = (arg: NzFormatBeforeDropEvent) => {
+ console.log('arg', arg)
+ if (arg.node.level === 0) {//如果为数据节点则不允许拖到一级节点
+ this.message.create('warning', '不允许拖拽到一级节点');
+ this.isDrag = false
+ return of(false);
+ } else {
+ this.isDrag = true
+ this.pos = arg.pos
+ return of(true)
+ }
+ }
}
diff --git a/src/app/home/system-management/user/adduser/adduser.component.html b/src/app/home/system-management/user/adduser/adduser.component.html
new file mode 100644
index 0000000..483daec
--- /dev/null
+++ b/src/app/home/system-management/user/adduser/adduser.component.html
@@ -0,0 +1,57 @@
+<div class="box">
+ <form nz-form [formGroup]="validateForm">
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="账号">账号</nz-form-label>
+ <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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="姓名">姓名</nz-form-label>
+ <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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="所属机构">所属机构</nz-form-label>
+ <nz-form-control>
+ <nz-tree-select [nzShowSearch]='true' [nzDropdownClassName]="'maxHeightTreeSelect'"
+ formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"
+ [nzExpandedIcon]="multiExpandedIconTpl">
+ </nz-tree-select>
+ <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+ <ng-container *ngIf="node.children.length == 0; else elseTemplate">
+
+ </ng-container>
+ <ng-template #elseTemplate>
+ <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+ class="ant-tree-switcher-line-icon"></i>
+ </ng-template>
+ </ng-template>
+ </nz-form-control>
+ </nz-form-item>
+ <!-- <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="角色">角色</nz-form-label>
+ <nz-form-control>
+ <nz-select formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple">
+ <nz-option *ngFor="let item of listOfData" [nzValue]="item.normalizedName"
+ [nzLabel]="item.displayName">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item> -->
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="手机号">手机号</nz-form-label>
+ <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>
\ No newline at end of file
diff --git a/src/app/home/system-management/user/adduser/adduser.component.scss b/src/app/home/system-management/user/adduser/adduser.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/system-management/user/adduser/adduser.component.ts b/src/app/home/system-management/user/adduser/adduser.component.ts
new file mode 100644
index 0000000..fa3827f
--- /dev/null
+++ b/src/app/home/system-management/user/adduser/adduser.component.ts
@@ -0,0 +1,87 @@
+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: [[], [Validators.required]],
+ role2: [[]],
+ phonenum: [null, [Validators.required]]
+ });
+
+ this.getAllRoles()
+ this.getAllRoles2()
+ this.getAllOrganization()
+ }
+ destroyModal(): void {
+ this.modal.destroy({ data: 'this the result data' });
+ }
+
+ listOfData: any[] = [];
+ listOfData2: any[] = [];
+ //获取角色列表
+ getAllRoles() {
+ let params = {
+ SkipCount: '0',
+ MaxResultCount: '999'
+ }
+ this.http.get('/api/services/app/Role/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ // console.log('角色列表', data.result.items)
+ this.listOfData = data.result.items
+ })
+ }
+ //获取角色列表
+ getAllRoles2() {
+ let params = {
+ SkipCount: '0',
+ MaxResultCount: '999',
+ IsViolationRoles:'true'
+ }
+ this.http.get('/api/services/app/Role/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ // console.log('角色列表', data.result.items)
+ this.listOfData2 = data.result.items
+ })
+ }
+ //获取所有组织机构
+ nodes: any = []
+ getAllOrganization() {
+ let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
+ let params = {
+ OrganizationUnitId: OrganizationUnitId,
+ IsContainsChildren: "true"
+ }
+ this.http.get('/api/services/app/Organization/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ data.result.items.forEach(element => {
+ if (element.id == OrganizationUnitId) {
+ element.parentId = null
+ }
+ element.key = element.id
+ element.title = element.displayName
+ });
+ this.nodes = [...this.toTree.toTree(data.result.items)]
+ })
+ }
+}
diff --git a/src/app/home/system-management/user/edituser/edituser.component.html b/src/app/home/system-management/user/edituser/edituser.component.html
new file mode 100644
index 0000000..3dce691
--- /dev/null
+++ b/src/app/home/system-management/user/edituser/edituser.component.html
@@ -0,0 +1,68 @@
+<div class="box">
+ <form nz-form [formGroup]="validateForm">
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="账号">账号</nz-form-label>
+ <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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="姓名">姓名</nz-form-label>
+ <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-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="所属机构">所属机构</nz-form-label>
+ <nz-form-control>
+ <nz-tree-select [nzShowSearch]='true' [nzDropdownClassName]="'maxHeightTreeSelect'"
+ [(ngModel)]="data.organizationUnitId" formControlName="organization" [nzNodes]="nodes"
+ nzPlaceHolder="请选择所属机构" [nzExpandedIcon]="multiExpandedIconTpl">
+ </nz-tree-select>
+ <ng-template #multiExpandedIconTpl let-node let-origin="origin">
+ <ng-container *ngIf="node.children.length == 0; else elseTemplate">
+
+ </ng-container>
+ <ng-template #elseTemplate>
+ <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
+ class="ant-tree-switcher-line-icon"></i>
+ </ng-template>
+ </ng-template>
+ </nz-form-control>
+ </nz-form-item>
+ <!-- <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="角色">角色</nz-form-label>
+ <nz-form-control>
+ <nz-select formControlName="role" nzPlaceHolder="请选择角色" nzMode="multiple">
+ <nz-option *ngFor="let item of listOfData" [nzValue]="item.normalizedName"
+ [nzLabel]="item.displayName">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="预警接收级别">预警接收级别</nz-form-label>
+ <nz-form-control>
+ <nz-select formControlName="role2" nzPlaceHolder="请选择预警接收级别" nzMode="multiple">
+ <nz-option *ngFor="let item of listOfData2" [nzValue]="item.normalizedName"
+ [nzLabel]="item.displayName">
+ </nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item> -->
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="手机号">手机号</nz-form-label>
+ <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>
\ No newline at end of file
diff --git a/src/app/home/system-management/user/edituser/edituser.component.scss b/src/app/home/system-management/user/edituser/edituser.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/home/system-management/user/edituser/edituser.component.ts b/src/app/home/system-management/user/edituser/edituser.component.ts
new file mode 100644
index 0000000..4e3ecdf
--- /dev/null
+++ b/src/app/home/system-management/user/edituser/edituser.component.ts
@@ -0,0 +1,112 @@
+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;
+ @Input() listOfData?: any;
+ @Input() listOfData2?: any;
+ @Input() nodes?: any;
+ validateForm!: FormGroup;
+ constructor(private modal: NzModalRef, private fb: FormBuilder, private http: HttpClient, private toTree: TreeService) { }
+
+ ngOnInit(): void {
+ console.log(this.data)
+ let roleData1 = []
+ let roleData2 = []
+ this.data.roleNames.forEach(element => {
+ if (element.indexOf('LEVEL') != -1) {
+ roleData2.push(element)
+ } else {
+ roleData1.push(element)
+ }
+ });
+ this.validateForm = this.fb.group({
+ account: [null, [Validators.required]],
+ name: [null, [Validators.required]],
+ organization: [null, [Validators.required]],
+ role: [roleData1, [Validators.required]],
+ role2: [roleData2],
+ phonenum: [null, [Validators.required]]
+ });
+ if (this.listOfData.length == 0) {
+ this.getAllRoles()
+ }
+ if (this.listOfData2.length == 0) {
+ this.getAllRoles2()
+ }
+ if (this.nodes.length == 0) {
+ this.getAllOrganization()
+ }
+ }
+
+ destroyModal(): void {
+ this.modal.destroy({ data: 'this the result data' });
+ }
+
+ //获取角色列表
+ async getAllRoles() {
+ let params = {
+ SkipCount: '0',
+ MaxResultCount: '999'
+ }
+ await new Promise<void>((resolve, reject) => {
+ this.http.get('/api/services/app/Role/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ resolve(data)
+ this.listOfData = data.result.items
+ })
+ })
+ }
+
+ //获取角色列表
+ async getAllRoles2() {
+ let params = {
+ SkipCount: '0',
+ MaxResultCount: '999',
+ IsViolationRoles: 'true'
+ }
+ await new Promise<void>((resolve, reject) => {
+ this.http.get('/api/services/app/Role/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ resolve(data)
+ this.listOfData2 = data.result.items
+ })
+ })
+ }
+
+ //获取所有组织机构
+ async getAllOrganization() {
+ let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
+ let params = {
+ OrganizationUnitId: OrganizationUnitId,
+ IsContainsChildren: "true"
+ }
+ await new Promise<void>((resolve, reject) => {
+ this.http.get('/api/services/app/Organization/GetAll', {
+ params: params
+ }).subscribe((data: any) => {
+ data.result.items.forEach(element => {
+ if (element.id == OrganizationUnitId) {
+ element.parentId = null
+ }
+ element.key = element.id
+ element.title = element.displayName
+ });
+ this.nodes = [...this.toTree.toTree(data.result.items)]
+ resolve(data)
+ })
+ })
+ }
+
+}
diff --git a/src/app/home/system-management/user/user.component.html b/src/app/home/system-management/user/user.component.html
index d039bb7..6d4cedc 100644
--- a/src/app/home/system-management/user/user.component.html
+++ b/src/app/home/system-management/user/user.component.html
@@ -1 +1,67 @@
-<p>user works!</p>
+<div class="box">
+ <div class="header">
+ <span>
+ 用户管理
+ </span>
+ </div>
+ <div class="searchbox">
+ <div class="search">
+ <input type="text" nz-input placeholder="用户账号" [(ngModel)]="searchForm.id" />
+ <input type="text" nz-input placeholder="用户姓名" [(ngModel)]="searchForm.name" />
+ <input type="text" nz-input placeholder="所属机构" [(ngModel)]="searchForm.or" />
+ <button nz-button nzType="primary"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
+ <button nz-button nzType="default"><i nz-icon nzType="reload" nzTheme="outline"></i>重置</button>
+ </div>
+
+ <button nz-button nzType="primary" (click)="addUser()"><i nz-icon nzType="plus-circle" nzTheme="outline"></i>创建用户</button>
+ </div>
+ <div class="content">
+ <div class="tablebox">
+ <nz-table nzBordered #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false'
+ [nzPageSize]='16'>
+ <thead>
+ <tr>
+ <th>账号</th>
+ <th>姓名</th>
+ <th [width]="'30%'">角色/预警接收级别</th>
+ <th>所属机构</th>
+ <th>审核状态</th>
+ <th>用户状态</th>
+ <th [width]="'25%'">操作</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of basicTable.data">
+ <td>2</td>
+ <td>3</td>
+ <td nzBreakWord>
+ 4
+ </td>
+ <td>item
+ 5
+ </td>
+ <td>
+ 6
+ </td>
+ <td>
+ 8
+ </td>
+ <td class="operation">
+ <a (click)="editUser(item)">编辑</a>
+ <a (click)="resetPassword(item)">重置密码</a>
+ <a class="green" (click)="cancel(item,true)">启用</a>
+ <!-- <a *ngIf="item.isActive" class="redColor" (click)="cancel(item,false)">禁用</a> -->
+ <a class="red" (click)="delete(item)">删除</a>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ <div class="pagination">
+ <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
+ [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+ </nz-pagination>
+ <ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/home/system-management/user/user.component.scss b/src/app/home/system-management/user/user.component.scss
index e69de29..fa6a0e6 100644
--- a/src/app/home/system-management/user/user.component.scss
+++ b/src/app/home/system-management/user/user.component.scss
@@ -0,0 +1,52 @@
+.box {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ color: #303133;
+
+ .header {
+ width: 100%;
+ height: 56px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+ border-bottom: 1px solid #E4E7EC;
+
+ span {
+ color: #303133;
+ font-weight: 500;
+ font-size: 16px;
+ }
+ }
+
+ .searchbox{
+ height: 70px;
+ display: flex;
+ justify-content: space-between;
+ padding: 0 20px;
+ align-items: center;
+ .search{
+ width: 60%;
+ display: flex;
+ input{
+ margin-right: 16px;
+ }
+ button{
+ margin-right: 16px;
+ }
+ }
+ }
+ .content {
+ flex: 1;
+ box-sizing: border-box;
+ padding: 18px;
+ padding-top: 0px;
+ .operation {
+ a {
+ margin-right: 16px;
+ }
+ }
+ }
+}
diff --git a/src/app/home/system-management/user/user.component.ts b/src/app/home/system-management/user/user.component.ts
index 5df0c83..4672e0a 100644
--- a/src/app/home/system-management/user/user.component.ts
+++ b/src/app/home/system-management/user/user.component.ts
@@ -1,5 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+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';
+import { TreeService } from 'src/app/service/tree.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
@@ -7,9 +14,146 @@ import { Component, OnInit } from '@angular/core';
})
export class UserComponent implements OnInit {
- constructor() { }
-
+ validateForm!: FormGroup;
+ constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService) { }
+ searchForm = {
+ id: '',
+ name: '',
+ or: ''
+ }
+ usersNum
+ loading
+ usersLIst = [1]
ngOnInit(): void {
}
+ pageChange($event) {
+
+ }
+ //新增用户
+ addUser(): void {
+ const modal = this.modal.create({
+ nzTitle: '新增用户',
+ nzContent: AdduserComponent,
+ nzViewContainerRef: this.viewContainerRef,
+ nzWidth: 460,
+ nzMaskClosable: false,
+ nzComponentParams: {
+ title: '',
+ subtitle: ''
+ },
+ nzOnOk: async () => {
+ if (instance.validateForm.valid) {
+ await new Promise(resolve => {
+ let roleNames = [...instance.validateForm.value.role, ...instance.validateForm.value.role2]
+ let body = {
+ userName: instance.validateForm.value.account,
+ name: instance.validateForm.value.name,
+ organizationUnitId: Number(instance.validateForm.value.organization),
+ roleNames: roleNames,
+ phoneNumber: instance.validateForm.value.phonenum,
+ isActive: true
+ }
+ // this.http.post(this.addUrl, body).subscribe(data => {
+ // resolve(data)
+ // this.message.create('success', '创建成功！');
+ // this.SkipCount = 0
+ // this.getAllUsers()
+ // return true
+ // }, err => {
+ // resolve(err)
+ // this.message.create('warning', err.error.error.message);
+ // return false
+ // })
+ })
+ } else {
+ this.message.create('warning', '请填写完整！');
+ return false
+ }
+ }
+ });
+ const instance = modal.getContentComponent();
+ modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
+ modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
+ }
+ //编辑用户
+ editUser(data): void {
+ console.log(data)
+ const modal = this.modal.create({
+ nzTitle: '编辑用户',
+ nzContent: EdituserComponent,
+ nzViewContainerRef: this.viewContainerRef,
+ nzWidth: 460,
+ nzMaskClosable: false,
+ nzComponentParams: {
+ data: data
+ },
+ nzOnOk: async () => {
+ if (instance.validateForm.valid) {
+ await new Promise(resolve => {
+
+ for (let index = 0; index < instance.validateForm.value.role2.length; index++) {
+ const element = instance.validateForm.value.role2[index];
+ if (element.indexOf('HANDLE') != -1) {
+ instance.validateForm.value.role2.splice(index, 1)
+ index--
+ }
+ }
+ let roleNames = [...instance.validateForm.value.role, ...instance.validateForm.value.role2]
+ let body = {
+ id: data.id,
+ userName: instance.validateForm.value.account,
+ name: instance.validateForm.value.name,
+ organizationUnitId: instance.validateForm.value.organization,
+ roleNames: roleNames,
+ phoneNumber: instance.validateForm.value.phonenum,
+ isActive: true
+ }
+ // this.http.put(this.editUrl, 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) {
+ console.log(item)
+ this.modal.confirm({
+ nzTitle: `确定要重置${item.userName}这个账户的密码吗?`,
+ nzOkText: '确定',
+ nzOkType: 'primary',
+ nzOnOk: () => {
+ let body = {
+ userId: item.id
+ }
+ this.http.post('/api/services/app/User/ResetPassword', body).subscribe(data => {
+ this.message.create('success', '重置成功！');
+ })
+ },
+ nzCancelText: '取消',
+ nzOnCancel: () => {
+
+ }
+ });
+ }
+ cancel(item, type) {
+
+ }
+ delete(item) {
+
+ }
}
diff --git a/src/theme.scss b/src/theme.scss
deleted file mode 100644
index 87c3565..0000000
--- a/src/theme.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// -------- 引入官方提供的 less 样式入口文件 -----------
-@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
-
-// -------- 自定义参数覆盖 -----------
-@primary-color : #f5222d;
\ No newline at end of file