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

<nz-page-header>
  <!--title-->
  <nz-page-header-title
    >申报流程
    <br />
    <div class="subtitle">
      统一管理各类教材推荐流程和限额，设置各个流程开始和结束时间、查看各流程工作进度
    </div>
  </nz-page-header-title>

  <!--extra-->
  <nz-page-header-extra>
    <nz-space>
      <button
        style="background: #3e49b3; border: 1px #3e49b3"
        *nzSpaceItem
        nz-button
        nzType="primary"
        (click)="toUrl('/nav-admin/manage/process/create')"
      >
        创建流程
      </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)="onSearch($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: 10px"
        >
          <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="">
        <nz-input-group style="width: 280px" [nzPrefix]="prefixTemplateUser">
          <input
            type="text"
            nz-input
            placeholder="搜索流程名称 / 流程 code"
            [(ngModel)]="searchValuePro"
            (ngModelChange)="onSearchPro($event)"
          />
        </nz-input-group>
        <ng-template #prefixTemplateUser
          ><span nz-icon nzType="search"></span
        ></ng-template>
      </div>
    </div>
    <div class="tool-right"></div>
  </div>
  <div class="layout" #maxWidth>
    <div class="sider" #sider>
      <ul nz-menu>
        @for (item of nodes; track $index) {
        <li nz-menu-item (click)="changeDepart(item)">{{ item.title }}</li>
        }
      </ul>
    </div>
    <div class="breadcrumb">
      <nz-table
        #tableData
        [nzData]="eduProcessList"
        [nzTotal]="eduProcessLength"
        [nzPageSize]="pageSize"
        [nzPageIndex]="pageIndex"
        style="margin: 10px 0"
        [nzLoading]="loading"
        nzSize="middle"
        [nzNoResult]="emptyResult"
        nzTableLayout="fixed"
        [nzFrontPagination]="false"
        (nzPageIndexChange)="pageIndexChange($event)"
      >
        <thead>
          <tr>
            <th
              nzEllipsis
              nzWidth="50px"
              nzLeft
              [nzChecked]="checkedAll"
              [nzIndeterminate]="indeterminate"
              nzLabel="Select all"
              (nzCheckedChange)="onAllChecked($event)"
            ></th>
            <th nzWidth="120px" nzLeft>流程名称</th>
            <th nzEllipsis nzWidth="120px">流程code</th>
            <th nzEllipsis nzWidth="120px">流程描述</th>
            <th nzEllipsis nzWidth="80px">申报限额</th>
            <th nzEllipsis nzWidth="120px">流程联系人</th>
            <th nzEllipsis nzWidth="80px">流程状态</th>
            <th nzEllipsis nzWidth="50px" nzRight>操作</th>
          </tr>
        </thead>
        <tbody>
          @for (data of tableData.data; track data.id) {
          <tr>
            <td
              nzEllipsis
              nzLeft
              [nzChecked]="setOfCheckedId.has(data.id)"
              (nzCheckedChange)="onItemChecked(data.id, $event)"
            ></td>
            <td
              nzEllipsis
              (click)="
                toUrl('/nav-admin/manage/process/page', {
                  id: data?.id
                })
              "
              class="activeTd"
            >
              {{ data?.get("name") || "-" }}
            </td>
            <td nzEllipsis>
              {{ data?.get("code") || "-" }}
            </td>
            <td nzEllipsis nz-popover [nzPopoverContent]="contentTemplate">
              {{ data?.get("desc") || "-" }}
              <ng-template #contentTemplate>
                <div style="max-width: 400px">
                  {{ data?.get("desc") }}
                </div>
              </ng-template>
            </td>
            <td nzEllipsis>
              {{
                data?.get("num") || data?.get("num") == 0
                  ? data?.get("num")
                  : "-"
              }}
            </td>
            <td nzEllipsis>
              {{
                data?.get("profileSubmitted")?.get("user").get("name") || "-"
              }}
            </td>
            <td nzEllipsis>
              <nz-tag [nzColor]="statusMap[data.id].color">
                {{ statusMap[data.id].title }}</nz-tag
              >
            </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>
                  @if (statusMap[data.id].strat){
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzType="link"
                      style="color: #231c1f"
                      (click)="onStatusChange(data, 'strat', true)"
                    >
                      <span
                        nz-icon
                        nzType="caret-right"
                        nzTheme="outline"
                      ></span
                      >开始流程
                    </button>
                  </li>
                  } @if (statusMap[data.id].stop){
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzType="link"
                      style="color: #231c1f"
                      (click)="onStatusChange(data, 'stop', true)"
                    >
                      <span
                        nz-icon
                        nzType="pause-circle"
                        nzTheme="outline"
                      ></span
                      >暂停流程
                    </button>
                  </li>
                  }@if (statusMap[data.id].collect){
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzType="link"
                      style="color: #231c1f"
                      (click)="openEditCollect(data)"
                    >
                      <span
                        nz-icon
                        nzType="plus-circle"
                        nzTheme="outline"
                      ></span
                      >收集源文件
                    </button>
                  </li>
                  } @if (statusMap[data.id].end){
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzType="link"
                      style="color: #231c1f"
                      (click)="onStatusChange(data, 'end', true)"
                    >
                      <span nz-icon nzType="stop" nzTheme="outline"></span
                      >结束流程
                    </button>
                  </li>
                  } @if (statusMap[data.id].del){
                  <li nz-menu-item>
                    <button
                      nz-button
                      nzType="link"
                      (click)="onStatusChange(data, 'del', true)"
                      style="color: #231c1f"
                    >
                      <span nz-icon nzType="delete" 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>
<!-- 全选操作：批量操作 -->
<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)="statusSelected('del')">
            <span nz-icon nzType="delete"></span>
            删除
          </button>
        </div>
      </div>
    </div> -->
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text" (click)="statusSelected('strat')">
        <span nz-icon nzType="caret-right" nzTheme="outline"></span>
        批量开始
      </button>
    </div>
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text" (click)="statusSelected('stop')">
        <span nz-icon nzType="pause-circle" nzTheme="outline"></span>
        批量暂停
      </button>
    </div>
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text" (click)="statusSelected('end')">
        <span nz-icon nzType="stop" nzTheme="outline"></span>
        批量结束
      </button>
    </div>
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text" (click)="onAllChecked(false)">
        取消选中
      </button>
    </div>
  </div>
</div>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="新建组织"
  (nzOnCancel)="handleCancel()"
  nzWidth="600px"
  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)]="branchObj.name"
              type="text"
            />
          </div>
        </div>
        <div class="row">
          <div class="label">code</div>
          <div class="value">
            <input
              nz-input
              placeholder="请输入code"
              [(ngModel)]="branchObj.code"
              type="text"
            />
          </div>
        </div>
      </div>
      <div nz-col nzSpan="12">
        <div class="row">
          <div class="label">组织描述</div>
          <div class="value">
            <textarea
              [nzAutosize]="{ minRows: 4, maxRows: 4 }"
              placeholder="请输入组织描述"
              nz-input
              [(ngModel)]="branchObj.desc"
            ></textarea>
          </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)]="showModal"
  nzTitle="收集教材源文件"
  (nzOnCancel)="handleCancel()"
  nzWidth="600px"
