feat: 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)

This commit is contained in:
dap 2024-12-11 15:46:45 +08:00
parent b9a4b709db
commit 4fab8251c7
5 changed files with 47 additions and 21 deletions

View File

@ -1,3 +1,9 @@
# 1.1.4
**Features**
- 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)
# 1.1.3
**REFACTOR**

View File

@ -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<typeof useVbenVxeGrid>[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 });
}

View File

@ -21,13 +21,20 @@ export interface PageResult<T = any> {
/**
*
*
* :
* {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;

View File

@ -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<OperationLog> = {
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<OperationLog> = {
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),
},
});

View File

@ -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),
},
});