diff --git a/packages/client/src/collection-manager/action-hooks.ts b/packages/client/src/collection-manager/action-hooks.ts index a7443cedd..d2d97926b 100644 --- a/packages/client/src/collection-manager/action-hooks.ts +++ b/packages/client/src/collection-manager/action-hooks.ts @@ -28,6 +28,28 @@ export const useCancelFilterAction = () => { }; }; +export const useSortFields = (collectionName: string) => { + const { getCollectionFields, getInterface } = useCollectionManager(); + const fields = getCollectionFields(collectionName); + return fields + .filter((field: any) => { + if (!field.interface) { + return false; + } + const fieldInterface = getInterface(field.interface); + if (fieldInterface.sortable) { + return true; + } + return false; + }) + .map((field: any) => { + return { + value: field.name, + label: field?.uiSchema?.title || field.name, + }; + }); +}; + export const useCollectionFilterOptions = (collectionName: string) => { const { getCollectionFields, getInterface } = useCollectionManager(); const fields = getCollectionFields(collectionName); diff --git a/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx b/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx index 3715c6031..c70d35f91 100644 --- a/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx +++ b/packages/client/src/schema-component/antd/table/Table.Void.Designer.tsx @@ -1,8 +1,9 @@ +import { ArrayItems } from '@formily/antd'; import { ISchema, useField, useFieldSchema } from '@formily/react'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { useCollection, useResourceActionContext } from '../../../collection-manager'; -import { useCollectionFilterOptions } from '../../../collection-manager/action-hooks'; +import { useCollectionFilterOptions, useSortFields } from '../../../collection-manager/action-hooks'; import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'; import { useDesignable } from '../../hooks'; @@ -11,11 +12,23 @@ export const TableVoidDesigner = () => { const field = useField(); const fieldSchema = useFieldSchema(); const dataSource = useCollectionFilterOptions(name); + const sortFields = useSortFields(name); const ctx = useResourceActionContext(); const { t } = useTranslation(); const { dn } = useDesignable(); const defaultFilter = fieldSchema?.['x-decorator-props']?.request?.params?.filter || {}; const defaultSort = fieldSchema?.['x-decorator-props']?.request?.params?.sort || []; + const sort = defaultSort?.map((item: string) => { + return item.startsWith('-') + ? { + field: item.substring(1), + direction: 'desc', + } + : { + field: item, + direction: 'asc', + }; + }); return ( { }); }} /> + { + const sortArr = sort.map((item) => { + return item.direction === 'desc' ? `-${item.field}` : item.field; + }); + const params = field.decoratorProps.request.params || {}; + params.sort = sortArr; + field.decoratorProps.request.params = params; + fieldSchema['x-decorator-props']['request']['params'] = params; + dn.emit('patch', { + schema: { + ['x-uid']: fieldSchema['x-uid'], + 'x-decorator-props': fieldSchema['x-decorator-props'], + }, + }); + ctx.run({ ...ctx.params?.[0], sort: sortArr }); + }} + />