page.js
2.95 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
130
131
import MIX_TOAST from '@/mixins/toast';
import MIX_ORIGIN from '@/mixins/origin';
export default {
mixins: [MIX_TOAST, MIX_ORIGIN],
data() {
return {
auto: true,
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,
currentPage: this.currentPage,
pageSize: this.pageSize,
};
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);
},
},
};