新建一个observable 储存列表数据
import Vue from 'vue';
export const storeError = Vue.observable({
dataList: [],
rowIndex: '',
});
export const mutations = {
saveErrorList(value) {
storeError.dataList = value;
},
deleteErrorList(rowIndex) {
storeError.dataList.splice(rowIndex, 1);
},
};
数据列表请求
getPersonal() {
const params = {
...this.ruleForm, ...this.params };
get_personal(params).then((res) => {
const {
code, data, message } = res;
if (code == 200) {
this.total = data.totalCount;
this.formData = data || [];
// 把数据放进store里
mutations.saveErrorList(data);
} else {
this.$message.warning(message);
}
});
},
导出功能
/**
* @description 导出
*/
exportExecl() {
if (this.loading === true) return;
if (this.errorListTotal === 0) {
this.$message.warning('暂无数据！');
return;
}
const h = this.$createElement;
this.$messageBox({
title: '消息',
message: h('p', null, [
h('i', null, '已选定 '),
h('i', null, this.errorListTotal),
h('i', null, '条人员数据，确认导出吗？'),
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
}).then(() => {
this.loading = true;
let params = Object.assign({
}, this.ruleForm);
params.mchDetailId = this.ruleForm.mchDetailId;
params.start = this.params.start;
params.limit = this.params.limit;
get_salary_fire_user_page(params)
.then((res) => {
if (res) {
let blob = new Blob([res], {
type: 'application/vnd.ms-excel' });
let reader = new FileReader();
reader.onload = (readResponent) => {
try {
let result = readResponent.target.result;
let resultObj = JSON.parse(result);
this.$message.warning(resultObj.message);
} catch (error) {
let ANode = document.createElement('a');
ANode.style.display = 'none';
ANode.href = URL.createObjectURL(blob);
ANode.download = '薪火计划人员信息.xls';
document.body.appendChild(ANode);
ANode.click();
document.body.removeChild(ANode);
window.URL.revokeObjectURL(ANode.href);
}
};
reader.readAsText(blob);
} else {
this.$message.warning('导出失败');
}
this.loading = false;
})
.catch(() => {
this.$mesage.warning('导出失败');
this.loading = false;
});
})
.catch(() => {
this.loading = false;
});
},
在请求api.js中
//导出
export function get_salary_fire_user_page(params) {
return api.post(
'https://dspmicrouag.shupian.cn/crm-middle-pc/api/crisps-crm/service/get_salary_fire_user_page.export',
params,
{},
true,
);
}
api 请求拦截
/**
* axios请求封装
* @author chenmb
* @since 2020/11/12
*/
import Vue from 'vue';
import axios from 'axios';
import {
sign } from '@fe/common';
import CONFIG from '@/config';
import store from 'storejs';
import router from '@/router';
// 支持的方法
const methods = ['get', 'head', 'post', 'put', 'delete', 'options', 'patch', 'form'];
const paramsMethods = ['get', 'delete'];
// 添加请求前缀
const API_PREFIX = '/api';
// 允许携带cookie
axios.defaults.withCredentials = true;
class Api {
constructor() {
methods.forEach(
(method) =>
(this[method] = (path, data = {
}, headers = {
}, isFile) =>
new Promise((resolve, reject) => {
this.doFetch(method, path, data, headers, resolve, reject, isFile);
})),
);
}
doFetch(method, path, data, headers, resolve, reject, isFile = false) {
//下载文件，后端如果返回的是二进制数据，需要将responseType设置为blob
axios.defaults.responseType = isFile ? 'blob' : 'text';
let fileConfig = {
};
const isForm = method === 'form';
const formData = isForm ? new FormData() : null;
//上传，使用form方法上传
if (isForm) {
if (data && data.length > 0) {
const paths = [];
data.forEach((file) => {
formData.append('file', file);
paths.push(file.title);
});
formData.append('paths', paths.toString(','));
} else {
if (data.file instanceof File) {
fileConfig = {
onUploadProgress: function (e) {
if (e.total > 0) {
e.percent = (e.loaded / e.total) * 100;
}
data.onProgress(e);
},
};
formData.append('file', data.file, data.file.name);
} else {
const dataKeys = Object.keys(data);
for (const key of dataKeys) {
formData.append(key, data[key]);
}
}
}
}
const token = store.get('token') || undefined;
// 签名
const signData = sign({
method,
rawData: data,
sysCode: CONFIG.SYS_CODE,
secret: CONFIG.SECRET,
token: token,
});
const config = {
headers: {
'Content-Type': isForm ? 'multipart/form-data' : 'application/json',
...headers,
...signData,
},
};
data = paramsMethods.indexOf(method) !== -1 ? {
params: data, ...config } : data;
const _path = path.indexOf('http') === 0 ? path : `${
API_PREFIX}${
path}`;
axios[isForm ? 'post' : method](
_path,
isForm ? formData : data,
Object.assign({
}, config, fileConfig),
)
.then(({
data }) => {
resolve(data);
if (data.code === 5223) {
Vue.prototype.$mainService?.logout();
if (!window.SP_MICRO_FE) {
router.push('/login');
}
}
})
.catch(async (error) => {
reject(error);
});
}
}
const api = new Api();
export default api;