先上代碼

網絡請求代碼

/**
 * 下載文件
 * @param url 文件路徑
 * @param fileName 文件名
 * @param parameter
 * @param callback 運行結束后執行
 * @param data.type 如果是 json 則失敗了
 * @returns {*}
 */
export function downloadFile(url, fileName, parameter, callback, method = "get") {
    if (method == "get") {
        parameter = checkParamsArr(parameter);
    }
    return downFile(url, parameter, method).then((data) => {
        if (!data || data.size === 0 || data.type === 'application/json') {
            Vue.prototype["$message"].warning("文件下載失敗"); // 看著處理
            return;
        }
        if (typeof window.navigator.msSaveBlob !== "undefined") {
            window.navigator.msSaveBlob(new Blob([data]), fileName); // edge 瀏覽器沒此 api 不知道有沒有用
        } else {
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); //下載完成移除元素
            window.URL.revokeObjectURL(url); //釋放掉blob對象
        }
    }).finally(() => callback());
}

// 判斷 get 請求中 是否存在 數組，如果有，則轉換成字符串
export function checkParamsArr(params) {
    if (params) {
        params = JSON.parse(JSON.stringify(params));
        let arr = Object.keys(params);
        arr.forEach((item) => {
            if ( params[item] && Object.prototype.toString.call(params[item]) === "[object Array]") params[item] = params[item].toString();
            else if (params[item] && Object.prototype.toString.call(params[item]) === "[object Object]") params[item] = checkParamsArr(params[item]); // 對象，遞歸處理
        });
    }
    return params;
}

混入中的處理

/**
 * @param url 文件路徑 是全路徑，在使用的時候請注意添加域名
 * @param fileName 文件名 默認沒有后綴，瀏覽器會導出 txt 文件
 * @param params 第三個參數，如果是對象，則是請求體，如果是字符串，則是按鈕 loading 字符串，需要在this中自定義
 * @param loading 默認 loading
 * @function downloadFileAfter 文件下載成功之后會執行的方法，默認用來添加 loading 使用，默認會傳一個參數，在重寫的時候要注意
 * @function checkDownMust 判斷是否有必傳條件 如果沒有 就判斷 checkMust 方法，用法和 checkMust一樣
 * @function checkMust 獲取列表時判斷是否有必傳字段 用法在 tableLoadMixin 里面
 */
import { downloadFile } from '@/api/manage'
export const downloadFileMixin = {
    data() {
        return {
            downloadLoading: false,
        }
    },
    methods: {
        downloadFile(url = "123", fileName = "fileName", params = this.queryParam, loading = 'downloadLoading') {
            if (!this.checkDownMust ? (!this.checkMust || this.checkMust() === true) : this.checkDownMust() === true) {
                if (Object.prototype.toString.call(params) !== "[object Object]") loading = params, params = this.queryParam
                this[loading] = true
                downloadFile(url, fileName, params, () => this.downloadFileAfter(loading))
            }
        },
        downloadFileAfter(loading) {
            this[loading] = false
        }
    }
}

vue 組件中

<template>
  <a-button @click="downloadFile('url', '話務統計.xls', params)" :loading="downloadLoading">導出</a-button>
</template>
<script>
import { downloadFileMixin } from '../littleMixin/downloadFileMixin'
export default {
  mixins: [downloadFileMixin],
  methods: {
    checkDownMust () {
      if (!this.params.schoolIds) this.$message.warning('請先選擇校區')
      else return true
    },
  },
}
</script>

仙人指路

1. moment.js 獲取 昨天、今天、上周、本周、上月、本月、上季度、本季度、去年 時間段，并集成到 vue Ant Design a-range-picker 日期選擇器中
2. vue Ant Design Select 選擇框輸入搜索已有數據 mixin
3. vue + Ant Design 表格多選 mixin

為什么不封裝組件

1. 混入不涉及頁面交互，只對數據進行操作，分離視圖與數據操作；
2. 混入里面的方法可以在組件中重寫，在設計的時候，不用考慮太多的可擴展性；
3. 混入可以直接使用組件中的所有數據，可以將部分數據功能進行抽離，減少重復操作；
4. 組件的維護成本相對較高，父子組件通信也是成本，在開發中對組件進行維護后會顯得臃腫；