1

src/views/advancedQuery/views/advancedHome.vue

@@ -4,15 +4,30 @@
       <div class="flex-wrap interfaceLog_head_time">
         <div class="manageTitle">高级查询</div>
         <div class="interfaceLog_head_time_start mr10">
-          <el-date-picker v-model="timeStart" size="small" type="date" placeholder="选择开始日期时间">
+          <el-date-picker
+            v-model="timeStart"
+            size="small"
+            type="date"
+            placeholder="选择开始日期时间"
+          >
           </el-date-picker>
         </div>
         <div class="interfaceLog_head_time_end">
-          <el-date-picker v-model="timeEnd" size="small" type="date" placeholder="选择结束日期时间">
+          <el-date-picker
+            v-model="timeEnd"
+            size="small"
+            type="date"
+            placeholder="选择结束日期时间"
+          >
           </el-date-picker>
         </div>
       </div>
-      <Search @getSearchData="getSearchData" @clearSearchData="clearSearchData" :isTitle="false" :isSlot="true">
+      <Search
+        @getSearchData="getSearchData"
+        @clearSearchData="clearSearchData"
+        :isTitle="false"
+        :isSlot="true"
+      >
         <div class="flex-wrap">
           <button @click="gjFlag = true" class="btnAn">高级查询</button>
           <div @click="show" class="setting"></div>
@@ -20,34 +35,75 @@
       </Search>
     </div>
     <!--表格-->
-    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="advance__table">
+    <div
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+      class="advance__table"
+    >
       <!-- <el-table ref="table" max-height="100%" show-summary class="table" :data="tableData" border stripe height="calc(100vh - 155px)" style="width: 100%">
         <el-table-column v-for="(item, index) in tableColsCopy" :prop="item.statCode" :label="item.statName" :key="index">
         </el-table-column>
       </el-table> -->
-      <el-table ref="table" max-height="100%" show-summary class="table" :data="tableData" border stripe height="calc(100vh - 155px)" style="width: 100%" @row-click="rowClickHandler">
-        <el-table-column prop="FlightNO" label="航班号"></el-table-column>
-        <el-table-column prop="FlightDate" label="航班日期"></el-table-column>
-        <el-table-column prop="SourceAirport" label="起飞站"></el-table-column>
-        <el-table-column prop="TargetAirport" label="目的地"></el-table-column>
-        <el-table-column prop="PassengerNameUpcase" label="旅客姓名"></el-table-column>
+      <el-table
+        ref="table"
+        max-height="100%"
+        class="table"
+        :data="tableData"
+        border
+        stripe
+        height="calc(100vh - 155px)"
+        style="width: 100%"
+        @row-click="rowClickHandler"
+      >
+        <el-table-column prop="FlightNO" label="航班号" :filters="FlightNOItem"
+          :filter-method="filterHandler"> </el-table-column>
+        <el-table-column prop="FlightDate" label="航班日期" :filters="FlightDateItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column prop="SourceAirport" label="起飞站" :filters="SourceAirportItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column prop="TargetAirport" label="目的地" :filters="TargetAirportItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column
+          prop="PassengerNameUpcase"
+          label="旅客姓名"
+          :filters="PassengerNameUpcaseItem"
+          :filter-method="filterHandler"
+        >
+        </el-table-column>
         <el-table-column prop="BagSN" label="行李牌号"></el-table-column>
-        <el-table-column prop="SpecialType" label="特殊行李类型"></el-table-column>
-        <el-table-column prop="checkIn" label="值机"></el-table-column>
-        <el-table-column label="删除">
+        <el-table-column
+          prop="SpecialType"
+          label="特殊行李类型"
+          :filters="SpecialTypeItem"
+          :filter-method="filterHandler"
+        ></el-table-column>
+        <el-table-column prop="checkIn" label="值机" :filters="checkInItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column label="删除" :filters="deletedItem"
+          :filter-method="filterHandler">
           <template slot-scope="scope">
