[Feat 0000]导出文件时添加加载状态

src/hooks/system/useMethods.ts

@@ -22,32 +22,45 @@ export function useMethods() {
    * @param url
    */
   async function exportXls(name, url, params, isXlsx = false) {
-    const data = await defHttp.get({ url: url, params: params, responseType: 'blob', timeout: 1000 * 1000 }, { isTransformResponse: false });
-    if (!data) {
-      createMessage.warning('文件下载失败');
-      return;
-    }
-    if (!name || typeof name != 'string') {
-      name = '导出文件';
-    }
-    const blobOptions = { type: 'application/vnd.ms-excel' };
-    let fileSuffix = '.xls';
-    if (isXlsx === true) {
-      blobOptions['type'] = XLSX_MIME_TYPE;
-      fileSuffix = XLSX_FILE_SUFFIX;
-    }
-    if (typeof window.navigator.msSaveBlob !== 'undefined') {
-      window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
-    } else {
-      const url = window.URL.createObjectURL(new Blob([data], blobOptions));
-      const link = document.createElement('a');
-      link.style.display = 'none';
-      link.href = url;
-      link.setAttribute('download', name + fileSuffix);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link); //下载完成移除元素
-      window.URL.revokeObjectURL(url); //释放掉blob对象
+    // 生成唯一loading key，避免多操作冲突
+    const loadingKey = `export-xls-${Date.now()}`;
+    // 显示loading，duration:0 表示不自动关闭
+    message.loading({ content: '正在导出文件，请稍等...', key: loadingKey, duration: 0 });
+    try {
+      const data = await defHttp.get({ url: url, params: params, responseType: 'blob', timeout: 1000 * 1000 }, { isTransformResponse: false });
+      if (!data) {
+        createMessage.warning('文件下载失败');
+        return;
+      }
+      if (!name || typeof name != 'string') {
+        name = '导出文件';
+      }
+      const blobOptions = { type: 'application/vnd.ms-excel' };
+      let fileSuffix = '.xls';
+      if (isXlsx === true) {
+        blobOptions['type'] = XLSX_MIME_TYPE;
+        fileSuffix = XLSX_FILE_SUFFIX;
+      }
+      if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
+      } else {
+        const url = window.URL.createObjectURL(new Blob([data], blobOptions));
+        const link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = url;
+        link.setAttribute('download', name + fileSuffix);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); //下载完成移除元素
+        window.URL.revokeObjectURL(url); //释放掉blob对象
+      }
+      // 导出成功提示
+      message.success({ content: '文件导出成功!', key: loadingKey, duration: 2 });
+    } catch (error) {
+      createMessage.error('文件导出失败!');
+      console.error('导出失败:', error);
+    } finally {
+      message.destroy(loadingKey);
     }
   }
 
