feat: 实现文件下载

src/api/module/tracking.ts

@@ -225,6 +225,8 @@ export const downloadAttachment = (params: any, config: any) => {
       operate: 'batch_download',
       ...params
     },
-    config
+    {
+      responseType: 'blob'
+    }
   )
 }

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

@@ -39,7 +39,6 @@ const getAttachmentData = () => {
     .then((res: any) => {
       if (res.code === 200) {
         attachmentData.value = res.data
-        console.log('res.data', res.data)
       }
     })
 }
@@ -168,10 +167,8 @@ watch(
 )
 
 const handleFileDownload = (row: any) => {
-  console.log('row', row)
   // 如果from_system的值是TOPOCEAN_KSMART，不需要拼接url
   const url = row?.url
-  // const url = row.file?.url
   // 创建一个隐藏的 <a> 标签
   const link = document.createElement('a')
   link.href = url
@@ -186,10 +183,12 @@ const handleFileDownload = (row: any) => {
   document.body.removeChild(link)
 }
 
-const handleDownloadAllSelectedFiles = () => {
+const handleDownloadAllSelectedFiles = (label?: string) => {
   const selectedFiles = []
   attachmentData.value.forEach((item) => {
     item?.typeList?.forEach((type) => {
+      // 如果选择了 label，则只下载该类型的附件
+      if (label && type.label !== label) return
       type?.attachmentList?.forEach((attach) => {
         if (attach.isSelect) {
           selectedFiles.push(attach)
@@ -207,10 +206,15 @@ const handleDownloadAllSelectedFiles = () => {
       data: selectedFiles
     })
     .then((res: any) => {
-      console.log(res, 'res')
+      const blob = new Blob([res.data], { type: 'application/zip' })
+      const downloadUrl = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = downloadUrl
+      document.body.appendChild(a)
+      a.click()
+      window.URL.revokeObjectURL(downloadUrl)
+      document.body.removeChild(a)
     })
-  // 这里可以根据需要处理 selectedFiles，比如打包下载等
-  console.log('Selected Files for Download:', selectedFiles)
 }
 </script>
 
@@ -268,7 +272,7 @@ const handleDownloadAllSelectedFiles = () => {
         <el-button
           class="el-button--main el-button--pain-theme"
           style="width: 100%; margin-bottom: 8px"
-          @click="handleDownloadAllSelectedFiles"
+          @click="handleDownloadAllSelectedFiles()"
         >
           <span class="font_family icon-icon_download_b"></span>
           <span>Download Selected ({{ allChooseFiles }})</span>
@@ -283,7 +287,10 @@ const handleDownloadAllSelectedFiles = () => {
             <div class="count" v-if="typeItem?.attachmentList?.length">
               <span>{{ typeItem?.attachmentList?.length }}</span>
             </div>
-            <span class="font_family icon-icon_download_b"></span>
+            <span
+              @click="handleDownloadAllSelectedFiles(typeItem.label)"
+              class="font_family icon-icon_download_b"
+            ></span>
           </div>
           <el-collapse-item :title="typeItem.label" :name="index.toString()">
             <template #icon="{ isActive }">
@@ -331,6 +338,7 @@ const handleDownloadAllSelectedFiles = () => {
           left: 7px;
           height: 14px;
           width: 6px;
+          border-width: 1.5px;
         }
       }
     }
@@ -338,9 +346,10 @@ const handleDownloadAllSelectedFiles = () => {
   :deep(.el-checkbox__inner) {
     &::after {
       top: 1px;
-      left: 5px;
+      left: 4.5px;
       height: 9px;
       width: 4px;
+      border-width: 2px;
     }
   }
   .right-summary-section {