App.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <div id="app">
  3. <router-view />
  4. <div v-if="isOpenDownPanel" class="download-mask">
  5. <h3 class="title">{{ `下载任务【${downloadTitle}】`}}</h3>
  6. <div class="content">
  7. <div
  8. class="down-tip"
  9. style="min-height: 60px;"
  10. v-loading="showDownLoading"
  11. element-loading-text="资源文件正在生成中,请耐心等待。。。"
  12. element-loading-spinner="el-icon-loading"
  13. element-loading-background="rgba(0, 0, 0, 0)"
  14. >
  15. <template v-if="downPercent > 0">
  16. <el-progress :text-inside="true" :stroke-width="26" :percentage="downPercent"></el-progress>
  17. <div style="text-align: right; color: #666; font-size: 14px; margin-top: 6px;">下载进度条</div>
  18. </template>
  19. <el-result v-if="showError" icon="error" title="文件下载失败">
  20. <template slot="extra">
  21. <el-button type="primary" size="medium" @click="handleAgainDown">重新下载</el-button>
  22. <el-button type="primary" size="medium" @click="handleClose">关闭窗口</el-button>
  23. </template>
  24. </el-result>
  25. <el-result v-if="showSucc" icon="success" title="下载成功">
  26. <template slot="extra">
  27. <el-button type="primary" size="medium" @click="handleClose">关闭窗口</el-button>
  28. </template>
  29. </el-result>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </template>
  35. <script>
  36. import {exportBlob} from "@/api/common";
  37. import {getToken} from "@/util/auth";
  38. import {downloadXls, downloadFileByUrl} from "@/util/util";
  39. import { generateTaskId, downAllFile } from "@/api/achiveManage/archiveList"
  40. import { mapGetters } from "vuex";
  41. import {setStore, getStore, removeStore} from '@/util/store'
  42. export default {
  43. name: "app",
  44. data() {
  45. return {
  46. taskStoreName: '', // 下载任务存储的store对象
  47. fileSize: 0, // 文件大小
  48. downPercent: 0,
  49. isOpenDownPanel: false,
  50. showDownLoading: false,
  51. showError: false,
  52. showSucc: false,
  53. fileTypeNameObj: {
  54. 0: '全部档案资料',
  55. 1: '高新备查资料',
  56. 2: '加计扣除备查资料'
  57. }
  58. };
  59. },
  60. computed: {
  61. ...mapGetters(['userInfo', 'downloadTaskObj']),
  62. downloadTitle() {
  63. const { type, yearAndMonth } = this.downloadTaskObj;
  64. return `${yearAndMonth}年${this.fileTypeNameObj[type]}`;
  65. }
  66. },
  67. watch: {
  68. 'downloadTaskObj.isOpenDown': {
  69. handler(newVal) {
  70. if (newVal) {
  71. const { type, yearAndMonth } = this.downloadTaskObj;
  72. this.taskStoreName = `taskType${type}_${yearAndMonth}_${this.userInfo.tenant_id}`;
  73. this.isOpenDownPanel = true;
  74. this.showDownLoading = true;
  75. this.showError = false;
  76. this.showSucc = false;
  77. this._checkTimeout = setTimeout(() => {
  78. this.checkTaskId(yearAndMonth, type);
  79. }, 3000)
  80. }
  81. },
  82. deep: true
  83. }
  84. },
  85. beforeDestroy() {
  86. this._timout && clearTimeout(this._timout);
  87. this._checkTimeout && clearTimeout(this._checkTimeout);
  88. this.$store.commit("SET_TASK_OPEND_STATUS", false);
  89. },
  90. methods: {
  91. handleAgainDown() {
  92. const { type, yearAndMonth } = this.downloadTaskObj;
  93. this.showError = false;
  94. this.showDownLoading = true;
  95. this.checkTaskId(yearAndMonth, type);
  96. },
  97. handleClose() {
  98. this.showError = false;
  99. this.showSucc = false;
  100. this.showDownLoading = false;
  101. this.isOpenDownPanel = false;
  102. this.$store.commit("SET_TASK_OPEND_STATUS", false);
  103. },
  104. /**
  105. * 检查下载任务进程
  106. * @param yearAndMonth 年份
  107. * @param fileType 文件类型
  108. */
  109. checkTaskId(yearAndMonth, fileType) {
  110. if (this._checkTimeout) {
  111. clearTimeout(this._checkTimeout);
  112. }
  113. let storeTaskId = getStore({ name: this.taskStoreName }) || undefined;
  114. generateTaskId({ yearAndMonth, type: fileType, id: storeTaskId }).then(taskRes => {
  115. if (taskRes.data.code == 200) {
  116. const { id: taskId, status, fileSize } = taskRes.data.data;
  117. if (!storeTaskId) {
  118. setStore({ name: this.taskStoreName, content: taskId });
  119. }
  120. if (status == 2) {
  121. this.showDownLoading = false;
  122. removeStore({ name: this.taskStoreName });
  123. this.downloadZip(yearAndMonth, taskId, fileType, fileSize);
  124. } else if (status == 4) {
  125. // 任务过期或者不存在
  126. removeStore({ name: this.taskStoreName });
  127. this._checkTimeout = setTimeout(() => {
  128. this.checkTaskId(yearAndMonth, fileType);
  129. }, 1500)
  130. } else {
  131. this._checkTimeout = setTimeout(() => {
  132. this.checkTaskId(yearAndMonth, fileType);
  133. }, 1500)
  134. }
  135. }
  136. }).catch(err => {
  137. this.$message.error("文件下载失败!");
  138. this.showDownLoading = false;
  139. this.showError = true;
  140. })
  141. },
  142. /**
  143. * 下载文件
  144. * @param yearAndMonth 年份
  145. * @param taskId 下载任务id
  146. * @param fileType 文件类型
  147. * @param fileSize 文件大小
  148. */
  149. downloadZip(yearAndMonth, taskId, fileType, fileSize) {
  150. this.showProgressDialog = true;
  151. exportBlob(`/api/kd-scientific/archive/center/download?${this.website.tokenHeader}=${getToken()}`, { taskId }, (progressEvent) => {
  152. const progress = Math.round((progressEvent.loaded * 100) / fileSize);
  153. this.downPercent = progress;
  154. }).then(res => {
  155. this._timout = setTimeout(() => {
  156. this.$message.success('文件下载成功!');
  157. downloadXls(res.data, `${this.downloadTitle}.zip`);
  158. this.downPercent = 0;
  159. this.showDownLoading = false;
  160. this.showSucc = true;
  161. this.$store.commit("SET_TASK_OPEND_STATUS", false);
  162. }, 800)
  163. }).catch(() => {
  164. this.$message.error("文件下载失败!");
  165. this.showError = true;
  166. });
  167. }
  168. },
  169. };
  170. </script>
  171. <style lang="scss">
  172. #app {
  173. width: 100%;
  174. height: 100%;
  175. overflow: hidden;
  176. }
  177. .avue--detail .el-col{
  178. margin-bottom: 0;
  179. }
  180. .download-mask {
  181. position: fixed;
  182. top: 105px;
  183. right: 0;
  184. padding: 14px 26px 14px 13px;
  185. width: 330px;
  186. min-height: 60px;
  187. background: #fff;
  188. border-radius: 8px;
  189. box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  190. border: 1px solid #ebeef5;
  191. z-index: 9999;
  192. .title {
  193. font-weight: 700;
  194. font-size: 16px;
  195. color: #303133;
  196. margin: 0 !important;
  197. }
  198. .content {
  199. margin-top: 16px;
  200. }
  201. }
  202. </style>