From 1c6289dd88dc59e743a711712cabc85534327234 Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 1 Mar 2022 22:17:58 +0800 Subject: [PATCH] feat: improve filter action initializer --- .../src/collection-manager/action-hooks.ts | 54 +++++++++++- .../antd/cascader/Cascader.tsx | 1 - .../schema-component/antd/filter/Filter.tsx | 5 +- .../antd/filter/FilterItem.tsx | 6 +- .../antd/filter/SaveDefaultValue.tsx | 21 +++++ .../schema-component/antd/filter/context.ts | 11 ++- .../schema-component/antd/filter/useValues.ts | 8 +- .../Items/FilterActionInitializer.tsx | 82 +++++++++++++++---- 8 files changed, 163 insertions(+), 25 deletions(-) diff --git a/packages/client/src/collection-manager/action-hooks.ts b/packages/client/src/collection-manager/action-hooks.ts index 8eb9822a5f..b214a8a8d9 100644 --- a/packages/client/src/collection-manager/action-hooks.ts +++ b/packages/client/src/collection-manager/action-hooks.ts @@ -1,5 +1,5 @@ import { useForm } from '@formily/react'; -import { useCollectionManager } from '.'; +import { useCollection, useCollectionManager } from '.'; import { useRequest } from '../api-client'; import { useRecord } from '../record-provider'; import { useActionContext } from '../schema-component'; @@ -16,6 +16,58 @@ export const useCancelAction = () => { }; }; +export const useCancelFilterAction = () => { + const form = useForm(); + const ctx = useActionContext(); + return { + async run() { + ctx.setVisible(false); + }, + }; +}; + +export const useCollectionFilterOptions = (collectionName: string) => { + const { getCollection, getInterface } = useCollectionManager(); + const options = []; + const collection = getCollection(collectionName); + const fields = collection?.fields || []; + const field2option = (field) => { + const fieldInterface = getInterface(field.interface); + const option = { + name: field.name, + title: field?.uiSchema?.title || field.name, + operators: fieldInterface.operators || [], + }; + return option; + } + fields.forEach(field => { + options.push(field2option(field)); + }); + return options; +} + +export const useFilterDataSource = (options) => { + const { name } = useCollection(); + const data = useCollectionFilterOptions(name); + return useRequest( + () => + Promise.resolve({ + data, + }), + options, + ); +} + +export const useFilterAction = () => { + const form = useForm(); + const ctx = useActionContext(); + return { + async run() { + ctx.setVisible(false); + }, + }; +} + export const useCreateAction = () => { const form = useForm(); const ctx = useActionContext(); diff --git a/packages/client/src/schema-component/antd/cascader/Cascader.tsx b/packages/client/src/schema-component/antd/cascader/Cascader.tsx index 26085bd877..dcdfc971d6 100644 --- a/packages/client/src/schema-component/antd/cascader/Cascader.tsx +++ b/packages/client/src/schema-component/antd/cascader/Cascader.tsx @@ -41,7 +41,6 @@ export const Cascader = connect( }); // 兼容值为 object[] 的情况 const toValue = () => { - return ['11']; return toArr(value).map((item) => { if (typeof item === 'object') { return item[fieldNames.value]; diff --git a/packages/client/src/schema-component/antd/filter/Filter.tsx b/packages/client/src/schema-component/antd/filter/Filter.tsx index 552fce43a8..5e73077620 100644 --- a/packages/client/src/schema-component/antd/filter/Filter.tsx +++ b/packages/client/src/schema-component/antd/filter/Filter.tsx @@ -1,5 +1,5 @@ import { ObjectField as ObjectFieldModel } from '@formily/core'; -import { observer, useField } from '@formily/react'; +import { observer, useField, useFieldSchema } from '@formily/react'; import React from 'react'; import { useRequest } from '../../../api-client'; import { FilterContext } from './context'; @@ -14,6 +14,7 @@ const useDef = (options) => { export const Filter: any = observer((props: any) => { const { useDataSource = useDef, dynamicComponent } = props; const field = useField(); + const fieldSchema = useFieldSchema(); useDataSource({ onSuccess(data) { console.log('onSuccess', data?.data); @@ -22,7 +23,7 @@ export const Filter: any = observer((props: any) => { }); return (
- + 
{JSON.stringify(field.value, null, 2)}
diff --git a/packages/client/src/schema-component/antd/filter/FilterItem.tsx b/packages/client/src/schema-component/antd/filter/FilterItem.tsx index ac4825e3e3..4b5d1563db 100644 --- a/packages/client/src/schema-component/antd/filter/FilterItem.tsx +++ b/packages/client/src/schema-component/antd/filter/FilterItem.tsx @@ -2,6 +2,7 @@ import { CloseCircleOutlined } from '@ant-design/icons'; import { observer, useField } from '@formily/react'; import { Cascader, Select, Space } from 'antd'; import React, { useContext } from 'react'; +import { useCompile } from '../..'; import { RemoveConditionContext } from './context'; import { DynamicComponent } from './DynamicComponent'; import { useValues } from './useValues'; @@ -10,6 +11,7 @@ export const FilterItem = observer((props: any) => { const field = useField(); const remove = useContext(RemoveConditionContext); const { option, options, dataIndex, operator, setDataIndex, setOperator, value, setValue } = useValues(); + const compile = useCompile(); return (
@@ -25,14 +27,14 @@ export const FilterItem = observer((props: any) => { changeOnSelect={false} key={field.address.toString()} value={dataIndex} - options={options} + options={compile(options)} onChange={(value) => { setDataIndex(value); }} />