先上代碼

網(wǎng)絡(luò)請(qǐng)求代碼

/**
 * 下載文件
 * @param url 文件路徑
 * @param fileName 文件名
 * @param parameter
 * @param callback 運(yùn)行結(jié)束后執(zhí)行
 * @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 瀏覽器沒(méi)此 api 不知道有沒(méi)有用
        } 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對(duì)象
        }
    }).finally(() => callback());
}

// 判斷 get 請(qǐng)求中 是否存在 數(shù)組，如果有，則轉(zhuǎn)換成字符串
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]); // 對(duì)象，遞歸處理
        });
    }
    return params;
}

混入中的處理

/**
 * @param url 文件路徑 是全路徑，在使用的時(shí)候請(qǐng)注意添加域名
 * @param fileName 文件名 默認(rèn)沒(méi)有后綴，瀏覽器會(huì)導(dǎo)出 txt 文件
 * @param params 第三個(gè)參數(shù)，如果是對(duì)象，則是請(qǐng)求體，如果是字符串，則是按鈕 loading 字符串，需要在this中自定義
 * @param loading 默認(rèn) loading
 * @function downloadFileAfter 文件下載成功之后會(huì)執(zhí)行的方法，默認(rèn)用來(lái)添加 loading 使用，默認(rèn)會(huì)傳一個(gè)參數(shù)，在重寫(xiě)的時(shí)候要注意
 * @function checkDownMust 判斷是否有必傳條件 如果沒(méi)有 就判斷 checkMust 方法，用法和 checkMust一樣
 * @function checkMust 獲取列表時(shí)判斷是否有必傳字段 用法在 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', '話務(wù)統(tǒng)計(jì).xls', params)" :loading="downloadLoading">導(dǎo)出</a-button>
</template>
<script>
import { downloadFileMixin } from '../littleMixin/downloadFileMixin'
export default {
  mixins: [downloadFileMixin],
  methods: {
    checkDownMust () {
      if (!this.params.schoolIds) this.$message.warning('請(qǐng)先選擇校區(qū)')
      else return true
    },
  },
}
</script>

仙人指路

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

為什么不封裝組件

1. 混入不涉及頁(yè)面交互，只對(duì)數(shù)據(jù)進(jìn)行操作，分離視圖與數(shù)據(jù)操作；
2. 混入里面的方法可以在組件中重寫(xiě)，在設(shè)計(jì)的時(shí)候，不用考慮太多的可擴(kuò)展性；
3. 混入可以直接使用組件中的所有數(shù)據(jù)，可以將部分?jǐn)?shù)據(jù)功能進(jìn)行抽離，減少重復(fù)操作；
4. 組件的維護(hù)成本相對(duì)較高，父子組件通信也是成本，在開(kāi)發(fā)中對(duì)組件進(jìn)行維護(hù)后會(huì)顯得臃腫；