[完善]完善系统管理，剩余对接接口

src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@@ -1,4 +1,4 @@
-<div class="recordsbox">
+<div class="recordsboxadmin" id="recordsboxadmin"> 
   <div class="search">
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item class="searchParams">

src/app/pages/criminal-records/criminal-records.component.html

@@ -1,4 +1,4 @@
-<div class="recordsbox">
+<div class="recordsbox" id="recordsbox">
   <div class="search">
     <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
       <nz-form-item class="searchParams">

src/app/pages/equipment-info/equipment-info.component.html

@@ -0,0 +1 @@
+<p>equipment-info works!</p>

src/app/pages/equipment-info/equipment-info.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-equipment-info',
+  templateUrl: './equipment-info.component.html',
+  styleUrls: ['./equipment-info.component.scss']
+})
+export class EquipmentInfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/pages/home/home.component.html

@@ -12,6 +12,12 @@
         <li [routerLink]="['/home/records/admin']"  routerLinkActive="router-link-active">
             违规记录
         </li>
+        <!-- <li [routerLink]="['/home/equipmentInfo']"  routerLinkActive="router-link-active">
+            器材信息
+        </li>
+        <li [routerLink]="['/home/oliStationInfo']"  routerLinkActive="router-link-active">
+            基本信息
+        </li> -->
     </div>
     <div class="content">
         <router-outlet></router-outlet>

src/app/pages/oil-station-info/oil-station-info.component.html

@@ -0,0 +1 @@
+<p>oil-station-info works!</p>

src/app/pages/oil-station-info/oil-station-info.component.ts

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

src/app/pages/pages-routing.module.ts

@@ -6,13 +6,18 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
 import {AuthGuard} from '../auth.guard'
 import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
 import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
+import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
+import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
 
 const routes: Routes = [
     { path: 'plan', component: PlanComponent , data: { permission: 'xxxx' },canActivate: [AuthGuard]},
     { path: 'warning/petrolStation', component: TodayWarningComponent },
     { path: 'warning/admin', component: TodayWarningAdminComponent },
     { path: 'records/petrolStation', component: CriminalRecordsComponent },
-    { path: 'records/admin', component: CriminalRecordsAdminComponent }
+    { path: 'records/admin', component: CriminalRecordsAdminComponent },
+    { path: 'equipmentInfo', component: EquipmentInfoComponent },
+    { path: 'oliStationInfo', component: OilStationInfoComponent }
+   
 ];
 
 @NgModule({

src/app/pages/pages.module.ts

@@ -31,8 +31,10 @@ import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
 import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
+import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
+import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
 @NgModule({
-  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent,],
+  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, EquipmentInfoComponent, OilStationInfoComponent,],
   imports: [
     PagesRoutingModule,
     CommonModule,

src/app/pages/today-warning-admin/today-warning-admin.component.html

@@ -1,4 +1,4 @@
-<div class="warningbox">
+<div class="warningbox" id="warningboxadmin">
   <div class="title">
     <app-title [name]="'当日违规事件列表'"></app-title>
   </div>

src/app/pages/today-warning-admin/today-warning-admin.component.scss

@@ -35,7 +35,8 @@
       }
 
       nz-select {
-        color: rgba(145, 204, 255, 0.95);;
+        color: rgba(145, 204, 255, 0.95);
+        ;
       }
 
       nz-date-picker {
@@ -91,6 +92,7 @@
         text-overflow: ellipsis;
         display: flex;
         align-items: center;
+
         button {
           font-size: 15px;
           background-color: #013064;
@@ -110,9 +112,11 @@
         text-align: center;
         margin-left: 8px;
       }
+
       .propsm1 {
         background: #2399FF;
       }
+
       .propsm2 {
         background: #FF9963;
       }
@@ -126,32 +130,6 @@
       color: #23D9FF;
     }
   }
-}
-
-
-//遮罩层
-::ng-deep .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
-::ng-deep .ant-modal-body {
-  background: #072549;
-  height: 660px;
-  padding: 5px;
-  // border: 1px solid #8eb9e3;
-  box-shadow: 0 0 3px #8eb9e3;
-  color: #fff;
-}
-
-::ng-deep .ant-modal-close-x {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  color: white;
-}
 
-::ng-deep .vertical-center-modal .ant-modal {
-  top: 0;
 }

src/app/pages/today-warning/today-warning.component.html

@@ -1,4 +1,4 @@
-<div class="warningbox">
+<div class="warningbox" id="warningbox">
   <div class="title">
     <app-title [name]="'当日违规事件列表'"></app-title>
   </div>

src/app/pages/today-warning/today-warning.component.scss

@@ -99,30 +99,3 @@
   }
 }
 
