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 arr">
            <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">
              2021.01.05
            </div>
            <div nz-col nzSpan="4">
              2021.01.05
            </div>
            <div nz-col nzSpan="4">
              2021.01.05
            </div>
            <div nz-col nzSpan="3" class="btn">
              <span>
                编辑
              </span>
              <span>
                删除
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
          nzShowQuickJumper></nz-pagination>
        <ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
      </div>
    </div>
  </div>
</div>