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

<nz-page-header>
  <nz-breadcrumb nz-page-header-breadcrumb>
    <nz-breadcrumb-item>用户管理</nz-breadcrumb-item>
    <nz-breadcrumb-item>用户列表</nz-breadcrumb-item>
    <nz-breadcrumb-item><a>用户详情</a></nz-breadcrumb-item>
  </nz-breadcrumb>
  <nz-page-header-content>
    <div class="user-header">
      <div class="header-left">
        <nz-avatar
          nzSize="large"
          nzIcon="user"
          nzSrc="/img/avatar.png"
        ></nz-avatar>
        <div class="name-data">
          <div style="display: flex; align-items: center">
            <div class="name">{{ user?.get("name") }}</div>
            <div class="status">
              @switch (user?.get("accountState")) { @case ('待认证') {
              <nz-tag [nzBordered]="false" [nzColor]="'geekblue'"
                >待认证</nz-tag
              >
              } @case ('已认证') {
              <nz-tag [nzBordered]="false" [nzColor]="'green'">已认证</nz-tag>
              } @case ('已禁用') {
              <nz-tag [nzBordered]="false" [nzColor]="'red'">已禁用</nz-tag>
              } } @if (user?.get('isDeleted')) {
              <nz-tag nzColor="error">已删除</nz-tag>
              }
            </div>
          </div>
          <div class="id">ID:{{ user?.id }}</div>
        </div>
      </div>
      <div class="header-right">
        <div style="margin-right: 10px">
          <button
            nz-button
            nz-dropdown
            [nzDropdownMenu]="menu"
            [nzPlacement]="'bottomLeft'"
          >
            更多
            <span nz-icon nzType="down" nzTheme="outline"></span>
          </button>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              @if (user?.get('accountState') == '待认证') {
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                  (click)="updateUser('已认证')"
                >
                  <span
                    nz-icon
                    nzType="safety-certificate"
                    nzTheme="outline"
                  ></span
                  >通过认证
                </button>
              </li>
              } 
              <!-- @if (user?.get('accountState') != '已禁用') {
              <li nz-menu-item>
                <button
                  nz-button
                  nzType="link"
                  (click)="updateUser('已禁用')"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="stop" nzTheme="outline"></span>禁用账号
                </button>
              </li>
              } -->
              <li nz-menu-item>
                <button
                  (click)="updateUser('删除')"
                  nz-button
                  [disabled]="user?.get('isDeleted')"
                  nzType="link"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="delete" nzTheme="outline"></span
                  >删除账号
                </button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
        <button
          style="background: #3e49b3; border: 1px #3e49b3"
          nz-button
          nzType="primary"
          (click)="isVisible = !isVisible"
        >
          修改密码
        </button>
      </div>
    </div>
  </nz-page-header-content>