-
-//遮罩层
-::ng-deep .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-::ng-deep .ant-modal-body {
-  background: #072549;
-  height: 660px;
-  padding: 5px;
-  // border: 1px solid #8eb9e3;
-  box-shadow: 0 0 3px #8eb9e3;
-  color: #fff;
-}
-
-::ng-deep .ant-modal-close-x {
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  color: white;
-}
-
-::ng-deep .vertical-center-modal .ant-modal {
-  top: 0;
-}

src/app/service/tree.service.ts

@@ -18,13 +18,13 @@ export class TreeService {
                     parentNode.children = []
                 }
 
-                if (parentNode.children.length == 0) {
+                // if (parentNode.children.length == 0) {
-                    item.isTop = true;
+                //     item.isTop = true;
-                } else {
+                // } else {
-                    item.isTop = false;
+                //     item.isTop = false;
-                    parentNode.children[parentNode.children.length -1].isBottom = false;
+                //     parentNode.children[parentNode.children.length -1].isBottom = false;
-                }
+                // }
-                item.isBottom = true;
+                // item.isBottom = true;
 
                 parentNode.children.push(item)
             }else{

src/app/system-management/navigation/navigation.component.html

@@ -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>

src/app/system-management/navigation/navigation.component.scss

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

src/app/system-management/navigation/navigation.component.ts

@@ -11,5 +11,7 @@ export class NavigationComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
+  signOut() {
+    // history.go(-1);
+  }
 }

src/app/system-management/organization/addor/addor.component.html

@@ -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>

src/app/system-management/organization/addor/addor.component.ts

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

src/app/system-management/organization/editor/editor.component.html

@@ -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>

src/app/system-management/organization/editor/editor.component.ts

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

src/app/system-management/organization/organization.component.html

@@ -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>

src/app/system-management/organization/organization.component.scss

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

src/app/system-management/organization/organization.component.ts

@@ -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 {
-
+  validateForm!: FormGroup;
-  constructor() { }
+  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: () => {
+
+      }
+    });
+  }
 }

src/app/system-management/role/addrole/addrole.component.html

@@ -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>

src/app/system-management/role/addrole/addrole.component.ts

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

src/app/system-management/role/editrole/editrole.component.html

@@ -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>

src/app/system-management/role/editrole/editrole.component.ts

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

src/app/system-management/role/role.component.html

@@ -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>

src/app/system-management/role/role.component.scss

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

src/app/system-management/role/role.component.ts

@@ -1,5 +1,11 @@
-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 { NzMessageService } from 'ng-zorro-antd/message';
+import { HttpClient } from '@angular/common/http';
+import { AddroleComponent } from './addrole/addrole.component';
+import { EditroleComponent } from './editrole/editrole.component';
 @Component({
   selector: 'app-role',
   templateUrl: './role.component.html',
@@ -7,9 +13,126 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RoleComponent implements OnInit {
 
-  constructor() { }
+
+  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }
 
   ngOnInit(): void {
+    this.getAllRoles()
+  }
+
+  listOfData: any[] = [];
+
+  //获取角色列表
+
+  getAllRoles() {
+    this.http.get('/api/services/app/Role/GetAll').subscribe((data: any) => {
+      console.log('角色列表', data.result.items)
+      this.listOfData = data.result.items
+    })
+  }
+
+  addRole(): void {
+    const modal = this.modal.create({
+      nzTitle: '新增角色',
+      nzContent: AddroleComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {},
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let arr = []
+            instance.validateForm.value.power.forEach(element => {
+              arr.push(element.name)
+            });
+            let body = {
+              name: instance.validateForm.value.name,
+              DisplayName: instance.validateForm.value.name,
+              grantedPermissions: arr
+            }
+            this.http.post('/api/services/app/Role/Create', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '创建成功！');
+              this.getAllRoles()
+              return true
+            })
+          })
+        } 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));
   }
 
+
+  edit(item) {
+    const modal = this.modal.create({
+      nzTitle: '编辑角色',
+      nzContent: EditroleComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 288,
+      nzComponentParams: {
+        data: item
+      },
+      nzOnOk: async () => {
+        if (instance.validateForm.valid) {
+          await new Promise(resolve => {
+            console.log('表单信息', instance.validateForm)
+            let arr = []
+            instance.validateForm.value.power.forEach(element => {
+              arr.push(element.name ? element.name : element)
+            });
+            let body = {
+              id: item.id,
+              name: instance.validateForm.value.name,
+              DisplayName: instance.validateForm.value.name,
+              grantedPermissions: arr
+            }
+            this.http.put('/api/services/app/Role/Update', body).subscribe(data => {
+              resolve(data)
+              this.message.create('success', '修改成功！');
+              this.getAllRoles()
+              return true
+            })
+          })
+        } 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));
+  }
+
+  delete(item) {
+    console.log(item)
+    this.modal.confirm({
+      nzTitle: `确定要删除${item.name}这个角色吗?`,
+      nzOkText: '确定',
+      nzOkType: 'danger',
+      nzOnOk: () => {
+        this.http.delete('/api/services/app/Role/Delete', {
+          params: {
+            Id: item.id
+          }
+        }).subscribe(data => {
+          this.message.create('success', '删除成功！');
+          this.getAllRoles()
+        })
+      },
+      nzCancelText: '取消',
+      nzOnCancel: () => {
+
+      }
+    });
+  }
 }

