Merge branch 'master' of http://121.36.37.70:3000/shaojiahao/Jinan_project

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';
 import { AddUnitComponent } from './basic-info/add-unit/add-unit.component';
 @NgModule({
   declarations: [
@@ -58,6 +64,10 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component';
     StationWeeklyPlanComponent,
     AddroleComponent,
     EditroleComponent,
+    AdduserComponent,
+    EdituserComponent,
+    AddorComponent,
+    EditorComponent,
     AddUnitComponent
   ],
   imports: [
@@ -77,8 +87,10 @@ import { AddUnitComponent } from './basic-info/add-unit/add-unit.component';
     ReactiveFormsModule,
     NzModalModule,
     NzMessageModule,
-    NzInputModule
+    NzInputModule,
+    NzPaginationModule,
+    NzTreeModule
   ],
-  entryComponents: [AddroleComponent, EditroleComponent]
+  entryComponents: [AddroleComponent, EditroleComponent, AdduserComponent, EdituserComponent, AddorComponent, EditorComponent]
 })
 export class HomeModule { }

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;
     }
 
   }

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>

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' });
+  }
+
+
+}

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>

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' });
+  }
+
+
+}

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>

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;
+  }
+
+}

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)
+    }
+  }
 }

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>

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)]
+    })
+  }
+}

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>

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)
+      })
+    })
+  }
+
+}

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>

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;
+      }
+    }
+  }
+}

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) {
+
+  }
+}

src/theme.scss

@@ -1,5 +0,0 @@
-// -------- 引入官方提供的 less 样式入口文件 -----------
-@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
-
-// -------- 自定义参数覆盖 -----------
-@primary-color          : #f5222d;