1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { mapGetters } from 'vuex';
/**
* 需要页面组件自己注入或重写参数
* listData: 页面列表数据 导入名字key需重命名为listData
* pagination: 列表的分页数据
* filters: 带有搜索条件的页面需自己定义filters
*
* 需要页面组件自己注入或重写方法
* fetchList: 获取列表数据的方法 通常为触发action的方法
* updatePagination: 切换分页大小需要注入此方法更新分页信息
*/
export default {
data() {
return {
// listData: [], // 需页面组件自己注入列表并命名为 listData
filters: {},
selected: {},
selectedList: [], // 带有选择框列表选中的列表项
editType: 0, // 带有新增/编辑的页面区分编辑状态
dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
};
},
//
computed: {
...mapGetters(['loading']),
},
created() {
// 当页面没有列表数据的时候调用
if (!this.listData || !this.listData.length) {
this.fetchList({
pageNum: 1,
});
}
},
methods: {
// 页面组件需自己实现获取列表数据的方法
fetchList() {},
// 点击搜索时处理函数
searchList() {
this.changePage(1);
},
// 获取过滤条件方法 组件可自己实现
getFilters() {
let filters = this.$getFilters(this.filters);
return filters;
},
// 页码改变时处理函数
changePage(index = 1) {
const filters = this.getFilters();
this.fetchList({
...filters,
pageNum: index,
});
},
// 分页大小改变时处理函数
changeSizeHandle(pageSize) {
const filters = this.getFilters();
this.fetchList({
...filters,
pageNum: 1,
pageSize: pageSize,
});
this.updatePagination({
pageNum: 1,
pageSize: pageSize,
});
},
// 当列表可选时 处理选择函数
handleSelectionChange(val) {
this.selectedList = val;
},
resetEditDialog(done) {
this.selected = {};
done && typeof done == 'function'
? done()
: (this.dialogEditVisible = false);
},
},
};