</nz-page-header>
<div class="edit-content">
  <nz-tabset>
    <nz-tab nzTitle="用户信息">
      <div class="title">账号信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">创建时间</div>
            <div class="value">
              {{ user?.createdAt | date : "yyyy-MM-dd HH:MM:ss" || '-'}}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">最后登录时间</div>
            <div class="value">
              {{ user?.get("lastLogin") ? (user?.get("lastLogin") | date : "yyyy-MM-dd HH:MM:ss") : '-'}}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">最后登录IP</div>
            <div class="value">{{ user?.get("lastIP") || '-'}}</div>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">登录次数</div>
            <div class="value">{{ user?.get("loginsCount") || '-'}}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">用户类型</div>
            <div class="value">{{ profile?.get("identity") || "未填写" }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">认证文件</div>
            <div class="value">
              @if (profile?.get('identityFile')) {
              <a [href]="profile?.get('identityFile')">查看文件</a>
              }@else { 未上传 }
            </div>
          </div>
        </div>
        <!-- <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">注册浏览器</div>
            <div class="value">360</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">注册设备</div>
            <div class="value">Mozilla/5.0 (Windows NT 10.0; Win64; x64)</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">用户来源</div>
            <div class="value">注册</div>
          </div>
        </div> -->
      </div>
      <div class="title">个人信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">手机号</div>
            <div class="value">
              {{ user?.get("phone") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">邮箱</div>
            <div class="value">
              {{ user?.get("email") || profile?.get("email") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">姓名</div>
            <div class="value">{{ user?.get("name") || "未填写" }}</div>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">用户名</div>
            <div class="value">
              {{ user?.get("username") || "未填写" }}
            </div>
          </div>
        </div>
      </div>
      <div class="title">扩展信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">办公电话</div>
            <div class="value">{{ profile?.get("telephone") || "未填写" }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">单位类型</div>
            <div class="value">
              {{ userDataJson.companyType || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">省份</div>
            <div class="value">{{ profile?.get("province") || "未填写" }}</div>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">所在部门</div>
            <div class="value">
              {{ user?.get("departmentName") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">职务</div>
            <div class="value">{{ profile?.get("postName") || "未填写" }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">主要学科</div>
            <div class="value">{{ profile?.get("majorSubject") || "未填写" }}</div>
          </div>
        </div>
      </div>
      <div class="title-row">
        <div class="bar">
          所属组织部门
          <a class="btn" (click)="showModalDepart()">选择部门</a>
        </div>
      </div>
      <div class="fill-setp">
        @if (userDataJson.department?.id) {
        <nz-tag
          [nzBordered]="false"
          style="color: black"
          [nzColor]="'#efefef'"
          >“十四五”高等教育国家规划教材申报系统</nz-tag
        >
        /
        <nz-tag
          [nzBordered]="false"
          style="color: black"
          [nzColor]="'#efefef'"
          >{{ userDataJson.companyType }}</nz-tag
        >
        /
        <nz-tag [nzBordered]="false" [nzColor]="'geekblue'">{{
          userDataJson.department?.get('name')
        }}</nz-tag>
        }@else { 待选择 }
      </div>
      <!-- <div class="title">所属组织部门</div>
      <div class="fill-template">
        <nz-tag [nzBordered]="false" style="color: black" [nzColor]="'#efefef'"
          >“十四五”高等教育国家规划教材申报系统</nz-tag
        >
        /
        <nz-tag
          [nzBordered]="false"
          style="color: black"
          [nzColor]="'#efefef'"
          >{{ profile?.get("companyType") }}</nz-tag
        >
        /
        <nz-tag [nzBordered]="false" [nzColor]="'geekblue'">{{
          user?.get("department")?.get('name') || user?.get("companyName")
        }}</nz-tag>
      </div> -->
      <div class="title">原始JSON数据</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="24">
            <!-- <div class="view-block">
              {{inputValue}}
            </div> -->
            <textarea
              rows="4"
              disabled="true"
              nz-input
              [(ngModel)]="inputValue"
              class="view-block"
            ></textarea>
          </div>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</div>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="请输入新的密码"
  (nzOnCancel)="isVisible = false"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <input
      nz-input
      placeholder="密码格式可以由大小写字母或英文符号及数字组成"
      [(ngModel)]="password"
      type="text"
    />
  </ng-container>
</nz-modal>

<nz-modal
  [(nzVisible)]="isShowModal"
  nzTitle="选择部门"
  (nzOnCancel)="handleCancel()"
  nzWidth="400px"
  nzCentered
>
  <ng-container *nzModalContent>
    <div nz-row class="depart-modal">
      <div nz-col nzSpan="24">
        <div class="row">
          <div class="value">
            <input
              nz-input
              [ngModel]="userDataJson.department?.get('name')"
              (ngModelChange)="provinceChange(parent, $event)"
              placeholder="搜索或选择一个下方部门"
              type="text"
            />
          </div>
        </div>
        <div class="select">
          <div class="bar">
            <a style="color: #86909c">教材遴选</a>
            @for (data of parentMap; track data.title) {
            <span style="margin: 0 10px">/</span>
            @if($index == 0){
              @if (tbookSer.profile.identity != '国家级管理员') {
                <a style="color: #86909c">{{ data.title }}</a>
              }@else {
                <a (click)="onCheck(data)">{{ data.title }}</a>
              }
            }@else {
            <a style="color: #86909c">{{ data.title }}</a>
            } }
          </div>
          <div class="tree">
            @for (data of parentList; track $index) {
            <div class="li" (click)="onCheckedDepart(data)">
              <label
                nz-radio
                [ngModel]="userDataJson.department?.id == data.id"
                [nzValue]="data.id"
                (click)="onCheckedDepart(data)"
                >{{ data.get("name") }}</label
              >
              @if (!data.get("branch")) {
              <span nz-icon nzType="right" nzTheme="outline"></span>
              }
            </div>
            }
          </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)="completeChange()"
    >
      确定
    </button>
  </div>
</nz-modal>