zy-pc/src/app/views/building-floor/building-floor.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:!buildingsLoading?'block':'none'}">
      <overlay-scrollbars #osComponentRef1 [ngStyle]="{ height:'100%' }">
        <div [ngClass]="{'item':true,'checked':data.id==checkedBuilding.id}" *ngFor="let data of buildingList"
          (click)="checkBuilding(data)" [title]="data.buildingName">{{data.buildingName}}</div>
      </overlay-scrollbars>
    </div>
    <div class="groups" *ngIf="buildingsLoading">
      <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_flex-end align-items_center">
      <div class="display_flex align-items_center">
        <span>已选择 {{selectedFloor.length}} 个楼层</span>
        <button class="btn default" *ngIf="coopBtns.add" nzType="primary" nz-button
          (click)="showFloorModal($event,'add')">新增</button>
        <button class="btn default" *ngIf="coopBtns.del" nzType="primary" nz-button
          (click)="showDelFloorModal($event)">批量删除</button>
        <button class="btn default" *ngIf="coopBtns.add" nzType="primary" nz-button (click)="generate()">生成楼层</button>
      </div>
    </div>
    <div class="table" *ngIf="!buildingsLoading">
      <nz-table class="groupManagementTable" #rowSelectionTable [nzPageSize]="9999" [nzData]="allFloorList"
        [nzShowPagination]="false" [nzScroll]="{ y: tableHeight+'px' }" [nzLoading]="floorsLoading">
        <tbody>
          <tr *ngFor="let data of rowSelectionTable.data" (click)="selectedUser(data)">
            <td style="width:5%" nzShowCheckbox [(nzDisabled)]="!coopBtns.edit" [(nzChecked)]="mapOfCheckedId[data.id]"
              (nzCheckedChange)="refreshStatus()"></td>
            <td style="width:75%">{{ data.floorName }}</td>
            <td style="width:20%">
              <button nz-button nzType="primary" nzSize="small" (click)="showFloorModal($event,'edit',data)">编辑</button>
              <button nz-button nzType="primary" nzSize="small" class="ml8"
                (click)="showDelFloorModal($event,data)">删除</button>
            </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="buildingName">楼栋名称</nz-form-label>
            <nz-form-control nzErrorTip="请输入楼栋名称!">
              <nz-input-group>
                <input nz-input formControlName="buildingName" placeholder="请输入楼栋名称" />
              </nz-input-group>
            </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>
  <!-- 新增/编辑楼层模态框 -->
  <div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="floorModal">
    <div class="modalBody">
      <div class="title">{{add?'新增':'编辑'}}楼层信息<i class="icon_transport transport-guanbi" (click)="hideFloorModal()"></i>
      </div>
      <div class="content">
        <form nz-form [formGroup]="validateFloorForm" class="addForm" (ngSubmit)="submitFormFloor()">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="buildId">楼栋</nz-form-label>
            <nz-form-control nzErrorTip="请选择楼栋!">
              <nz-select formControlName="buildId" nzPlaceHolder="请选择楼栋" nzDisabled>
                <nz-option *ngFor="let option of buildingList" [nzLabel]="option.buildingName" [nzValue]="option.id">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="floorName">楼层名称</nz-form-label>
            <nz-form-control nzErrorTip="请输入楼层名称!">
              <nz-input-group>
                <input nz-input formControlName="floorName" placeholder="请输入楼层名称" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
        </form>
      </div>
      <div class="display_flex justify-content_flex-center">
        <button nzType="primary" [nzLoading]="btnLoading" nz-button (click)="submitFormFloor()">确认</button>
        <button class="btn cancel" nz-button nzType="default" (click)="hideFloorModal()">取消</button>
      </div>
    </div>
  </div>
  <!-- 删除楼栋模态框 -->
  <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()" content="您确认要删除楼栋吗？" tips="删除后对应的楼栋积分配置也会删除"></app-dialog-delete>
  <!-- 删除楼层模态框 -->
  <app-dialog-delete [delModal]="delFloorModal" (hideDelModalEvent)="hideDelFloorModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmFloorDel()" content="您确认要删除楼层吗？"></app-dialog-delete>
  <!-- 生成楼层模态框 -->
  <app-generate-floor #generate1 *ngIf="generateModal" [generateModal]="generateModal"
    (hideGenerateModalEvent)="hideGenerateModal()" [btnLoading]="btnLoading"
    (confirmGenerateEvent)="confirmGenerate($event)" [buildId]="checkedBuilding.id"></app-generate-floor>
</div>

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