基础数据查询二次优化修改

src/app/pages/basic-data/airport/airport.component.html

@@ -5,16 +5,7 @@
               <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="">
                             <option value="">选择列名</option>
-                            <option value="airportCode">机场代码</option>
-                            <option value="airportNameChn">机场中文名</option>
-                            <option value="briefNameChn">中文简称</option>
-                            <option value="airportNameEng">机场英文名</option>
-                            <option value="briefNameEng">英文简称</option>
-                            <option value="airportCodeIata">IATA码</option>
-                            <option value="airportCodeCaa">CAA码</option>
-                            <option value="airportCodeIcao">ICAO码</option>
-                            <option value="airportGroupId">机场集团</option>
-                            <option value="cityName">所在城市</option>
+                            <option *ngFor="let col of col_lists" [value]="col.col_code">{{col.col_chn}}</option>
                     </select>
                     <label class="radio-inline custom-radio nowrap mr-4">
                             <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
@@ -26,13 +17,6 @@
                     </label>
                     <input class="form-control" [(ngModel)]="SEARCH" type="text" (keyup.enter) = "inputEnter()" id="inputInfo">
               </div>
-              <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
-                  <!-- <button type="button" class="btn btn-info mr-3">打印</button>
-                  <button type="button" class="btn btn-info mr-3">机场管理</button>
-                  <button type="button" class="btn btn-info mr-3">机场集团管理</button>
-                  <button type="button" class="btn btn-info mr-3">定制查询</button> -->
-                  <!-- <button type="button" class="btn btn-info mr-3">刷新</button> -->
-              </div>
           </div>
 
           <div class="second-condition mb-3 row">
@@ -40,8 +24,6 @@
               <label for="airportGroupId">机场集团：&nbsp;&nbsp;</label>
               <select  class="form-control" [(ngModel)]="filterItems.airportGroupId" (ngModelChange)="selectChange()" id="jt">
                   <option value=""></option>
-                  <!-- <option value="GH">国内机场</option>
-                  <option value="CH">国际机场</option> -->
                   <option *ngFor="let item of airports" [value]="item.airportGroupId">{{item.airportGroupId}}</option>
               </select>
           </div>
@@ -49,9 +31,6 @@
               <label for="cityId">城市：&nbsp;&nbsp;</label>
               <select  class="form-control" [(ngModel)]="filterItems.cityId" (ngModelChange)="selectChange()" id="city">
                   <option value=""></option>
-                  <!-- <option value="GZ">广州</option>
-                  <option value="SH">上海</option>
-                  <option value="BJ">北京</option> -->
                   <option *ngFor="let item of citys" [value]="item.cityId">{{item.cityNameChn}}</option>
               </select>
           </div>
@@ -74,7 +53,6 @@
                           <th>ICAO码</th>
                           <th>机场集团</th>
                           <th>所在城市</th>
-                          <!-- <th *ngFor="let airline_col of airport_lists">{{airline_col.COL_CN}}</th> -->
                       </tr>
                   </thead>
                   <tbody>
@@ -90,8 +68,7 @@
                           <td>{{airport.airportCodeCaa}}</td>
                           <td>{{airport.airportCodeIcao}}</td>
                           <td>{{airport.airportGroupId}}</td>
-                          <td>{{airport.cityName}}</td>
-                          <!-- <td *ngFor="let airline_col of airport_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td> -->
+                          <td>{{airport.cityId}}</td>
                       </tr>
                   </tbody>
               </table>

src/app/pages/basic-data/airport/airport.component.ts

@@ -1,98 +1,98 @@
 import { Component, OnInit } from '@angular/core';
-import { HttpClientService } from '../../../services/http-client.service';
-import { HttpParams } from '@angular/common/http';
+import { BasicDataService } from '../../basic-data-service';
 import * as $ from 'jquery';
