|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="goods">
|
|
|
<div class="goods-info">
|
|
|
- <div class="goods-info-title">运单基本信息</div>
|
|
|
+ <div class="goods-info-title">货物基本信息</div>
|
|
|
<div class="goods-info-content">
|
|
|
<div v-for="item in goodsInfoItems" :key="item.key" class="info-item">
|
|
|
{{ item.label }}：{{ goodsInfo[item.key] }}
|
|
|
@@ -10,55 +10,28 @@
|
|
|
</div>
|
|
|
<div class="goods-header flex">
|
|
|
<div class="goods-header-title flex-wrap">
|
|
|
- <div class="manageTitle">运单跟踪信息</div>
|
|
|
+ <div class="manageTitle">货物跟踪信息</div>
|
|
|
<div class="status">正常</div>
|
|
|
</div>
|
|
|
<div class="goods-header-operate flex-wrap">
|
|
|
<Search @clear="clear" @search="search" />
|
|
|
- <el-button
|
|
|
- class="button-sqaure"
|
|
|
- :icon="Download"
|
|
|
- color="#ac014d"
|
|
|
- @click="downloadHandler"
|
|
|
- />
|
|
|
- <ColumnSet
|
|
|
- class="button-sqaure"
|
|
|
- :table-columns="tableColumns"
|
|
|
- @checked-submit="columnChecked"
|
|
|
- />
|
|
|
+ <el-button class="button-sqaure" :icon="Download" color="#ac014d" @click="downloadHandler" />
|
|
|
+ <ColumnSet class="button-sqaure" :table-columns="tableColumns" @checked-submit="columnChecked" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- :style="{
|
|
|
+ <div :style="{
|
|
|
maxHeight: trackAirlines.length > 1 ? `${208 * 2 + 8}px` : '208px',
|
|
|
- }"
|
|
|
- class="goods-track"
|
|
|
- >
|
|
|
+ }" class="goods-track">
|
|
|
<el-scrollbar always>
|
|
|
<div class="goods-track-warpper">
|
|
|
- <div
|
|
|
- v-for="trackAirline in trackAirlines"
|
|
|
- :key="trackAirline.flightNO"
|
|
|
- class="goods-track-row"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-for="(trackAirport, index) in trackAirline.airports"
|
|
|
- :key="trackAirport.airport"
|
|
|
- class="goods-track-box"
|
|
|
- :style="trackBoxStyle(trackAirline.airports, index)"
|
|
|
- >
|
|
|
+ <div v-for="trackAirline in trackAirlines" :key="trackAirline.flightNO" class="goods-track-row">
|
|
|
+ <div v-for="(trackAirport, index) in trackAirline.airports" :key="trackAirport.airport" class="goods-track-box" :style="trackBoxStyle(trackAirline.airports, index)">
|
|
|
<div class="title flex-wrap">
|
|
|
- <span v-if="index === 0" class="title-span"
|
|
|
- >航班号：{{ trackAirline.flightNO }}</span
|
|
|
- >
|
|
|
- <span class="title-span"
|
|
|
- >{{ trackAirport.isDeparture ? '出港' : '进港' }}：{{
|
|
|
+ <span v-if="index === 0" class="title-span">航班号：{{ trackAirline.flightNO }}</span>
|
|
|
+ <span class="title-span">{{ trackAirport.isDeparture ? '出港' : '进港' }}：{{
|
|
|
trackAirport.airport
|
|
|
- }}</span
|
|
|
- >
|
|
|
- <span class="title-span"
|
|
|
- >日期：{{ trackAirline.flightDate }}</span
|
|
|
- >
|
|
|
+ }}</span>
|
|
|
+ <span class="title-span">日期：{{ trackAirline.flightDate }}</span>
|
|
|
</div>
|
|
|
<Steps :steps="trackAirport.trackSteps" />
|
|
|
</div>
|
|
|
@@ -67,16 +40,7 @@
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
<div class="goods-list">
|
|
|
- <SimpleTable
|
|
|
- ref="tableRef"
|
|
|
- :data="tableData"
|
|
|
- :columns="filteredColumns"
|
|
|
- scrollbar-always-on
|
|
|
- :row-class-name="rowClass"
|
|
|
- :cell-class-name="cellClass"
|
|
|
- :column-props="{ formatter }"
|
|
|
- @cell-click="cellClickHandler"
|
|
|
- />
|
|
|
+ <SimpleTable ref="tableRef" :data="tableData" :columns="filteredColumns" scrollbar-always-on :row-class-name="rowClass" :cell-class-name="cellClass" :column-props="{ formatter }" @cell-click="cellClickHandler" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -87,7 +51,6 @@ import Search from '@/components/search/index.vue'
|
|
|
import Steps from '@/components/steps/index.vue'
|
|
|
import ColumnSet from '../../components/ColumnSet/index.vue'
|
|
|
import SimpleTable from '@/components/SimpleTable/index.vue'
|
|
|
-import { CommonData } from '~/common'
|
|
|
import useTrackData from '../../hooks/useTrackData'
|
|
|
import useTable from '../../hooks/useTable'
|
|
|
import useTableColumnSet from '../../hooks/useTableColumnSet'
|
|
|
@@ -95,7 +58,6 @@ import useTableExport from '../../hooks/useTableExport'
|
|
|
import useTableStyle from '../../hooks/useTableStyle'
|
|
|
import useTableCellClick from '../../hooks/useTableCellClick'
|
|
|
import { Query } from '@/api/webApi'
|
|
|
-import { ElMessage } from 'element-plus'
|
|
|
import useGoodsInfo from './useGoodsInfo'
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -103,22 +65,22 @@ const props = defineProps({
|
|
|
type: String,
|
|
|
required: true,
|
|
|
},
|
|
|
-})
|
|
|
+});
|
|
|
|
|
|
-const route = useRoute()
|
|
|
-const { goodsNO, waybillNO } = route.query
|
|
|
+const route = useRoute();
|
|
|
+const { goodsNO, waybillNO } = route.query;
|
|
|
|
|
|
const { goodsInfoItems, goodsInfo } = useGoodsInfo(props.name, [
|
|
|
goodsNO as string,
|
|
|
])
|
|
|
|
|
|
interface Airline {
|
|
|
- C0: string // 航班号
|
|
|
- C1: string // 机场
|
|
|
- C2: string // 航班日期
|
|
|
- C3: number // 起飞/降落
|
|
|
+ C0: string; // 航班号
|
|
|
+ C1: string; // 机场
|
|
|
+ C2: string; // 航班日期
|
|
|
+ C3: number; // 起飞/降落
|
|
|
}
|
|
|
-const goodsAirlines = ref<Airline[]>([])
|
|
|
+const goodsAirlines = ref<Airline[]>([]);
|
|
|
const getGoodsAirlines = async () => {
|
|
|
try {
|
|
|
const {
|
|
|
@@ -128,15 +90,15 @@ const getGoodsAirlines = async () => {
|
|
|
} = await Query<Airline>({
|
|
|
id: DATACONTENT_ID.goodsAirline,
|
|
|
dataContent: [goodsNO],
|
|
|
- })
|
|
|
+ });
|
|
|
if (Number(code) !== 0) {
|
|
|
- throw new Error(message || '失败')
|
|
|
+ throw new Error(message || "失败");
|
|
|
}
|
|
|
- goodsAirlines.value = listValues
|
|
|
+ goodsAirlines.value = listValues;
|
|
|
} catch (error) {
|
|
|
- console.error(error)
|
|
|
+ console.error(error);
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
// onMounted(() => {
|
|
|
// getGoodsAirlines()
|
|
|
// })
|
|
|
@@ -149,34 +111,34 @@ const trackDataContentList = computed(() =>
|
|
|
isDeparture: C3,
|
|
|
dataContent: [waybillNO, goodsNO] as string[],
|
|
|
}))
|
|
|
-)
|
|
|
+);
|
|
|
const { trackAirlines, trackBoxStyle } = useTrackData(
|
|
|
props.name,
|
|
|
trackDataContentList
|
|
|
-)
|
|
|
+);
|
|
|
|
|
|
const dataContent = [waybillNO, goodsNO] as string[]
|
|
|
const { tableColumns, tableData } = useTable(`${props.name}Flight`, dataContent)
|
|
|
|
|
|
const search = (text: string) => {
|
|
|
- console.log(text)
|
|
|
-}
|
|
|
-const clear = () => {}
|
|
|
+ console.log(text);
|
|
|
+};
|
|
|
+const clear = () => {};
|
|
|
|
|
|
-const tableRef = ref<InstanceType<typeof SimpleTable> | null>(null)
|
|
|
-const { exportToExcel } = useTableExport()
|
|
|
+const tableRef = ref<InstanceType<typeof SimpleTable> | null>(null);
|
|
|
+const { exportToExcel } = useTableExport();
|
|
|
const downloadHandler = () => {
|
|
|
- const table = tableRef.value!.table!
|
|
|
- exportToExcel({ table })
|
|
|
-}
|
|
|
+ const table = tableRef.value!.table!;
|
|
|
+ exportToExcel({ table });
|
|
|
+};
|
|
|
const formatter = (row, column, cellValue, index) => {
|
|
|
- if (column.property === 'C7') {
|
|
|
- return String(cellValue ?? '').replace(' ', '\n')
|
|
|
+ if (column.property === "C7") {
|
|
|
+ return String(cellValue ?? "").replace(" ", "\n");
|
|
|
}
|
|
|
- return cellValue
|
|
|
-}
|
|
|
+ return cellValue;
|
|
|
+};
|
|
|
|
|
|
-const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns)
|
|
|
+const { filteredColumns, columnChecked } = useTableColumnSet(tableColumns);
|
|
|
|
|
|
const { rowClass, cellClass } = useTableStyle(`${props.name}Flight`)
|
|
|
|
