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

<div class="userBox" id="userBox">
  <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>
              <ng-template #newPassword let-fruit="data">
                <div class="resetPasswordContent">
                  <div class="titlebox">
                    <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
                    <span class="title">用户{{fruit.userName}}的密码重置成功</span>
                  </div>
                  <div class="message">
                    当前密码为: {{fruit.newPassword}}
                    <i title="复制密码" (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
                  </div>
                </div>
              </ng-template>
              <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>