src/app/system-management/system-management-routing.module.ts

@@ -1,14 +1,15 @@
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 
-import {AuthGuard} from '../auth.guard'
+import { AuthGuard } from '../auth.guard'
+import { RoleComponent } from './role/role.component';
+import { OrganizationComponent } from './organization/organization.component';
+import { UserComponent } from './user/user.component';
 
 const routes: Routes = [
-    // { path: 'plan', component: PlanComponent },
+    { path: 'organization', component: OrganizationComponent },
-    // { path: 'warning/petrolStation', component: TodayWarningComponent },
+    { path: 'user', component: UserComponent },
-    // { path: 'warning/admin', component: TodayWarningAdminComponent },
+    { path: 'role', component: RoleComponent }
-    // { path: 'records/petrolStation', component: CriminalRecordsComponent },
-    // { path: 'records/admin', component: CriminalRecordsAdminComponent }
 ];
 
 @NgModule({

src/app/system-management/system-management.module.ts

@@ -5,14 +5,50 @@ import { OrganizationComponent } from './organization/organization.component';
 import { UserComponent } from './user/user.component';
 import { RoleComponent } from './role/role.component';
 import { NavigationComponent } from './navigation/navigation.component';
-
+import { NzLayoutModule } from 'ng-zorro-antd/layout';
-
+import { NzIconModule } from 'ng-zorro-antd/icon';
-
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzPaginationModule } from 'ng-zorro-antd/pagination';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { AdduserComponent } from './user/adduser/adduser.component';
+import { EdituserComponent } from './user/edituser/edituser.component';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzMessageModule } from 'ng-zorro-antd/message';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
+import { AddroleComponent } from './role/addrole/addrole.component';
+import { EditroleComponent } from './role/editrole/editrole.component';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+import { AddorComponent } from './organization/addor/addor.component';
+import { EditorComponent } from './organization/editor/editor.component';
 @NgModule({
-  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent],
+  declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent],
   imports: [
     CommonModule,
-    SystemRoutingModule
+    SystemRoutingModule,
-  ]
+    NzLayoutModule,
+    NzIconModule,
+    NzTableModule,
+    NzDropDownModule,
+    NzPaginationModule,
+    NzInputModule,
+    NzButtonModule,
+    NzFormModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NzModalModule,
+    NzSelectModule,
+    NzMessageModule,
+    NzTreeModule,
+    NzSpinModule,
+    NzTreeSelectModule
+  ],
+  entryComponents :[AdduserComponent,EdituserComponent,AddroleComponent,EditroleComponent,AddorComponent,EditorComponent]
+  
 })
 export class SystemManagementModule { }

src/app/system-management/user/adduser/adduser.component.html

@@ -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>

src/app/system-management/user/adduser/adduser.component.ts

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

src/app/system-management/user/edituser/edituser.component.html

@@ -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>

src/app/system-management/user/edituser/edituser.component.ts

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

src/app/system-management/user/user.component.html

@@ -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>

src/app/system-management/user/user.component.scss

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

src/app/system-management/user/user.component.ts

@@ -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 {
-
+  validateForm!: FormGroup;
-  constructor() { }
+  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: () => {
+
+      }
+    });
+  }
 }

src/app/ui/tabbar/tabbar.component.html

@@ -16,7 +16,9 @@
     </a>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
-        <li nz-menu-item (click)="system()">系统管理</li>
+        <li nz-menu-item (click)="navChange('/home/oliStationInfo')">基本信息</li>
+        <li nz-menu-item (click)="navChange('/home/equipmentInfo')">器材信息</li>
+        <li nz-menu-item (click)="navChange('/system/organization')">系统管理</li>
         <li nz-menu-item (click)="signOut()">退出系统</li>
       </ul>
     </nz-dropdown-menu>

src/app/ui/tabbar/tabbar.component.ts

@@ -59,9 +59,12 @@ export class TabbarComponent implements OnInit {
     this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
     this.router.navigate(['/login'])
   }
