feat: association data block

This commit is contained in:
chenos 2021-08-29 22:26:52 +08:00
parent 0314faeae9
commit 10861d3c1c
4 changed files with 117 additions and 10 deletions

View File

@ -52,7 +52,11 @@ import { Menu } from '../../schemas/menu';
import { Password } from '../../schemas/password'; import { Password } from '../../schemas/password';
import { Radio } from '../../schemas/radio'; import { Radio } from '../../schemas/radio';
import { Select } from '../../schemas/select'; import { Select } from '../../schemas/select';
import { Table } from '../../schemas/table'; import {
CollectionFieldContext,
Table,
TableRowContext,
} from '../../schemas/table';
import { Tabs } from '../../schemas/tabs'; import { Tabs } from '../../schemas/tabs';
import { TimePicker } from '../../schemas/time-picker'; import { TimePicker } from '../../schemas/time-picker';
import { Upload } from '../../schemas/upload'; import { Upload } from '../../schemas/upload';
@ -69,6 +73,7 @@ import { ISchema, FormilyISchema } from '../../schemas';
import { Resource } from '../../resource'; import { Resource } from '../../resource';
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
import { CascaderOptionType } from 'antd/lib/cascader'; import { CascaderOptionType } from 'antd/lib/cascader';
import { useCollectionContext } from '../../constate';
export const BlockContext = createContext({ dragRef: null }); export const BlockContext = createContext({ dragRef: null });
@ -149,7 +154,33 @@ const useChinaRegionFieldValue = (field: ArrayField) => {
field.value = field?.value?.sort((a, b) => a.level - b.level); field.value = field?.value?.sort((a, b) => a.level - b.level);
} }
console.log('useChinaRegionFieldValue', field); console.log('useChinaRegionFieldValue', field);
} };
const useAssociationResource = (options) => {
const { schema } = useDesignable();
const collectionField = useContext(CollectionFieldContext);
const { collection } = useCollectionContext();
const ctx = useContext(TableRowContext);
const associatedKey = ctx?.record?.id;
console.log(
'useAssociationResource',
collection,
collectionField,
schema['x-component-props'],
);
const { associatedName, resourceName } = schema['x-component-props'] || {};
const resource = Resource.make({
associatedName,
resourceName,
associatedKey,
});
const service = useRequest((params) => resource.list(params), {
manual: schema['x-component'] === 'Form',
formatResult: (data) => data?.data?.[0] || {},
onSuccess: options?.onSuccess,
});
return { resource, service, initialValues: service.data, ...service };
};
export const SchemaField = createSchemaField({ export const SchemaField = createSchemaField({
scope: { scope: {
@ -163,6 +194,9 @@ export const SchemaField = createSchemaField({
loadDataSource: loadChinaRegionDataSource, loadDataSource: loadChinaRegionDataSource,
}, },
Select, Select,
Association: {
useResource: useAssociationResource,
},
}, },
components: { components: {
Card, Card,

View File

@ -82,8 +82,11 @@ export class Resource {
} }
create(values: any) { create(values: any) {
const { resourceName } = this.options; const { associatedKey, associatedName, resourceName } = this.options;
const url = `${resourceName}:create`; let url = `${resourceName}:create`;
if (associatedKey && associatedName) {
url = `${associatedName}/${associatedKey}/${url}`
}
return request(url, { return request(url, {
method: 'post', method: 'post',
data: values, data: values,
@ -92,8 +95,11 @@ export class Resource {
save(values: any, options: SaveOptions = {}) { save(values: any, options: SaveOptions = {}) {
const resourceKey = options.resourceKey || this.options.resourceKey; const resourceKey = options.resourceKey || this.options.resourceKey;
const { resourceName } = this.options; const { associatedKey, associatedName, resourceName } = this.options;
const url = `${resourceName}:${resourceKey ? `update/${resourceKey}` : 'create'}`; let url = `${resourceName}:${resourceKey ? `update/${resourceKey}` : 'create'}`;
if (associatedKey && associatedName) {
url = `${associatedName}/${associatedKey}/${url}`
}
return request(url, { return request(url, {
method: 'post', method: 'post',
data: values, data: values,

View File

@ -345,6 +345,23 @@ function generateCardItemSchema(component) {
}, },
}, },
}, },
Descriptions: {
type: 'void',
name: uid(),
'x-decorator': 'CardItem',
'x-component': 'Form',
'x-read-pretty': true,
'x-designable-bar': 'Form.DesignableBar',
properties: {
[uid()]: {
type: 'void',
'x-component': 'Grid',
'x-component-props': {
addNewComponent: 'AddNew.FormItem',
},
},
},
},
Kanban: { Kanban: {
type: 'array', type: 'array',
'x-component': 'Kanban', 'x-component': 'Kanban',
@ -1420,7 +1437,8 @@ AddNew.FormItem = observer((props: any) => {
default: [], default: [],
'x-component-props': { 'x-component-props': {
rowKey: 'id', rowKey: 'id',
defaultSelectedRowKeys: '{{ Select.useSelectedRowKeys() }}', defaultSelectedRowKeys:
'{{ Select.useSelectedRowKeys() }}',
onSelect: '{{ Select.useSelect() }}', onSelect: '{{ Select.useSelect() }}',
collectionName: field.target, collectionName: field.target,
// dragSort: true, // dragSort: true,
@ -1651,6 +1669,7 @@ AddNew.PaneItem = observer((props: any) => {
const blockSchema = useContext(BlockSchemaContext); const blockSchema = useContext(BlockSchemaContext);
const useResource = `{{ ${blockSchema['x-component']}.useResource }}`; const useResource = `{{ ${blockSchema['x-component']}.useResource }}`;
console.log('AddNew.PaneItem.useResource', useResource); console.log('AddNew.PaneItem.useResource', useResource);
const { collection, fields } = useCollectionContext();
return ( return (
<Dropdown <Dropdown
trigger={['hover']} trigger={['hover']}
@ -1792,9 +1811,56 @@ AddNew.PaneItem = observer((props: any) => {
> >
</Menu.Item> </Menu.Item>
{/* <Menu.Item icon={<IconPicker type={'CommentOutlined'} />}> {fields
?.filter((f) => f.interface === 'linkTo')
</Menu.Item> */} ?.map((collectionField) => {
return (
<Menu.Item
key={collectionField.name}
onClick={async () => {
const multiple =
collectionField?.uiSchema?.['x-component-props']
?.multiple;
let data = generateCardItemSchema(
multiple ? 'Table' : 'Descriptions',
);
if (schema['key']) {
data['key'] = uid();
}
data['x-component-props'] =
data['x-component-props'] || {};
data['x-component-props']['collectionName'] =
collectionField?.target;
data['x-component-props']['resourceName'] =
collectionField?.name;
data['x-component-props']['associatedName'] =
collection?.name;
data['x-component-props']['useResource'] =
'{{ Association.useResource }}';
if (isGridBlock(schema)) {
path.pop();
path.pop();
data = generateGridBlock(data);
} else if (isGrid(schema)) {
data = generateGridBlock(data);
}
if (data) {
let s;
if (isGrid(schema)) {
s = appendChild(data, [...path]);
} else if (defaultAction === 'insertAfter') {
s = insertAfter(data, [...path]);
} else {
s = insertBefore(data, [...path]);
}
await createSchema(s);
}
}}
>
{collectionField?.uiSchema?.title}
</Menu.Item>
);
})}
</Menu.ItemGroup> </Menu.ItemGroup>
<Menu.ItemGroup title={'多媒体区块'}> <Menu.ItemGroup title={'多媒体区块'}>
<Menu.Item <Menu.Item

View File

@ -140,6 +140,7 @@ function useTableCreateAction() {
const form = useForm(); const form = useForm();
return { return {
async run() { async run() {
console.log('useTableCreateAction', resource)
if (refreshRequestOnChange) { if (refreshRequestOnChange) {
await resource.create(form.values); await resource.create(form.values);
await form.reset(); await form.reset();