diff --git a/packages/client/src/schema-component/antd/form/Form.tsx b/packages/client/src/schema-component/antd/form/Form.tsx index 96e5b8ea3d..04a0e5b891 100644 --- a/packages/client/src/schema-component/antd/form/Form.tsx +++ b/packages/client/src/schema-component/antd/form/Form.tsx @@ -1,12 +1,21 @@ import { FormLayout } from '@formily/antd'; import { createForm } from '@formily/core'; import { FieldContext, FormContext, observer, useField, useFieldSchema } from '@formily/react'; +import { Options, Result } from 'ahooks/lib/useRequest/src/types'; import { Spin } from 'antd'; import React, { useMemo } from 'react'; import { useAttach } from '../..'; import { useRequest } from '../../../api-client'; -const FormComponent: React.FC = (props) => { +type Opts = Options & { uid?: string }; + +export interface FormProps { + [key: string]: any; +} + +export type FormUseValues = (props?: FormProps, opts?: Opts) => Result; + +const FormComponent: React.FC = (props) => { const { form, children, ...others } = props; const field = useField(); // TODO: component 里 useField 会与当前 field 存在偏差 @@ -34,12 +43,12 @@ const useRequestProps = (props: any) => { }; }; -const useDefaultValues = (props: any = {}, opts: any = {}) => { +const useDef = (props: FormProps = {}, opts: any = {}) => { return useRequest(useRequestProps(props), opts); }; -export const Form: React.FC = observer((props) => { - const { request, initialValue, useValues = useDefaultValues, ...others } = props; +export const Form: React.FC = observer((props) => { + const { request, initialValue, useValues = useDef, ...others } = props; const fieldSchema = useFieldSchema(); const form = useMemo(() => createForm(), []); const { loading } = useValues(props, { diff --git a/packages/client/src/schema-component/antd/form/demos/demo7.tsx b/packages/client/src/schema-component/antd/form/demos/demo7.tsx new file mode 100644 index 0000000000..a00266b534 --- /dev/null +++ b/packages/client/src/schema-component/antd/form/demos/demo7.tsx @@ -0,0 +1,68 @@ +import { FormItem, Input } from '@formily/antd'; +import { ISchema, observer, useForm } from '@formily/react'; +import { Action, Form, FormUseValues, SchemaComponent, SchemaComponentProvider, useRequest } from '@nocobase/client'; +import { Card } from 'antd'; +import React from 'react'; + +const schema: ISchema = { + type: 'object', + properties: { + form1: { + type: 'void', + 'x-decorator': 'Form', + 'x-decorator-props': { + useValues: '{{ useValues }}', + }, + 'x-component': 'Card', + properties: { + field1: { + 'x-component': 'Input', + 'x-decorator': 'FormItem', + title: 'T1', + }, + out: { + 'x-component': 'Output', + }, + action1: { + // type: 'void', + 'x-component': 'Action', + title: 'Submit', + 'x-component-props': { + useAction: '{{ useSubmit }}', + }, + }, + }, + }, + }, +}; + +const Output = observer(() => { + const form = useForm(); + return
{JSON.stringify(form.values, null, 2)}
; +}); + +const useSubmit = () => { + const form = useForm(); + return { + async run() { + console.log(form.values); + }, + }; +}; + +const useValues: FormUseValues = (props, opts) => { + return useRequest(() => { + return Promise.resolve({ data: { field1: 'aabb' } }); + }, opts); +}; + +export default observer(() => { + return ( + + + + ); +}); diff --git a/packages/client/src/schema-component/antd/form/index.md b/packages/client/src/schema-component/antd/form/index.md index ad07c1d084..8b789eabda 100644 --- a/packages/client/src/schema-component/antd/form/index.md +++ b/packages/client/src/schema-component/antd/form/index.md @@ -34,3 +34,15 @@ Form 也可以作 decorator 存在 ### 远程初始化数据 + +### useValues + + + +## API + +属性说明 + +- `initialValue` 静态的初始化数据 +- `request` 远程请求参数 +- `useValues` 自定义的 useRequest