修改

src/views/newFlightView/index.vue

@@ -8,9 +8,11 @@
             <div class="newFlightView-left-top-top-title-no">{{ flightObj.flightNo }}</div>
           </div>
           <div class="newFlightView-left-top-top-status">
-            <el-checkbox-group v-model="checkList">
-              PEK-<el-checkbox label="复选框 A" />-NKG- -STU- -HGH- -
-            </el-checkbox-group>
+            <el-scrollbar style="height: 100%">
+              <el-checkbox-group @change="checkChange" class="flex-wrap" v-model="checkList">
+                <Item v-for="(item,index) in checkStates" :key="index" :total="checkStates" :index="index+1" :item="item" />
+              </el-checkbox-group>
+            </el-scrollbar>
           </div>
         </div>
         <div class="newFlightView-left-top-list">
@@ -72,28 +74,14 @@ import Table from '@/views/newQuery/components/table.vue'
 import TimeZoneSelector from "@/components/TimeZoneSelector"
 import { throttledExportToExcel } from "@/utils/table"
 import pf from '@/layout/mixin/publicFunc'
+import Item from './item.vue'
 export default {
-  components: { Table, TimeZoneSelector },
+  components: { Table, TimeZoneSelector, Item },
   mixins: [pf],
   data () {
     return {
       radio: '1',
-      options: [{
-        value: '选项1',
-        label: '黄金糕'
-      }, {
-        value: '选项2',
-        label: '双皮奶'
-      }, {
-        value: '选项3',
-        label: '蚵仔煎'
-      }, {
-        value: '选项4',
-        label: '龙须面'
-      }, {
-        value: '选项5',
-        label: '北京烤鸭'
-      }],
+      options: [],
       value: '',
       dataContent: {},
       flightObj: {},
@@ -101,32 +89,86 @@ export default {
       checkList: [],
       checkStates: [],
       table1: {},
-      table2: {}
+      table2: {},
+      showObj: {}
     }
   },
   async created () {
+    const datas = []
     const query = this.$route.query
-    const { flightNo, flightDate } = query
+    const { flightNo, flightDate, depStation_iataCd, arrStation_iataCd } = query
+    const showObj = {
+      carrierFlights: flightNo,
+      carrierFlightsDate: flightDate,
+      outAirport: depStation_iataCd,
+      landAirport: arrStation_iataCd
+    }
+    this.showObj = showObj
     this.flightObj = query
     this.dataContent = query
     const res = await this.getViewInfo(query)
     this.infoObj = res[0]
     const sts = await this.getViewInfo({ flightNo, flightDate })
+    // sts.push({
+    //   depStation_iataCd: 'ADD',
+    //   arrStation_iataCd: 'HSG'
+    // })
+    // sts.push({
+    //   depStation_iataCd: 'HSG',
+    //   arrStation_iataCd: 'WTQ'
+    // })
+    // sts.push({
+    //   depStation_iataCd: 'WTQ',
+    //   arrStation_iataCd: 'MHK'
+    // })
     if (sts && sts.length) {
       for (const p of sts) {
         const { depStation_iataCd, arrStation_iataCd } = p
-        this.checkStates.push({
+        datas.push({
           depStation_iataCd,
           arrStation_iataCd
         })
       }
     }
+    const newDatas = _.cloneDeep(datas)
+    const m = this.combine(newDatas, 'depStation_iataCd', 'arrStation_iataCd')
+    const cm = []
+    m.forEach((item, index) => {
+      const obj = {
+        name: item,
+        index: index + 1
+      }
+      cm.push(obj)
+    })
+    console.log(cm)
+    this.checkStates = m
   },
   mounted () {
     this.table1 = this.dataContent
-    this.table2 = this.dataContent
+    this.table2 = this.showObj
   },
   methods: {
+    combine (array, startKey, endKey, result = []) {
+      if (!array.length) {
+        return result
+      }
+      if (result.length) {
+        for (let i = 0; i < array.length; i++) {
+          if (array[i]?.[startKey] === result[result.length - 1]) {
+            const current = array.splice(i, 1)[0]
+            result.push(current[endKey])
+          }
+          if (array[i]?.[endKey] === result[0]) {
+            const current = array.splice(i, 1)[0]
+            result.unshift(current[startKey])
+          }
+        }
+      } else {
+        const first = array.pop()
+        result.push(first[startKey], first[endKey])
+      }
+      return this.combine(array, startKey, endKey, result)
+    },
     // 获取基本信息
     async getViewInfo (dataContent = this.dataContent) {
       const { code, returnData } = await this.getQueryList(SERVICE_ID.bagViewId, dataContent)
@@ -147,6 +189,18 @@ export default {
       const fileName = `${tableName}-${flightNo}-${flightDate}-${depStation_iataCd}-${arrStation_iataCd}.xlsx`;
       throttledExportToExcel(table, tableName, fileName);
     },
+    // 选中
+    async checkChange (arr) {
+      const result = [...arr]
+      if (result && result.length) {
+        const c1 = result.join('-')
+        const c2 = c1.split('-')
+        console.log(c2)
+        const depStation = c2[0]
+        const arrStation = c2[c2.length - 1]
+        console.log(depStation, arrStation)
+      }
+    }
   }
 }
 </script>

src/views/newFlightView/item.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="item">
+    {{item}}
+    <template v-if="total.length != index">
+      -<el-checkbox :label="item+'-'+total[index]" />-
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: String,
+      default: ''
+    },
+    total: {
+      type: Array,
+      default: []
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  white-space: nowrap;
+  .el-checkbox {
+    margin-right: 0;
+  }
+}
+</style>