fix(测试跟踪): 附件下载没有进度显示

--bug=1015104 --user=陈建星 【测试跟踪】功能用例-上传附件100M以上，完成后下载该附件不显示下载进展 https://www.tapd.cn/55049933/s/1207417

frontend/package.json

@@ -27,6 +27,7 @@
     "element-ui": "^2.13.0",
     "html2canvas": "^1.0.0-rc.7",
     "js-base64": "^3.4.4",
+    "js-file-download": "^0.4.12",
     "jsencrypt": "^3.1.0",
     "json-bigint": "^1.0.0",
     "json-schema-faker": "^0.5.0-rcv.32",

frontend/src/business/components/notice/DownloadNotice.vue

@@ -0,0 +1,59 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "DownloadNotice",
+  data() {
+    return {
+      notify: {}
+    }
+  },
+  watch: {
+    '$store.state.fileDownloadList': {
+      handler(data) {
+        JSON.parse(JSON.stringify(data)).forEach(item => {
+          const domList = [...document.getElementsByClassName(item.id)];
+          let tipDialog = domList.find(i => i.className == item.id);
+          if (tipDialog) {
+            // 更新对话框的进度
+            tipDialog.innerText = item.progress + '%';
+          } else {
+            if (!item.progress) {
+              // 容错处理，后端报错，删除当前进度对象
+              this.$store.commit('deleteDownloadFile', item.id);
+              return;
+            }
+            // 新建弹框，并在notify中加入该弹框对象
+            this.notify[item.id] = this.$notify.success({
+              dangerouslyUseHTMLString: true,
+              message: `<p style="width: 100px;">
+                            正在下载
+                            <span class="${item.id}" style="float: right">
+                                   ${item.progress}%
+                            </span>
+                        </p>`,
+              showClose: false,
+              duration: 0
+            });
+          }
+
+          if (item.progress === 100) {
+            this.notify[item.id].close();
+            // close()事件是异步的，这里直接删除会报错，利用 setTimeout
+            setTimeout(() => delete this.notify[item.id], 1000);
+            this.$store.commit('deleteDownloadFile', item.id);
+          }
+        })
+      },
+      deep: true
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/track/case/components/TestCaseAttachment.vue

@@ -76,7 +76,7 @@
 
 <script>
 import TestCaseFile from "@/business/components/track/case/components/TestCaseFile";
-import {Message} from "element-ui";
+import DownloadNotice from "@/business/components/notice/DownloadNotice";
 
 export default {
   name: "TestCaseAttachment",
@@ -96,6 +96,7 @@ export default {
       default: false
     }
   },
+  mixins: [DownloadNotice],
   data() {
     return {
       uploadProgressColor: '#d4f6d4',
@@ -116,33 +117,9 @@ export default {
       return fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PDF' || fileType === 'PNG';
     },
     handleDownload(file) {
-      let data = {
+      this.$fileDownloadPost('/attachment/download', {
         name: file.name,
         id: file.id,
-      };
-      let config = {
-        url: '/attachment/download',
-        method: 'post',
-        data: data,
-        responseType: 'blob'
-      };
-      this.result = this.$request(config).then(response => {
-        const content = response.data;
-        const blob = new Blob([content]);
-        if ("download" in document.createElement("a")) {
-          // 非IE下载
-          //  chrome/firefox
-          let aTag = document.createElement('a');
-          aTag.download = file.name;
-          aTag.href = URL.createObjectURL(blob);
-          aTag.click();
-          URL.revokeObjectURL(aTag.href)
-        } else {
-          // IE10+下载
-          navigator.msSaveBlob(blob, this.filename)
-        }
-      }).catch(e => {
-        Message.error({message: e.message, showClose: true});
       });
     },
     handleDelete(file, index) {

frontend/src/common/js/ajax.js

@@ -2,7 +2,7 @@ import {Message, MessageBox} from 'element-ui';
 import axios from "axios";
 import i18n from '../../i18n/i18n';
 import {TokenKey} from "@/common/js/constants";
-import {getCurrentProjectID, getCurrentWorkspaceId} from "@/common/js/utils";
+import {getCurrentProjectID, getCurrentWorkspaceId, getUUID} from "@/common/js/utils";
 
 export function registerRequestHeaders() {
   axios.interceptors.request.use(config => {
@@ -136,16 +136,7 @@ export function request(axiosRequestConfig, success, failure) {
   }
 }
 
-export function fileDownload(url) {
-  axios.get(url, {responseType: 'blob'})
-    .then(response => {
-      let fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1]);
-      let link = document.createElement("a");
-      link.href = window.URL.createObjectURL(new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"}));
-      link.download = fileName;
-      link.click();
-    });
-}
+
 
 export function fileUpload(url, file, files, param, success, failure) {
   let formData = new FormData();
@@ -189,6 +180,41 @@ export function doDownload(content, fileName) {
   }
 }
 
+import jsFileDownload from 'js-file-download'
+import store from "@/store";
+import {error} from "@/common/js/message";
+export function downloadFile(method, url, data, fileName) {
+  let downProgress = {};
+  let id = getUUID();
+  let config = {
+    url: url,
+    method: method,
+    data: data,
+    responseType: 'blob',
+    headers: {"Content-Type": "application/json; charset=utf-8"},
+    onDownloadProgress(progress) {
+      // 计算出下载进度
+      downProgress = Math.round(100 * progress.loaded / progress.total);
+      // 下载进度存入 vuex
+      store.commit('setDownloadFile', {id, 'progress': downProgress});
+    }
+  };
+  axios.request(config)
+    .then((res) => {
+      fileName = fileName ? fileName : window.decodeURI(res.headers['content-disposition'].split('=')[1]);
+      jsFileDownload(res.data, fileName);
+  }).catch((e) => {
+    error(e.message);
+  })
+}
+
+export function fileDownload(url, fileName) {
+  downloadFile('get', url, null, fileName);
+}
+
+export function fileDownloadPost(url, data, fileName) {
+  downloadFile('post', url, data, fileName);
+}
 
 export function all(array, callback) {
   if (array.length < 1) return;
@@ -231,6 +257,8 @@ export default {
 
     Vue.prototype.$fileDownload = fileDownload;
 
+    Vue.prototype.$fileDownloadPost = fileDownloadPost;
+
     Vue.prototype.$fileUpload = fileUpload;
 
     Vue.prototype.$download = download;

frontend/src/store/index.js

@@ -48,7 +48,8 @@ const state = {
   uiElementLibraryElements: null,
   refreshUiScenario: false,
   showLicenseCountWarning: false,
-  temWorkspaceId: null
+  temWorkspaceId: null,
+  fileDownloadList: [], // 文件下载进度列表
 }
 
 const store = new Vuex.Store({

frontend/src/store/mutations.js

@@ -31,6 +31,18 @@ const mutations = {
   setSelectUiGroup: (state, value) => state.selectUiGroup = value,
   setShowLicenseCountWarning: (state, value) => state.showLicenseCountWarning = value,
   setTemWorkspaceId: (state, value) => state.temWorkspaceId = value,
+  setDownloadFile: (state, downloadFile) => {
+    // 实时更新下载进度条
+    let loadingFile = state.fileDownloadList.find(item => item.id === downloadFile.id);
+    if (loadingFile) {
+      loadingFile.progress = downloadFile.progress;
+    } else {
+      state.fileDownloadList.push(downloadFile);
+    }
+  },
+  deleteDownloadFile: (state, props) => {
+    state.fileDownloadList.splice(state.fileDownloadList.findIndex(item => item.id === props), 1);
+  },
 }
 
 export default mutations;