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 class="icon" 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.title}}</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">
        组织机构
      </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>
        <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>角色/预警接收级别</th>
            <th [width]="'13%'">所属机构</th>
            <th [width]="'10%'" *ngIf="level == 2">审核状态</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 *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>
              {{data.note}}
            </td>
            <td class="operation">
              <i class="blueColor" nz-icon nzType="form" nzTheme="outline" (click)="editUser(data)" nz-tooltip
                nzTooltipTitle="编辑"></i>
              <i nz-icon nz-tooltip nzTooltipTitle="重置密码" (click)="resetPassword(data)">
                <svg width="14" height="14">
                  <path
                    d="M766.598 75.624c-112.55-65.312-250.07-87.553-385.693-51.212C110.437 96.883-50.07 374.89 22.4 645.357c72.472 270.468 350.479 430.975 620.946 358.504 270.467-72.472 430.975-350.479 358.503-620.946-0.211-0.789-0.424-1.577-0.639-2.363h-62.505a454.786 454.786 0 0 1 5.189 17.892c63.895 238.46-77.618 483.566-316.077 547.461-238.46 63.895-483.566-77.617-547.461-316.077-63.895-238.46 77.617-483.566 316.077-547.46 119.62-32.053 240.912-12.416 340.164 45.217l-42.383 73.409 217.66-6.997L809.104 2l-42.507 73.624z"
                    fill="#36A2FF" p-id="2327"></path>
                  <path
                    d="M442 447h140v-70c0-38.66-31.34-70-70-70s-70 31.34-70 70v70z m44 186.012V716h52v-82.988c25.786-10.321 44-35.54 44-65.012 0-38.66-31.34-70-70-70s-70 31.34-70 70c0 29.472 18.214 54.69 44 65.012zM390 447v-70c0-67.379 54.621-122 122-122 67.379 0 122 54.621 122 122v70h37c18.778 0 34 15.222 34 34v252c0 18.778-15.222 34-34 34H353c-18.778 0-34-15.222-34-34V481c0-18.778 15.222-34 34-34h37z"
                    fill="#36A2FF" p-id="2328"></path>
                </svg>
              </i>
              <i *ngIf="!data.isActive" class="greenColor2" nz-icon nzType="stop" nzTheme="outline" nz-tooltip
                nzTooltipTitle="启用" (click)="cancel(data,true)"></i>
              <i *ngIf="data.isActive" class="redColor" nz-icon nzType="stop" nzTheme="outline" nz-tooltip
                nzTooltipTitle="停用" (click)="cancel(data,false)"></i>
              <i class="redColor" nz-icon nzType="poweroff" nzTheme="outline" nz-tooltip nzTooltipTitle="注销"
                (click)="delete(data)"></i>
            </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>