feat: association data block
This commit is contained in:
parent
0314faeae9
commit
10861d3c1c
@ -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,
|
||||||
|
@ -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,
|
||||||
|
@ -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
|
||||||
|
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user