>
  <ng-container *nzModalContent>
    <div nz-row class="depart-modal">
      <div nz-col nzSpan="24">
        <div class="row">
          <div class="label">
            开始时间 <span style="color: #e8353e">*</span>
          </div>
          <div class="value">
            <nz-date-picker
              nzFormat="yyyy-MM-dd HH:mm:ss"
              [(ngModel)]="collectStartData"
              [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"
            ></nz-date-picker>
          </div>
        </div>
        <div class="row">
          <div class="label">截止时间 <span style="color: #e8353e">*</span></div>
          <div class="value">
            <nz-date-picker
              nzFormat="yyyy-MM-dd HH:mm:ss"
              [(ngModel)]="collectEndData"
              [nzStatus]="collectEndData < collectStartData ? 'error' : ''"
              [nzShowTime]="{ nzDefaultOpenValue: timeDefaultValue }"
            ></nz-date-picker>
          </div>
        </div>
        <div class="row">
          <div class="label">收集教材</div>
          <div class="value">
            12
          </div>
        </div>
      </div>
    </div>
  </ng-container>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    <button
      nz-button
      nzType="primary"
      [disabled]="!this.collectStartData || !this.collectEndData"
      (click)="editCollect()"
    >
      确定
    </button>
  </div>
</nz-modal>