创建一个文件夹 命名为observable.js 定义号store mutations actions
import Vue from 'vue';
export const store = Vue.observable({
//不同tab页筛选选中数据集合
fieldParams: {},
params: {
limit: 10,
start: 1,
column: undefined,
asc: undefined,
mchUserId: stores.get('mchInfo')?.mchUserId || undefined,
},
activeTab: undefined,
//列表数据
tableData: {
totalCount: 0,
list: [],
},
});
export const mutations = {
//设置不同tab页筛选项
setFieldParams(tabActive, fieldCode, fieldChildCode) {
if (!store.fieldParams[tabActive]) {
Vue.set(store.fieldParams, tabActive, {});
}
Vue.set(store.fieldParams[tabActive], fieldCode, fieldChildCode);
},
clearSortParams() {
store.params.asc = undefined;
store.params.column = undefined;
},
setActiveTab(value) {
store.activeTab = value;
},
//设置tab切换请求参数
setParams(name, fieldCode) {
switch (name) {
case 'sortList':
store.params.column = fieldCode.order ? fieldCode.prop : undefined;
store.params.asc = fieldCode.order ? map[fieldCode?.order] : undefined;
actions.getDataList();
break;
case 'Size':
store.params.limit = fieldCode;
actions.getDataList();
break;
case 'Current':
if (fieldCode) {
store.params.start = fieldCode;
} else {
store.params.start--;
}
actions.getDataList();
break;
default:
break;
}
},
//设置接收时间参数
setFieldTimeParams(active, type, time) {
if (!store.fieldParams[active]) {
Vue.set(store.fieldParams, active, {});
}
store.fieldParams[active][type + 'TimeStart'] = time
? dayjs(time[0]).format('YYYY-MM-DD ') + '00:00:00'
: undefined;
store.fieldParams[active][type + 'TimeEnd'] = time
? dayjs(time[1]).format('YYYY-MM-DD ') + '23:59:59'
: undefined;
actions.getDataList(active);
},
clearFieldParams(tabActive) {
store.fieldParams[tabActive] = {};
},
};
export const actions = {
async getDataList() {
const { data, code, message } = await get_page({
...store.fieldParams[store.activeTab],
...store.params,
switchType: store.activeTab,
});
if (code !== 200) return Vue.prototype.$message.warning(message);
const { records, totalCount } = data;
console.log(records, totalCount, 'list,totalCount');
store.tableData.list = records || [];
store.tableData.totalCount = Number(totalCount);
},
};
其他页面调用时:
先引入import { store, mutations, actions } from './observable';
computed: {
fieldParams() {
return store.fieldParams[this.tabActive] || {};
},
},
mutations.setFieldTimeParams(this.tabActive, type, e);
actions.getDataList();