From 7804dcef3048ddeb01b8bb5ed10e2e6962cbf334 Mon Sep 17 00:00:00 2001
From: cshaptx4869 <994774638@qq.com>
Date: Wed, 29 May 2024 16:19:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(PageContent):=20:sparkles:=20=E5=A2=9E?=
=?UTF-8?q?=E5=8A=A0pagination=E3=80=81request=E3=80=81parseData=E9=85=8D?=
=?UTF-8?q?=E7=BD=AE=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/PageContent/index.vue | 178 +++++++++++++++++---------
src/hooks/usePage.ts | 9 +-
src/views/demo/curd/config/content.ts | 6 +
3 files changed, 128 insertions(+), 65 deletions(-)
diff --git a/src/components/PageContent/index.vue b/src/components/PageContent/index.vue
index 0d8b9a26..f0c997df 100644
--- a/src/components/PageContent/index.vue
+++ b/src/components/PageContent/index.vue
@@ -270,13 +270,17 @@
-
+
+
+
+
+
+
+
@@ -284,9 +288,8 @@
import { ref, reactive } from "vue";
import { useDateFormat } from "@vueuse/core";
import { hasAuth } from "@/plugins/permission";
-import Pagination from "@/components/Pagination/index.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
-import type { TableProps } from "element-plus";
+import type { TableProps, PaginationProps } from "element-plus";
// 对象类型
export type IObject = Record;
@@ -302,8 +305,28 @@ export interface IContentConfig {
pageName: string;
// table组件属性
table?: Omit, "data">;
+ // pagination组件属性
+ pagination?:
+ | boolean
+ | Partial<
+ Omit<
+ PaginationProps,
+ "v-model:page-size" | "v-model:current-page" | "total" | "currentPage"
+ >
+ >;
// 列表的网络请求函数(需返回promise)
indexAction: (queryParams: T) => Promise;
+ // 默认的分页相关的请求参数
+ request?: {
+ pageName: string;
+ limitName: string;
+ };
+ // 数据格式解析的回调函数
+ parseData?: (res: any) => {
+ total: number;
+ list: IObject[];
+ [key: string]: any;
+ };
// 删除的网络请求函数(需返回promise)
deleteAction?: (ids: string) => Promise;
// 导出的网络请求函数(需返回promise)
@@ -409,38 +432,29 @@ const cols = ref(
const loading = ref(false);
// 删除ID集合 用于批量删除
const removeIds = ref<(number | string)[]>([]);
-// 数据总数
-const total = ref(0);
// 列表数据
const pageData = ref([]);
-// 每页条数
-const pageSize = 10;
-// 搜索参数
-const queryParams = reactive({
- pageNum: 1,
- pageSize: pageSize,
-});
-// 上一次搜索条件
-let lastFormData = {};
-// 获取分页数据
-function fetchPageData(formData: IObject = {}, isRestart = false) {
- loading.value = true;
- lastFormData = formData;
- if (isRestart) {
- queryParams.pageNum = 1;
- queryParams.pageSize = pageSize;
- }
- props.contentConfig
- .indexAction({ ...queryParams, ...formData })
- .then((data) => {
- total.value = data.total;
- pageData.value = data.list;
- })
- .finally(() => {
- loading.value = false;
- });
-}
-fetchPageData();
+// 显示分页
+const showPagination = props.contentConfig.pagination !== false;
+// 分页配置
+const defalutPagination = {
+ background: true,
+ layout: "total, sizes, prev, pager, next, jumper",
+ pageSize: 1,
+ pageSizes: [1, 20, 30, 50],
+ total: 0,
+ currentPage: 1,
+};
+const pagination = reactive(
+ typeof props.contentConfig.pagination === "object"
+ ? { ...defalutPagination, ...props.contentConfig.pagination }
+ : defalutPagination
+);
+// 分页相关的请求参数
+const request = props.contentConfig.request ?? {
+ pageName: "pageNum",
+ limitName: "pageSize",
+};
// 行选中
function handleSelectionChange(selection: any[]) {
@@ -473,10 +487,6 @@ function handleDelete(id?: number | string) {
}
});
}
-// 分页
-function handlePagination() {
- fetchPageData(lastFormData);
-}
// 操作栏
function handleToolbar(name: string) {
switch (name) {
@@ -514,10 +524,72 @@ function handleOperat(data: IOperatData) {
break;
}
}
+// 属性修改
+function handleModify(
+ field: string,
+ value: boolean | string | number,
+ row: Record
+) {
+ if (props.contentConfig.modifyAction) {
+ props.contentConfig.modifyAction({
+ [pk]: row[pk],
+ field: field,
+ value: value,
+ });
+ } else {
+ ElMessage.error("未配置modifyAction");
+ }
+}
+// 分页切换
+function handleSizeChange(value: number) {
+ pagination.pageSize = value;
+ fetchPageData(lastFormData);
+}
+function handleCurrentChange(value: number) {
+ pagination.currentPage = value;
+ fetchPageData(lastFormData);
+}
+
+// 获取分页数据
+let lastFormData = {};
+function fetchPageData(formData: IObject = {}, isRestart = false) {
+ loading.value = true;
+ // 上一次搜索条件
+ lastFormData = formData;
+ // 重置页码
+ if (isRestart) {
+ pagination.currentPage = 1;
+ }
+ props.contentConfig
+ .indexAction(
+ showPagination
+ ? {
+ [request.pageName]: pagination.currentPage,
+ [request.limitName]: pagination.pageSize,
+ ...formData,
+ }
+ : formData
+ )
+ .then((data) => {
+ if (showPagination) {
+ if (props.contentConfig.parseData) {
+ data = props.contentConfig.parseData(data);
+ }
+ pagination.total = data.total;
+ pageData.value = data.list;
+ } else {
+ pageData.value = data;
+ }
+ })
+ .finally(() => {
+ loading.value = false;
+ });
+}
+fetchPageData();
// 导出Excel
-function exportPageData(queryParams: IObject = {}) {
+function exportPageData(formData: IObject = {}) {
if (props.contentConfig.exportAction) {
- props.contentConfig.exportAction(queryParams).then((response) => {
+ props.contentConfig.exportAction(formData).then((response) => {
const fileData = response.data;
const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
@@ -539,22 +611,6 @@ function exportPageData(queryParams: IObject = {}) {
ElMessage.error("未配置exportAction");
}
}
-// 属性修改
-function handleModify(
- field: string,
- value: boolean | string | number,
- row: Record
-) {
- if (props.contentConfig.modifyAction) {
- props.contentConfig.modifyAction({
- [pk]: row[pk],
- field: field,
- value: value,
- });
- } else {
- ElMessage.error("未配置modifyAction");
- }
-}
// 暴露的属性和方法
defineExpose({ fetchPageData, exportPageData });
diff --git a/src/hooks/usePage.ts b/src/hooks/usePage.ts
index 7c3ab859..a6d251d6 100644
--- a/src/hooks/usePage.ts
+++ b/src/hooks/usePage.ts
@@ -16,8 +16,8 @@ function usePage() {
contentRef.value?.fetchPageData(queryParams, true);
}
// 重置
- function handleResetClick() {
- contentRef.value?.fetchPageData({}, true);
+ function handleResetClick(queryParams: IObject) {
+ contentRef.value?.fetchPageData(queryParams, true);
}
// 新增
function handleAddClick() {
@@ -31,8 +31,9 @@ function usePage() {
}
// 表单提交
function handleSubmitClick() {
- //刷新列表数据
- contentRef.value?.fetchPageData({}, true);
+ //根据检索条件刷新列表数据
+ const queryParams = searchRef.value?.getQueryParams();
+ contentRef.value?.fetchPageData(queryParams, true);
}
// 导出
function handleExportClick() {
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index ddbb51d0..1adc433d 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -8,6 +8,12 @@ const contentConfig: IContentConfig = {
border: true,
highlightCurrentRow: true,
},
+ pagination: {
+ background: true,
+ layout: "prev,pager,next,jumper,total,sizes",
+ pageSize: 20,
+ pageSizes: [10, 20, 30, 50],
+ },
indexAction: function (params) {
if ("createAt" in params) {
const createAt = params.createAt as string[];