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
132
133
134
|
<template>
<el-card>
<el-form inline>
<el-form-item label="标题:">
<el-input
v-model="filter.name"
@keyup.enter="push({ page: 1 })"
placeholder="昵称或者真实姓名"
clearable
>
</el-input>
</el-form-item>
<el-form-item label="开始日期:">
<el-date-picker
v-model="filter.begin"
type="date"
clearable
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="选择一个起始日期"
/>
</el-form-item>
<el-form-item label="截止日期:">
<el-date-picker
v-model="filter.end"
type="date"
clearable
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
placeholder="选择一个结束日期"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="push({ ...filter, page: 1 })"
>查询</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="push()">重置</el-button>
</el-form-item>
</el-form>
<el-table v-if="articleList.length" :data="articleList">
<!-- 这列会显示当前行在所有结果中的序号 -->
<el-table-column label="序号" align="center">
<template #default="{ row, $index }">
{{ (filter.page - 1) * filter.size + ($index + 1) }}
</template>
</el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="created_time" label="创建时间"></el-table-column>
</el-table>
<div v-if="articleList.length">
<el-pagination
v-model:current-page="filter.page"
background
:page-size="filter.size"
layout="total, prev, pager, next, sizes "
:total="filter.total"
@size-change="(v: any) => push({ size: v })"
@current-change="(v: any) => push({ page: v })"
/>
</div>
</el-card>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const filter: Ref<any> = ref();
const loading: Ref<boolean> = ref(false);
const articleList: Ref<any[]> = ref([]);
function resetFilter() {
// ...这里用来重置filter条件
filter.value = {
page: 1, // 页码
size: 10, // 每页条数
title: "", // 关键字
begin: "", // 起始日期
end: "", // 结束日期
};
}
// 重置按钮调用时, 没有传参, route变化时,会清空所有的查询条件
// current-change出发时, 在保留老条件的同时, 新的page会覆盖旧值
// @size-change触发时,在保留老条件的同时, 新的size会覆盖旧值
// @keyup.enter="push({ page: 1 })触发时, filter.value.title中的值会保留, 且要求从第1页开始查询
function push(query = {}) {
// 这个函数用来处理所有的filter参数
router.push({
name: "article-list",
query: Object.keys(query).length
? {
...filter.value,
...query,
}
: {},
});
}
watch(
() => route.query,
() => {
getList(); // 这里是为了filter条件发生变化时重新查询列表
}
);
onMounted(() => {
getList(); // 这里是为了页面刷事件和跳转到当前页面时查询列表
});
async function getList() {
try {
loading.value = true;
// 每次查询列表时, 都先把路由上的参数保存到filter中, 便于下次条件变化时,可以保留旧的条件
filter.value.page = route.query.page || 1;
filter.value.size = route.query.size || 1;
filter.value.begin = route.query.begin || "";
filter.value.end = route.query.end || "";
filter.value.title = route.query.title || "";
// 查询文章列表, qs是一个npm包, 用来把一个对象转为序列化字符串
const res = await http.get(
`/article/list?page=${qs.stringify(filter.value)}`
);
console.log("getList", res);
articleList.value = res.data;
} catch (error) {
console.log("getList", error);
articleList.value = [];
} finally {
loading.value = false;
}
}
</script>
|