feat: 接入Tracking文件批量下载页面接口

package.json

@@ -40,6 +40,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
     "pinia": "^2.2.2",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "sass-loader": "^14.1.1",
     "vue": "^3.4.29",
     "vue-draggable-plus": "^0.5.3",

src/api/module/tracking.ts

@@ -197,3 +197,34 @@ export const uploadFile = (params: any, config: any) => {
     config
   )
 }
+
+
+/**
+ * 获取Download Attachment页数据
+ */
+export const getDownloadAttachmentData = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'batch_download_load',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 下载对应的附件
+ */
+export const downloadAttachment = (params: any, config: any) => {
+  return HttpAxios.post(
+    `${baseUrl}`,
+    {
+      action: 'ocean_order',
+      operate: 'batch_download',
+      ...params
+    },
+    config
+  )
+}

src/main.ts

@@ -22,6 +22,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { useThemeStore } from '@/stores/modules/theme'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
 const app = createApp(App)
 
@@ -35,7 +36,9 @@ VXETable.use(VXETablePluginExportXLSX, {
 VXETable.setI18n('en-US', enUS)
 VXETable.setLanguage('en-US')
 
-app.use(createPinia())
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+app.use(pinia)
 app.use(VXETable)
 app.use(VxeUI)
 app.use(router)

src/stores/modules/trackingDownloadData.ts

@@ -0,0 +1,20 @@
+// stores/useDataStore.js
+import { defineStore } from 'pinia';
+
+export const useTrackingDownloadData = defineStore('trackingDownloadData', {
+  state: () => ({
+    serialNoArr: [],
+    schemasArr: []
+  }),
+  actions: {
+    setData(serial_no_arr: string[], schemas_arr: string[]) {
+      this.serialNoArr = serial_no_arr;
+      this.schemasArr = schemas_arr;
+    }
+  },
+  // 持久化配置
+  persist: {
+    storage: sessionStorage // 关闭浏览器就清掉
+    // 或 storage: localStorage // 永久保留
+  }
+});

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

@@ -1,75 +1,51 @@
 <script setup lang="ts">
-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 }]
-      }
-    ]
-  },
-  {
-    id: 2,
-    isSelect: false,
-    no: 'Shipment No. S0000002841',
-    typeList: [
-      {
-        label: 'Customs Documents',
-        attachmentList: [
-          { name: 'Commercial Invoice.pdf', isSelect: false },
-          { name: 'Packing List.pdf', isSelect: false },
-          { name: 'Certificate of Origin.pdf', isSelect: false }
-        ]
-      },
-      {
-        label: 'House Bill of Lading',
-        attachmentList: [{ name: 'Commercial Invoice.pdf', isSelect: false }]
-      },
-      {
-        label: 'Master Bill of Lading',
-        attachmentList: [{ name: 'Commercial Invoice.pdf', isSelect: false }]
-      }
-    ]
-  },
-  {
-    id: 3,
-    isSelect: false,
-    no: 'Shipment No. S0000002841',
-    typeList: []
-  },
-  {
-    id: 2,
-    no: 'Shipment No. S0000002841',
-    isSelect: false,
-    typeList: [
-      {
-        label: 'Customs Documents',
-        attachmentList: [
-          { name: 'Commercial Invoice2.pdf', isSelect: false },
-          { name: 'Packing List2.pdf', isSelect: false },
-          { name: 'Certificate of Origin2.pdf', isSelect: false }
-        ]
-      }
-    ]
-  }
-])
+import { useTrackingDownloadData } from '@/stores/modules/trackingDownloadData'
+
+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,
+      schemas_arr: trackingDownloadData.schemasArr
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        attachmentData.value = res.data
+        console.log('res.data', res.data)
+      }
+    })
+}
+onMounted(() => {
+  getAttachmentData()
+})
 
 // === 1. 全选状态计算 ===
 const isAllSelected = computed({
@@ -191,25 +167,51 @@ watch(
   { deep: true }
 )
 
-const handleDownload = (row: any) => {
+const handleFileDownload = (row: any) => {
+  console.log('row', row)
   // 如果from_system的值是TOPOCEAN_KSMART，不需要拼接url
-  const url =
-    row.from_system === 'TOPOCEAN_KSMART'
-      ? row.file?.url
-      : import.meta.env.VITE_API_HOST + '/' + row.file?.url
+  const url = row?.url
   // const url = row.file?.url
   // 创建一个隐藏的 <a> 标签
   const link = document.createElement('a')
   link.href = url
+  link.target = '_blank'
 
   // 指定下载文件名（可选）
-  link.download = row.file?.file_name || 'file'
+  // link.download = row?.file_name || 'file'
 
   // 添加到 DOM 中，触发点击事件，然后移除
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
 }
+
+const handleDownloadAllSelectedFiles = () => {
+  const selectedFiles = []
+  attachmentData.value.forEach((item) => {
+    item?.typeList?.forEach((type) => {
+      type?.attachmentList?.forEach((attach) => {
+        if (attach.isSelect) {
+          selectedFiles.push(attach)
+        }
+      })
+    })
+  })
+  if (selectedFiles.length === 0) {
+    ElMessage.warning('Please select at least one file to download.')
+    return
+  }
+
+  $api
+    .downloadAttachment({
+      data: selectedFiles
+    })
+    .then((res: any) => {
+      console.log(res, 'res')
+    })
+  // 这里可以根据需要处理 selectedFiles，比如打包下载等
+  console.log('Selected Files for Download:', selectedFiles)
+}
 </script>
 
 <template>
@@ -248,7 +250,10 @@ const handleDownload = (row: any) => {
                   <el-checkbox v-model="fileItem.isSelect" @change="handleChildToggle(attItem)">
                     <span>{{ fileItem.name }}</span></el-checkbox
                   >
-                  <span class="font_family icon-icon_download_b"></span>
+                  <span
+                    @click="handleFileDownload(fileItem)"
+                    class="font_family icon-icon_download_b"
+                  ></span>
                 </div>
               </div>
             </div>
@@ -263,6 +268,7 @@ const handleDownload = (row: any) => {
         <el-button
           class="el-button--main el-button--pain-theme"
           style="width: 100%; margin-bottom: 8px"
+          @click="handleDownloadAllSelectedFiles"
         >
           <span class="font_family icon-icon_download_b"></span>
           <span>Download Selected ({{ allChooseFiles }})</span>

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

@@ -10,9 +10,11 @@ import { useLoadingState } from '@/stores/modules/loadingState'
 import { useThemeStore } from '@/stores/modules/theme'
 import { useVisitedRowState } from '@/stores/modules/visitedRow'
 import { formatTimezone, formatNumber } from '@/utils/tools'
+import { useTrackingDownloadData } from '@/stores/modules/trackingDownloadData'
 
 const visitedRowState = useVisitedRowState()
 const themeStore = useThemeStore()
+const trackingDownloadData = useTrackingDownloadData()
 
 const router = useRouter()
 const props = defineProps({
@@ -391,7 +393,12 @@ const handleDownload = () => {
   )
 }
 const handleDownloadAttachments = () => {
-  if (selectedNumber.value === 0) {
+  const serial_no_arr: string[] = []
+  const schemas_arr: string[] = []
+  // 将选中的记录的 serial_no 和 _schemas 收集到数组中
+  const selectedRecords = tableRef.value.getCheckboxRecords()
+
+  if (selectedRecords.length === 0) {
     ElMessageBox.alert('Please select at least one record to download attachments', {
       confirmButtonText: 'OK',
       confirmButtonClass: 'el-button--dark',
@@ -399,6 +406,12 @@ const handleDownloadAttachments = () => {
     })
     return
   }
+  selectedRecords.forEach((item: any) => {
+    serial_no_arr.push(item.serial_no)
+    schemas_arr.push(item._schemas)
+  })
+  trackingDownloadData.setData(serial_no_arr, schemas_arr)
+
   router.push({
     name: 'Tracking Download Attachment'
   })