export const downFileProgress  =(url,parameter,callback,totalSize,uniSign) =>{
  return axios({
    url: url,
    params: parameter,
    method:'get' ,
    responseType: 'blob',
    onDownloadProgress (progress) {
      callback(progress, totalSize, uniSign)
    }
  })
}

const state = {
  // 文件下載進度
  progressList: [], 
  progressError: '',
}
const mutations = {
  SET_PROGRESS: (state, progressObj)=>{ 
    // 修改進度列表
    if(state.progressList.length){ 
      // 如果進度列表存在
      if(state.progressList.find(item=>item.path == progressObj.path)){ 
        // 前面說的path時間戳是唯一存在的，所以如果在進度列表中找到當(dāng)前的進度對象
        state.progressList.find(item=>item.path == progressObj.path).progress = progressObj.progress 
        // 改變當(dāng)前進度對象的progress
      }
    }else{
      // 當(dāng)前進度列表為空，沒有下載任務(wù)，直接將該進度對象添加到進度數(shù)組內(nèi)
      state.progressList.push(progressObj) 
    }
  },
  DEL_PROGRESS: (state, props) => {
    state.progressList.splice(state.progressList.findIndex(item=>item.path == props), 1) // 刪除進度列表中的進度對象
  },
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}
const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

<template>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'downLoadNotice',
    computed: {
      ...mapState({
      'progressList': state => state.downLoadProgress.progressList
    })
    },
    data() {
      return {
        notify: {} // 用來維護下載文件進度彈框?qū)ο?
      }
    },
    watch: { // 監(jiān)聽進度列表
      progressList: {
        handler(n) {
          let data = JSON.parse(JSON.stringify(n))
          data.forEach(item => {
            const domList = [...document.getElementsByClassName(item.path)]
            if (domList.find(i => i.className == item.path)) { // 如果頁面已經(jīng)有該進度對象的彈框，則更新它的進度progress
              if(item.progress)domList.find(i => i.className == item.path).innerHTML = item.progress + '%'
              if (item.progress === null) { // 此處容錯處理，如果后端傳輸文件流報錯，刪除當(dāng)前進度對象
                this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)
                this.$notify.error({
                  title: '錯誤',
                  message: '文件下載失敗！'
                });
              }
            } else {
              // 如果頁面中沒有該進度對象所對應(yīng)的彈框，頁面新建彈框，并在notify中加入該彈框?qū)ο?，屬性名為該進度對象的path(上文可知path是唯一的)，屬性值為$notify(element ui中的通知組件)彈框?qū)ο?
              this.notify[item.path] = this.$notify.success({
                // title: 'info',
                dangerouslyUseHTMLString: true,
                customClass: 'progress-notify',
                message: `<p style="width: 100px;">正在下載<span class="${item.path}" style="float: right">${item.progress}%</span></p>`, // 顯示下載百分比，類名為進度對象的path(便于后面更新進度百分比)
                showClose: false,
                duration: 0
              })
            }
            console.log(item.progress + '%', '-------------------------->')
            if (item.progress == 100) { // 如果下載進度到了100%，關(guān)閉該彈框，并刪除notify中維護的彈框?qū)ο?
              this.notify[item.path].close()
              // delete this.notify[item.path] 上面的close()事件是異步的，這里直接刪除會報錯，利用setTimeout，將該操作加入異步隊列
              setTimeout(() => {
                delete this.notify[item.path]
              }, 1000)
              this.$store.commit('downLoadProgress/DEL_PROGRESS', item.path)// 刪除caseInformation中state的progressList中的進度對象
            }
          })
        },
        deep: true
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>