feat: 顶部搜素时加上loading动画

package.json

@@ -31,6 +31,7 @@
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
+    "moment-timezone": "^0.5.46",
     "pinia": "^2.2.2",
     "sass-loader": "^16.0.2",
     "vue": "^3.4.29",

src/stores/modules/loadingState.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+
+interface LoadingState {
+  trackingTableLoading: boolean
+}
+
+export const useLoadingState = defineStore('loadingState', {
+  state: (): LoadingState => ({
+    trackingTableLoading: JSON.parse(localStorage.getItem('trackingTableLoading')) || false
+  }),
+  getters: {},
+  actions: {
+    setTrackingTableLoading(state: boolean) {
+      localStorage.setItem('trackingTableLoading', JSON.stringify(state))
+      this.trackingTableLoading = state
+    }
+  }
+})

src/views/Layout/src/components/Header/HeaderView.vue

@@ -6,6 +6,7 @@ import { useRouter, useRoute } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 import { onBeforeRouteUpdate } from 'vue-router'
+import { useLoadingState } from '@/stores/modules/loadingState'
 
 const userStore = useUserStore()
 const route = useRoute()
@@ -53,6 +54,8 @@ const handleSearch = () => {
       }
     })
   } else {
+    const trackingTableLoadingState = useLoadingState()
+    trackingTableLoadingState.setTrackingTableLoading(true)
     // 已登录
     $api
       .getTrackingTableData({
@@ -76,6 +79,9 @@ const handleSearch = () => {
           })
         }
       })
+      .finally(() => {
+        trackingTableLoadingState.setTrackingTableLoading(false)
+      })
   }
 }
 onBeforeRouteUpdate((to, from, next) => {

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -6,6 +6,7 @@ import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { ref, onMounted } from 'vue'
 import { transportationMode } from '@/components/TransportationMode'
+import { useLoadingState } from '@/stores/modules/loadingState'
 
 const router = useRouter()
 const props = defineProps({
@@ -145,6 +146,7 @@ const getSharedTableData = () => {
   const trackingData = JSON.parse(localStorage.getItem('searchData'))?.trackingData
   if (trackingData) {
     pageInfo.value.pageSize = Number(trackingData.ps)
+    sessionStorage.setItem('trackingTablePageInfo', JSON.stringify(pageInfo.value))
     assignTableData(trackingData)
     selectedNumber.value = 0
     selectedTableData.value = []
@@ -472,6 +474,9 @@ const handleVGM = (row) => {
     query: { a: row.__serial_no, _schemas: row._schemas }
   })
 }
+
+const loadingState = useLoadingState()
+
 defineExpose({
   searchTableData,
   getSharedTableData,
@@ -503,7 +508,7 @@ defineExpose({
 
     <vxe-grid
       ref="tableRef"
-      v-vloading="tableLoadingColumn || tableLoadingTable"
+      v-vloading="tableLoadingColumn || tableLoadingTable || loadingState.trackingTableLoading"
       :height="props.height"
       :style="{ border: 'none' }"
       v-bind="trackingTable"