vue 后端导出 mixin 混入式开发 以及 get 请求数组处理

先上代码

网络请求代码

/**
 * 下载文件
 * @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. 组件的维护成本相对较高，父子组件通信也是成本，在开发中对组件进行维护后会显得臃肿；