修改

src/views/realTime/components/GoodsView/index.vue

@@ -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,60 +40,51 @@
       </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>
 
 <script setup lang="ts">
-import { Download } from '@element-plus/icons-vue'
-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'
-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 { Download } from "@element-plus/icons-vue";
+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";
+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";
 
 const props = defineProps({
   name: {
     type: String,
     required: true,
   },
-})
+});
 
-const route = useRoute()
-const { goodsNO, waybillNO } = route.query
+const route = useRoute();
+const { goodsNO, waybillNO } = route.query;
 
 const goodsInfoItems = [
   {
-    label: '货物编码',
-    key: 'C0',
+    label: "货物编码",
+    key: "C0",
   },
   {
-    label: '运单',
-    key: 'C1',
+    label: "运单",
+    key: "C1",
   },
-]
+];
 const goodsInfo = reactive<CommonData>({
-  C0: '56888829',
-  C1: 'FA67858990',
-})
+  C0: "56888829",
+  C1: "FA67858990",
+});
 const getGoodsInfo = async () => {
   try {
     const {
@@ -130,30 +94,30 @@ const getGoodsInfo = async () => {
     } = await Query<CommonData>({
       id: DATACONTENT_ID.goodsInfo,
       dataContent: [goodsNO],
-    })
+    });
     if (Number(code) !== 0) {
-      throw new Error(message || '失败')
+      throw new Error(message || "失败");
     }
     if (!listValues.length) {
-      ElMessage.error('未查询到货物信息')
-      return
+      ElMessage.error("未查询到货物信息");
+      return;
     }
-    Object.assign(goodsInfo, listValues[0])
+    Object.assign(goodsInfo, listValues[0]);
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
-}
+};
 // onMounted(() => {
 //   getGoodsInfo()
 // })
 
 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 {
@@ -163,15 +127,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()
 // })
@@ -184,38 +148,38 @@ 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('goodsFlight', dataContent)
+const dataContent = [waybillNO, goodsNO] as string[];
+const { tableColumns, tableData } = useTable("goodsFlight", 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('goodsFlight')
+const { rowClass, cellClass } = useTableStyle("goodsFlight");
 
-const { cellClickHandler } = useTableCellClick('goodsFlight')
+const { cellClickHandler } = useTableCellClick("goodsFlight");
 </script>
 
 <style lang="scss" scoped>