-import { BasicDataService } from '../../basic-data-service'
+
 @Component({
-  selector: 'app-airport',
-  templateUrl: './airport.component.html',
-  styleUrls: ['./airport.component.scss']
+    selector: 'app-airport',
+    templateUrl: './airport.component.html',
+    styleUrls: ['./airport.component.scss']
 })
 export class AirportComponent implements OnInit {
 
-  constructor(
-    private httpCilent: HttpClientService,
-    private basicDataService: BasicDataService
-) { }
+    constructor(
+        private basicDataService: BasicDataService
+    ) { }
 
-// 搜索条件
-SEARCH = '';    //手动输入条件
-FLT_POS = 1;    //过滤还是定位
-SEL_COL = '';   //选择列名
+    public col_lists = [
+        { col_code: 'airportCode', col_chn: '机场代码' },
+        { col_code: 'airportNameChn', col_chn: '机场中文名' },
+        { col_code: 'briefNameChn', col_chn: '中文简称' },
+        { col_code: 'airportNameEng', col_chn: '机场英文名' },
+        { col_code: 'briefNameEng', col_chn: '英文简称' },
+        { col_code: 'airportCodeIata', col_chn: 'IATA码' },
+        { col_code: 'airportCodeCaa', col_chn: 'CAA码' },
+        { col_code: 'airportCodeIcao', col_chn: 'ICAO码' },
+        { col_code: 'airportGroupId', col_chn: '机场集团' },
+        { col_code: 'cityId', col_chn: '所在城市' },
+    ]
 
-//下拉框
-public filterItems = {
-    airportGroupId:'',
-    cityId:'',
-}
-citys : Array<any>; //城市
-airports : Array<any>;
-public row_state: any = { renderFlight: {} };
-public render_data: Array<object> = [];  //显示数据，即需要显示的数据
-public return_data: Array<object> = []; //下拉框显示数据
+    // 搜索条件
+    SEARCH = '';    //手动输入条件
+    FLT_POS = 1;    //过滤还是定位
+    SEL_COL = '';   //选择列名
 
-ngOnInit() {
-    this.airports = this.basicDataService.airport;
-    this.basicDataService.airport_subject.subscribe(
-        data=>{
-            this.airports = data;
-            this.render_data = this.airports;
-            if(this.citys && this.citys.length > 0){//所在城市列表数据转换
-                this.basicDataTransHandle();
+    //下拉框
+    public filterItems = {
+        airportGroupId: '',
+        cityId: '',
+    }
+
+    citys: Array<any>; //城市
+    airports: Array<any>;
+    public row_state: any = { renderFlight: {} };
+    public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+
+    ngOnInit() {
+        this.citys = this.basicDataService.city;
+        this.airports = this.basicDataService.airport;
+        this.render_data = this.basicDataService.airport;
+        this.basicDataService.airport_subject.subscribe(
+            data => {
+                this.airports = data;
+                this.render_data = data;
             }
+        )
+        this.basicDataService.city_subject.subscribe(
+            data => {
+                this.citys = data;
+            }
+        )
+        /**
+         * 固定表头
+         */
+        var tableCont = document.querySelector('#table-container');
+        function scrollHandle() {
+            var scrollTop = this.scrollTop;
+            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
         }
-    )
-    //城市
-    this.citys = this.basicDataService.city;
-    this.basicDataService.city_subject.subscribe(
-        data=>{
-            this.citys = data;
-        }
-    )
+        tableCont.addEventListener('scroll', scrollHandle);
+    }
+
+
     /**
-     * 固定表头
+     * 选中某行
+     * @param i 
      */
-    var tableCont = document.querySelector('#table-container');
-    function scrollHandle (){
-      var scrollTop = this.scrollTop;
-      this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
+    selectRow(i) {
+        this.row_state = i;
     }
-    tableCont.addEventListener('scroll',scrollHandle);
-}
 
-//所在城市数据转换处理
-basicDataTransHandle() {
-    this.render_data.forEach(item => {
-        let citysLinkIndex = this.citys.findIndex(val => val.cityId === item['cityId']);
-        item['cityName'] = this.citys[citysLinkIndex].cityNameChn;
-    })
-}
-
-/**
- * 选中某行
- * @param i 
- */
-selectRow(i) {
-    this.row_state = i;
-}
-
-//输入框回车事件
-inputEnter() {
-    if (this.FLT_POS === 1) {
-        this.inputFilter(this.airports)
-    } else {
-        this.inputFilter(this.airports)
-        this.inputPosition(this.airports)
+    //输入框回车事件
+    inputEnter() {
+        if (this.FLT_POS === 1) {
+            this.selectChange()
+        } else {
+            this.inputPosition(this.render_data)
+        }
     }
-}
 
-//下拉框选择筛选
-selectChange() {
-    this.return_data = this.airports.filter(item=>{
+    //下拉框选择筛选
+    selectChange() {
+        this.render_data = this.airports.filter(item => {
             let is_satis = true;
             for (const key in this.filterItems) {
                 if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
-                    if (item[key] === +this.filterItems[key] || item[key] === this.filterItems[key]) {
+                    if (item[key] == this.filterItems[key]) {
                         is_satis = true;
                         continue;
                     } else {
@@ -102,36 +102,36 @@ selectChange() {
                 }
             }
             return is_satis;
-    })
-    this.render_data = this.return_data;
-}
-
-//输入框筛选
-inputFilter(filterData) {
-    if (this.SEARCH) {
-        if (this.SEL_COL) {
-            let sel_col = this.SEL_COL;
-            filterData = filterData.filter(item => {
-                if (item[sel_col]) {
-                    if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                        return true;
-                    }
-                } else {
-                    if (this.SEARCH) {
-                        return false;
-                    } else {
-                        return true;
-                    }
-                }
-            })
-
+        })
+        if (this.FLT_POS === 1) {
+            this.inputFilter(this.render_data);
         } else {
-            filterData = filterData.filter(item => {
-                let is_satis = false;
-                for (const key in item) {
-                    if (item.hasOwnProperty(key)) {
-                        if (item[key]) {
-                            if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+            this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
+        }
+    }
+
+    //输入框筛选
+    inputFilter(filterData) {
+        if (this.SEARCH) {
+            if (this.SEL_COL) {
+                let sel_col = this.SEL_COL;
+                this.render_data = filterData.filter(item => {
+                    if (item[sel_col]) {
+                        if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                            return true;
+                        }
+                    } else {
+                        return false;
+                    }
+                })
+
+            } else {
+                filterData = filterData.filter(item => {
+                    let is_satis = false;
+                    let cols = this.col_lists;
+                    for (let i = 0; i < cols.length; i++) {
+                        if (item[cols[i].col_code]) {
+                            if (item[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) {
                                 is_satis = true;
                                 break;
                             } else {
@@ -139,50 +139,42 @@ inputFilter(filterData) {
                                 continue;
                             }
                         } else {
-                            if (this.SEARCH) {
-                                is_satis = false;
-                                continue;
-                            } else {
-                                is_satis = true;
-                                break;
-                            }
+                            is_satis = false;
+                            continue;
                         }
-                    } else {
-                        continue;
                     }
-                }
-                return is_satis;
-            })
+                    return is_satis;
+                })
+            }
+        } else {
+            this.render_data = filterData;
         }
     }
-    this.render_data = filterData;
-    this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-}
 
-positionArray: Array<any> = [];
-positionArrayIndex: number = 0;
-//输入框定位
-inputPosition(filterData) {
-    let transArray = []
-    if (this.SEL_COL) {
-        let sel_col = this.SEL_COL;
-        filterData.forEach(element => {
-            if (element[sel_col]) {
-                if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                    transArray.push(element)
+    positionArray: Array<any> = [];
+    positionArrayIndex: number = 0;
+    //输入框定位
+    inputPosition(filterData) {
+        let transArray = []
+        if (this.SEL_COL) {
+            let sel_col = this.SEL_COL;
+            filterData.forEach(element => {
+                if (element[sel_col]) {
+                    if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                        transArray.push(element)
+                    }
+                } else {
+                    if (!this.SEARCH) {
+                        transArray.push(element)
+                    }
                 }
-            } else {
-                if (!this.SEARCH) {
-                    transArray.push(element)
-                }
-            }
-        });
-    } else {
-        filterData.forEach(element => {
-            for (const key in element) {
-                if (element.hasOwnProperty(key)) {
-                    if (element[key]) {
-                        if (element[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+            });
+        } else {
+            filterData.forEach(element => {
+                let cols = this.col_lists;
+                for (let i = 0; i < cols.length; i++) {
+                    if (element[cols[i].col_code]) {
+                        if (element[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) {
                             transArray.push(element)
                             break;
                         } else {
@@ -196,31 +188,29 @@ inputPosition(filterData) {
                             break;
                         }
                     }
-
-                } else {
-                    continue;
                 }
-            }
-        });
-    }
+            });
+        }
 
-    if (transArray.length > 0) {
-        if (transArray.toString() == this.positionArray.toString()) {
-            this.positionArrayIndex++;
-            if (this.positionArrayIndex === this.positionArray.length) {
+        if (transArray.length > 0) {
+            if (transArray.toString() == this.positionArray.toString()) {
+                this.positionArrayIndex++;
+                if (this.positionArrayIndex === this.positionArray.length) {
+                    this.positionArrayIndex = 0;
+                }
+                this.row_state = this.positionArray[this.positionArrayIndex];
+            } else {
+                this.positionArray = transArray;
                 this.positionArrayIndex = 0;
+                this.row_state = this.positionArray[this.positionArrayIndex];
             }
-            this.row_state = this.positionArray[this.positionArrayIndex];
         } else {
-            this.positionArray = transArray;
-            this.positionArrayIndex = 0;
-            this.row_state = this.positionArray[this.positionArrayIndex];
+            alert('没有搜索到相关数据');
         }
-    } else {
-        alert('没有搜索到相关数据');
-    }
         let tr = $(".selected");
         let objTr = tr[0];
-        $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
+        if (objTr) {
+            $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow");
+        }
     }
 }