@@ -57,12 +70,11 @@ export function useMethods() {
    * @param url
    */
   async function exportXlsPost(name, url, params, isXlsx = false) {
-    const key = 'updatable';
-    message.loading({ content: '正在导出，请稍等...', key });
+    const loadingKey = 'export-xls-post';
+    message.loading({ content: '正在导出，请稍等...', key: loadingKey, duration: 0 });
     defHttp
       .post({ url: url, params: params, timeout: 1000 * 1000 }, { isTransformResponse: false })
       .then((data) => {
-        debugger;
         if (data.code == 200 && data.result) {
           const messageArr = data.result.split('/');
           const fileUrl = encodeURIComponent(messageArr[messageArr.length - 1]);
@@ -82,45 +94,60 @@ export function useMethods() {
             a.click();
             // 将标签从dom移除
             document.body.removeChild(a);
-            message.success({ content: '导出成功!', key, duration: 1 });
+            message.success({ content: '导出成功!', key: loadingKey, duration: 2 });
+          } else {
+            message.error({ content: '下载失败!', key: loadingKey, duration: 2 });
           }
         } else {
-          message.error({ content: '下载失败!', key, duration: 1 });
+          message.error({ content: '下载失败!', key: loadingKey, duration: 2 });
         }
       })
       .catch(() => {
-        message.error({ content: '下载失败!', key, duration: 1 });
+        message.error({ content: '下载失败!', key: loadingKey, duration: 2 });
+      })
+      .finally(() => {
+        message.destroy(loadingKey);
       });
   }
 
   async function exportXlsPost1(name, url, params, isXlsx = false) {
-    const data = await defHttp.post({ url: url, data: params, responseType: 'blob' }, { isTransformResponse: false });
-    debugger;
-    if (!data) {
-      createMessage.warning('文件下载失败');
-      return;
-    }
-    if (!name || typeof name != 'string') {
-      name = '导出文件';
-    }
-    const blobOptions = { type: 'application/vnd.ms-excel' };
-    let fileSuffix = '.xls';
-    if (isXlsx === true) {
-      blobOptions['type'] = XLSX_MIME_TYPE;
-      fileSuffix = XLSX_FILE_SUFFIX;
-    }
-    if (typeof window.navigator.msSaveBlob !== 'undefined') {
-      window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
-    } else {
-      const url = window.URL.createObjectURL(new Blob([data], blobOptions));
-      const link = document.createElement('a');
-      link.style.display = 'none';
-      link.href = url;
-      link.setAttribute('download', name + fileSuffix);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link); //下载完成移除元素
-      window.URL.revokeObjectURL(url); //释放掉blob对象
+    const loadingKey = `export-xls-post1-${Date.now()}`;
+    message.loading({ content: '正在导出文件，请稍等...', key: loadingKey, duration: 0 });
+
+    try {
+      const data = await defHttp.post({ url: url, data: params, responseType: 'blob' }, { isTransformResponse: false });
+      if (!data) {
+        createMessage.warning('文件下载失败');
+        return;
+      }
+      if (!name || typeof name != 'string') {
+        name = '导出文件';
+      }
+      const blobOptions = { type: 'application/vnd.ms-excel' };
+      let fileSuffix = '.xls';
+      if (isXlsx === true) {
+        blobOptions['type'] = XLSX_MIME_TYPE;
+        fileSuffix = XLSX_FILE_SUFFIX;
+      }
+      if (typeof window.navigator.msSaveBlob !== 'undefined') {
+        window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
+      } else {
+        const url = window.URL.createObjectURL(new Blob([data], blobOptions));
+        const link = document.createElement('a');
+        link.style.display = 'none';
+        link.href = url;
+        link.setAttribute('download', name + fileSuffix);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); //下载完成移除元素
+        window.URL.revokeObjectURL(url); //释放掉blob对象
+      }
+      message.success({ content: '文件导出成功!', key: loadingKey, duration: 2 });
+    } catch (error) {
+      createMessage.error('文件导出失败!');
+      console.error('导出失败:', error);
+    } finally {
+      message.destroy(loadingKey);
     }
   }
 
@@ -131,6 +158,9 @@ export function useMethods() {
    * @param success 成功后的回调
    */
   async function importXls(data, url, success) {
+    const loadingKey = `import-xls-${Date.now()}`;
+    message.loading({ content: '正在导入文件，请稍等...', key: loadingKey, duration: 0 });
+
     const isReturn = (fileInfo) => {
       try {
         if (fileInfo.code === 201) {
@@ -147,20 +177,28 @@ export function useMethods() {
                                 <span>具体详情请<a href = ${href} download = ${fileName}> 点击下载 </a> </span> 
                               </div>`,
           });
-          //update-begin---author:wangshuai ---date:20221121  for：[VUEN-2827]导入无权限，提示图标错误------------
         } else if (fileInfo.code === 500 || fileInfo.code === 510) {
           createMessage.error(fileInfo.message || `${data.file.name} 导入失败`);
-          //update-end---author:wangshuai ---date:20221121  for：[VUEN-2827]导入无权限，提示图标错误------------
         } else {
           createMessage.success(fileInfo.message || `${data.file.name} 文件上传成功`);
         }
       } catch (error) {
         console.log('导入的数据异常', error);
+        createMessage.error('文件导入异常!');
       } finally {
+        // 关闭loading
+        message.destroy(loadingKey);
         typeof success === 'function' ? success(fileInfo) : '';
       }
     };
-    await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
+    try {
+      await defHttp.uploadFile({ url }, { file: data.file }, { success: isReturn });
+    } catch (error) {
+      // 异常时强制关闭loading
+      message.destroy(loadingKey);
+      createMessage.error('文件导入失败!');
+      console.error('导入失败:', error);
+    }
   }
 
   return {