feat: 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)
This commit is contained in:
parent
b9a4b709db
commit
4fab8251c7
@ -1,3 +1,9 @@
|
||||
# 1.1.4
|
||||
|
||||
**Features**
|
||||
|
||||
- 通用的vxe-table排序事件(排序逻辑改为在排序事件中处理而非在api处理)
|
||||
|
||||
# 1.1.3
|
||||
|
||||
**REFACTOR**
|
||||
|
@ -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 });
|
||||
}
|
||||
|
9
apps/web-antd/src/api/common.d.ts
vendored
9
apps/web-antd/src/api/common.d.ts
vendored
@ -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;
|
||||
|
@ -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),
|
||||
},
|
||||
});
|
||||
|
||||
|
@ -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),
|
||||
},
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user