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

<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzLg='14' class="list-template__searchBox">
        <div class="list-template__searchItem">
          <span class="label">科室名称：</span>
          <input nz-input class="formItem" [(ngModel)]="name" placeholder="请输入科室名称" nzSize="default" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">别名：</span>
          <input nz-input class="formItem" [(ngModel)]="deptalias" placeholder="请输入别名" nzSize="default" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">科室编码：</span>
          <input nz-input class="formItem" [(ngModel)]="num" placeholder="请输入科室编码" nzSize="default" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">科室类型：</span>
          <nz-select [nzDropdownMatchSelectWidth]="false" style="width: 135px;" nzShowSearch nzAllowClear
            nzPlaceHolder="请选择科室类型" [(ngModel)]="type">
            <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of types"></nz-option>
          </nz-select>
        </div>
      </div>
      <div nz-col nzLg="10" class="list-template__btns">
        <button class="btn default" (click)='search()'>搜索</button>
        <button class="btn default ml8" (click)='reset()'>重置</button>
        <button *ngIf="coopBtns.add" class="btn default ml8" (click)="showModal()">新增</button>
        <button class="btn default ml8" nzType="primary" nz-button [disabled]="!checkedDepIds.length"
          (click)="print($event,true)">批量打印</button>
        <button class="btn default ml8" nzType="primary" nz-button *ngIf="coopBtns.del"
          [disabled]="!checkedDepIds.length" (click)="showDelModal($event,true,checkedDepIds)">批量删除</button>
      </div>
    </div>
    <div class="list-template__bottom">
      <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
        [nzLoading]="loading1">
        <thead>
          <tr class="thead">
            <th nzWidth="5%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked"
              (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="15%">科室名称</th>
            <th nzWidth="10%">别名</th>
            <th nzWidth="10%">科室编码</th>
            <th nzWidth="10%">科室电话</th>
            <th nzWidth="10%">科室类型</th>
            <th nzWidth="15%">科室位置</th>
            <th nzWidth="25%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData" (click)="selectedListData(data.id)">
            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
            <td>{{ data.dept||'无' }}</td>
            <td>{{ data.deptalias||'无' }}</td>
            <td>{{ data.pcode||'无' }}</td>
            <td>
              <div class="targetDept" nz-tooltip nzTooltipTitle="{{data.manyPhone||'无'}}">{{ data.manyPhone||'无' }}
              </div>
            </td>
            <td>{{ data.type?data.type.name:'无' }}</td>
            <td>{{ data.building?data.building.buildingName:'-'
              }}栋{{data.floor?data.floor.floorName:'-'}}层{{data.address}}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.look" (click)="detail($event,data.id)">查看</span>
                <span *ngIf="coopBtns.edit" (click)="edit($event,data)">编辑</span>
                <span *ngIf="coopBtns.del" (click)="showDelModal($event,false,data.id)">删除</span>
                <span (click)="print($event,false,data.id)">打印</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
        </nz-pagination>
      </div>
    </div>
  </div>

  <!-- 新增/编辑模态框 -->
  <div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="modal">
    <div class="modalBody">
      <div class="title">{{add?"新增":"编辑"}}科室信息<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
      </div>
      <overlay-scrollbars #osComponentRef1 class="content">
        <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="officeName">科室名称</nz-form-label>
            <nz-form-control nzErrorTip="请填写科室名称!">
              <nz-input-group>
                <input type="officeName" nz-input formControlName="officeName" placeholder="请填写科室名称" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="deptalias">别名</nz-form-label>
            <nz-form-control nzErrorTip="请填写别名!">
              <nz-input-group>
                <input nz-input formControlName="deptalias" placeholder="请填写别名" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="add">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="officeNo">科室编码</nz-form-label>
            <nz-form-control nzErrorTip="请填写科室编码!">
              <nz-input-group>
                <input nz-input formControlName="officeNo" placeholder="请填写科室编码" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="officeNum">科室电话</nz-form-label>
            <nz-form-control nzErrorTip="请填写科室电话!">
              <nz-input-group>
                <input (ngModelChange)="deptsPhoneChange()" type="officeNum" nz-input formControlName="officeNum"
                  placeholder="请填写科室电话" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-input-group *ngFor="let phone of deptPhones;let index = index" class="dynamic">
            <input nz-input [ngModel]="phone.phone" [ngModelOptions]="{standalone: true}" placeholder="请填写科室电话"
              (ngModelChange)="deptsPhoneChange($event,phone)" />
            <i nz-icon nzType="minus-circle-o" (click)="removeDeptPhone(index, $event)"></i>
          </nz-input-group>
          <button nz-button nzType="dashed" [disabled]="isAddDeptsPhone" class="add-button"
            (click)="addDeptPhone($event)">
            <i nz-icon nzType="plus"></i>
            添加科室号码
          </button>
          <nz-form-item style="display: inline-block;vertical-align:bottom;">
            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="building">科室位置</nz-form-label>
            <nz-form-control style="display: inline-block;">
              <nz-select [nzDropdownMatchSelectWidth]="false" style="width:120px;" class="mr8" type="building"
                nzShowSearch nzAllowClear formControlName="building" nzPlaceHolder="请选择楼栋"
                (ngModelChange)="changeBuilding($event)">
                <nz-option nzLabel="{{data.buildingName}}" nzValue="{{data.id}}" *ngFor="let data of buildings">
                </nz-option>
              </nz-select>
            </nz-form-control>
            <nz-form-control style="display: inline-block;">
              <nz-select [nzDropdownMatchSelectWidth]="false" style="width:120px;" class="mr8" type="floor" nzShowSearch
                nzAllowClear formControlName="floor" nzPlaceHolder="请选择楼层">
                <nz-option nzLabel="{{data.floorName}}" nzValue="{{data.id}}" *ngFor="let data of floors"></nz-option>
              </nz-select>
            </nz-form-control>
            <nz-form-control style="display: inline-block;">
              <nz-input-group>
                <input style="width:148px;" type="officeAddress" nz-input formControlName="officeAddress"
                  placeholder="请填写科室详细位置" />
              </nz-input-group>
            </nz-form-control>
            <div style="text-align: left; color: red;"
              *ngIf="(validateForm.get('building').dirty||validateForm.get('floor').dirty||validateForm.get('officeAddress').dirty)&&(!validateForm.value.building||!validateForm.value.floor||!validateForm.value.officeAddress)">
              请输入科室位置!</div>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="officeType">科室类型</nz-form-label>
            <nz-form-control nzErrorTip="请选择科室类型!">
              <nz-select [nzDropdownMatchSelectWidth]="false" type="officeType" nzShowSearch nzAllowClear
                formControlName="officeType" nzPlaceHolder="请选择科室类型">
                <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of types"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="24" [nzXs]="24">服务时间</nz-form-label>
            <nz-form-control nzErrorTip="不能为空!">
              <nz-time-picker nzFormat="HH:mm" formControlName="startTime1" [nzDisabledHours]="startTime1Hourdis"
                [nzDisabledMinutes]="startTime1Mindis" (nzOpenChange)="timeChange($event,'startTime',1)">
              </nz-time-picker>-
              <nz-time-picker nzFormat="HH:mm" formControlName="endTime1" [nzDisabledHours]="endTime1Hourdis"
                [nzDisabledMinutes]="endTime1Mindis" (nzOpenChange)="timeChange($event,'endTime',1)"></nz-time-picker>
            </nz-form-control>
            <div style="text-align: left;color: red;"
              *ngIf="(validateForm.value.startTime1||validateForm.value.endTime1)&&!(validateForm.value.startTime1&&validateForm.value.endTime1)">
              请选择完整的服务时间</div>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="24" [nzXs]="24" hidden>服务时间</nz-form-label>
            <nz-form-control nzErrorTip="不能为空!">
              <nz-time-picker nzFormat="HH:mm" formControlName="startTime2" [nzDisabledHours]="startTime2Hourdis"
                [nzDisabledMinutes]="startTime2Mindis" (nzOpenChange)="timeChange($event,'startTime',2)">
              </nz-time-picker>-
              <nz-time-picker nzFormat="HH:mm" formControlName="endTime2" [nzDisabledHours]="endTime2Hourdis"
                [nzDisabledMinutes]="endTime2Mindis" (nzOpenChange)="timeChange($event,'endTime',2)"></nz-time-picker>
            </nz-form-control>
            <div style="text-align: left;color: red;"
              *ngIf="(validateForm.value.startTime2||validateForm.value.endTime2)&&!(validateForm.value.startTime2&&validateForm.value.endTime2)">
              请选择完整的服务时间</div>
          </nz-form-item>
        </form>
      </overlay-scrollbars>
      <div class=" display_flex justify-content_flex-center">
        <button nzType="primary" nz-button [nzLoading]="btnLoading" (click)="submitForm()">确认</button>
        <button class="btn cancel" nz-button nzType="default" (click)="hideModal()">取消</button>
      </div>
    </div>
  </div>
  <!-- 删除模态框 -->
  <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()" content="您确认要删除科室吗？"></app-dialog-delete>

  <!-- 二维码打印 -->
  <div id="report" style="display: none">
    <div *ngFor="let img of codes" style="display: inline-block;">
      <img style="width: 200px;height:200px;" [src]="img.base64" alt="">
      <p style="margin: 0;text-align: center; font-size: 20px;width: 200px;">{{img.name}}</p>
      <p style="margin: 0;text-align: center; font-size: 20px;width: 200px;">支助中心专用</p>
    </div>
  </div>

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

<!-- 查看详情 -->
<router-outlet></router-outlet>
<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>