季度计划表格高度自适应等优化

src/app/pages/seasonal-plan/seasonal-plan.component.html

@@ -1,6 +1,6 @@
-<div class="main-page">
+<div class="main-page" #mainPage>
   <div class="page-content">
-      <div class="search-filter mb-3">
+      <div class="search-filter mb-3" #searchFilter>
           <div class="first-condition row">
                <div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
                   <select class="mr-4 form-control" [(ngModel)]="SEL_COL" name="" id="">
@@ -17,12 +17,13 @@
                     </label>
                     <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()">
                </div>
-               <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
+               <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-2">
-                     <button type="button" class="btn btn-info mr-3" (click)="refresh()">刷新</button>
+                    <button type="button" class="btn btn-info mr-2" (click)="toggleFilter()">{{filterClose?'展开':'关闭'}}</button>
+                     <button type="button" class="btn btn-info mr-2" (click)="refresh()">刷新</button>
                </div>
           </div>
 
-          <div class="second-condition mb-3 row">
+          <div class="second-condition mb-3 row" [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}">
                 <div class="input-container mr-4">
                     <label for="airlineId">航空公司：&nbsp;&nbsp;</label>
                     <select  class="form-control" [(ngModel)]="filterItems.airlineId" (ngModelChange)="selectChange()">
@@ -60,7 +61,7 @@
                     </select>
                 </div>
           </div>
-          <div class="third-condition row">
+          <div class="third-condition row" [ngClass]="{'filterClose-c':filterClose,'filterClose-o':!filterClose}">
                 <label class="radio-inline custom-checkbox nowrap mr-4">
                     <input type="checkbox" [(ngModel)]="checkboxGroup.related" (ngModelChange)="checkboxChange()">
                     <span>航班关联信息</span>
@@ -73,7 +74,7 @@
       </div>
 
       <div class="airline-table">
-            <div id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
+            <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                     <table id="table" class="table table-bordered table-striped">
                         <thead>
                             <tr>

src/app/pages/seasonal-plan/seasonal-plan.component.scss

@@ -20,6 +20,9 @@
                     }
                 }
             }
+            .second-condition,.third-condition{
+                display: none;
+            }
             .input-container {
                 padding: 0;
                 > .form-control {
@@ -27,6 +30,12 @@
                     display: inline-block;
                 }
             }
+            .filterClose-c{
+                display: none;
+            }
+            .filterClose-o{
+                display: flex;
+            }
         }
         .airline-table{
             .table-container{
@@ -48,10 +57,10 @@
                         background-color: #ddd;
                         color: rgb(0, 0, 255);
                     }
-                    /* th,td{
+                    th,td{
                         // border: none;
                         text-align: center;
-                    } */
+                    }
                 }
                 &::-webkit-scrollbar {
                     width: 15px;

src/app/pages/seasonal-plan/seasonal-plan.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit ,ViewChild,Renderer2 } from '@angular/core';
 import { HttpClientService } from '../../services/http-client.service';
 import { BasicDataService } from '../../services/basic-data-service';
 import { ChangeDetectorRef } from '@angular/core';
@@ -15,6 +15,7 @@ declare var laydate: any;
 export class SeasonalPlanComponent implements OnInit {
 
     constructor(
+        private renderer2: Renderer2,
         private httpCilent: HttpClientService,
         private basicDataService: BasicDataService,
         private toastService: ToastService,
@@ -69,9 +70,17 @@ export class SeasonalPlanComponent implements OnInit {
     public row_state: any = { renderFlight: {} };
     public render_data: Array<object> = [];  //显示数据，即需要显示的数据
     public return_data: Array<object> = []; //下拉框显示数据
+
+    @ViewChild('mainPage') mainPage;
+    @ViewChild('searchFilter') searchFilter;
+    @ViewChild('tableContainer') tableContainer;
     ngOnInit() {
         //选择年份
         this.laydateYear();
+        this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        window.onresize = function () {
+            this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.mainPage.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 55 + 'px');
+        }.bind(this)
         /* 获取季度计划信息 */
         var value = new Date(new Date().getTime());
         var subValue = format(value).substring(11,15); //时间截取到年份
@@ -258,6 +267,13 @@ export class SeasonalPlanComponent implements OnInit {
         });
     }
 
+    public filterClose: boolean = true;
+    //点击展开切换操作
+    toggleFilter() {
+        this.filterClose = !this.filterClose;
+        this.changeDetectorRef.detectChanges();
+    }
+
     /**
      * 复选框勾选事件
      */