edu-textbook/projects/textbook/src/modules/nav-admin/page-role/page-role.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)="addMember()"
      >
        添加账号
      </button> -->
    </nz-space>
  </nz-page-header-extra>
</nz-page-header>
<div class="edit-content">
  <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)="onSearchNodes($event)"
          />
        </nz-input-group> -->
        <ng-template #prefixTemplateUser
          ><span nz-icon nzType="search"></span
        ></ng-template>
        <button
          nz-button
          nzType="default"
          nz-dropdown
          [nzDropdownMenu]="menutep"
          [nzPlacement]="'bottomLeft'"
          style="margin-left: 0px; width: 280px;"
        >
          <span nz-icon nzType="plus" nzTheme="outline"></span>新建
        </button>
        <nz-dropdown-menu #menutep="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item>
              <button
                nz-button
                nzType="link"
                (click)="showModalDepart('add')"
                style="color: #231c1f"
              >
                <span nz-icon nzType="plus" nzTheme="outline"></span>添加部门
              </button>
            </li>
            <!-- <li nz-menu-item>
              <button
                nz-button
                nzType="link"
                style="color: #231c1f"
                (click)="showModalOrganize()"
              >
                <span nz-icon nzType="merge" nzTheme="outline"></span>
                新建组织
              </button>
            </li> -->
          </ul>
        </nz-dropdown-menu>
      </div>
      <div class="">{{ currentDepart ? currentDepart.title : "" }}</div>
      <div class="tag">
        <span nz-icon nzType="team" nzTheme="outline"></span>
        {{ profiles.length }}人
      </div>
      <label nz-checkbox [(ngModel)]="checkedShowFilter"
      (ngModelChange)="onChecked()"
        >仅显示部门直属成员</label
      >
    </div>
    <div class="tool-right">
      <a nz-button nzType="link" (click)="addMember()">
        <span nz-icon nzType="plus" nzTheme="outline"></span>添加成员
      </a>
    </div>
  </div>
  <div class="layout" #maxWidth>
    <div class="sider" #sider>
      @if(nodes.length > 0){
      <nz-tree
        [nzData]="nodes"
        nzAsyncData
        [nzSearchValue]="searchValueNode"
        (nzClick)="nzEvent($event)"
        (nzExpandChange)="nzEvent($event)"
        (nzSearchValueChange)="onSearch($event)"
        [nzTreeTemplate]="nzTreeTemplate"
        [nzExpandedKeys]="nzExpandedKeys"
      ></nz-tree>
      }@else {
        <div class="loading">
          <nz-spin nzSimple></nz-spin>
          <div class="tips">节点加载中</div>
        </div>
      }
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <span
          class="custom-node"
          (contextmenu)="contextMenu($event, menu, node)"
        >
          <span class="folder-name">{{ node.title }}</span>
        </span>
      </ng-template>
      <!-- 节点右键菜单 -->
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="showModalDepart('add')">添加下级部门</li>
          @if (activatedNode?.origin?.branch) {
            <li nz-menu-item (click)="showModalDepart('edit')">编辑部门</li>
            <li nz-menu-item (click)="onDelDepart()">删除部门</li>
          }
        </ul>
      </nz-dropdown-menu>
    </div>
    <div class="breadcrumb">
      <!-- <comp-table-list
        #list
        [schema]="Department"
        *ngIf="className && fieldsArray"
        [className]="className"
        [fieldsArray]="fieldsArray"
        [queryParams]="queryParams"
      ></comp-table-list> -->
      <nz-table
        #tableData
        [nzData]="profiles"
        [nzTotal]="profileLength"
        [nzPageSize]="pageSize"
        [nzPageIndex]="pageIndex"
        style="margin: 10px 0"
        [nzLoading]="loading"
        nzSize="middle"
        [nzNoResult]="emptyResult"
        [nzFrontPagination]="false"
        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="120px">所属部门</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 nzEllipsis>
              {{ data?.get("user")?.get("phone") || '-' }}
            </td>
            <td nzEllipsis>
              {{ data?.get("user")?.get("email") || data?.get("email") || '-'}}
            </td>
            <td nzEllipsis>
              {{ data?.get("identity") }}
            </td>
            <td nzEllipsis>
              {{ data?.get("user").get("departmentName") || '-' }}
            </td>
            <td nzEllipsis 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>
                  <li nz-menu-item>
                    <button
                      (click)="removeBranch(data)"
                      nz-button
                      style="color: #231c1f"
                      nzType="link"
                    >
                      <span nz-icon nzType="stop" 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>
