feat: 批量下载失败-重新下载

src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue

@@ -11,7 +11,7 @@ import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPa
 import { downloadByUrl } from '@/utils/tools';
 import DeleteTaskModal from './delete-task-modal.vue';
 import icon1 from '@/assets/img/media-account/icon-delete.png';
-import { showExportNotification } from '@/utils/arcoD';
+import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
 
 export default {
   setup(props, { emit, expose }) {
@@ -102,12 +102,13 @@ export default {
       }
     };
 
-    const clearQueryTaskTimer = () => {
-      if (queryTaskTimer) {
-        clearInterval(queryTaskTimer);
-        queryTaskTimer = null;
+    // 批量下载
+    const handleBatchDownload = debounce(async () => {
+      const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
+      if (code === 200) {
+        startBatchDownload(data.id);
       }
-    };
+    }, 500);
     const startBatchDownload = (id) => {
       const randomId = genRandomId();
       showExportNotification(
@@ -122,17 +123,10 @@ export default {
         randomId,
       });
 
-      // getSyncTaskStatus(randomId);
       if (!queryTaskTimer) {
         queryTaskTimer = setInterval(() => getSyncTaskStatus(), 3000);
       }
     };
-    const handleBatchDownload = debounce(async () => {
-      const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
-      if (code === 200) {
-        startBatchDownload(data.id);
-      }
-    }, 500);
     const getSyncTaskStatus = async () => {
       const { code, data } = await batchQueryTaskStatus({ ids: downloadTaskIds.value.map((v) => v.id) });
       if (code === 200) {
@@ -149,8 +143,17 @@ export default {
               AMessage.success('批量下载已完成，正在下载文件...');
               downloadByUrl(file);
             } else if (status === 2) {
-              AMessage.error('批量下载失败，请重新尝试下载');
+              const onReDownload = () => {
+                startBatchDownload(id);
+              };
+              showFailExportNotification(
+                `${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件下载失败`,
+                { onReDownload },
+              );
             }
+
+            // 结束的任务过滤掉
+            downloadTaskIds.value = downloadTaskIds.value.filter((v) => v.id !== id);
           }
         });
 
@@ -182,6 +185,13 @@ export default {
       selectedRowKeys.value = [];
       getData();
     };
+
+    const clearQueryTaskTimer = () => {
+      if (queryTaskTimer) {
+        clearInterval(queryTaskTimer);
+        queryTaskTimer = null;
+      }
+    };
     const unloadComp = () => {
       clearQueryTaskTimer();
     };

src/utils/arcoD.tsx

@@ -5,6 +5,7 @@ import { IconLoading } from '@arco-design/web-vue/es/icon';
 
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 import icon2 from '@/assets/img/media-account/icon-success.png';
+import icon3 from "@/assets/img/media-account/icon-warn.png"
 
 interface RenderNotificationData {
   total_number: number;
@@ -13,7 +14,9 @@ interface RenderNotificationData {
   file?: string;
 }
 
-export function showExportNotification(label: string, { id =  '', duration = 3000}) {
+// 下载通知框
+export function showExportNotification(label: string, others: { id?: string, duration?: number }) {
+  const { id = '', duration = 3000 } = others ?? {}
   Notification.warning({
     id,
     showIcon: false,
@@ -29,6 +32,28 @@ export function showExportNotification(label: string, { id =  '', duration = 300
   });
 }
 
+// 下载失败框
+export function showFailExportNotification(label: string, others: { id?: string, duration?: number, onReDownload?: Function }) {
+  const { id = '', duration = 0, onReDownload } = others ?? {}
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div class="flex items-center justify-between pr-16px">
+        <div class="flex items-center mr-10px">
+          <img src={icon3} width={16} height={16} class=" mr-8px" />
+          <p class="text-14px lh-22px font-400 color-#211F24 ">{label}</p>
+        </div>
+
+        <p class="text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={() => onReDownload?.()}>重新下载</p>
+      </div>
+    ),
+    duration,
+    class: 'px-16px py-9px w-500px rounded-2px bg-#FFE9E7',
+  });
+}
+
 export const showImportResultNotification = (data: RenderNotificationData) => {
   const { total_number, success_number, fail_number, file } = data;
   const hasError = fail_number > 0;