/* * @Author: Badguy * @Date: 2022-03-04 11:41:55 * @LastEditTime: 2022-08-26 15:32:54 * @LastEditors: your name * @Description: 航站视图通用部分 * have a nice day! */ import { mapGetters } from 'vuex' import { commonTableCellClass } from '@/utils/table' export default { data() { return { // 表格数据 tableData: [], tableDataFilters: {}, filterValues: {}, tableDataSortRules: {}, spanArr: [], pos: 0, loading: false, computedTableHeight: undefined, debounceTime: 300 } }, created() { this.setFilterAndSort(this.tableCols) }, updated() { this.resizeHandler() }, activated() { this.resizeHandler() this.debouncedResizeHandler = this._.debounce(this.resizeHandler, this.debounceTime) window.addEventListener('resize', this.debouncedResizeHandler) }, deactivated() { window.removeEventListener('resize', this.debouncedResizeHandler) }, computed: { ...mapGetters(['clickedCells']), dealedTableData() { const filtered = this.tableData.filter(item => { let flag = true Object.entries(this.filterValues).forEach(([key, arr]) => { if (arr.length && !arr.includes(String(item[key]))) { flag = false } }) return flag }) const sortRules = Object.entries(this.tableDataSortRules).reduce( (pre, [key, value]) => { if (value) { pre[0].push(key) value = value === 'ascending' ? 'asc' : 'desc' pre[1].push(value) } return pre }, [[], []] ) return this._.orderBy(filtered, sortRules[0], sortRules[1]) } }, watch: { dealedTableData: { handler(val) { this.spanArr = [] let contactDot = this.contactDot val.forEach((item, index, arr) => { if (index === 0) { this.spanArr.push(1) } else { if ( item['flightNO'] === arr[index - 1]['flightNO'] && item['flightDate'] === arr[index - 1]['flightDate'] ) { this.spanArr[contactDot] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) contactDot = index } } }) }, deep: true } }, methods: { // 设置表格高度 resizeHandler() { const headerHeight = 80 const bottomBlankHeight = 41 const formWrapHeight = this.$refs['formWrap'].offsetHeight this.computedTableHeight = `calc(100vh - ${headerHeight + bottomBlankHeight + formWrapHeight}px)` this.$refs.table?.doLayout() }, // 设置筛选和排序 setFilterAndSort(tableCols) { const self = this Object.values(tableCols).forEach(({ prop, filterable, sortable, children }) => { if (children) { self.setFilterAndSort(children) } else { if (filterable) { self.$set(self.tableDataFilters, prop, []) self.$set(self.filterValues, prop, []) } if (sortable) { self.$set(self.tableDataSortRules, prop, '') } } }) }, // 合计行 summaryMethod({ columns, data }) { const sums = [] if (columns.length > 0) { columns.forEach((column, index) => { if (index === 0) { sums[index] = '合计' } else if (index === 1) { sums[index] = '航班数:' + this.tableData.length } else if ( // 需要计算的列 [ 'passagernum', 'checkNumber', 'not_actived', 'expect_load', 'security_all', 'sortNumber', 'loadNumber', 'boardID', 'toUnload', 'OFFCount', 'delbag', 'noBSM', 'reach', 'did_not_arrive', 'special', 'claim', 'uninstalled', 'terminateArrive', 'terminatedNotArrived', 'delivered', 'not_shipped', 'container', 'bulk', 'checkInTravellerNumber', 'checkInNumber', 'unActive', 'preLoad', 'noCheckInNumber', 'midIn', 'checkIns', 'projectedLoad', 'loadedQuantity', 'numberOfDestinationArrivals', 'endPointNotReached', 'specialQuantity', 'numberOfClaims', 'numberToBeUninstalled', 'terminateArrivalQuantity', 'terminateUnreachedQuantity', 'quantityShipped', 'undeliveredQuantity', 'numberOfContainers', 'numberOfBulk', 'inTransferBaggageCount', 'inTransferredBaggageCount', 'outTransferBaggageCount', 'outTransferredBaggageCount', 'exceptions', 'warning' ].includes(column.property) ) { const values = data.map(item => Number(item[column.property])) if (values.some(value => !isNaN(value))) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr) if (!isNaN(value)) { return Number(prev) + Number(curr) } else { return Number(prev) } }, 0) } else { sums[index] = 0 } } else { // 过滤某些字段不参与计算 sums[index] = '-' } }) } return sums }, cellClass({ row, column, rowIndex, columnIndex }) { const classes = commonTableCellClass({ row, column, rowIndex, columnIndex }) if ( [ 'flightNO', 'preFlightNO', 'inTransferBaggageCount', 'inTransferredBaggageCount', 'outTransferBaggageCount', 'outTransferredBaggageCount', 'toUnload', 'OFFCount', 'checkInNumber', 'unActive', 'preLoad', 'warning', 'midIn', 'noCheckInNumber', 'checkNumber', 'sortNumber', 'loadNumber', 'boardID', 'checkIns', 'terminateArrivalQuantity', 'projectedLoad', 'loadedQuantity', 'numberOfDestinationArrivals', 'uninstalled', 'numberOfContainers', 'numberOfBulk', 'noBSM' ].includes(column.property) && row[column.property] ) { classes.push('cell-click') if ( this.clickedCells.some( cell => cell.pageName === this.$route.name && Object.entries(cell.row).every(([key, value]) => row[key] === value) && cell.columnProp === column.property ) ) { classes.push('cell-clicked') } } if (column.property === 'toUnload' && row[column.property]) { classes.push('cell-toUnload') } if (column.property === 'warning' && row['warningState'] && row['warningState'] == 2) { classes.push('cell-toUnload') } if (column.property === 'warning' && row['warningState'] && row['warningState'] == 1) { classes.push('cell-toUnloadNew') } if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) { classes.push('cell-toUnload') } if (column.property === 'outTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) { classes.push('cell-toUnloadNew') } if (column.property === 'outTransferBaggageCount' && row['sharpSign']) { classes.push('cell-toUnloadNew') } if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 2) { classes.push('cell-toUnload') } if (column.property === 'inTransferredBaggageCount' && row['warningState'] && row['warningState'] == 1) { classes.push('cell-toUnloadNew') } if (column.property === 'inTransferBaggageCount' && row['sharpSign']) { classes.push('cell-toUnloadNew') } return classes.join(' ') }, cellClickHandler(row, column, cell, event) { if ( [ 'flightNO', 'preFlightNO', 'inTransferBaggageCount', 'inTransferredBaggageCount', 'outTransferBaggageCount', 'outTransferredBaggageCount', 'toUnload', 'OFFCount', 'checkInNumber', 'unActive', 'preLoad', 'warning', 'midIn', 'noCheckInNumber', 'checkNumber', 'sortNumber', 'loadNumber', 'boardID', 'checkIns', 'terminateArrivalQuantity', 'projectedLoad', 'loadedQuantity', 'numberOfDestinationArrivals', 'uninstalled', 'numberOfContainers', 'numberOfBulk', 'noBSM' ].includes(column.property) && row[column.property] ) { this.$store.dispatch('keepAlive/addClickedCell', { row, columnProp: column.property, pageName: this.$route.name }) const path = `${this.$route.path}/flightView` const query = {} switch (column.property) { case 'flightNO': Object.assign(query, { flightNO: row.flightNO, flightDate: row.flightDate }) break case 'preFlightNO': Object.assign(query, { flightNO: row.preFlightNO, flightDate: row.preFlightDate }) break case 'inTransferBaggageCount': case 'outTransferBaggageCount': Object.assign(query, { flightNO: row.preFlightNO, flightDate: row.preFlightDate, fastFilter: `transferFlightNO,${row.flightNO}` }) break case 'inTransferredBaggageCount': case 'outTransferredBaggageCount': Object.assign(query, { flightNO: row.flightNO, flightDate: row.flightDate, fastFilter: `inFlightNO,${row.preFlightNO}` }) break case 'warning': Object.assign(query, { flightNO: row.flightNO, flightDate: row.flightDate, fastFilter: row['warningState'] === 1 ? 'warning' : 'alarm' }) break default: { const reflect = { toUnload: 'toUnload', // 装车或装机后,isDEL为'DEL',waitOFF为1 OFFCount: 'unloaded', // 装车或装机后,isDEL为'DEL',waitOFF为0 unActive: 'unActive', // STATUS为'I' preLoad: 'preLoad', // STATUS不为'I',isDEL不为'del' projectedLoad: 'preLoad', midIn: 'inFlightNO', noCheckInNumber: 'canceled', // isDEL为'DEL' noBSM: 'NOBSM', // 1/0 checkInNumber: 'checkInTime', checkNumber: 'securityTime', sortNumber: 'sortTime', loadNumber: 'loadTime', boardID: 'inflTime', checkIns: 'checkInTime', numberOfDestinationArrivals: 'arrivedID', // 1/0 uninstalled: 'unloadID', // 1/0 loadedQuantity: 'loaded', // 'loadTime'不为空,isDEL不为'DEL' terminateArrivalQuantity: 'destination', // 'arrivedID'为1,transferFlightNO为null numberOfContainers: 'inContainer', // 有容器ID numberOfBulk: 'FBULK' // 容器ID为'FBULK' } Object.assign(query, { flightNO: row.flightNO, flightDate: row.flightDate, fastFilter: reflect[column.property] }) break } } switch (this.$route.path.split('/').at(-1)) { case 'departure': Object.assign(query, { departureAirport: this.formData.currentAirport ?? '', landingAirport: row.targetAirport ?? '' }) break case 'arrival': Object.assign(query, { departureAirport: row.departureAirport ?? '', landingAirport: this.formData.currentAirport ?? '' }) break case 'transferDeparture': case 'transferArrival': Object.assign(query, { departureAirport: row.preAirport ?? '', landingAirport: row.targetAirport ?? '' }) break default: break } this.$router.push({ path, query }) } } } }