style: Tracking页批量下载加上loading动画

src/views/Tracking/src/components/DownloadAttachment/src/DownloadAttachment.vue

@@ -8,9 +8,12 @@ const userStore = useUserStore()
 const router = useRouter()
 const trackingDownloadData = useTrackingDownloadData()
 const attachmentData = ref([])
+const bodyLoading = ref(false)
+const pageLoading = ref(false)
 
 // const shipments = ref(attachmentData)
 const getAttachmentData = () => {
+  pageLoading.value = true
   $api
     .getDownloadAttachmentData({
       serial_no_arr: trackingDownloadData.serialNoArr,
@@ -21,6 +24,9 @@ const getAttachmentData = () => {
         attachmentData.value = res.data
       }
     })
+    .finally(() => {
+      pageLoading.value = false
+    })
 }
 onMounted(() => {
   getAttachmentData()
@@ -196,6 +202,7 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
     ElMessage.warning('Please select at least one file to download.')
     return
   }
+  bodyLoading.value = true
 
   $api
     .downloadAttachment({
@@ -237,11 +244,21 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
       window.URL.revokeObjectURL(downloadUrl)
       document.body.removeChild(a)
     })
+    .finally(() => {
+      bodyLoading.value = false
+    })
 }
 </script>
 
 <template>
-  <div class="tracking-download-attachment">
+  <div
+    class="tracking-download-attachment"
+    v-loading.fullscreen.lock="bodyLoading"
+    element-loading-text="Loading..."
+    element-loading-custom-class="element-loading"
+    element-loading-background="rgb(43, 47, 54, 0.7)"
+    v-vloading="pageLoading"
+  >
     <div class="left-select-section">
       <div class="header-select-all">
         <el-checkbox v-model="isAllSelected"><span>Select All</span></el-checkbox>
@@ -519,6 +536,7 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
   .summary-content {
     height: calc(100% - 84px);
     padding: 16px 8px;
+    overflow: auto;
   }
 
   .el-collapse {