zy-pc/src/app/views/group-management/group-management.component.html

<div class="groupManagement">
  <div class="groupInfo">
    <div class="title">分组信息</div>
    <div class="operate">
      <div *ngIf="coopBtns.add" class="add item" (click)="showCoopModal('add')">
        新增
      </div>
      <div
        *ngIf="coopBtns.edit"
        class="edit item"
        (click)="showCoopModal('edit')"
      >
        编辑
      </div>
      <div *ngIf="coopBtns.del" class="del item" (click)="showDelModal()">
        删除
      </div>
    </div>
    <div class="groups" [ngStyle]="{ display: !loading1 ? 'block' : 'none' }">
      <overlay-scrollbars #osComponentRef1 [ngStyle]="{ height: '100%' }">
        <div
          [ngClass]="{ item: true, checked: data.id == checkedGroup.id }"
          *ngFor="let data of groupList"
          (click)="checkGroup(data)"
          [title]="data.scheduleClass.name + ' ' + data.groupName"
        >
          {{ data.scheduleClass.name }} {{ data.groupName }}
        </div>
      </overlay-scrollbars>
    </div>
    <div class="groups" *ngIf="loading1">
      <div
        class="loadingFull display_flex justify-content_flex-center align-items_center"
      >
        <div class="loadingFullInner">
          <img src="../../../assets/images/loading.gif" alt="" />
          <div>加载中...</div>
        </div>
      </div>
    </div>
  </div>
  <div class="userInfo">
    <div
      class="top display_flex justify-content_space-between align-items_center"
    >
      <div class="display_flex align-items_center">
        <span>用户信息：</span>
        <input
          nz-input
          placeholder="请输入用户信息"
          [(ngModel)]="searchName"
          nzSize="default"
          (ngModelChange)="searchInp($event)"
        />
      </div>
      <div class="display_flex align-items_center">
        <span>已选择 {{ usersArr.length }} 人</span>
        <button
          class="btn default"
          *ngIf="coopBtns.edit && groupList.length"
          nzType="primary"
          nz-button
          [nzLoading]="saveLoading"
          (click)="save()"
        >
          保存
        </button>
      </div>
    </div>
    <div class="table" *ngIf="!loading1">
      <nz-table
        class="groupManagementTable"
        #rowSelectionTable
        [nzPageSize]="9999"
        [nzData]="allUserList"
        [nzShowPagination]="false"
        #fixedTable
        [nzScroll]="{ y: tableHeight + 'px' }"
        [nzLoading]="loading2"
      >
        <tbody>
          <tr
            *ngFor="let data of rowSelectionTable.data"
            (click)="selectedUser(data)"
          >
            <td
              style="text-align: left; cursor: pointer"
              nzShowCheckbox
              [(nzDisabled)]="!coopBtns.edit"
              [(nzChecked)]="mapOfCheckedId[data.id]"
              (nzCheckedChange)="refreshStatus()"
            ></td>
            <td>{{ data.dept.dept }} {{ data.name }}</td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </div>

  <!-- 新增/编辑模态框 -->
  <div
    class="save display_flex justify-content_flex-center align-items_center add"
    *ngIf="coopModal"
  >
    <div class="modalBody">
      <div class="title">
        {{ add ? "新增" : "编辑" }}分组信息<i
          class="icon_transport transport-guanbi"
          (click)="hideCoopModal()"
        ></i>
      </div>
      <div class="content">
        <form
          nz-form
          [formGroup]="validateForm"
          class="addForm"
          (ngSubmit)="submitForm()"
        >
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="classes"
              >所属班次</nz-form-label
            >
            <nz-form-control nzErrorTip="请选择所属班次!">
              <nz-select
                [nzDropdownMatchSelectWidth]="false"
                formControlName="classes"
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择所属班次"
              >
                <nz-option
                  nzLabel="{{ data.name }}"
                  nzValue="{{ data.id }}"
                  *ngFor="let data of scheduleList"
                ></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="groupName"
              >分组名称</nz-form-label
            >
            <nz-form-control nzErrorTip="请输入分组名称!">
              <nz-input-group>
                <input
                  type="groupName"
                  nz-input
                  formControlName="groupName"
                  placeholder="请输入分组名称"
                />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="groupLeader"
              >分组组长</nz-form-label
            >
            <nz-form-control nzErrorTip="请输入分组组长!">
              <nz-select
                [nzDropdownMatchSelectWidth]="false"
                class="formItem"
                nzServerSearch
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="请选择分组组长"
                formControlName="groupLeader"
                (nzOnSearch)="changeInp($event)"
                (nzOpenChange)="changeSearch($event)"
              >
                <ng-container *ngFor="let data of userList">
                  <nz-option
                    *ngIf="!isLoading"
                    nzLabel="{{ data.name }}"
                    nzValue="{{ data.id }}"
                  ></nz-option>
                </ng-container>
                <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                  <i nz-icon nzType="loading" class="loading-icon"></i>
                  搜索中...
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="display_flex justify-content_flex-center">
        <button
          nzType="primary"
          [nzLoading]="btnLoading"
          nz-button
          (click)="submitForm()"
        >
          确认
        </button>
        <button
          class="btn cancel"
          nz-button
          nzType="default"
          (click)="hideCoopModal()"
        >
          取消
        </button>
      </div>
    </div>
  </div>
  <!-- 删除模态框 -->
  <app-dialog-delete
    [delModal]="delModal"
    (hideDelModalEvent)="hideDelModal()"
    [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()"
    content="您确认要删除此分组吗？"
  ></app-dialog-delete>
</div>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal
  *ngIf="promptModalShow"
  [content]="promptContent"
  [success]="ifSuccess"
  [show]="promptModalShow"
  [info]="promptInfo"
>
</app-prompt-modal>