useResource

This commit is contained in:
chenos 2021-07-30 09:31:04 +08:00
parent 27b61bd571
commit 7dd9fbf213
7 changed files with 90 additions and 26 deletions

View File

@ -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,
};
};

View File

@ -82,7 +82,7 @@ Action.Modal = observer((props: any) => {
return ( return (
<Modal <Modal
title={schema.title} title={schema.title}
// destroyOnClose destroyOnClose
maskClosable maskClosable
footer={ footer={
isFormDecorator isFormDecorator

View File

@ -277,6 +277,7 @@ function generateCardItemSchema(component) {
title: '编辑数据', title: '编辑数据',
'x-decorator': 'Form', 'x-decorator': 'Form',
'x-decorator-props': { 'x-decorator-props': {
useResource: '{{ Table.useResource }}',
useValues: '{{ Table.useTableRowRecord }}', useValues: '{{ Table.useTableRowRecord }}',
}, },
'x-component': 'Action.Modal', 'x-component': 'Action.Modal',
@ -621,7 +622,7 @@ AddNew.FormItem = observer((props: any) => {
}} }}
overlay={ overlay={
<Menu> <Menu>
<Menu.ItemGroup className={'display-fields'} title={`要展示的字段`}> <Menu.ItemGroup className={'display-fields'} title={`字段展示`}>
{fields?.map((field) => ( {fields?.map((field) => (
<Menu.Item key={field.key}> <Menu.Item key={field.key}>
<SwitchField <SwitchField
@ -819,6 +820,7 @@ AddNew.PaneItem = observer((props: any) => {
'x-component': 'Form', 'x-component': 'Form',
'x-read-pretty': true, 'x-read-pretty': true,
'x-component-props': { 'x-component-props': {
useResource: '{{ Table.useResource }}',
useValues: '{{ Table.useTableRowRecord }}', useValues: '{{ Table.useTableRowRecord }}',
}, },
'x-designable-bar': 'Form.DesignableBar', 'x-designable-bar': 'Form.DesignableBar',
@ -865,6 +867,7 @@ AddNew.PaneItem = observer((props: any) => {
'x-decorator': 'CardItem', 'x-decorator': 'CardItem',
'x-component': 'Form', 'x-component': 'Form',
'x-component-props': { 'x-component-props': {
useResource: '{{ Table.useResource }}',
useValues: '{{ Table.useTableRowRecord }}', useValues: '{{ Table.useTableRowRecord }}',
showDefaultButtons: true, showDefaultButtons: true,
}, },

View File

@ -30,32 +30,43 @@ import { DesignableBar } from './DesignableBar';
import { FieldDesignableBar } from './Field.DesignableBar'; import { FieldDesignableBar } from './Field.DesignableBar';
import { createContext } from 'react'; import { createContext } from 'react';
import { BlockItem } from '../block-item'; import { BlockItem } from '../block-item';
import { Resource } from '../../resource';
import { import {
CollectionProvider, CollectionProvider,
useCollectionContext, useCollectionContext,
DisplayedMapProvider, DisplayedMapProvider,
useDisplayedMapContext, useDisplayedMapContext,
} from '../../constate'; } from '../../constate';
import { useResource as useGeneralResource } from '../../hooks/useResource';
export const Form: any = observer((props: any) => { const FormMain = (props: any) => {
const { const {
useValues = () => ({}), useResource = useGeneralResource,
showDefaultButtons = false, showDefaultButtons = false,
...others ...others
} = props; } = props;
const { schema } = useDesignable(); const { schema } = useDesignable();
const initialValues = useValues();
const form = useMemo(() => { const form = useMemo(() => {
return createForm({ return createForm({
initialValues,
readPretty: schema['x-read-pretty'], readPretty: schema['x-read-pretty'],
}); });
}, []); }, []);
const { resource, run } = useResource({
onSuccess: (initialValues: any) => {
form.setInitialValues(initialValues);
},
});
const path = useSchemaPath(); const path = useSchemaPath();
const scope = useContext(SchemaExpressionScopeContext); const scope = useContext(SchemaExpressionScopeContext);
const displayed = useDisplayedMapContext();
const { collection } = useCollectionContext(); 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 (
<FormProvider form={form}> <FormProvider form={form}>
{schema['x-decorator'] === 'Form' ? ( {schema['x-decorator'] === 'Form' ? (
<SchemaField <SchemaField
@ -89,7 +100,7 @@ export const Form: any = observer((props: any) => {
onClick={async () => { onClick={async () => {
const values = await form.submit(); const values = await form.submit();
console.log({ values }); console.log({ values });
await Resource.make(props.resource).save(values); await resource.save(values);
message.success('保存成功'); message.success('保存成功');
await form.reset(); await form.reset();
}} }}
@ -108,11 +119,17 @@ export const Form: any = observer((props: any) => {
)} )}
</FormProvider> </FormProvider>
); );
};
export const Form: any = observer((props: any) => {
const { collection } = useCollectionContext();
return ( return (
<CollectionProvider <CollectionProvider
collectionName={props.collectionName || collection?.name} collectionName={props.collectionName || collection?.name}
> >
<DisplayedMapProvider>{content}</DisplayedMapProvider> <DisplayedMapProvider>
<FormMain {...props} />
</DisplayedMapProvider>
</CollectionProvider> </CollectionProvider>
); );
}); });

View File

@ -17,7 +17,6 @@ import { useState } from 'react';
import { useDesignable } from '../'; import { useDesignable } from '../';
import { createContext } from 'react'; import { createContext } from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { SelectedRowKeysContext, useTableContext } from '../table';
import { isEmpty } from 'lodash'; import { isEmpty } from 'lodash';
import { isField } from '@formily/core'; import { isField } from '@formily/core';
@ -312,7 +311,7 @@ Select.Drawer = connect(
onClose={() => setVisible(false)} onClose={() => setVisible(false)}
destroyOnClose destroyOnClose
> >
<SelectedRowKeysContext.Provider value={selectedKeys}> {/* <SelectedRowKeysContext.Provider value={selectedKeys}> */}
<SelectContext.Provider <SelectContext.Provider
value={{ value={{
onChange(selectValue) { onChange(selectValue) {
@ -329,7 +328,7 @@ Select.Drawer = connect(
}} }}
/> />
</SelectContext.Provider> </SelectContext.Provider>
</SelectedRowKeysContext.Provider> {/* </SelectedRowKeysContext.Provider> */}
</Drawer> </Drawer>
</> </>
); );
@ -390,11 +389,9 @@ Select.Options = observer((props) => {
export function useSelect() { export function useSelect() {
const { onChange } = useContext(SelectContext); const { onChange } = useContext(SelectContext);
const { data, selectedRowKeys } = useTableContext();
return { return {
async run() { async run() {
console.log({ data, selectedRowKeys }); onChange && onChange([]);
onChange && onChange(selectedRowKeys);
}, },
}; };
} }

View File

@ -64,7 +64,7 @@ group:
## API ## API
表格的几个重要概念 表格的几个重要参数
- collection 当前表格的数据表配置信息(主要是字段) - collection 当前表格的数据表配置信息(主要是字段)
- resource 当前资源,用于处理 create、update、list、destroy - resource 当前资源,用于处理 create、update、list、destroy

View File

@ -34,6 +34,7 @@ import {
useCollectionContext, useCollectionContext,
useDisplayedMapContext, useDisplayedMapContext,
} from '../../constate'; } from '../../constate';
import { useResource as useGeneralResource } from '../../hooks/useResource';
const SyntheticListenerMapContext = createContext(null); const SyntheticListenerMapContext = createContext(null);
@ -330,7 +331,7 @@ function AddColumn() {
onVisibleChange={setVisible} onVisibleChange={setVisible}
overlay={ overlay={
<Menu> <Menu>
<Menu.ItemGroup className={'display-fields'} title={'要展示的字段'}> <Menu.ItemGroup className={'display-fields'} title={'字段展示'}>
{fields.map((field) => ( {fields.map((field) => (
<Menu.Item style={{ minWidth: 150 }}> <Menu.Item style={{ minWidth: 150 }}>
<SwitchField <SwitchField
@ -494,14 +495,19 @@ const usePagination = (paginationProps?: any) => {
}); });
}; };
export const Table: any = observer((props: any) => { const TableProvider = (props: any) => {
const { rowKey = 'id', dataRequest, ...others } = props; const {
rowKey = 'id',
dataRequest,
useResource = useGeneralResource,
...others
} = props;
const { schema } = useDesignable(); const { schema } = useDesignable();
const field = useField<Formily.Core.Models.ArrayField>(); const field = useField<Formily.Core.Models.ArrayField>();
const [pagination, setPagination] = usePagination(props.pagination); const [pagination, setPagination] = usePagination(props.pagination);
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
const [, refresh] = useState(uid()); const [, refresh] = useState(uid());
const resource = Resource.make(props.resource); const { resource } = useResource();
const service = useRequest( const service = useRequest(
(params?: any) => { (params?: any) => {
if (!resource) { if (!resource) {
@ -551,13 +557,19 @@ export const Table: any = observer((props: any) => {
props: { ...others, rowKey, dataRequest }, props: { ...others, rowKey, dataRequest },
}} }}
> >
<CollectionProvider collectionName={props.collectionName}> <TableMain />
<DisplayedMapProvider>
<TableMain />
</DisplayedMapProvider>
</CollectionProvider>
</TableConetxt.Provider> </TableConetxt.Provider>
); );
};
export const Table: any = observer((props: any) => {
return (
<CollectionProvider collectionName={props.collectionName}>
<DisplayedMapProvider>
<TableProvider {...props} />
</DisplayedMapProvider>
</CollectionProvider>
);
}); });
const useTotal = () => { 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.useTableFilterAction = useTableFilterAction;
Table.useTableCreateAction = useTableCreateAction; Table.useTableCreateAction = useTableCreateAction;
Table.useTableUpdateAction = useTableUpdateAction; Table.useTableUpdateAction = useTableUpdateAction;