pad-Sixfamiliar/src/app/plan-management/open-plan/open-plan.component.html

<div class="header">
    <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
      <div class="queryBox">
        <div class="queryField">
          <label style="margin-right: 10px;">单位名称:</label>
          <mat-form-field class="example-full-width">
            <input matInput placeholder="请输入单位名称" name="companyName" [(ngModel)]="companyName" autocomplete="off">
          </mat-form-field>
        </div>

  
        <div class="queryField">
          <label style="margin-right: 10px;">单位类型:</label>
          <mat-form-field>
              <mat-select placeholder='请选择单位类型' [(ngModel)]="unittype" name="unittype">
                  <mat-option *ngFor="let unit of allunittype" [value]="unit.id" >
                      {{unit.name}}
                  </mat-option>
              </mat-select>
          </mat-form-field>
      </div>
      <div class="queryField">
        <label style="margin-right: 10px;">预案类型:</label>
        <mat-form-field>
          <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
            <mat-option value="8">卡片预案</mat-option>
            <mat-option value="1">二维预案</mat-option>
            <mat-option value="2">三维预案</mat-option>
            <mat-option value="4">其他预案</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
        
      <div class="queryField">
        <label style="margin-right: 10px;">编制级别:</label>
        <mat-form-field>
          <mat-select [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
            <!-- <mat-option value="1">总队</mat-option>
            <mat-option value="2">支队</mat-option>
            <mat-option value="4">大队</mat-option>
            <mat-option value="8">中队</mat-option> -->
            <mat-option *ngFor="let item of preparelevels" [value]="item.value">{{item.name}}</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-checkbox style="margin-left: 6px;" [(ngModel)]="plcheck" name="plcheck">包含下级</mat-checkbox>
      </div>
  
      </div>
      <div style="width: 100%;text-align: center;">
          <button mat-raised-button color="primary" type="submit">查询</button>
          <button mat-raised-button style="margin-left: 25px;" type="button" (click)="reset()">重置</button>
      </div>
    </form>
</div>
<mat-divider></mat-divider>
<div class="body">
    <div class="tablebox">
        <table mat-table [dataSource]="tabledataSource" class="mat-elevation-z8">
          <ng-container matColumnDef="unitname">
            <th mat-header-cell *matHeaderCellDef>单位名称</th>
            <td mat-cell *matCellDef="let element">{{element.companyName}}</td>
        </ng-container>
        <ng-container matColumnDef="planname">
          <th mat-header-cell *matHeaderCellDef>预案名称</th>
          <td mat-cell *matCellDef="let element">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="addpeople">
          <th mat-header-cell *matHeaderCellDef>添加人</th>
          <td mat-cell *matCellDef="let element">{{element.creatorName}}</td>
        </ng-container>
        <ng-container matColumnDef="addtime">
          <th mat-header-cell *matHeaderCellDef>添加时间</th>
          <td mat-cell *matCellDef="let element">{{element.creationTime | date:'yyyy-MM-dd'}}</td>
        </ng-container>
        <ng-container matColumnDef="plantype">
          <th mat-header-cell *matHeaderCellDef>预案类型</th>
          <td mat-cell *matCellDef="let element">{{element.planType | plantype}}</td>
        </ng-container>
        <ng-container matColumnDef="auditStatus">
          <th mat-header-cell *matHeaderCellDef>审核状态</th>
          <td mat-cell *matCellDef="let element">{{element.auditStatus | auditsatus}}</td>
        </ng-container>

        <ng-container matColumnDef="openRange">
            <th mat-header-cell *matHeaderCellDef>是否公开</th>
            <td mat-cell *matCellDef="let element">{{element.openRange}}</td>
        </ng-container>
        <ng-container matColumnDef="projectlevel">
          <th mat-header-cell *matHeaderCellDef>编制级别</th>
          <td mat-cell *matCellDef="let element">{{element.planLevel | planlevel}}</td>
        </ng-container>
            <ng-container matColumnDef="operation">
                <th mat-header-cell *matHeaderCellDef>操作</th>
                <td mat-cell *matCellDef="let element">
                    <span (click)="routerTo(element)" style="color: blue;cursor: pointer;">查看预案</span>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [length]="length"
            [pageSize]="pageSize"
            [pageSizeOptions]="pageSizeOptions"
            (page)="chagePage($event)">
        </mat-paginator>
    
    </div>
</div>