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

<div class="userBox" id="userBox">
  <div class="resetPasswordContent" *ngIf="isShowNewPassword" cdkDrag>
    <div class="titlebox">
      <i nz-icon class="move" cdkDragHandle>
        <svg t="1676340756365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2843" width="18" height="18">
          <path
            d="M501.0944 1021.824c6.9376 2.8928 14.8224 2.8928 21.8112 0 3.4304-1.4336 6.528-3.4816 9.1136-6.0672 0.0256 0 0.0768-0.0256 0.0768-0.0256l158.9248-158.9248c11.1104-11.1104 11.1104-29.1328 0-40.2176-11.0848-11.0848-29.0816-11.0848-40.1664 0.0256l-110.4384 110.4128 0.0256-335.36c0-15.6928-12.7232-28.416-28.416-28.416s-28.416 12.6976-28.416 28.3904l0 335.3856-110.4128-110.4128c-11.1104-11.0848-29.1072-11.0848-40.1408 0-11.1104 11.1104-11.136 29.1072-0.0512 40.192l158.9504 158.9248c0.8192 0.8192 1.8944 1.1776 2.816 1.8688C496.7168 1019.1872 498.688 1020.8256 501.0944 1021.824z"
            fill="#272636" p-id="2844"></path>
          <path
            d="M522.9056 2.176c-6.9376-2.8928-14.8224-2.8928-21.7856 0C497.6896 3.584 494.592 5.632 491.9808 8.2176c-0.0256 0-0.0768 0.0512-0.0768 0.0512L332.9792 167.168c-11.1104 11.1104-11.1104 29.1328 0 40.2176 11.0848 11.0848 29.0816 11.0848 40.1664-0.0256l110.4384-110.4128-0.0256 335.36c0 15.6928 12.7232 28.416 28.416 28.416 15.6928 0 28.4416-12.6976 28.4416-28.3904L540.416 96.9472l110.4128 110.4128c11.1104 11.0848 29.1072 11.0848 40.1408 0 11.1104-11.1104 11.1616-29.1072 0.0512-40.192l-158.9504-158.8992c-0.8192-0.8448-1.8944-1.2032-2.816-1.8944C527.2832 4.8128 525.312 3.1744 522.9056 2.176z"
            fill="#272636" p-id="2845"></path>
          <path
            d="M1021.824 522.9056c2.8928-6.9376 2.8928-14.8224 0-21.8112-1.408-3.4304-3.456-6.528-6.0416-9.1136 0-0.0256-0.0512-0.0768-0.0512-0.0768l-158.8992-158.9248c-11.1104-11.1104-29.1584-11.1104-40.2432 0-11.0592 11.0848-11.0592 29.0816 0.0512 40.1664l110.3872 110.4384-335.36-0.0256c-15.6928 0-28.3904 12.7232-28.3904 28.416s12.6976 28.416 28.3904 28.416l335.36 0-110.3872 110.4128c-11.1104 11.1104-11.1104 29.1072 0 40.1408 11.1104 11.1104 29.1072 11.136 40.192 0.0512l158.8992-158.9504c0.8448-0.8192 1.2032-1.8944 1.8944-2.816C1019.1872 527.2832 1020.8256 525.312 1021.824 522.9056z"
            fill="#272636" p-id="2846"></path>
          <path
            d="M2.176 501.0944c-2.8928 6.9376-2.8928 14.8224 0 21.7856 1.408 3.456 3.456 6.5536 6.0416 9.1392l0.0512 0.0512 158.8992 158.9504c11.1104 11.1104 29.1584 11.1104 40.2432 0 11.0592-11.1104 11.0592-29.1072-0.0512-40.192l-110.3872-110.4384 335.36 0.0512c15.6928 0 28.3904-12.7488 28.3904-28.416 0-15.6928-12.6976-28.4416-28.3904-28.4416l-335.36 0.0256 110.3872-110.4128c11.1104-11.1104 11.1104-29.1072 0-40.1408-11.1104-11.1104-29.1072-11.1616-40.192-0.0512l-158.8992 158.9504c-0.8448 0.8192-1.2032 1.8944-1.8944 2.816C4.8128 496.7168 3.1744 498.688 2.176 501.0944z"
            fill="#272636" p-id="2847"></path>
        </svg>
      </i>
      <i (click)="close()" class="close" nz-icon nzType="close" nzTheme="outline"></i>
      <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
      <span class="title">用户{{newPasswordObj.userName}}的密码重置成功</span>
    </div>
    <div class="message">
      当前密码为: {{newPasswordObj.newPassword}}
      <i title="复制密码" (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
    </div>
  </div>
  <div class="orbox">
    <div class="topbox2">
      <div class="lefttop">
        <span>组织机构</span>
      </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">
      组织机构
      <div><label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">是否包含子节点</label>
      </div>
    </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>
        <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 [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false' [nzPageSize]='16'>
        <thead>
          <tr>
            <th></th>
            <th>账号</th>
            <th>姓名</th>
            <th [width]="'30%'">角色/预警接收级别</th>
            <th>所属机构</th>
            <th *ngIf="level == 2">审核状态</th>
            <th>用户状态</th>
            <th [width]="'25%'">操作</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 *ngIf="level == 2">
              {{data.auditStatus | auditStatus}}
            </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 class="operation">
              <a (click)="editUser(data)">编辑</a>
              <a (click)="resetPassword(data)">重置密码</a>
              <a *ngIf="!data.isActive" class="greenColor2" (click)="cancel(data,true)">启用</a>
              <a *ngIf="data.isActive" class="redColor" (click)="cancel(data,false)">停用</a>
              <a class="redColor" (click)="delete(data)">注销</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="pagination">
      <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16"
        [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
      </nz-pagination>
      <ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template>
    </div>
  </div>
</div>