ShangHaiYuan-AnXin/src/app/plan-management/open-plan/open-plan.component.html

<div style="height: 100%;overflow: auto;">
  <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 [(ngModel)]="preparelevel" name="preparelevel" placeholder='请选择编制级别'>
              <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>
          <span *ngIf="padMore" style="margin-left: 20px; color: #0080FF;" (click)='padInfo()'>更多筛选条件<img [src]='imgsrcopen'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
          <span *ngIf="padput" style="margin-left: 10px; color: #0080FF;" (click)='padInfo()'>收起<img [src]='imgsrcdown'style="width: 10px;height: 6px;margin:0 0 3px 2px;"> </span>
        </div>
        
      <div class="queryField" *ngIf="!pcfind">
        <button mat-raised-button color="primary">查询</button>
        <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
      </div>
      <div class="queryField" *ngIf="!padMore">
        <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" *ngIf="!padMore">
        <label style="margin-right: 10px;">预案类型:</label>
        <mat-form-field>
          <mat-select [(ngModel)]="reservePlanType" name="reservePlanType" placeholder='请选择预案类型'>
            <mat-option value="16">文本预案</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" *ngIf="!padMore">
        <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='true' [(ngModel)]="IsNewData">
        <label style="margin-right: 10px;margin-left: 2px;">新增</label>
        <input type="radio" style="height: 16px;width: 16px;position: relative;top: 2px;" name="whgx" [value]='false' [(ngModel)]="IsNewData">
        <label style="margin-right: 10px;margin-left: 2px;">维护更新</label>
      </div>
      
      <div class="queryField" *ngIf="pcfind" >
        <button mat-raised-button color="primary">查询</button>
        <button mat-raised-button style="margin-left: 25px;" type="button"  (click)="reset()">重置</button>
      </div>
      </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="state">
            <th mat-header-cell *matHeaderCellDef style="width: 10%;">预案状态</th>
            <td mat-cell *matCellDef="let element">
              <span class="add" *ngIf="element.isNewData">新增</span>
              <span class="weihu" *ngIf="!element.isNewData">维护更新</span>
            </td>
        </ng-container>
          <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>
</div>