zy-pc/src/app/views/nucleic-acid-collection/nucleic-acid-collection.component.html

<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='15' class="list-template__searchBox"></div>
      <div nz-col nzXl="9" class="list-template__btns"></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="4%">序号</th>
            <th nzWidth="10%">批次号</th>
            <th nzWidth="10%">楼栋名称</th>
            <th nzWidth="10%">创建时间</th>
            <th nzWidth="10%">工单总数</th>
            <th nzWidth="10%">状态</th>
            <th nzWidth="10%">闭环时间</th>
            <th nzWidth="10%">闭环人</th>
            <th nzWidth="10%">备注</th>
            <th nzWidth="16%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let i = index">
            <td>{{ i + (pageIndex - 1) * pageSize + 1}}</td>
            <td>{{ data.batchNo || '无' }}</td>
            <td>{{ data.buildId?data.buildId.buildingName:'无' }}</td>
            <td>{{data.addTime?(data.addTime|date:'yyyy-MM-dd HH:mm'):'无'}}</td>
            <td>{{data.orderCount || '无'}}</td>
            <td>{{data.closedLoopState == 1?'已闭环':'未闭环'}}</td>
            <td>{{data.closedLoopTime?(data.closedLoopTime|date:'yyyy-MM-dd HH:mm'):'无'}}</td>
            <td>{{data.closedLoopUser ? data.closedLoopUser.name : '无'}}</td>
            <td>{{data.remark || '无'}}</td>
            <td>
              <div class="coop">
                <span *ngIf="data.pictureId" (click)="previewImageHandler(data)">查看图片</span>
                <button nz-button nzType="link" *ngIf="isShowNucleicAcidPrinting && data.closedLoopState === 0" (click)="supplementPrint(data)" [nzLoading]="data.isOkLoading">补打</button>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
        </nz-pagination>
      </div>
    </div>
  </div>
  <app-image-viewer [imageUrl]="imgs" hidden *ngIf="isPreview" [isPreviewNow]="true"></app-image-viewer>
</div>
<!-- 打印的内容 -->
<div id="print-section" hidden>
  <div *ngFor="let building of nucleicAcidList;let first = first;" [ngStyle]="{'page-break-before':first?'':'always'}" style="overflow: hidden;">
    <h1 style="text-align: center;position: relative;"><span style="position: absolute;left: 0;font-size:0.5em;top: 50%;transform: translateY(-50%);">{{printDate|date:'yyyy-MM-dd HH:mm'}}</span>{{building.buildName}}<img style="width: 50px;position: absolute;right: 50px;" [src]="mapQrcodes[building.buildId]"></h1>
    <div style="width: 50%;float: left;">
      <div style="display: flex;justify-content: center;text-align: center;font-weight: bold;">
        <span style="flex: 2; border: 1px solid #ccc;">科室名称</span>
        <span style="flex: 1; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;">数量</span>
      </div>
    </div>
    <div style="width: 50%;float: left;">
      <div style="display: flex;justify-content: center;text-align: center;font-weight: bold;">
        <span style="flex: 2; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;">科室名称</span>
        <span style="flex: 1; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;">数量</span>
      </div>
    </div>
    <div *ngFor="let item of building.deptData;let even = even;" style="width: 50%;float: left;">
      <div style="display: flex;justify-content: center;text-align: center;">
        <span style="flex: 2;word-break: break-all; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;" [ngStyle]="{'border-left':even?'1px solid #ccc':''}">{{item.deptName}}<span *ngIf="item.workOrderRemarks">+{{item.workOrderRemarks.slice(0,2)}}</span></span>
        <span style="flex: 1; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;"></span>
      </div>
    </div>
  </div>
</div>
<button ngxPrint printSectionId="print-section" #printBtn hidden>打印</button>