ShangHaiYuan-AnXin/src/app/plan-management/pass-plan/pass-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 ordiv">
          <label style="margin-right: 10px;">消防救援站:</label>
          <mat-form-field class="example-full-width">
            <input readonly matInput placeholder="请选择消防救援站" autocomplete="off" [(ngModel)]="js" name="js"  (focus)="openorganizationbox()">
          </mat-form-field>
          <mat-checkbox style="margin-left: 6px;" [(ngModel)]="jscheck" name="jscheck">包含下级</mat-checkbox>
          <div class="organizationbox" *ngIf="isorganizationbox">
              <div (click)="closediv()" class="closediv"><mat-icon>clear</mat-icon></div>
              <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
                  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
                      <button type="button" mat-icon-button disabled ></button>
                      <li>{{node.name}}</li>
                  </mat-tree-node>
                  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
                      <button 
                          type="button" 
                          mat-icon-button 
                          matTreeNodeToggle
                          [attr.aria-label]="'toggle ' + node.name">
                      <mat-icon class="mat-icon-rtl-mirror">
                          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                      </mat-icon>
                      </button>
                      <li>{{node.name}}</li>
                  </mat-tree-node>
              </mat-tree>  
          </div>
        </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>

<!-- 
<button (click)="routerTo('222')">跳转查看预案页面</button> -->