-            <div>{{scope.row.deleted == 'DEL' ? 1: 0}}</div>
+            <div>{{ scope.row.deleted == "DEL" ? 1 : 0 }}</div>
           </template>
         </el-table-column>
-        <el-table-column label="激活">
+        <el-table-column label="激活" :filters="activatedItem"
+          :filter-method="filterHandler">
           <template slot-scope="scope">
-            <div>{{scope.row.activated == 'I' ? 0 : 1}}</div>
+            <div>{{ scope.row.activated == "I" ? 0 : 1 }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="BagWeight" label="重量"></el-table-column>
-        <el-table-column prop="latestStatus" label="最新状态"></el-table-column>
-        <el-table-column prop="bagLocation" label="最新位置"></el-table-column>
-        <el-table-column prop="TransferFlightNO" label="中转进航班"></el-table-column>
+        <el-table-column prop="latestStatus" label="最新状态" :filters="latestStatusItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column prop="bagLocation" label="最新位置" :filters="bagLocationItem"
+          :filter-method="filterHandler"></el-table-column>
+        <el-table-column
+          prop="TransferFlightNO"
+          label="中转进航班"
+          :filters="TransferFlightNOItem"
+          :filter-method="filterHandler"
+        ></el-table-column>
       </el-table>
     </div>
     <!--列设置-->
@@ -57,14 +113,21 @@
         <div class="content">
           <el-checkbox-group v-model="checkList">
             <el-row :gutter="20">
-              <el-col v-for="(item, index) in tableCols" :key="index" class="ck" :span="6">
+              <el-col
+                v-for="(item, index) in tableCols"
+                :key="index"
+                class="ck"
+                :span="6"
+              >
                 <el-checkbox :label="item">{{ item.statName }}</el-checkbox>
               </el-col>
             </el-row>
           </el-checkbox-group>
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" @click="onCheck" type="primary">确定</el-button>
+          <el-button size="medium" class="r24" @click="onCheck" type="primary"
+            >确定</el-button
+          >
           <el-button size="medium" @click="close">取消</el-button>
         </div>
       </div>
@@ -78,7 +141,14 @@
             <el-row :gutter="20">
               <el-col :span="16">
                 <el-form-item label="航班日期" prop="time">
-                  <el-date-picker v-model="form.time" size="small" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
+                  <el-date-picker
+                    v-model="form.time"
+                    size="small"
+                    type="daterange"
+                    value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                  >
                   </el-date-picker>
                 </el-form-item>
               </el-col>
@@ -118,7 +188,11 @@
               </el-col>
               <el-col :span="8">
                 <el-form-item label="容器编号">
-                  <el-input disabled size="small" v-model="form.container"></el-input>
+                  <el-input
+                    disabled
+                    size="small"
+                    v-model="form.container"
+                  ></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -142,7 +216,9 @@
           </el-form>
         </div>
         <div class="foot right t30">
-          <el-button size="medium" class="r24" @click="onCheckGj" type="primary">确定</el-button>
+          <el-button size="medium" class="r24" @click="onCheckGj" type="primary"
+            >确定</el-button
+          >
           <el-button size="medium" @click="closeCheckGj">取消</el-button>
         </div>
       </div>
@@ -151,14 +227,14 @@
 </template>
 
 <script>
-import Search from '@/layout/components/Search';
+import Search from "@/layout/components/Search";
 import Dialog from "@/layout/components/Dialog";
-import { advancedInquiry, getQuery } from '@/api/flight';
-import { parseTime } from '@/utils/index';
+import { advancedInquiry, getQuery } from "@/api/flight";
+import { parseTime } from "@/utils/index";
 export default {
-  name: 'Advance',
+  name: "Advance",
   components: { Search, Dialog },
-  data () {
+  data() {
     return {
       loading: false,
       rowFlag: false,
@@ -184,20 +260,20 @@ export default {
       tableColsCopy: [],
       checkList: [],
       tableCols: [],
-      timeStart: parseTime(new Date(), '{y}-{m}-{d}'),
-      timeEnd: parseTime(new Date(), '{y}-{m}-{d}'),
+      timeStart: parseTime(new Date(), "{y}-{m}-{d}"),
+      timeEnd: parseTime(new Date(), "{y}-{m}-{d}"),
       form: {
-        time: '',
-        status: '',
-        flightNumber: '',
-        destination: '',
-        station: '',
-        grade: '',
-        type: '',
-        container: '',
-        name: '',
-        pnr: '',
-        check: ''
+        time: "",
+        status: "",
+        flightNumber: "",
+        destination: "",
+        station: "",
+        grade: "",
+        type: "",
+        container: "",
+        name: "",
+        pnr: "",
+        check: "",
       },
       dataContent: [],
       rules: {
@@ -206,9 +282,21 @@ export default {
         //   { required: true, message: "请输入有效航班号", trigger: "blur" },
         // ],
       },
-    }
+      PassengerNameUpcaseItem: [],
+      FlightNOItem: [],
+      FlightDateItem: [],
+      SourceAirportItem: [],
+      TargetAirportItem: [],
+      SpecialTypeItem: [],
+      checkInItem: [],
+      deletedItem: [],
+      activatedItem: [],
+      latestStatusItem: [],
+      bagLocationItem: [],
+      TransferFlightNOItem: [],
+    };
   },
-  created () {
+  created() {
     //参数顺序   【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊 行李类型，旅客姓名大写拼音，旅客姓名大写拼音，pnr,pnr,值机号，值机号】
     const dataContent = [this.timeStart, this.timeEnd];
     // for (let i = 0; i < 18; i++) {
@@ -217,13 +305,21 @@ export default {
     // this.integratedQuery();
     // this.statItemsQueryByStatMain(dataContent);
   },
-  mounted () {
-    document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
-    document.querySelector('.interfaceLog_head_time_start .el-input__prefix').innerHTML = '开始：'
-    document.querySelector('.interfaceLog_head_time_end .el-input__prefix i').remove()
-    document.querySelector('.interfaceLog_head_time_end .el-input__prefix').innerHTML = '结束：'
+  mounted() {
+    document
+      .querySelector(".interfaceLog_head_time_start .el-input__prefix i")
+      .remove();
+    document.querySelector(
+      ".interfaceLog_head_time_start .el-input__prefix"
+    ).innerHTML = "开始：";
+    document
+      .querySelector(".interfaceLog_head_time_end .el-input__prefix i")
+      .remove();
+    document.querySelector(
+      ".interfaceLog_head_time_end .el-input__prefix"
+    ).innerHTML = "结束：";
   },
-  updated () {
+  updated() {
     //table数据更新
     this.$nextTick(() => {
       this.$refs.table.doLayout();
@@ -231,57 +327,57 @@ export default {
   },
   methods: {
     //查询
-    getSearchData (val) {
+    getSearchData(val) {
       this.form = {
-        time: '',
-        status: '',
-        flightNumber: '',
-        destination: '',
-        station: '',
-        grade: '',
-        type: '',
-        container: '',
-        name: '',
-        pnr: '',
-        check: ''
+        time: "",
+        status: "",
+        flightNumber: "",
+        destination: "",
+        station: "",
+        grade: "",
+        type: "",
+        container: "",
+        name: "",
+        pnr: "",
+        check: "",
       };
-      if(this.timeStart==""||this.timeEnd==""||val==""){
-        this.$message.error('请先输入完整查询信息');
-      }
-      else{
+      if (this.timeStart == "" || this.timeEnd == "" || val == "") {
+        this.$message.error("请先输入完整查询信息");
+      } else {
         // let searchData = {dataContent:[this.timeStart,this.timeEnd,val]}
-        this.form['time'] = [this.timeStart,this.timeEnd,val]
+        this.form["time"] = [this.timeStart, this.timeEnd, val];
         let az = /^[a-zA-Z]+$/;
         let azNum = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/;
         let top2 = /^[a-zA-Z]{2}\w*$/;
         let num = /^[0-9]+$/;
         //纯字母则为旅客姓名
-        if(az.test(val)){
-          this.form['name'] = val;
+        if (az.test(val)) {
+          this.form["name"] = val;
           this.onCheckGj();
         }
         //字母加数字且前两位为字母则为航班号
-        else if(azNum.test(val)&&top2.test(val)){
-          this.form['flightNumber'] = val;
+        else if (azNum.test(val) && top2.test(val)) {
+          this.form["flightNumber"] = val;
           this.onCheckGj();
         }
         //纯数字且位数等于10则为行李牌号
-        else if(num.test(val)&&num.length==10){
-          this.form['grade'] = val;
+        else if (num.test(val) && num.length == 10) {
+          this.form["grade"] = val;
           this.onCheckGj();
-        }
-        else{
-          this.$message.error('请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号');
+        } else {
+          this.$message.error(
+            "请先输入有效查询信息如航班号、旅客姓名首字母、行李牌号"
+          );
         }
         // this.sempleQueryByStatMain(searchData)
       }
     },
     //清除查询
-    clearSearchData () {
-      this.tableData=[]
+    clearSearchData() {
+      this.tableData = [];
     },
     //列设置-确定
-    onCheck () {
+    onCheck() {
       this.tableColsCopy = _.cloneDeep(this.checkList);
       const datas = _.sortBy(this.tableColsCopy, (o) => o.showOrder);
       this.tableColsCopy = datas;
@@ -289,29 +385,50 @@ export default {
       this.rowFlag = false;
     },
     //弹框展开
-    show () {
+    show() {
       this.tableCopy = this.checkList;
       this.rowFlag = true;
     },
     //弹框关闭
-    close () {
+    close() {
       this.rowFlag = false;
       this.checkList = this.tableCopy;
       this.tableColsCopy = _.cloneDeep(this.checkList);
     },
     //高级查询-确定
-    onCheckGj () {
+    onCheckGj() {
       //参数顺序   【航班开始日期，航班结束日期，航班号，航班号，行李牌号，行李牌号，起飞站，起飞站，目的站，目的站，特殊行李类型，特殊 行李类型，旅客姓名大写拼音，旅客姓名大写拼音，pnr,pnr,值机号，值机号】
       this.dataContent = [];
       this.dataContent = [];
-      const { time, status, flightNumber, destination, station, grade, type, container, name, pnr, check } = this.form
+      const {
+        time,
+        status,
+        flightNumber,
+        destination,
+        station,
+        grade,
+        type,
+        container,
+        name,
+        pnr,
+        check,
+      } = this.form;
       if (time && time.length) {
         this.dataContent.push(time[0]);
         this.dataContent.push(time[1]);
-        if (status==""&flightNumber==""&&destination==""&&station==""&&grade==""&&type==""&&container==""&&name==""&&pnr==""&&check=="") {
-          this.$message.error('请先输入查询信息');
-        }
-        else{
+        if (
+          (status == "") & (flightNumber == "") &&
+          destination == "" &&
+          station == "" &&
+          grade == "" &&
+          type == "" &&
+          container == "" &&
+          name == "" &&
+          pnr == "" &&
+          check == ""
+        ) {
+          this.$message.error("请先输入查询信息");
+        } else {
           this.setDataContent(status);
           this.setDataContent(flightNumber);
           this.setDataContent(grade);
@@ -325,15 +442,15 @@ export default {
           this.gjFlag = false;
         }
       } else {
-        this.$message.error('请先选择要查询的时间');
+        this.$message.error("请先选择要查询的时间");
       }
     },
-    closeCheckGj(){
-      this.form = {}
-      this.$refs['form'].resetFields();
+    closeCheckGj() {
+      this.form = {};
+      this.$refs["form"].resetFields();
       this.gjFlag = false;
     },
-    setDataContent (target) {
+    setDataContent(target) {
       if (target) {
         this.dataContent.push(target);
         this.dataContent.push(target);
@@ -344,58 +461,226 @@ export default {
     },
     // 表格行点击处理
     rowClickHandler(row) {
-      this.$router.push({ path: '/advance/bag', query: row })
+      this.$router.push({ path: "/advance/bag", query: row });
     },
     //综合查询
-    async integratedQuery (obj = {}) {
+    async integratedQuery(obj = {}) {
       try {
-        this.loading = true
-        const res = await advancedInquiry(obj)
+        this.loading = true;
+        const res = await advancedInquiry(obj);
         if (res.code === 0) {
-          console.log(res)
+          console.log(res);
         } else {
-          this.$message.error(res.message)
-          this.loading = false
+          this.$message.error(res.message);
+          this.loading = false;
         }
       } catch (error) {
-        console.log('出错了', error)
-        this.loading = false
+        console.log("出错了", error);
+        this.loading = false;
       }
     },
     //表头数据查询
-    async statItemsQueryByStatMain (dataContent) {
+    async statItemsQueryByStatMain(dataContent) {
       try {
         const res = await getQuery({
           id: 30,
-          dataContent
-        })
+          dataContent,
+        });
         if (res.code == 0) {
-          this.tableData = res.returnData
+          this.tableData = res.returnData;
+          this.getTableFilterItem();
         } else {
-          this.$message.error(res.message)
+          this.$message.error(res.message);
         }
       } catch (error) {
-        console.log('出错了', error)
+        console.log("出错了", error);
       }
     },
     //简单查询 废弃
-    async sempleQueryByStatMain (dataContent) {
+    async sempleQueryByStatMain(dataContent) {
       try {
         const res = await getQuery({
           id: 31,
-          dataContent
-        })
+          dataContent,
+        });
         if (res.code == 0) {
-          this.tableData = res.returnData
+          this.tableData = res.returnData;
         } else {
-          this.$message.error(res.message)
+          this.$message.error(res.message);
         }
       } catch (error) {
-        console.log('出错了', error)
+        console.log("出错了", error);
       }
-    }
-  }
-}
+    },
+    filterHandler(value, row, column) {
+      const property = column["property"];
+      return row[property] === value;
+    },
+    getTableFilterItem() {
+      let PassengerNameUpcaseItemArr = [],
+      FlightNOItemArr= [],
+      FlightDateItemArr= [],
+      SourceAirportItemArr= [],
+      TargetAirportItemArr= [],
+      SpecialTypeItemArr= [],
+      checkInItemArr= [],
+      deletedItemArr= [],
+      activatedItemArr= [],
+      latestStatusItemArr= [],
+      bagLocationItemArr=[],
+      TransferFlightNOItemArr= []
+      this.tableData.forEach((item) => {
+        if (
+          PassengerNameUpcaseItemArr.indexOf(item.PassengerNameUpcase) == -1&&item.PassengerNameUpcase!=""
+        ) {
+          PassengerNameUpcaseItemArr.push(item.PassengerNameUpcase);
+          this.PassengerNameUpcaseItem.push({
+            text: item.PassengerNameUpcase,
+            value: item.PassengerNameUpcase,
+          });
+        }
+        if (
+          FlightNOItemArr.indexOf(item.FlightNO) == -1&&item.FlightNO!=""
+        ) {
+          FlightNOItemArr.push(item.FlightNO);
+          this.FlightNOItem.push({
+            text: item.FlightNO,
+            value: item.FlightNO,
+          });
+        }
+
+        if (
+          FlightDateItemArr.indexOf(item.FlightDate) == -1&&item.FlightDate!=""
+        ) {
+          FlightDateItemArr.push(item.FlightDate);
+          this.FlightDateItem.push({
+            text: item.FlightDate,
+            value: item.FlightDate,
+          });
+        }
+        if (
+          SourceAirportItemArr.indexOf(item.SourceAirport) == -1&&item.SourceAirport!=""
+        ) {
+          SourceAirportItemArr.push(item.SourceAirport);
+          this.SourceAirportItem.push({
+            text: item.SourceAirport,
+            value: item.SourceAirport,
+          });
+        }
+        if (
+          TargetAirportItemArr.indexOf(item.TargetAirport) == -1&&item.TargetAirport!=""
+        ) {
+          TargetAirportItemArr.push(item.TargetAirport);
+          this.TargetAirportItem.push({
+            text: item.TargetAirport,
+            value: item.TargetAirport,
+          });
+        }
+        if (
+          SpecialTypeItemArr.indexOf(item.SpecialType) == -1&&item.SpecialType!=""
+        ) {
+          SpecialTypeItemArr.push(item.SpecialType);
+          this.SpecialTypeItem.push({
+            text: item.SpecialType,
+            value: item.SpecialType,
+          });
+        }
+
+        if (
+          checkInItemArr.indexOf(item.checkIn) == -1&&item.checkIn!=""
+        ) {
+          checkInItemArr.push(item.checkIn);
+          this.checkInItem.push({
+            text: item.checkIn,
+            value: item.checkIn,
+          });
+        }
+        if (
+          deletedItemArr.indexOf(item.deleted) == -1&&item.deleted!=""
+        ) {
+          deletedItemArr.push(item.deleted);
+          this.deletedItem.push({
+            text: item.deleted,
+            value: item.deleted,
+          });
+        }
+        if (
+          activatedItemArr.indexOf(item.activated) == -1&&item.activated!=""
+        ) {
+          activatedItemArr.push(item.activated);
+          this.activatedItem.push({
+            text: item.activated,
+            value: item.activated,
+          });
+        }
+        if (
+          latestStatusItemArr.indexOf(item.latestStatus) == -1&&item.latestStatus!=""
+        ) {
+          latestStatusItemArr.push(item.latestStatus);
+          this.latestStatusItem.push({
+            text: item.latestStatus,
+            value: item.latestStatus,
+          });
+        }
+        if (
+          bagLocationItemArr.indexOf(item.bagLocation) == -1&&item.bagLocation!=""
+        ) {
+          bagLocationItemArr.push(item.bagLocation);
+          this.bagLocationItem.push({
+            text: item.bagLocation,
+            value: item.bagLocation,
+          });
+        }
+        if (
+          TransferFlightNOItemArr.indexOf(item.TransferFlightNO) == -1&&item.TransferFlightNO!=""
+        ) {
+          TransferFlightNOItemArr.push(item.TransferFlightNO);
+          this.TransferFlightNOItem.push({
+            text: item.TransferFlightNO,
+            value: item.TransferFlightNO,
+          });
+        }
+      });
+    },
+
+    //   //导航栏筛选开始
+    //   getTableFilterItem(){
+    //     console.log(this.tableData);
+    //     let arr = []
+    //     this.tableData.forEach(item=>{
+    //       if(arr.indexOf(item.PassengerNameUpcase)==-1){
+    //         arr.push(item.PassengerNameUpcase)
+    //       }
+    //     })
+    //     this.allOptionsObj.PassengerNameUpcase = arr;
+    //   },
+    //   filterData(e, type) {
+    //     this.showFilterTool = false;
+    //     this.$nextTick(() => {
+    //       this.seachType = type;
+    //       this.filterToolTop = e.pageY;
+    //       this.filterToolLeft = e.pageX;
+    //       this.showFilterTool = true;
+    //     });
+    //   },
+    //   closeTool() {
+    //     this.showFilterTool = false;
+    //   },
+    //   saveSeach(data) {
+    //     console.log(data);
+    //     this.seachData = data;
+    //     this.closeTool();
+    //   },
+    //   closeSearch() {
+    //     this.showAdd = false;
+    //   },
+    //   saveBatch(data) {
+    //     // 查询条件
+    //     console.log(data);
+    //   },
+    //   //导航栏筛选结束
+  },
+};
 </script>
 
 <style lang="scss" scoped>