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[];