diff --git a/packages/client/src/hooks/useResource.ts b/packages/client/src/hooks/useResource.ts new file mode 100644 index 000000000..5eb7f4330 --- /dev/null +++ b/packages/client/src/hooks/useResource.ts @@ -0,0 +1,13 @@ +import { useCollectionContext } from '../constate'; +import { Resource } from '../resource'; + +export const useResource = (options: any = {}) => { + const { collection } = useCollectionContext(); + const resource = Resource.make(collection.name); + return { + initialValues: {}, + loading: false, + async run() {}, + resource, + }; +}; diff --git a/packages/client/src/schemas/action/index.tsx b/packages/client/src/schemas/action/index.tsx index 86e025d6c..33c773515 100644 --- a/packages/client/src/schemas/action/index.tsx +++ b/packages/client/src/schemas/action/index.tsx @@ -82,7 +82,7 @@ Action.Modal = observer((props: any) => { return ( { }} overlay={ - + {fields?.map((field) => ( { 'x-component': 'Form', 'x-read-pretty': true, 'x-component-props': { + useResource: '{{ Table.useResource }}', useValues: '{{ Table.useTableRowRecord }}', }, 'x-designable-bar': 'Form.DesignableBar', @@ -865,6 +867,7 @@ AddNew.PaneItem = observer((props: any) => { 'x-decorator': 'CardItem', 'x-component': 'Form', 'x-component-props': { + useResource: '{{ Table.useResource }}', useValues: '{{ Table.useTableRowRecord }}', showDefaultButtons: true, }, diff --git a/packages/client/src/schemas/form/index.tsx b/packages/client/src/schemas/form/index.tsx index 82450787f..6899a0503 100644 --- a/packages/client/src/schemas/form/index.tsx +++ b/packages/client/src/schemas/form/index.tsx @@ -30,32 +30,43 @@ import { DesignableBar } from './DesignableBar'; import { FieldDesignableBar } from './Field.DesignableBar'; import { createContext } from 'react'; import { BlockItem } from '../block-item'; -import { Resource } from '../../resource'; import { CollectionProvider, useCollectionContext, DisplayedMapProvider, useDisplayedMapContext, } from '../../constate'; +import { useResource as useGeneralResource } from '../../hooks/useResource'; -export const Form: any = observer((props: any) => { +const FormMain = (props: any) => { const { - useValues = () => ({}), + useResource = useGeneralResource, showDefaultButtons = false, ...others } = props; const { schema } = useDesignable(); - const initialValues = useValues(); const form = useMemo(() => { return createForm({ - initialValues, readPretty: schema['x-read-pretty'], }); }, []); + const { resource, run } = useResource({ + onSuccess: (initialValues: any) => { + form.setInitialValues(initialValues); + }, + }); const path = useSchemaPath(); const scope = useContext(SchemaExpressionScopeContext); + const displayed = useDisplayedMapContext(); const { collection } = useCollectionContext(); - const content = ( + useEffect(() => { + const keys = [...displayed.map.keys()]; + if (keys.length) { + run({ 'fields[appends]': keys }); + console.log(displayed.map, 'displayed.map', collection?.name); + } + }, [displayed.map]); + return ( {schema['x-decorator'] === 'Form' ? ( { onClick={async () => { const values = await form.submit(); console.log({ values }); - await Resource.make(props.resource).save(values); + await resource.save(values); message.success('保存成功'); await form.reset(); }} @@ -108,11 +119,17 @@ export const Form: any = observer((props: any) => { )} ); +}; + +export const Form: any = observer((props: any) => { + const { collection } = useCollectionContext(); return ( - {content} + + + ); }); diff --git a/packages/client/src/schemas/select/index.tsx b/packages/client/src/schemas/select/index.tsx index b22a1c53d..f9bd2d582 100644 --- a/packages/client/src/schemas/select/index.tsx +++ b/packages/client/src/schemas/select/index.tsx @@ -17,7 +17,6 @@ import { useState } from 'react'; import { useDesignable } from '../'; import { createContext } from 'react'; import { useContext } from 'react'; -import { SelectedRowKeysContext, useTableContext } from '../table'; import { isEmpty } from 'lodash'; import { isField } from '@formily/core'; @@ -312,7 +311,7 @@ Select.Drawer = connect( onClose={() => setVisible(false)} destroyOnClose > - + {/* */} - + {/* */} ); @@ -390,11 +389,9 @@ Select.Options = observer((props) => { export function useSelect() { const { onChange } = useContext(SelectContext); - const { data, selectedRowKeys } = useTableContext(); return { async run() { - console.log({ data, selectedRowKeys }); - onChange && onChange(selectedRowKeys); + onChange && onChange([]); }, }; } diff --git a/packages/client/src/schemas/table/index.md b/packages/client/src/schemas/table/index.md index b7940d4d1..300372394 100644 --- a/packages/client/src/schemas/table/index.md +++ b/packages/client/src/schemas/table/index.md @@ -64,7 +64,7 @@ group: ## API -表格的几个重要概念 +表格的几个重要参数 - collection 当前表格的数据表配置信息（主要是字段） - resource 当前资源，用于处理 create、update、list、destroy diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx index 836b666dd..710215eea 100644 --- a/packages/client/src/schemas/table/index.tsx +++ b/packages/client/src/schemas/table/index.tsx @@ -34,6 +34,7 @@ import { useCollectionContext, useDisplayedMapContext, } from '../../constate'; +import { useResource as useGeneralResource } from '../../hooks/useResource'; const SyntheticListenerMapContext = createContext(null); @@ -330,7 +331,7 @@ function AddColumn() { onVisibleChange={setVisible} overlay={ - + {fields.map((field) => ( { }); }; -export const Table: any = observer((props: any) => { - const { rowKey = 'id', dataRequest, ...others } = props; +const TableProvider = (props: any) => { + const { + rowKey = 'id', + dataRequest, + useResource = useGeneralResource, + ...others + } = props; const { schema } = useDesignable(); const field = useField(); const [pagination, setPagination] = usePagination(props.pagination); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [, refresh] = useState(uid()); - const resource = Resource.make(props.resource); + const { resource } = useResource(); const service = useRequest( (params?: any) => { if (!resource) { @@ -551,13 +557,19 @@ export const Table: any = observer((props: any) => { props: { ...others, rowKey, dataRequest }, }} > - - - - - + ); +}; + +export const Table: any = observer((props: any) => { + return ( + + + + + + ); }); const useTotal = () => { @@ -957,6 +969,28 @@ Table.DesignableBar = observer((props) => { ); }); +Table.useResource = ({ onSuccess }) => { + const { props } = useTable(); + const { collection } = useCollectionContext(); + const ctx = useContext(TableRowContext); + const resource = Resource.make({ + resourceName: collection.name, + resourceKey: ctx.record[props.rowKey], + }); + const { data, loading, run } = useRequest( + (params?: any) => { + console.log('Table.useResource', params); + return resource.get(params); + }, + { + formatResult: (result) => result?.data, + onSuccess, + manual: true, + }, + ); + return { initialValues: data, loading, run, resource }; +}; + Table.useTableFilterAction = useTableFilterAction; Table.useTableCreateAction = useTableCreateAction; Table.useTableUpdateAction = useTableUpdateAction;