feat: 实现Tracking详情页多文件下载

src/api/module/tracking.ts

@@ -1,4 +1,5 @@
 import HttpAxios from '@/utils/axios'
+import axios from 'axios'
 
 const base = import.meta.env.VITE_API_HOST
 const baseUrl = `${base}/main_new_version.php`
@@ -218,15 +219,18 @@ export const getDownloadAttachmentData = (params: any, config: any) => {
  * 下载对应的附件
  */
 export const downloadAttachment = (params: any, config: any) => {
-  return HttpAxios.post(
-    `${baseUrl}`,
+  return axios.post(
+    baseUrl,
     {
       action: 'ocean_order',
       operate: 'batch_download',
       ...params
     },
     {
-      responseType: 'blob'
+      responseType: 'blob',
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
     }
   )
 }

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

@@ -1,36 +1,16 @@
 <script setup lang="ts">
 import { useTrackingDownloadData } from '@/stores/modules/trackingDownloadData'
+import emitter from '@/utils/bus'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
+const router = useRouter()
 const trackingDownloadData = useTrackingDownloadData()
 const attachmentData = ref([])
 
-//  {
-//     id: 1,
-//     isSelect: false,
-//     no: 'Shipment No. S0000002841',
-//     typeList: [
-//       {
-//         label: 'Customs Documents',
-//         attachmentList: [
-//           { name: 'Commercial Invoice1.pdf', isSelect: false },
-//           { name: 'Packing List1.pdf', isSelect: false },
-//           { name: 'Certificate of Origin1.pdf', isSelect: false }
-//         ]
-//       },
-//       {
-//         label: 'House Bill of Lading',
-//         attachmentList: [{ name: 'Commercial Invoice1.pdf', isSelect: false }]
-//       },
-//       {
-//         label: 'Master Bill of Lading',
-//         attachmentList: [{ name: 'Commercial Invoice1.pdf', isSelect: false }]
-//       }
-//     ]
-//   },
-
 // const shipments = ref(attachmentData)
 const getAttachmentData = () => {
-  console.log('trackingDownloadData', trackingDownloadData)
   $api
     .getDownloadAttachmentData({
       serial_no_arr: trackingDownloadData.serialNoArr,
@@ -183,6 +163,22 @@ const handleFileDownload = (row: any) => {
   document.body.removeChild(link)
 }
 
+const getFileNameFromContentDisposition = (contentDisposition) => {
+  const filenameStart = contentDisposition.indexOf('filename=')
+  if (filenameStart === -1) return null // 如果没有找到，直接返回
+
+  const substring = contentDisposition.slice(filenameStart + 9) // 9 是 'filename='.length
+
+  const firstQuote = substring.indexOf('"')
+
+  if (firstQuote === -1) return null // 如果没有找到开始引号，直接返回
+
+  const secondQuote = substring.indexOf('"', firstQuote + 1)
+
+  if (secondQuote === -1) return null // 如果没有找到结束引号，直接返回
+
+  return substring.slice(firstQuote + 1, secondQuote)
+}
 const handleDownloadAllSelectedFiles = (label?: string) => {
   const selectedFiles = []
   attachmentData.value.forEach((item) => {
@@ -206,9 +202,29 @@ const handleDownloadAllSelectedFiles = (label?: string) => {
       data: selectedFiles
     })
     .then((res: any) => {
+      if (res.status !== 200) {
+        ElMessageBox.alert('The request failed. Please try again later', 'Prompt', {
+          confirmButtonText: 'OK',
+          confirmButtonClass: 'el-button--dark'
+        })
+        return
+      }
+      if (res.data?.code === 403) {
+        sessionStorage.clear()
+        emitter.emit('login-out')
+        router.push('/login')
+        userStore.logout()
+        ElMessage.warning({
+          message: 'Please log in to use this feature.',
+          grouping: true
+        })
+        return
+      }
+      const fileName = getFileNameFromContentDisposition(res.headers['content-disposition'])
       const blob = new Blob([res.data], { type: 'application/zip' })
       const downloadUrl = window.URL.createObjectURL(blob)
       const a = document.createElement('a')
+      a.download = fileName
       a.href = downloadUrl
       document.body.appendChild(a)
       a.click()