CA3.0/src/views/newBagDetails/components/baggageList.vue

<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="baggageList">
    <Table style="height:100%" tableName="行李跟踪信息表" :istableCol="true" :tableTag="tableTag" ref="table" />
    <div class="btns">
      <img class="btn-square btn-shadow r16" src="@/assets/baggage/ic_export.png" title="导出" @click="exportHandler('table', '行李节点列表')">
    </div>
  </div>
</template>

<script>
import Table from '../../newQuery/components/table.vue'
import Dialog from '@/layout/components/Dialog/index.vue'
import pf from '@/layout/mixin/publicFunc'
import { exportToExcel } from '@/utils/table'
export default {
  name: 'BaggageList',
  mixins: [pf],
  components: { Dialog, Table },
  props: {
    query: {
      type: Object,
      default: () => { }
    },
    tagObj: {
      type: Object,
      default: () => { }
    },
    tableDatas: {
      type: Array,
      default: []
    },
  },
  data () {
    return {
      tableCols: [],
      baggageTableData: [],
      spanArr: [],
      pos: 0,
      loading: false,
      dataContent: {},
      tableTag: {}
    }
  },
  watch: {
    tagObj: {
      handler (obj) {
        this.tableTag = obj
      },
      deep: true,
    }
  },
  mounted () {
    this.tableTag = this.tagObj
  },
  methods: {
    async queryDetails (auth_id) {
      try {
        this.loading = true
        const { code, returnData } = await this.getQueryListAuth(SERVICE_ID.bagDetailId, this.dataContent, 1, 20, auth_id)
        if (code == 0 && returnData && returnData.length) {
          this.baggageTableData = returnData.map((item, index) => {
            if (item['dealTime']) {
              item['dealTime'] = item['dealTime'].replace('T', ' ')
            }
            item['departureInfo'] = `${item['departureAirport']}\n${item['departureTime'] ? item['departureTime'].replace('T', '\n') : ''
              }`
            item['landingInfo'] = `${item['landingAirport']}\n${item['landingTime'] ? item['landingTime'].replace('T', '\n') : ''
              }`
            return item
          })
          this.initTableData(this.baggageTableData)
          this.loading = false
        } else {
          this.loading = false
        }
      } catch (error) {
        this.loading = false
        console.log(error)
        this.$message.error('失败')
      }
    },
    initTableData (tableData) {
      const spanArr = []
      let pos = 0
      for (let i = 0; i < tableData.length; i++) {
        if (i === 0) {
          spanArr.push(1)
        } else {
          if (
            tableData[i]['F1'] === tableData[i - 1]['F1'] &&
            tableData[i]['F2'] === tableData[i - 1]['F2'] &&
            tableData[i]['departureAirport'] === tableData[i - 1]['departureAirport'] &&
            tableData[i]['landingAirport'] === tableData[i - 1]['landingAirport']
          ) {
            spanArr[pos] += 1
            spanArr.push(0)
          } else {
            spanArr.push(1)
            pos = i
          }
        }
      }
      this.spanArr = spanArr
      this.pos = pos
    },
    headerCellClass ({ row, column, rowIndex, columnIndex }) {
      if (['departureInfo', 'landingInfo'].includes(column.property)) {
        return 'pre-line'
      }
    },
    cellClass ({ row, column, rowIndex, columnIndex }) {
      const classes = []
      if (
        ['flightNO', 'U_Device_ID'].includes(column.property) &&
        row[column.property] &&
        row[column.property] !== 'FBULK'
      ) {
        classes.push('cell-click')
      }
      if (['departureInfo', 'landingInfo'].includes(column.property)) {
        classes.push('pre-line')
      }
      return classes.join(' ')
    },
    cellClickHandler (row, column, cell, event) {
      if (row[column.property] && row[column.property] !== 'FBULK') {
        switch (column.property) {
          case 'flightNO':
            this.$router.push({
              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/flightView`,
              query: {
                flightNO: row.flightNO,
                flightDate: row.flightDate
              }
            })
            break
          case 'U_Device_ID':
            this.$router.push({
              path: `${this.$route.path.split('/').slice(0, -1).join('/')}/containerView`,
              query: {
                flightNO: row.flightNO,
                flightDate: row.flightDate,
                departureAirport: row.departureAirport,
                landingAirport: row.landingAirport,
                containerID: row.U_Device_ID
              }
            })
            break
          default:
            break
        }
      }
    },
    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (['flightNO', 'flightDate', 'departureInfo', 'landingInfo'].includes(column['property'])) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    exportHandler (refName, tableName) {
      const table = this.$refs[refName].$el.cloneNode(true)
      const { luggageNum, carrierFlights, carrierFlightsDate } = this.query
      const fileName = `${tableName}-${luggageNum}-${carrierFlights}-${carrierFlightsDate}.xlsx`
      exportToExcel(table, tableName, fileName)
    },
  }
}
</script>

<style lang="scss" scoped>
.baggageList {
  height: 100%;
  position: relative;
  .btns {
    position: absolute;
    top: -50px;
    right: 66px;
    z-index: 10;
    .r16 {
      margin-right: 16px;
    }
  }
}
</style>