diff --git a/CHANGELOG.md b/CHANGELOG.md index 563100bf..167872d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ **BUG FIXES** - 字典项为空时getDict方法无限调用接口((无奈兼容 不给字典item本来就是错误用法)) +- 表格排序翻页会丢失排序参数 # 1.1.3 diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index 857751b3..4453f8c9 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -4,6 +4,7 @@ import { setupVbenVxeTable, useVbenVxeGrid, type VxeGridDefines, + type VxeGridPropTypes, } from '@vben/plugins/vxe-table'; import { Button, Image } from 'ant-design-vue'; @@ -133,6 +134,7 @@ export function vxeCheckboxChecked( /** * 通用的vxe-table排序事件 支持单/多字段排序 + * @deprecated 翻页后排序会丢失,使用addSortParams代替 * @param tableApi api * @param sortParams 排序参数 */ @@ -151,3 +153,23 @@ export function vxeSortEvent( const isAsc = sortList.map((item) => item.order).join(','); tableApi.query({ orderByColumn, isAsc }); } + +/** + * 通用的 排序参数添加到请求参数中 + * @param params 请求参数 + * @param sortList vxe-table的排序参数 + */ +export function addSortParams( + params: Record, + sortList: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams[], +) { + // 这里是排序取消 length为0 就不添加参数了 + if (sortList.length === 0) { + return; + } + // 支持单/多字段排序 + const orderByColumn = sortList.map((item) => item.field).join(','); + const isAsc = sortList.map((item) => item.order).join(','); + params.orderByColumn = orderByColumn; + params.isAsc = isAsc; +} diff --git a/apps/web-antd/src/views/monitor/operlog/index.vue b/apps/web-antd/src/views/monitor/operlog/index.vue index 74c34dd5..f1d3a127 100644 --- a/apps/web-antd/src/views/monitor/operlog/index.vue +++ b/apps/web-antd/src/views/monitor/operlog/index.vue @@ -9,10 +9,10 @@ import { $t } from '@vben/locales'; import { Modal, Space } from 'ant-design-vue'; import { + addSortParams, useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, - vxeSortEvent, } from '#/adapter/vxe-table'; import { operLogClean, @@ -60,12 +60,14 @@ const gridOptions: VxeGridProps = { pagerConfig: {}, proxyConfig: { ajax: { - query: async ({ page }, formValues = {}) => { + query: async ({ page, sorts }, formValues = {}) => { const params: any = { pageNum: page.currentPage, pageSize: page.pageSize, ...formValues, }; + // 添加排序参数 + addSortParams(params, sorts); return await operLogList(params); }, }, @@ -87,7 +89,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions, gridEvents: { - sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams), + // 排序 重新请求接口 + sortChange: () => tableApi.query(), }, }); diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue index eebccedf..0f835432 100644 --- a/apps/web-antd/src/views/system/oss/index.vue +++ b/apps/web-antd/src/views/system/oss/index.vue @@ -19,10 +19,10 @@ import { } from 'ant-design-vue'; import { + addSortParams, useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, - vxeSortEvent, } from '#/adapter/vxe-table'; import { configInfoByKey } from '#/api/system/config'; import { ossDownload, ossList, ossRemove } from '#/api/system/oss'; @@ -66,12 +66,14 @@ const gridOptions: VxeGridProps = { pagerConfig: {}, proxyConfig: { ajax: { - query: async ({ page }, formValues = {}) => { + query: async ({ page, sorts }, formValues = {}) => { const params: any = { pageNum: page.currentPage, pageSize: page.pageSize, ...formValues, }; + // 添加排序参数 + addSortParams(params, sorts); return await ossList(params); }, }, @@ -94,7 +96,8 @@ const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions, gridEvents: { - sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams), + // 排序 重新请求接口 + sortChange: () => tableApi.query(), }, }); diff --git a/packages/effects/plugins/src/vxe-table/index.ts b/packages/effects/plugins/src/vxe-table/index.ts index 0fa0cdbd..650760db 100644 --- a/packages/effects/plugins/src/vxe-table/index.ts +++ b/packages/effects/plugins/src/vxe-table/index.ts @@ -2,4 +2,9 @@ export { setupVbenVxeTable } from './init'; export type { VxeTableGridOptions } from './types'; export * from './use-vxe-grid'; export { default as VbenVxeGrid } from './use-vxe-grid.vue'; -export type { VxeGridDefines, VxeGridListeners, VxeGridProps } from 'vxe-table'; +export type { + VxeGridDefines, + VxeGridListeners, + VxeGridProps, + VxeGridPropTypes, +} from 'vxe-table';