[新增]中台用户绑定

src/app/pages/singlelogin/singlelogin.component.ts

@@ -80,7 +80,7 @@ export class SingleloginComponent implements OnInit {
   getCurrentUserInfo() {
     return new Promise<void>((resolve, reject) => {
       this.http
-        .get("https://test-uomsp.sinochemoilmarketing.com/sagframe-portal/p3p/auth/getCurrentUserInfo", {
+        .get("/p3p/auth/getCurrentUserInfo", {
           params: {
             token: this.sinToken,
           },
@@ -101,7 +101,7 @@ export class SingleloginComponent implements OnInit {
   getAuthOrganInfos() {
     return new Promise<void>((resolve, reject) => {
       this.http
-        .get("https://test-uomsp.sinochemoilmarketing.com/sagframe-portal/p3p/auth/getAuthOrganInfos", {
+        .get("/p3p/auth/getAuthOrganInfos", {
           params: {
             token: this.sinToken,
           },
@@ -298,150 +298,5 @@ export class SingleloginComponent implements OnInit {
     }
     return menuList;
   }
-  isVisible = false;
-  //绑定我们自己的用户弹出框
-  bindingUser() {
-    this.isVisible = true;
-  }
-  handleOk(): void {
-    console.log("Button ok clicked!");
-    this.isVisible = false;
-  }
-
-  handleCancel(): void {
-    console.log("Button cancel clicked!");
-    this.isVisible = false;
-  }
-  level;
-  getAllUrl;
-  CountsByOrganizations;
-  isAdmin: boolean;
-  nzSelectedKeys: any[] = [];
-  defaultExpandedKeys = [];
-  IsContainsChildren = true;
-  searchValue = "";
-  totalCount: string;
-  //获取所有用户
-  usersLIst: any = [];
-  usersNum: string;
-  OrganizationUnitId;
-  loading: boolean;
-  organizationsList = [];
-
-  validateForm!: FormGroup;
-  getAllUsers() {
-    this.loading = true;
-    let params = {
-      Keyword: this.validateForm.value.search
-        ? this.validateForm.value.search
-        : "",
-      SkipCount: String(this.SkipCount),
-      MaxResultCount: String(this.MaxResultCount),
-      OrganizationUnitId: this.OrganizationUnitId,
-      IsContainsChildren: String(this.IsContainsChildren),
-      // Sorting: 'BuildingBasicInfo.Id asc'
-    };
-    this.http
-      .get(this.getAllUrl, {
-        params: params,
-      })
-      .subscribe((data: any) => {
-        this.usersLIst = data.result.items;
-        this.usersNum = data.result.totalCount;
-        this.loading = false;
-      });
-  }
-  SkipCount: number = 0; //0 16 32 48
-  MaxResultCount: number = 16;
-  pageChange($event) {
-    this.SkipCount = ($event - 1) * this.MaxResultCount;
-    this.getAllUsers();
-  }
-
-  //获取所有组织机构
-  nodes: any = [];
-  organization;
-  getAllOrganization() {
-    let OrganizationUnitId =
-      sessionStorage.getItem("isGasStation") == "true"
-        ? JSON.parse(sessionStorage.getItem("userdataOfgasstation"))
-            .organization.id
-        : JSON.parse(sessionStorage.getItem("userdata")).organization.id;
-
-    console.log("OrganizationUnitId", OrganizationUnitId);
-    let params = {
-      OrganizationUnitId: OrganizationUnitId,
-      IsContainsChildren: "true",
-    };
-
-    this.http
-      .get("/api/services/app/Organization/GetAll", {
-        params: params,
-      })
-      .subscribe(async (data: any) => {
-        console.log("获得组织机构", data);
-        this.organization = data.result.items;
-        await this.getCountsOr(data.result.items);
-        this.getAllUsers();
-      });
-  }
-  async getCountsOr(e) {
-    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",
-      IsUsersCountContainsChildren: String(this.IsContainsChildren),
-    };
-    await new Promise<void>((resolve, reject) => {
-      this.http
-        .get(this.CountsByOrganizations, {
-          params: params,
-        })
-        .subscribe((data: any) => {
-          resolve(data);
-          this.organizationsList = data.result;
-          const arrs = e.map((item) => {
-            const data = this.organizationsList.find(
-              (i) => item.id == i.organizationId
-            );
-            return {
-              ...item,
-              products: data ? data : false,
-            };
-          });
-
-          for (let index = 0; index < arrs.length; index++) {
-            if (arrs[index].id == OrganizationUnitId) {
-              arrs[index].parentId = null;
-            }
-            arrs[index].title = arrs[index].displayName;
-            arrs[index].key = arrs[index].id;
-          }
 
-          this.nodes = [...this.toTree.toTree(arrs)];
-          this.defaultExpandedKeys = [this.nodes[0].id];
-          this.nzSelectedKeys = [this.nodes[0].id];
-          this.OrganizationUnitId = [this.nodes[0].id];
-        });
-    });
-  }
-
-  //搜索框提交
-  submitForm(): void {
-    for (const i in this.validateForm.controls) {
-      this.validateForm.controls[i].markAsDirty();
-      this.validateForm.controls[i].updateValueAndValidity();
-    }
-    this.getAllUsers();
-  }
-  nzClick(event: NzFormatEmitEvent) {
-    this.nzSelectedKeys[0] = event.node.origin.id;
-    this.nzSelectedKeys = [...this.nzSelectedKeys];
-    this.OrganizationUnitId = event.node.origin.id;
-    this.getAllUsers();
-  }
 }

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

@@ -67,6 +67,11 @@ export class NavigationComponent implements OnInit {
       url: "/system/algorithm",
       img: "../../../assets/images/icon/license.png",
     },
+    {
+      name: "中台用户绑定",
+      url: "/system/userbinding",
+      img: "../../../assets/images/icon/license.png",
+    },
   ];
 
   name;
@@ -89,7 +94,10 @@ export class NavigationComponent implements OnInit {
       // console.log(this.menuList1);
     }
     for (let index = 0; index < this.menu3.length; index++) {
-      if (JSON.parse(a).userName == "admin") {
+      if (
+        JSON.parse(a).userName == "admin" ||
+        JSON.parse(a).userName == "superadmin"
+      ) {
         this.menuList2 = this.menu3;
       } else {
         for (let k = 0; k < this.tap.length; k++) {

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

@@ -11,6 +11,7 @@ import { UpdateOfLicenseComponent } from "./update-of-license/update-of-license.
 import { FileOfLicenseComponent } from "./file-of-license/file-of-license.component";
 import { MenuComponent } from "./menu/menu.component";
 import { AlgorithmConfigComponent } from "./algorithm-config/algorithm-config.component";
+import { UserBindingComponent } from "./user-binding/user-binding.component";
 const routes: Routes = [
   { path: "organization", component: OrganizationComponent },
   { path: "user", component: UserComponent },
@@ -21,6 +22,7 @@ const routes: Routes = [
   { path: "updateOfLicense", component: UpdateOfLicenseComponent },
   { path: "menu", component: MenuComponent },
   { path: "algorithm", component: AlgorithmConfigComponent },
+  { path: "userbinding", component: UserBindingComponent },
 ];
 
 @NgModule({

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

@@ -50,7 +50,9 @@ import { NzSwitchModule } from "ng-zorro-antd/switch";
 import { NzNotificationModule } from "ng-zorro-antd/notification";
 import { DragDropModule } from "@angular/cdk/drag-drop";
 import { NzToolTipModule } from "ng-zorro-antd/tooltip";
-import { AlgorithmConfigComponent } from './algorithm-config/algorithm-config.component';
+import { AlgorithmConfigComponent } from "./algorithm-config/algorithm-config.component";
+import { UserBindingComponent } from "./user-binding/user-binding.component";
+import { BindingComponent } from "./user-binding/binding/binding.component";
 @NgModule({
   declarations: [
     OrganizationComponent,
@@ -82,6 +84,8 @@ import { AlgorithmConfigComponent } from './algorithm-config/algorithm-config.co
     MenusComponent,
     WarningEventsComponent,
     AlgorithmConfigComponent,
+    UserBindingComponent,
+    BindingComponent,
   ],
   imports: [
     CommonModule,
@@ -107,7 +111,7 @@ import { AlgorithmConfigComponent } from './algorithm-config/algorithm-config.co
     NzSwitchModule,
     NzNotificationModule,
     DragDropModule,
-    NzToolTipModule
+    NzToolTipModule,
   ],
   entryComponents: [
     AdduserComponent,
@@ -129,6 +133,7 @@ import { AlgorithmConfigComponent } from './algorithm-config/algorithm-config.co
     EditmenuComponent,
     MenusComponent,
     WarningEventsComponent,
+    BindingComponent,
   ],
 })
 export class SystemManagementModule {}

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

@@ -0,0 +1,113 @@
+<div class="userBox" id="userBox">
+
+    <div class="orbox">
+        <div class="topbox2">
+            <div class="lefttop">
+                组织机构
+            </div>
+            <div class="righttop">
+                <nz-input-group nzPrefixIcon="search">
+                    <input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" />
+                </nz-input-group>
+            </div>
+        </div>
+
+        <div class="treeTitle">
+            <span>组织机构</span>
+            <label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label>
+        </div>
+        <div class="treebox">
+            <nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes"
+                [nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)"
+                [nzExpandedIcon]="multiExpandedIconTpl" [nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate">
+            </nz-tree>
+            <ng-template #nzTreeTemplate let-node let-origin="origin">
+                <div class="nodebox">
+                    <span class="name">{{ node.title }}</span>
+                    <span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</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>
+
+    </div>
+    <div class="box">
+        <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>
+            </div>
+        </div>
+        <div class="tablebox" #tablebox>
+            <nz-table #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false'
+                [nzPageSize]='16'>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>账号</th>
+                        <th>姓名</th>
+                        <!-- <th>角色/预警接收级别</th> -->
+                        <th [width]="'13%'">所属机构</th>
+                        <th [width]="'8%'">用户状态</th>
+                        <th [width]="'8%'">备注</th>
+                        <th [width]="'10%'">操作</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 nzBreakWord>
+                            <span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span>
+                        </td> -->
+                        <td>
+                            {{data.organizationName}}
+                        </td>
+                        <td>
+                            <ng-container *ngIf="data.isActive; else elseTemplate">
+                                <span class="greenColor2">已启用</span>
+                            </ng-container>
+                            <ng-template #elseTemplate>
+                                <span class="redColor">已停用</span>
+                            </ng-template>
+                        </td>
+                        <td>
+                            {{data.note}}
+                        </td>
+                        <td class="operation">
+                            <span class="blueColor" (click)="okbinding(data)">确认绑定</span>
+                        </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/system-management/user-binding/binding/binding.component.scss

@@ -0,0 +1,223 @@
+.userBox {
+  width: 100%;
+  max-height: 680px;
+  background: #FFFFFF;
+  overflow: hidden;
+  display: flex;
+  position: relative;
+
+  .treebox {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px 0;
+  }
+
+  .topbox2 {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+
+    .lefttop {
+      height: 36px;
+      line-height: 36px;
+      color: #000;
+      margin-right: 10px;
+      font-size: 15px;
+    }
+
+    .righttop {
+      flex: 1;
+      height: 36px;
+      display: flex;
+
+      nz-input-group {
+        height: 36px;
+      }
+    }
+  }
+
+  .orbox {
+    width: 260px;
+    min-width: 250px;
+    overflow-y: auto;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .treeTitle {
+    width: 100%;
+    height: 55px;
+    line-height: 55px;
+    margin-top: 12px;
+    display: flex;
+    justify-content: space-between;
+    color: #000D21;
+    box-sizing: border-box;
+    padding: 0 10px;
+    background: rgba(145, 204, 255, 0.2);
+    border: 1px solid rgba(145, 204, 255, 0.2);
+
+    span {
+      font-size: 14px;
+    }
+
+    div {
+      flex: 1;
+      width: 100px;
+      margin-left: 55px;
+    }
+  }
+
+  .nodebox {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  tbody {
+    tr {
+      td:nth-child(1) {
+        text-align: right;
+      }
+    }
+
+    .operation {
+      i {
+        cursor: pointer;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
+.box {
+  flex: 1;
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.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;
+}
+
+.resetPasswordContent {
+  z-index: 999;
+  width: 380px;
+  height: 138px;
+  position: absolute;
+  left: 30%;
+  top: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-left: 40px;
+  color: #000;
+  border-radius: 5px;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+  background: #fff;
+
+  .titlebox {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    span {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    i {
+      font-size: 26px;
+      margin-right: 6px;
+    }
+
+    .close {
+      position: absolute;
+      right: 2px;
+      top: -22px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+
+    .move {
+      position: absolute;
+      left: -32px;
+      top: -22px;
+      cursor: move;
+    }
+  }
+
+  .message {
+    margin-top: 20px;
+
+    i {
+      cursor: pointer;
+    }
+
+    i:hover {
+      color: #18bb18;
+    }
+  }
+
+}

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

@@ -0,0 +1,205 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  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 { NzMessageService } from "ng-zorro-antd/message";
+import { HttpClient } from "@angular/common/http";
+import { TreeService } from "src/app/service/tree.service";
+import { NzNotificationService } from "ng-zorro-antd/notification";
+@Component({
+  selector: "app-binding",
+  templateUrl: "./binding.component.html",
+  styleUrls: ["./binding.component.scss"],
+})
+export class BindingComponent implements OnInit {
+  @Input() data?: any;
+  validateForm!: FormGroup;
+  constructor(
+    private fb: FormBuilder,
+    private modal: NzModalService,
+    private viewContainerRef: ViewContainerRef,
+    private message: NzMessageService,
+    private http: HttpClient,
+    private toTree: TreeService,
+    private notification: NzNotificationService,
+    private notificationService: NzNotificationService
+  ) {}
+
+  level;
+  getAllUrl;
+  addUrl;
+  editUrl;
+  deleteUrl;
+  CountsByOrganizations;
+  isAdmin: boolean;
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      search: [null],
+    });
+    this.level = JSON.parse(
+      sessionStorage.getItem("userdata")
+    ).organization.level;
+    this.getAllUrl = "/api/services/app/User/GetAll";
+    this.CountsByOrganizations =
+      "/api/services/app/User/GetCountsByOrganizations";
+    this.getAllOrganization();
+  }
+  nzSelectedKeys: any[] = [];
+  defaultExpandedKeys = [];
+  IsContainsChildren = true;
+  searchValue = "";
+  totalCount: string;
+  //获取所有用户
+  usersLIst: any = [];
+  usersNum: string;
+  OrganizationUnitId;
+  loading: boolean;
+  organizationsList = [];
+  getAllUsers() {
+    this.loading = true;
+    let params = {
+      Keyword: this.validateForm.value.search
+        ? this.validateForm.value.search
+        : "",
+      SkipCount: String(this.SkipCount),
+      MaxResultCount: String(this.MaxResultCount),
+      OrganizationUnitId: this.OrganizationUnitId,
+      IsContainsChildren: String(this.IsContainsChildren),
+      // Sorting: 'BuildingBasicInfo.Id asc'
+    };
+    this.http
+      .get(this.getAllUrl, {
+        params: params,
+      })
+      .subscribe((data: any) => {
+        this.usersLIst = data.result.items;
+        this.usersNum = data.result.totalCount;
+        this.loading = false;
+      });
+  }
+  SkipCount: number = 0; //0 16 32 48
+  MaxResultCount: number = 16;
+  pageChange($event) {
+    this.SkipCount = ($event - 1) * this.MaxResultCount;
+    this.getAllUsers();
+  }
+
+  //获取所有组织机构
+  nodes: any = [];
+  organization;
+  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(async (data: any) => {
+          this.organization = data.result.items;
+          await this.getuser(data.result.items);
+          resolve(data);
+          this.getAllUsers();
+        });
+    });
+  }
+  async getuser(e) {
+    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",
+      IsUsersCountContainsChildren: String(this.IsContainsChildren),
+    };
+    await new Promise<void>((resolve, reject) => {
+      this.http
+        .get(this.CountsByOrganizations, {
+          params: params,
+        })
+        .subscribe((data: any) => {
+          resolve(data);
+          this.organizationsList = data.result;
+          const arrs = e.map((item) => {
+            const data = this.organizationsList.find(
+              (i) => item.id == i.organizationId
+            );
+            return {
+              ...item,
+              products: data ? data : false,
+            };
+          });
+
+          for (let index = 0; index < arrs.length; index++) {
+            if (arrs[index].id == OrganizationUnitId) {
+              arrs[index].parentId = null;
+            }
+            arrs[index].title = arrs[index].displayName;
+            arrs[index].key = arrs[index].id;
+          }
+
+          this.nodes = [...this.toTree.toTree(arrs)];
+          this.defaultExpandedKeys = [this.nodes[0].id];
+          this.nzSelectedKeys = [this.nodes[0].id];
+          this.OrganizationUnitId = [this.nodes[0].id];
+        });
+    });
+  }
+
+  //搜索框提交
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    this.getAllUsers();
+  }
+  nzClick(event: NzFormatEmitEvent) {
+    this.nzSelectedKeys[0] = event.node.origin.id;
+    this.nzSelectedKeys = [...this.nzSelectedKeys];
+    this.OrganizationUnitId = event.node.origin.id;
+    this.getAllUsers();
+  }
+  okbinding(item) {
+    this.modal.confirm({
+      nzTitle: "确定要绑定到此本地用户吗?",
+      nzOkText: "确定",
+      nzOkType: "primary",
+      nzOnOk: () => {
+        this.http
+          .post("/api/services/app/User/SetSinochemUserLocal", null, {
+            params: {
+              sinochemUserId: this.data.userId,
+              localUserId: item.id,
+            },
+          })
+          .subscribe(() => {
+            this.message.create("success", "绑定成功");
+          });
+      },
+      nzCancelText: "取消",
+      nzOnCancel: () => console.log("Cancel"),
+    });
+  }
+}

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

@@ -0,0 +1,99 @@
+<div class="userBox" id="userBox">
+
+  <!-- <div class="orbox">
+      <div class="topbox2">
+        <div class="lefttop">
+          组织机构
+        </div>
+        <div class="righttop">
+          <nz-input-group nzPrefixIcon="search">
+            <input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" />
+          </nz-input-group>
+        </div>
+      </div>
+  
+      <div class="treeTitle">
+        <span>组织机构</span>
+        <label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label>
+      </div>
+      <div class="treebox">
+        <nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandedKeys]="defaultExpandedKeys"
+          [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" [nzExpandedIcon]="multiExpandedIconTpl"
+          [nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate">
+        </nz-tree>
+        <ng-template #nzTreeTemplate let-node let-origin="origin">
+          <div class="nodebox">
+            <span class="name">{{ node.title }}</span>
+            <span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</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>
+  
+    </div> -->
+  <div class="box">
+    <div class="topbox">
+      <div class="lefttop">
+        <span>中台用户列表</span>
+        <span><i nz-icon nzType="search"></i> {{listConfig.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" />
+              </nz-input-group>
+            </nz-form-control>
+            <button style="display: none;" type="submit"></button>
+          </nz-form-item>
+        </form>
+      </div>
+    </div>
+    <div class="tablebox" #tablebox>
+      <nz-table #basicTable [nzLoading]="listConfig.loading" [nzData]="listConfig.usersLIst" [nzShowPagination]='false'
+        [nzPageSize]='16'>
+        <thead>
+          <tr>
+            <th></th>
+            <th>账号</th>
+            <th>账号id</th>
+            <th>绑定的本地用户id</th>
+            <th [width]="'8%'">备注</th>
+            <th [width]="'10%'">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let data of basicTable.data">
+            <td><img src="../../../assets/images/user.png" alt=""></td>
+            <td>{{ data.loginName }}</td>
+            <td>{{ data.userId }}</td>
+            <td>
+              {{data.localUserId}}
+            </td>
+            <td>
+              {{data.detail}}
+            </td>
+            <td class="operation">
+              <span class="blueColor" (click)="binding(data)">绑定本地用户</span>
+            </td>
+          </tr>
+        </tbody>
+      </nz-table>
+    </div>
+    <div class="pagination">
+      <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="listConfig.totalCount" [nzPageSize]="16"
+        [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
+      </nz-pagination>
+      <ng-template #totalTemplate let-total> 16条/页,共{{listConfig.totalCount}}条 </ng-template>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,172 @@
+.userBox {
+    width: 100%;
+    height: 100%;
+    background: #FFFFFF;
+    box-sizing: border-box;
+    padding: 20px;
+    overflow: hidden;
+    display: flex;
+    position: relative;
+  
+    .treebox {
+      display: flex;
+      flex: 1;
+      overflow: auto;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding: 10px 0;
+    }
+  
+    .check {
+      width: 100%;
+      float: right;
+    }
+  
+    .topbox2 {
+      width: 100%;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+  
+      .lefttop {
+        height: 36px;
+        line-height: 36px;
+        color: #000;
+        margin-right: 10px;
+        font-size: 15px;
+      }
+  
+      .righttop {
+        flex: 1;
+        height: 36px;
+        display: flex;
+  
+        nz-input-group {
+          height: 36px;
+        }
+      }
+    }
+  
+    .orbox {
+      width: 260px;
+      min-width: 250px;
+      overflow-y: auto;
+      margin-right: 10px;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    .treeTitle {
+      width: 100%;
+      height: 55px;
+      line-height: 55px;
+      margin-top: 12px;
+      display: flex;
+      justify-content: space-between;
+      color: #000D21;
+      box-sizing: border-box;
+      padding: 0 10px;
+      background: rgba(145, 204, 255, 0.2);
+      border: 1px solid rgba(145, 204, 255, 0.2);
+  
+      span {
+        font-size: 14px;
+      }
+  
+      div {
+        flex: 1;
+        width: 100px;
+        margin-left: 55px;
+      }
+    }
+  
+    .nodebox {
+      display: flex;
+      justify-content: space-between;
+    }
+  
+    tbody {
+      tr {
+        td:nth-child(1) {
+          text-align: right;
+        }
+      }
+  
+      .operation {
+        i {
+          cursor: pointer;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  
+  .box {
+    flex: 1;
+    // overflow: auto;
+    padding-top: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  
+  .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;
+    overflow: 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-binding/user-binding.component.ts

@@ -0,0 +1,104 @@
+import {
+  Component,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+} from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { NzFormatEmitEvent } from "ng-zorro-antd/tree";
+import { NzModalService } from "ng-zorro-antd/modal";
+import { NzMessageService } from "ng-zorro-antd/message";
+import { HttpClient } from "@angular/common/http";
+import { TreeService } from "src/app/service/tree.service";
+import { NzNotificationService } from "ng-zorro-antd/notification";
+import { BindingComponent } from "./binding/binding.component";
+@Component({
+  selector: "app-user-binding",
+  templateUrl: "./user-binding.component.html",
+  styleUrls: ["./user-binding.component.scss"],
+})
+export class UserBindingComponent implements OnInit {
+  validateForm!: FormGroup;
+  constructor(
+    private fb: FormBuilder,
+    private http: HttpClient,
+    private toTree: TreeService,
+    private modal: NzModalService,
+    private viewContainerRef: ViewContainerRef
+  ) {}
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      search: [null],
+    });
+
+    this.getAllUsers();
+    // this.getAllOrganization();
+  }
+
+  listConfig = {
+    loading: false,
+    usersLIst: [],
+    totalCount: 0,
+    IsContainsChildren: true,
+    searchValue: "",
+    OrganizationUnitId: "",
+  };
+  getAllUsers() {
+    this.listConfig.loading = true;
+    let params = {
+      Keyword: this.validateForm.value.search
+        ? this.validateForm.value.search
+        : "",
+      SkipCount: String(this.SkipCount),
+      MaxResultCount: String(this.MaxResultCount),
+      // OrganizationUnitId: this.OrganizationUnitId,
+      // IsBindingLocal: true,
+      // IsActive:true,
+      // IsContainsChildren: String(this.listConfig.IsContainsChildren),
+    };
+    this.http
+      .get(this.getAllUrl, {
+        params: params,
+      })
+      .subscribe((data: any) => {
+        console.log("中台用户列表", data);
+        this.listConfig.usersLIst = data.result.items;
+        this.listConfig.totalCount = data.result.totalCount;
+        this.listConfig.loading = false;
+      });
+  }
+  SkipCount: number = 0; //0 16 32 48
+  MaxResultCount: number = 16;
+  pageChange($event) {
+    this.SkipCount = ($event - 1) * this.MaxResultCount;
+    this.getAllUsers();
+  }
+  getAllUrl = "/api/services/app/User/GetSinochemUsers";
+
+  //搜索框提交
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    this.getAllUsers();
+  }
+
+  binding(data) {
+    const modal = this.modal.create({
+      nzTitle: "绑定本地用户",
+      nzContent: BindingComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzWidth: 1500,
+      nzFooter: null,
+      nzMaskClosable: false,
+      nzComponentParams: {
+        data: JSON.parse(JSON.stringify(data)),
+      },
+    });
+    const instance = modal.getContentComponent();
+    modal.afterClose.subscribe((result) => this.getAllUsers());
+  }
+}

src/theme.less

@@ -665,9 +665,11 @@
   }
 }
 
+#userBox {
+  .ant-modal-close-x {
+    color: #000;
+  }
 
-.ant-modal-close-x {
-  color: #fff;
 }
 
 .maxHeightTreeSelect {