page.js
3.12 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import MIX_ORIGIN from '@/mixins/origin'; // 初始值逻辑混入
export default {
mixins: [MIX_ORIGIN],
data() {
return {
auto: false, // 页面加载时自动查询
tableData: [], // 表格数据
loading: false, // 加载状态
total: 0, // 数据总量
currentPage: 1, // 当前页码
pageSize: 10, // 分页大小
pageSizes: [10, 20, 50, 100], // 分页大小选项
layout: 'total, sizes, prev, pager, next, jumper', // 分页器默认设置
searchModel: {}, // 搜索表单绑定值
form: {}, // 常规表单绑定值
submitting: false, // 提交状态
selection: [], // 表格选中项
collapsed: false, // 展开状态
};
},
computed: {
// 搜索栏折叠按钮文本
toggleText() {
return this.collapsed ? '收起' : '展开';
},
// 表格属性
tableProps() {
return {
size: 'mini',
rowKey: 'id',
border: true,
highlightCurrentRow: true,
data: this.tableData,
};
},
// 表格事件
tableEvent() {
return {
'selection-change': this.onSelectionChange,
};
},
// 分页参数
pageParams() {
return {
currentPage: this.currentPage,
pageSize: this.pageSize,
};
},
// 分页器属性
paginationProps() {
return {
'current-page': this.currentPage,
'page-sizes': this.pageSizes,
'page-size': this.pageSize,
layout: this.layout,
total: this.total,
};
},
// 分页器事件
paginationEvent() {
return {
'size-change': this.onPageSizeChange,
'current-change': this.onCurrentPageChange,
};
},
},
created() {
if (this.auto) {
this.search();
}
},
methods: {
// 空Promise
emptyPromise() {
return new Promise(resolve => resolve());
},
// 重置查询
onSearch() {
this.currentPage = 1;
this.loadData();
},
// 切换展开状态
toggle() {
this.collapsed = !this.collapsed;
},
// 查询数据
search() {
this.loadData();
},
// 加载数据
async loadData() {
this.loading = true;
const params = {
...this.searchModel,
...this.pageParams,
};
const searchAPI = this.searchAPI || this.emptyPromise;
await searchAPI(params)
.then(response => {
const { result = [], totalCount = 0 } = response || {};
this.tableData = result || [];
this.total = totalCount || 0;
})
.finally(() => {
this.loading = false;
});
},
// 重置搜索表单
onReset() {
this.searchModel = this.cloneDeep(this.originData).searchModel;
},
// 多选
onSelectionChange(selection) {
this.selection = selection;
},
// 切换当前页码
onCurrentPageChange(value) {
this.currentPage = value;
this.$nextTick(this.loadData);
},
// 切换最大页码
onPageSizeChange(value) {
this.currentPage = 1;
this.pageSize = value;
this.$nextTick(this.loadData);
},
},
};