Browse Source

档案中心下载功能优化

ljb 6 months ago
parent
commit
89e11a2bd6
4 changed files with 210 additions and 7 deletions
  1. 176 5
      src/App.vue
  2. 1 0
      src/store/getters.js
  3. 24 0
      src/store/modules/common.js
  4. 9 2
      src/views/archive-manage/archive-list.vue

+ 176 - 5
src/App.vue

@@ -1,21 +1,169 @@
 <template>
   <div id="app">
     <router-view />
+
+    <div v-if="isOpenDownPanel" class="download-mask">
+      <h3 class="title">{{ `下载任务【${downloadTitle}】`}}</h3>
+      <div class="content">
+        <div
+          class="down-tip"
+          style="min-height: 60px;"
+          v-loading="showDownLoading"
+          element-loading-text="资源文件正在生成中,请耐心等待。。。"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0)"
+        >
+
+          <template v-if="downPercent > 0">
+            <el-progress :text-inside="true" :stroke-width="26" :percentage="downPercent"></el-progress>
+            <div style="text-align: right; color: #666; font-size: 14px; margin-top: 6px;">下载进度条</div>
+          </template>
+
+          <el-result v-if="showError" icon="error" title="文件下载失败">
+            <template slot="extra">
+              <el-button type="primary" size="medium" @click="handleAgainDown">重新下载</el-button>
+            </template>
+          </el-result>
+
+          <el-result v-if="showSucc" icon="success" title="下载成功">
+            <template slot="extra">
+              <el-button type="primary" size="medium" @click="handleClose">关闭窗口</el-button>
+            </template>
+          </el-result>
+
+        </div>
+        
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import {exportBlob} from "@/api/common";
+import {getToken} from "@/util/auth";
+import {downloadXls, downloadFileByUrl} from "@/util/util";
+import { generateTaskId, downAllFile } from "@/api/achiveManage/archiveList"
+import { mapGetters } from "vuex";
+import {setStore, getStore, removeStore} from '@/util/store'
+
 export default {
   name: "app",
   data() {
-    return {};
+    return {
+      taskStoreName: '', // 下载任务存储的store对象
+      fileSize: 0, // 文件大小
+      downPercent: 0,
+
+      isOpenDownPanel: false,
+      showDownLoading: false,
+      showError: false,
+      showSucc: false,
+      fileTypeNameObj: {
+        0: '全部档案资料',
+        1: '高新备查资料',
+        2: '加计扣除备查资料'
+      }
+    };
   },
-  watch: {},
-  created() {
+  computed: {
+    ...mapGetters(['userInfo', 'downloadTaskObj']),
+    downloadTitle() {
+      const { type, yearAndMonth } = this.downloadTaskObj;
+      return `${yearAndMonth}年${this.fileTypeNameObj[type]}`;
+    }
+  },
+  watch: {
+    'downloadTaskObj.isOpenDown': {
+      handler(newVal) {
+        if (newVal) {
+          const { type, yearAndMonth } = this.downloadTaskObj;
+          this.taskStoreName = `taskType${type}_${yearAndMonth}_${this.userInfo.tenant_id}`;
+          this.isOpenDownPanel = true;
+          this.showDownLoading = true;
+          this.showError = false;
+          this.showSucc = false;
+          this.checkTaskId(yearAndMonth, type);
+        }
+      },
+      deep: true
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(this._timout);
+    this.$store.commit("SET_TASK_OPEND_STATUS", false);
+  },
+  methods: {
+    handleAgainDown() {
+      const { type, yearAndMonth } = this.downloadTaskObj;
+      this.showError = false;
+      this.checkTaskId(yearAndMonth, type);
+    },
+    handleClose() {
+      this.showError = false;
+      this.showSucc = false;
+      this.showDownLoading = false;
+      this.isOpenDownPanel = false;
+    },
+    /**
+     * 检查下载任务进程
+     * @param yearAndMonth 年份
+     * @param fileType 文件类型
+     */
+    checkTaskId(yearAndMonth, fileType) {
+      let storeTaskId = getStore({ name: this.taskStoreName }) || undefined;
+      generateTaskId({ yearAndMonth, type: fileType, id: storeTaskId }).then(taskRes => {
+        if (taskRes.data.code == 200) {
+          const { id: taskId, status, fileSize } = taskRes.data.data;
+
+          if (!storeTaskId) {
+            setStore({ name: this.taskStoreName, content: taskId });
+          }
 
+          if (status == 2) {
+            this.showDownLoading = false;
+            this.downloadZip(yearAndMonth, taskId, fileType, fileSize);
+          } else if (status == 3) {
+            removeStore({ name: this.taskStoreName });
+            this.checkTaskId(yearAndMonth, fileType);
+          } else {
+            this.checkTaskId(yearAndMonth, fileType);
+          }
+        }
+        
+      }).catch(err => {
+        this.$message.error("文件下载失败!");
+        this.showDownLoading = false;
+        this.showError = true;
+      })
+    },
+    /**
+     * 下载文件
+     * @param yearAndMonth 年份
+     * @param taskId 下载任务id
+     * @param fileType 文件类型
+     * @param fileSize 文件大小
+     */
+    downloadZip(yearAndMonth, taskId, fileType, fileSize) {
+       this.showProgressDialog = true;
+        exportBlob(`/api/kd-scientific/archive/center/download?${this.website.tokenHeader}=${getToken()}`, { taskId }, (progressEvent) => {
+          const progress = Math.round((progressEvent.loaded * 100) / fileSize);
+          this.downPercent = progress;
+        }).then(res => {
+          this.$message.success('文件下载成功!');
+          downloadXls(res.data, `${this.downloadTitle}.zip`);
+
+          this._timout = setTimeout(() => {
+            this.downPercent = 0;
+            this.showDownLoading = false;
+            this.showSucc = true;
+            this.$store.commit("SET_TASK_OPEND_STATUS", false);
+          }, 500)
+        }).catch(() => {
+          this.$message.error("文件下载失败!");
+          this.showError = true;
+        });
+    }
   },
-  methods: {},
-  computed: {}
 };
 </script>
 <style lang="scss">
@@ -27,4 +175,27 @@ export default {
 .avue--detail .el-col{
   margin-bottom: 0;
 }
+
+.download-mask {
+  position: fixed;
+  top: 105px;
+  right: 0;
+  padding: 14px 26px 14px 13px;
+  width: 330px;
+  min-height: 60px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border: 1px solid #ebeef5;
+  z-index: 9999;
+  .title {
+    font-weight: 700;
+    font-size: 16px;
+    color: #303133;
+    margin: 0 !important;
+  }
+  .content {
+    margin-top: 16px;
+  }
+}
 </style>

+ 1 - 0
src/store/getters.js

@@ -27,5 +27,6 @@ const getters = {
   flowRoutes: state => state.dict.flowRoutes,
   vipYearList: state => state.user.vipYearList,
   pageYear: state => state.common.pageYear,
+  downloadTaskObj: state => state.common.downloadTaskObj
 }
 export default getters

+ 24 - 0
src/store/modules/common.js

@@ -29,11 +29,35 @@ const common = {
     lockPasswd: getStore({name: 'lockPasswd'}) || '',
     website: website,
     pageYear: '',
+    taskDownIsOpen: false,
+    downloadTaskObj: {
+      yearAndMonth: '',
+      type: '',
+      isOpenDown: false,
+    },
   },
   mutations: {
     SET_PAGEYEAR: (state, year) => {
       state.pageYear = year;
     },
+    SET_TASK_YEARANDMONTH(state, yearAndMonth) {
+      state.downloadTaskObj = {
+        ...state.downloadTaskObj,
+        yearAndMonth
+      };
+    },
+    SET_TASK_TYPE(state, type) {
+      state.downloadTaskObj = {
+        ...state.downloadTaskObj,
+        type
+      };
+    },
+    SET_TASK_OPEND_STATUS(state, isOpenDown) {
+      state.downloadTaskObj = {
+        ...state.downloadTaskObj,
+        isOpenDown
+      };
+    },
     SET_LANGUAGE: (state, language) => {
       state.language = language
       setStore({

+ 9 - 2
src/views/archive-manage/archive-list.vue

@@ -153,7 +153,7 @@ export default window.$crudCommon({
     },
   },
   computed: {
-    ...mapGetters(['tag', 'userInfo']),
+    ...mapGetters(['tag', 'userInfo', 'downloadTaskObj']),
     pageTitle() {
       let yearCN = this.params.yearAndMonth ? moment(this.params.yearAndMonth).format('yyyy年') : ''
       return `${yearCN}${this.tag.label}`
@@ -215,7 +215,14 @@ export default window.$crudCommon({
           cancelButtonText: '取消',
           type: 'warning',
         }).then(() => {
-          this.downFile(downUrl, type);
+          if (this.downloadTaskObj.isOpenDown) {
+            this.$message.warning("当前存在下载任务,请稍后再试!");
+            return;
+          }
+          // this.downFile(downUrl, type);
+          this.$store.commit("SET_TASK_YEARANDMONTH", this.params.yearAndMonth);
+          this.$store.commit("SET_TASK_TYPE", type);
+          this.$store.commit("SET_TASK_OPEND_STATUS", true);
         })
     },
   },