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>
    @if (this.tbookSer.profile.identity == '国家级管理员') {
    <nz-space>
      <button
        style="background: #3e49b3; border: 1px #3e49b3"
        *nzSpaceItem
        nz-button
        nzType="primary"
        (click)="addMember()"
      >
        创建用户
      </button>
    </nz-space>
    }
  </nz-page-header-extra>
</nz-page-header>
<div class="content">
  <div class="tool">
    <div class="tool-left">
      <div class="search">
        <nz-input-group style="width: 300px" [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"
          [nzShowFilter]="true"
          [nzFilters]="listOfColumns.identity.listOfFilter"
          (nzFilterChange)="onChangeFilter($event, 'identity')"
        >
          人员类型
        </th>
        <th
          nzWidth="80px"
          [nzShowFilter]="true"
          [nzFilters]="listOfColumns.accountState.listOfFilter"
          (nzFilterChange)="onChangeFilter($event, 'accountState')"
        >
          认证状态
        </th>
        <th
          nzWidth="150px"
          nzEllipsis
          [nzShowFilter]="true"
          [nzFilters]="listOfColumns.companyType.listOfFilter"
          (nzFilterChange)="onChangeFilter($event, 'companyType')"
        >
          单位类型
        </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>
<nz-modal
  [(nzVisible)]="accountIsVisible"
  nzTitle="创建账号（手机号及邮箱请至少填写一个，将发送登录账号）"
  (nzOnCancel)="handleCancel()"
  nzWidth="800px"
  nzCentered
>
  <ng-container *nzModalContent>
    <div nz-row class="depart-modal">
      <div nz-col nzSpan="12">
        <div class="row" style="margin-bottom: 6px">
          <div class="label">
            选择所属部门 <span style="color: #e8353e">*</span>
          </div>
          <div class="value">
            <input
              nz-input
              placeholder="请选择所属部门"
              [ngModel]="account.department?.title"
              (ngModelChange)="onSearchNodes($event)"
              type="text"
            />
          </div>
        </div>
        <div class="select">
          <div class="bar">
            @if (this.tbookSer.profile.identity == '国家级管理员') {
            <a style="color: #86909c" (click)="onPre()">所有部门</a>
            }@else {
            <a style="color: #86909c">所有部门</a>
            } @for (data of parentMap; track data.title) {
            <span style="margin: 0 10px">/</span>
            @if (this.tbookSer.profile.identity == '国家级管理员' ||
            data?.verify) {
            <a (click)="onPre(data, $index)">{{ data.title }}</a>
            }@else {
            <a style="color: #86909c">{{ data.title }}</a>
            } }
          </div>
          <div class="tree">
            @if(parentList.length > 0){ @for (data of parentList; track $index)
            {
            <div class="li" (click)="onCheckedDepart(data)">
              <label
                nz-radio
                [ngModel]="data.key == radio"
                [nzValue]="data.key"
                (click)="onCheckedDepart(data, true)"
                >{{ data.title }}</label
              >
              @if (!data.isLeaf) {
              <span nz-icon nzType="right" nzTheme="outline"></span>
              }
            </div>
            } }@else {
            <nz-empty nzNotFoundContent="暂无下级部门"></nz-empty>
            }
          </div>
        </div>
        <div class="row">
          <div class="label">人员类型（需要先选择所属部门）</div>
          <div class="value">
            <nz-select
              style="width: 100%"
              nzShowSearch
              nzAllowClear
              [disabled]="!this.account.department?.id"
              [(ngModel)]="account.identity"
              nzPlaceHolder="请选择身份类型"
            >
              @for(item of userType; track item;let index = $index){
              <nz-option nzCustomContent [nzValue]="item" [nzLabel]="item">{{
                item
              }}</nz-option>
              }
            </nz-select>
          </div>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="row">
          <div class="label">姓名 <span style="color: #e8353e">*</span></div>
          <div class="value">
            <input
              nz-input
              placeholder="请输入姓名"
              [(ngModel)]="account.name"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">账号</div>
          <div class="value">
            <input
              nz-input
              maxlength="28"
              placeholder="请填写账号"
              [(ngModel)]="account.username"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">手机号 <span style="color: #e8353e">*</span></div>
          <div class="value">
            <input
              nz-input
              maxlength="11"
              placeholder="请输入手机号"
              [(ngModel)]="account.phone"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">邮箱 <span style="color: #e8353e">*</span></div>
          <div class="value">
            <input
              nz-input
              placeholder="请输入邮箱"
              [(ngModel)]="account.email"
              type="email"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">密码 <span style="color: #e8353e">*</span></div>
          <div class="value">
            <nz-input-group nzSearch [nzAddOnAfter]="">
              <input
                type="password"
                [(ngModel)]="account.password"
                nz-input
                placeholder="请输入密码"
              />
            </nz-input-group>
            <!-- <ng-template #suffixIconButton>
              <button
                nz-button
                (click)="randomPassword()"
                nzType="primary"
                nzSearch
              >
                自动生成密码
              </button>
            </ng-template> -->
          </div>
        </div>
      </div>
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button
      nz-button
      nzType="primary"
      [nzLoading]="isLoadingOne"
      style="background: #3e49b3; border: 1px #3e49b3"
      (click)="accountComplete()"
    >
      确定
    </button>
  </div>
</nz-modal>

<!-- 全选操作：批量操作 -->
<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>