From 4fab8251c7f77b41ade8808bdafb9fc374af0af9 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Wed, 11 Dec 2024 15:46:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E7=94=A8=E7=9A=84vxe-table?= =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BA=8B=E4=BB=B6(=E6=8E=92=E5=BA=8F?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E6=94=B9=E4=B8=BA=E5=9C=A8=E6=8E=92=E5=BA=8F?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=B8=AD=E5=A4=84=E7=90=86=E8=80=8C=E9=9D=9E?= =?UTF-8?q?=E5=9C=A8api=E5=A4=84=E7=90=86)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 6 ++++++ apps/web-antd/src/adapter/vxe-table.ts | 21 +++++++++++++++++++ apps/web-antd/src/api/common.d.ts | 9 +++++++- .../src/views/monitor/operlog/index.vue | 17 ++++++--------- apps/web-antd/src/views/system/oss/index.vue | 15 ++++++------- 5 files changed, 47 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a34d90a..a727cdf9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 1.1.4 + +**Features** + +- 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理) + # 1.1.3 **REFACTOR** diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index e8735c90..857751b3 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -130,3 +130,24 @@ export function vxeCheckboxChecked( ) { return tableApi?.grid?.getCheckboxRecords?.()?.length > 0; } + +/** + * 通用的vxe-table排序事件 支持单/多字段排序 + * @param tableApi api + * @param sortParams 排序参数 + */ +export function vxeSortEvent( + tableApi: ReturnType[1], + sortParams: VxeGridDefines.SortChangeEventParams, +) { + const { sortList } = sortParams; + // 这里是排序取消 length为0 就不传参数了 + if (sortList.length === 0) { + tableApi.query(); + return; + } + // 支持单/多字段排序 + const orderByColumn = sortList.map((item) => item.field).join(','); + const isAsc = sortList.map((item) => item.order).join(','); + tableApi.query({ orderByColumn, isAsc }); +} diff --git a/apps/web-antd/src/api/common.d.ts b/apps/web-antd/src/api/common.d.ts index a8c520d9..233f2aa6 100644 --- a/apps/web-antd/src/api/common.d.ts +++ b/apps/web-antd/src/api/common.d.ts @@ -21,13 +21,20 @@ export interface PageResult { /** * 分页查询参数 + * + * 排序支持的用法如下: + * {isAsc:"asc",orderByColumn:"id"} order by id asc + * {isAsc:"asc",orderByColumn:"id,createTime"} order by id asc,create_time asc + * {isAsc:"desc",orderByColumn:"id,createTime"} order by id desc,create_time desc + * {isAsc:"asc,desc",orderByColumn:"id,createTime"} order by id asc,create_time desc + * * @param pageNum 当前页 * @param pageSize 每页大小 * @param orderByColumn 排序字段 * @param isAsc 是否升序 */ export interface PageQuery { - isAsc?: boolean; + isAsc?: string; orderByColumn?: string; pageNum?: number; pageSize?: number; diff --git a/apps/web-antd/src/views/monitor/operlog/index.vue b/apps/web-antd/src/views/monitor/operlog/index.vue index da7e126b..74c34dd5 100644 --- a/apps/web-antd/src/views/monitor/operlog/index.vue +++ b/apps/web-antd/src/views/monitor/operlog/index.vue @@ -7,12 +7,12 @@ import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; import { $t } from '@vben/locales'; import { Modal, Space } from 'ant-design-vue'; -import { isEmpty } from 'lodash-es'; import { useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, + vxeSortEvent, } from '#/adapter/vxe-table'; import { operLogClean, @@ -60,18 +60,12 @@ const gridOptions: VxeGridProps = { pagerConfig: {}, proxyConfig: { ajax: { - query: async ({ page, sort }, formValues = {}) => { + query: async ({ page }, formValues = {}) => { const params: any = { pageNum: page.currentPage, pageSize: page.pageSize, ...formValues, }; - - if (!isEmpty(sort)) { - params.orderByColumn = sort.field; - params.isAsc = sort.order; - } - return await operLogList(params); }, }, @@ -81,7 +75,10 @@ const gridOptions: VxeGridProps = { keyField: 'operId', }, sortConfig: { + // 远程排序 remote: true, + // 支持多字段排序 默认关闭 + multiple: true, }, id: 'monitor-operlog-index', }; @@ -90,9 +87,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions, gridEvents: { - sortChange: () => { - tableApi.query(); - }, + sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams), }, }); diff --git a/apps/web-antd/src/views/system/oss/index.vue b/apps/web-antd/src/views/system/oss/index.vue index 958daf03..eebccedf 100644 --- a/apps/web-antd/src/views/system/oss/index.vue +++ b/apps/web-antd/src/views/system/oss/index.vue @@ -17,12 +17,12 @@ import { Switch, Tooltip, } from 'ant-design-vue'; -import { isEmpty } from 'lodash-es'; import { useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, + vxeSortEvent, } from '#/adapter/vxe-table'; import { configInfoByKey } from '#/api/system/config'; import { ossDownload, ossList, ossRemove } from '#/api/system/oss'; @@ -66,16 +66,12 @@ const gridOptions: VxeGridProps = { pagerConfig: {}, proxyConfig: { ajax: { - query: async ({ page, sort }, formValues = {}) => { + query: async ({ page }, formValues = {}) => { const params: any = { pageNum: page.currentPage, pageSize: page.pageSize, ...formValues, }; - if (!isEmpty(sort)) { - params.orderByColumn = sort.field; - params.isAsc = sort.order; - } return await ossList(params); }, }, @@ -86,7 +82,10 @@ const gridOptions: VxeGridProps = { height: 65, }, sortConfig: { + // 远程排序 remote: true, + // 支持多字段排序 默认关闭 + multiple: false, }, id: 'system-oss-index', }; @@ -95,9 +94,7 @@ const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions, gridEvents: { - sortChange: () => { - tableApi.query(); - }, + sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams), }, });