</div>
<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="{{ editType == 'edit' ? '编辑' : '新建' }}部门"
  (nzOnCancel)="handleCancel()"
  nzWidth="800px"
  nzCentered
>
  <ng-container *nzModalContent>
    <div nz-row class="depart-modal">
      <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)]="editObject.name"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">code</div>
          <div class="value">
            <input
              nz-input
              placeholder="请输入code"
              [(ngModel)]="editObject.code"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">部门描述</div>
          <div class="value">
            <textarea
              [nzAutosize]="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入部门描述"
              nz-input
              [(ngModel)]="editObject.desc"
            ></textarea>
          </div>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="row">
          <div class="label">
            上级部门 <span style="color: #e8353e">*</span>
          </div>
          <div class="value">
            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconclear">
              <input
                nz-input
                placeholder="可击下方选择所属上级"
                [(ngModel)]="modalValue"
                (ngModelChange)="onSearchNodes($event, true)"
                (blur)="onblur('editObject')"
                type="text"
              />
            </nz-input-group>
            <ng-template #suffixIconclear>
              <button nz-button nzType="primary" nzSearch (click)="reset('editObject')">清空</button>
            </ng-template>
          </div>
        </div>
        <div class="select">
          <div class="bar">
            <a style="color: #86909c" (click)="onPre()">所有部门</a>
            @for (data of parentMap; track data.title) {
            <span style="margin: 0 10px">/</span>
            <a (click)="onPre(data, $index)">{{ data.title }}</a>
            }
          </div>
          <div class="tree">
            @if(parentList.length > 0){ @for (data of parentList; track $index)
            {
            <div class="li" (click)="onCheckedDepart('branch', data)">
              <label
                nz-radio
                [ngModel]="data.key == radio"
                [nzValue]="data.key"
                (click)="onCheckedDepart('branch', 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>
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button
      nz-button
      nzType="primary"
      style="background: #3e49b3; border: 1px #3e49b3"
      (click)="handleOk()"
    >
      确定
    </button>
  </div>
</nz-modal>

<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">
            <nz-input-group nzSearch [nzAddOnAfter]="suffixIconclear">
              <input
                nz-input
                placeholder="请选择所属部门"
                [(ngModel)]="modalValue"
                (ngModelChange)="onSearchNodes($event, true)"
                type="text"
                (blur)="onblur('account')"
              />
            </nz-input-group>
            <ng-template #suffixIconclear>
              <button nz-button nzType="primary" nzSearch (click)="reset('account')">清空</button>
            </ng-template>
          </div>
        </div>
        <div class="select">
          <div class="bar">
            <a style="color: #86909c" (click)="onPre()">所有部门</a>
            @for (data of parentMap; track data.title) {
            <span style="margin: 0 10px">/</span>
            <a (click)="onPre(data, $index)">{{ data.title }}</a>
            }
          </div>
          <div class="tree">
            @if(parentList.length > 0){ @for (data of parentList; track $index)
            {
            <div class="li" (click)="onCheckedDepart('account', data)">
              <label
                nz-radio
                [ngModel]="data.key == radio"
                [nzValue]="data.key"
                (click)="onCheckedDepart('account', data, data?.branch)"
                >{{ 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%"
              [disabled]="!this.account.department?.id"
              nzShowSearch
              nzAllowClear
              [(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">手机号 <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"
      style="background: #3e49b3; border: 1px #3e49b3"
      [nzLoading]="isLoadingOne"
      (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)="removeBranchAll()">
            <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>