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

<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 style="width:45%;">角色</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 nzBreakWord>
            <span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span>
          </td>
          <td>
            <!-- <div class="ortype">
              自营
            </div> -->
            {{data.organizationName}}
          </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]="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>