edu-textbook/projects/textbook/src/modules/nav-admin/page-user/page-user.component.html

<nz-page-header>
  <nz-page-header-title
    >用户列表
    <br />
    <div class="subtitle">
      使用“十四五”高等教育国家规划教材申报系统的所有用户，在这里你可以对用户账号进行统一管理。
    </div>
  </nz-page-header-title>
  <nz-page-header-extra>
    <nz-space>
      <button
        style="background: #3e49b3; border: 1px #3e49b3"
        *nzSpaceItem
        nz-button
        nzType="primary"
        (click)="createUser()"
      >
        创建用户
      </button>
    </nz-space>
  </nz-page-header-extra>
</nz-page-header>
<div class="content">
  <!-- <comp-table-list
  #list
  [schema]="_User"
  *ngIf="className && fieldsArray"
  [className]="className"
  [fieldsArray]="fieldsArray"
  [queryParams]="queryParams"
  ></comp-table-list> -->
  <!-- <comp-table-list
    #list
    [schema]="ProfileList"
    *ngIf="className && fieldsArray"
    [className]="className"
    [fieldsArray]="fieldsArray"
    [queryParams]="queryParams"
  ></comp-table-list> -->
  <div class="tool">
    <div class="tool-left">
      <div class="search">
        <nz-input-group style="width: 210px" [nzPrefix]="prefixTemplateUser">
          <input
            type="text"
            nz-input
            placeholder="输入关键词"
            [(ngModel)]="searchValue"
            (ngModelChange)="getProfile()"
          />
        </nz-input-group>
        <ng-template #prefixTemplateUser
          ><span nz-icon nzType="search"></span
        ></ng-template>
      </div>
      <div class=""></div>
    </div>
    <div class="tool-right">
      <!-- <button
        [ngClass]="{ 'form-button': setOfCheckedId.size }"
        nz-button
        [disabled]="!setOfCheckedId.size"
        nzType="primary"
        (click)="createUser()"
      >
        导出
        <span nz-icon nzType="down" nzTheme="outline"></span>
      </button> -->
    </div>
  </div>
  <nz-table
    #tableData
    [nzData]="profiles"
    [nzTotal]="profileLength"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"
    style="margin: 10px 0"
    [nzLoading]="loading"
    nzSize="middle"
    [nzFrontPagination]="false"
    [nzNoResult]="emptyResult"
    nzTableLayout="fixed"
    (nzPageIndexChange)="pageIndexChange($event)"
  >
    <thead>
      <tr>
        <th
          nzWidth="50px"
          nzLeft
          [nzChecked]="checkedAll"
          [nzIndeterminate]="indeterminate"
          nzLabel="Select all"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
        <th nzWidth="120px">用户</th>
        <th nzWidth="120px">手机号</th>
        <th nzWidth="120px">邮箱</th>
        <th nzWidth="120px">人员类型</th>
        <th nzWidth="80px">认证状态</th>
        <th nzWidth="150px" nzEllipsis>单位类型</th>
        <th nzWidth="50px" nzRight>操作</th>
      </tr>
    </thead>
    <tbody>
      @for (data of profiles; track data.id) {
      <tr>
        <td
          nzLeft
          [nzChecked]="setOfCheckedId.has(data.id)"
          (nzCheckedChange)="
            onItemChecked(data.id,$event)
          "
        ></td>
        <td nzEllipsis (click)="goDateil(data.get('user')?.id)" class="activeTd">
          <nz-avatar nzIcon="user"></nz-avatar>
          {{ data?.get('user')?.get('name') || '-'  }}
        </td>
        <td>
          {{ data?.get('user')?.get('phone') || '-' }}
        </td>
        <td nzEllipsis>
          <div class="email">
            <span
              class="state"
              [style.background]="
                data?.get('user')?.get('accountState') == '已认证' ? '#1EB76D' : '#C9CDD4'
              "
            ></span>
            <div class="text">{{ data?.get('user')?.get('email') || data?.get('email') }}</div>
          </div>
        </td>
        <td>
          {{ data?.get('identity') }}
        </td>
        <td>
          @switch (data?.get('user')?.get('accountState')) { @case ('待认证') {
          <nz-tag [nzBordered]="false" [nzColor]="'geekblue'">待认证</nz-tag>
          } @case ('已认证') {
          <nz-tag [nzBordered]="false" [nzColor]="'success'">已认证</nz-tag>
          } @case ('已禁用') {
          <nz-tag [nzBordered]="false" [nzColor]="'error'">已禁用</nz-tag>
          } }
        </td>
        <td nzEllipsis>
          {{ data?.get('companyType') }}
        </td>
        <td nzRight>
          <button
            nz-button
            nz-dropdown
            [nzDropdownMenu]="menu"
            [nzPlacement]="'bottomLeft'"
          >
            <span nz-icon nzType="ellipsis" nzTheme="outline"></span>
          </button>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              @if (data?.get('user')?.get('accountState') == '待认证') {
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                  (click)="updateUser(data, '通过认证')"
                >
                  <span
                    nz-icon
                    nzType="safety-certificate"
                    nzTheme="outline"
                  ></span
                  >通过认证
                </button>
              </li>
              } 
              <!-- @if (data?.user.accountState != '已禁用') {
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  (click)="updateUser(data, '禁用')"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="stop" nzTheme="outline"></span>禁用账号
                </button>
              </li>
              } -->
              <li nz-menu-item>
                <button
                  (click)="updateUser(data, '删除')"
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="delete" nzTheme="outline"></span
                  >删除账号
                </button>
              </li>
              <!-- <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                  (click)="goDateil(data.user?.objectId)"
                >
                  <span
                    nz-icon
                    nzType="user"
                    nzTheme="outline"
                  ></span
                  >用户详情
                </button>
              </li> -->
            </ul>
          </nz-dropdown-menu>
        </td>
      </tr>
      }
    </tbody>
  </nz-table>
  <ng-template #emptyResult>
    <nz-empty nzNotFoundImage="/img/group-empty.png"></nz-empty>
  </ng-template>
</div>

<!-- 全选操作：批量操作 -->
<div class="batch-toolbar-modal" *ngIf="setOfCheckedId?.size">
  <div class="batch-toolbar">
    <div class="styles_counter__18S08">
      <span>已选</span>
      <span class="styles_num__178Wa">{{ setOfCheckedId.size }}</span>
    </div>
    <div class="batch-toolbar-actions">
      <div class="ant-space ant-space-horizontal ant-space-align-center">
        <div class="ant-space-item" style="margin-right: 16px">
          <button nz-button nzType="text" (click)="deleteSelected()">
            <span nz-icon nzType="delete"></span>
            删除
          </button>
        </div>
      </div>
    </div>
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text" (click)="resetChange()">取消选中</button>
    </div>
  </div>
</div>