Browse Source

档案中心增加下载进度条

ljb 7 months ago
parent
commit
edcb547671

+ 10 - 4
src/api/common.js

@@ -13,9 +13,12 @@ export const exportBlob = (url, params, onDownloadProgress) => {
       params,
       method: 'get',
       responseType: 'blob',
+      // onDownloadProgress: (progressEvent) => {
+      //   const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+      //   onDownloadProgress && onDownloadProgress(progress);
+      // }
       onDownloadProgress: (progressEvent) => {
-        const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        onDownloadProgress && onDownloadProgress(progress);
+        onDownloadProgress && onDownloadProgress(progressEvent);
       }
     }).then(res => {
       if (res.data.type.indexOf('json') > -1) {
@@ -39,9 +42,12 @@ export const exportBloByPost = (url, data, onDownloadProgress) => {
       data,
       method: 'post',
       responseType: 'blob',
+      // onDownloadProgress: (progressEvent) => {
+      //   const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+      //   onDownloadProgress && onDownloadProgress(progress);
+      // }
       onDownloadProgress: (progressEvent) => {
-        const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        onDownloadProgress && onDownloadProgress(progress);
+        onDownloadProgress && onDownloadProgress(progressEvent);
       }
     }).then(res => {
       if (res.data.type.indexOf('json') > -1) {

+ 28 - 13
src/views/archive-manage/archive-list.vue

@@ -44,6 +44,16 @@
       </template>
       
     </avue-crud>
+
+    <el-dialog
+      title="下载进度条"
+      :visible="confirmLoading"
+      width="30%"
+      append-to-body
+      :show-close="false"
+    >
+      <el-progress :text-inside="true" :stroke-width="26" :percentage="downPercent"></el-progress>
+    </el-dialog>
   </basic-container>
 </template>
 
@@ -132,6 +142,8 @@ export default window.$crudCommon({
       }, {
         fileName: '其他加计扣除备查资料',
       }],
+
+      downPercent: 0,
     };
   },
   watch: {
@@ -159,27 +171,30 @@ export default window.$crudCommon({
       let storeName = `taskType${type}_${this.params.year}_${this.userInfo.tenant_id}`;
       let taskId = getStore({ name: storeName }) || undefined;
 
-      generateTaskId({ yearAndMonth: this.params.year, type, id: taskId }).then(res => {
-        if (res.data.code == 200) {
-          const { id, status } = res.data.data;
+      generateTaskId({ yearAndMonth: this.params.year, type, id: taskId }).then(taskRes => {
+        if (taskRes.data.code == 200) {
+          const { id, status, fileSize } = taskRes.data.data;
           let taskId = id;
           setStore({ name: storeName, content: taskId });
 
           if (status == 2) {
             this.confirmLoading = true;
-            const loading = this.$loading({
-              lock: true,
-              text: '文件正在下载中,请耐心等待...',
-              spinner: 'el-icon-loading',
-              background: 'rgba(0, 0, 0, 0.7)'
-            });
-            exportBlob(`${downUrl}?${this.website.tokenHeader}=${getToken()}`, { taskId }).then(res => {
-              loading.close();
-              this.confirmLoading = false;
+            exportBlob(`${downUrl}?${this.website.tokenHeader}=${getToken()}`, { taskId }, (progressEvent) => {
+              const progress = Math.round((progressEvent.loaded * 100) / fileSize);
+
+              this.downPercent = progress;
+              
+            }).then(res => {
               downloadXls(res.data, `${this.params.year}年${fileNameObj[type]}.zip`);
+
+              if (this.downPercent == 100) {
+                this.$message.success("下载成功");
+                this.confirmLoading = false;
+                this.downPercent = 0;
+              }
             }).catch(() => {
               this.confirmLoading = false;
-              loading.close();
+              alert("下载失败!");
             });
           } else if (status == 3) {
             this.$message.warning("下载任务已过期,请点击按钮,重新生成下载任务...");

+ 1 - 1
src/views/project-manage/components/apply-form.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="operateType === 'edit'" class="tool-btn" style="width: 800px; margin: 0 auto; text-align: right;">
-      <el-button size="small" type="primary" plain @click="handleExportWord">导出word</el-button>
+      <!-- <el-button size="small" type="primary" plain @click="handleExportWord">导出word</el-button> -->
       <el-button size="small" type="primary" icon="el-icon-printer" v-print="printConfig" @click="isPrintPage = true">打印</el-button>
     </div>
     <div id="applyDoc" class="apply-form" v-loading="loading">