useResource
This commit is contained in:
parent
27b61bd571
commit
7dd9fbf213
13
packages/client/src/hooks/useResource.ts
Normal file
13
packages/client/src/hooks/useResource.ts
Normal 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,
|
||||||
|
};
|
||||||
|
};
|
@ -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
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -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);
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -64,7 +64,7 @@ group:
|
|||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
表格的几个重要概念
|
表格的几个重要参数
|
||||||
|
|
||||||
- collection 当前表格的数据表配置信息(主要是字段)
|
- collection 当前表格的数据表配置信息(主要是字段)
|
||||||
- resource 当前资源,用于处理 create、update、list、destroy
|
- resource 当前资源,用于处理 create、update、list、destroy
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user