-  system(){
+
-    this.router.navigate(['/system'])
+  navChange(router){
+    this.router.navigate([router])
   }
+
+  
   //修改密码
   changpsw() {
     // let dialogRef = this.dialog.open(ChangepasswordComponent, { width: '348.000051px' });

src/styles.scss

@@ -102,15 +102,5 @@ h1 {
   font-size: 16px;
 }
 
-//滚动条样式
-::-webkit-scrollbar {
-  width: 10px;
-}
-::-webkit-scrollbar-thumb {
-  background-image: linear-gradient(#2495f8, #1c73c2,#0a3d6a, #061d3c);
-}
-::-webkit-scrollbar-track {
-  background-color: #061d3c;
-}
 
 

src/theme.less

@@ -1,61 +1,31 @@
 @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
 
-// @component-background: #002552;
 
 
-
-@border-color-base: #91CCFF;
-
-@select-background: transparent;
-
-.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
-.ant-picker,
-.ant-btn {
-  border-radius: 0px;
-}
-.ant-btn:hover, .ant-btn:focus, .ant-btn:active, .ant-btn.active{
-  // background: #083461;
-}
-//select picker 小剪头
-.ant-select-arrow,
-.ant-picker-separator {
-  color: #36A2FF;
-}
-
-//日期选择器
-@input-placeholder-color: #345d85;
-
-.ant-picker-suffix,
-.ant-picker-input>input {
-  color: rgba(145, 204, 255, 0.95);
-}
-
-
-
-//弹窗遮罩层
-.ant-modal-mask {
-  background: rgba(0, 0, 0, 0.05);
-}
-
 //分页器
-.ant-pagination-total-text,
+#recordsboxadmin,
-.ant-pagination-options-quick-jumper {
+#recordsbox {
+
+  .ant-pagination-total-text,
+  .ant-pagination-options-quick-jumper {
     color: white
-}
+  }
 
-.ant-pagination-item a,
+  .ant-pagination-item a,
-.ant-pagination-prev .ant-pagination-item-link,
+  .ant-pagination-prev .ant-pagination-item-link,
-.ant-pagination-next .ant-pagination-item-link,
+  .ant-pagination-next .ant-pagination-item-link,
-.ant-pagination-options-quick-jumper input {
+  .ant-pagination-options-quick-jumper input {
     color: white;
     background: #0e2f4e;
-}
+  }
 
-.ant-pagination-item-active a {
+  .ant-pagination-item-active a {
     background: #107495;
+  }
 }
 
 
+
 //查询重置按钮
 .submit {
   background: rgba(0, 129, 255, 0.61);
@@ -156,3 +126,111 @@
     -webkit-font-size: 16px !important;
   }
 }
+
+//表格
+#userBox,
+#roleBox {
+  .ant-table-thead>tr>th {
+    background: rgba(145, 204, 255, 0.15);
+  }
+}
+
+@select-background: transparent;
+@border-color-base: #91CCFF;
+
+//日期选择器
+// @input-placeholder-color: #345d85;
+#recordsboxadmin,
+#recordsbox,
+#warningbox,
+#warningboxadmin {
+  ::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #345d85;
+  }
+
+  //滚动条样式
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-image: linear-gradient(#2495f8, #1c73c2, #0a3d6a, #061d3c);
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #061d3c;
+  }
+
+
+
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
+  .ant-picker,
+  .ant-btn {
+    border-radius: 0px;
+  }
+
+  //select picker 小剪头
+  .ant-select-arrow,
+  .ant-picker-separator {
+    color: #36A2FF;
+  }
+
+  //日期选择器
+  // @input-placeholder-color: #345d85;
+
+  .ant-picker-suffix,
+  .ant-picker-input>input {
+    color: rgba(145, 204, 255, 0.95);
+  }
+
+
+  //弹窗遮罩层
+  .ant-modal-mask {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  //遮罩层
+  .vertical-center-modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ant-modal-body {
+    background: #072549;
+    height: 660px;
+    padding: 5px;
+    // border: 1px solid #8eb9e3;
+    box-shadow: 0 0 3px #8eb9e3;
+    color: #fff;
+  }
+
+  .ant-modal-close-x {
+    width: 36px;
+    height: 36px;
+    line-height: 36px;
+    color: white;
+  }
+
+  .vertical-center-modal .ant-modal {
+    top: 0;
+  }
+}
+
+// //弹窗遮罩层
+// .ant-modal-mask {
+//   background: rgba(0, 0, 0, 0.05);
+// }
+
+
+#orbox {
+  nz-tree {
+    width: 660px;
+  }
+
+  nz-tree-node {
+    position: relative;
+  }
+}