Sinopec-Anxin/src/app/pages/equipment-info/equipment-info.component.html

<!-- <p>器材管理</p> -->
<div class="box" id="equipmentInfo">
  <div class="content">
    <div class="title">
      <app-title [name]="'编辑器材信息'"></app-title>
    </div>
    <div class="topbox">
      <div class="lefttop">
        <span>消防器材列表</span>
      </div>
      <div class="righttop">
        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-control>
              <nz-input-group nzPrefixIcon="search">
                <input type="text" nz-input placeholder="请输入器材名称" formControlName="search" />
              </nz-input-group>
            </nz-form-control>
            <button style="display: none;" type="submit"></button>
          </nz-form-item>
        </form>
        <button nz-button (click)="add()">新增</button>
      </div>
    </div>
    <div class="tablebox">
      <div class="table">
        <div nz-row class="th">
          <div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;">
            消防器材
          </div>
          <div nz-col nzSpan="4">
            存放地点
          </div>
          <div nz-col nzSpan="4">
            生产日期
          </div>
          <div nz-col nzSpan="4">
            下次维保日期
          </div>
          <div nz-col nzSpan="4">
            有效期至
          </div>
          <div nz-col nzSpan="3">
            操作
          </div>
        </div>
        <div class="tbody">
          <div nz-row class="tr" *ngFor="let item of equipmentList">
            <div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;">
              <span nz-tooltip [nzTooltipTitle]="item.name">{{item.name}}</span>
            </div>
            <div nz-col nzSpan="4">
              <span nz-tooltip [nzTooltipTitle]="item.storageLocation">{{item.storageLocation}}</span>
            </div>
            <div nz-col nzSpan="4">
              <span nz-tooltip [nzTooltipTitle]="item.productionDate | date:'yyyy-MM-dd'">{{item.productionDate |
                date:"yyyy-MM-dd"}}</span>
            </div>
            <div nz-col nzSpan="4">
              <span nz-tooltip [nzTooltipTitle]="item.maintenanceDate | date:'yyyy-MM-dd'">{{item.maintenanceDate |
                date:"yyyy-MM-dd"}}</span>
            </div>
            <div nz-col nzSpan="4">
              <span nz-tooltip [nzTooltipTitle]="item.validityEndTime | date:'yyyy-MM-dd'">{{item.validityEndTime |
                date:"yyyy-MM-dd"}}</span>
            </div>
            <div nz-col nzSpan="3" class="btn">
              <span (click)="edit(item)">
                编辑
              </span>
              <span (click)="delete(item)">
                删除
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="equipmentNum" [nzPageSize]="16"
          [nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)">
        </nz-pagination>
        <ng-template #totalTemplate let-total> 16条/页,共{{equipmentNum}}条 </ng-template>
      </div>
    </div>
  </div>
  <div class="backbtn">
    <button nz-button (click)="goback()">返回</button>
  </div>
</div>