feat: support for displaying relational table fields in details or form blocks (#635)

* feat: m2o association field

* feat: add ReadPrettyForm support
This commit is contained in:
金昶 2022-07-15 11:31:09 +08:00 committed by GitHub
parent a521231a25
commit 9df35933d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 28 deletions

View File

@ -204,7 +204,7 @@ FormItem.Designer = (props) => {
}} }}
/> />
)} )}
{validateSchema && ( {form && !form?.readPretty && validateSchema && (
<SchemaSettings.ModalItem <SchemaSettings.ModalItem
title={t('Set validation rules')} title={t('Set validation rules')}
components={{ ArrayCollapse, FormLayout }} components={{ ArrayCollapse, FormLayout }}
@ -371,7 +371,7 @@ FormItem.Designer = (props) => {
}} }}
/> />
)} )}
{form && !form?.readPretty && collectionField?.interface !== 'o2m' && ( {form && !form?.readPretty && collectionField?.interface !== 'o2m' && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && (
<SchemaSettings.SelectItem <SchemaSettings.SelectItem
key="pattern" key="pattern"
title={t('Pattern')} title={t('Pattern')}

View File

@ -59,6 +59,23 @@ export const KanbanCardDesigner = (props: any) => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const fields = useFormItemInitializerFields({ readPretty: true, block: 'Kanban' }); const fields = useFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Kanban'});
const items: any = [{
type: 'itemGroup',
title: t('Display fields'),
children: fields,
}];
if (associationFields.length > 0) {
items.push({
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
})
}
if (!designable) { if (!designable) {
return null; return null;
} }
@ -87,21 +104,7 @@ export const KanbanCardDesigner = (props: any) => {
dn.loadAPIClientEvents(); dn.loadAPIClientEvents();
dn.insertBeforeEnd(schema); dn.insertBeforeEnd(schema);
}} }}
items={[ items={items}
{
type: 'itemGroup',
title: t('Display fields'),
children: fields,
},
{
type: 'divider',
},
{
type: 'itemGroup',
title: t('Display association fields'),
children: useAssociatedFormItemInitializerFields({readPretty: true, block: 'Kanban'}),
},
]}
component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}
/> />
</Space> </Space>

View File

@ -1,23 +1,33 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../SchemaInitializer'; import { SchemaInitializer } from '../SchemaInitializer';
import { gridRowColWrap, useFormItemInitializerFields } from '../utils'; import { gridRowColWrap, useAssociatedFormItemInitializerFields, useFormItemInitializerFields } from '../utils';
import { union } from 'lodash';
// 表单里配置字段 // 表单里配置字段
export const FormItemInitializers = (props: any) => { export const FormItemInitializers = (props: any) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { insertPosition, component } = props; const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Form'});
return ( return (
<SchemaInitializer.Button <SchemaInitializer.Button
wrap={gridRowColWrap} wrap={gridRowColWrap}
icon={'SettingOutlined'} icon={'SettingOutlined'}
items={[ items={union([
{ {
type: 'itemGroup', type: 'itemGroup',
title: t('Display fields'), title: t('Display fields'),
children: useFormItemInitializerFields(), children: useFormItemInitializerFields(),
}, }],
{ associationFields.length > 0 ? [{
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
}] : [],
[{
type: 'divider', type: 'divider',
}, },
{ {
@ -35,7 +45,7 @@ export const FormItemInitializers = (props: any) => {
}, },
}, },
}, },
]} ])}
insertPosition={insertPosition} insertPosition={insertPosition}
component={component} component={component}
title={component ? null : t('Configure fields')} title={component ? null : t('Configure fields')}

View File

@ -1,22 +1,32 @@
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { SchemaInitializer } from '../SchemaInitializer'; import { SchemaInitializer } from '../SchemaInitializer';
import { gridRowColWrap, useFormItemInitializerFields } from '../utils'; import { gridRowColWrap, useAssociatedFormItemInitializerFields, useFormItemInitializerFields } from '../utils';
import { union } from 'lodash';
export const ReadPrettyFormItemInitializers = (props: any) => { export const ReadPrettyFormItemInitializers = (props: any) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { insertPosition, component } = props; const { insertPosition, component } = props;
const associationFields = useAssociatedFormItemInitializerFields({readPretty: true, block: 'Form'});
return ( return (
<SchemaInitializer.Button <SchemaInitializer.Button
wrap={gridRowColWrap} wrap={gridRowColWrap}
icon={'SettingOutlined'} icon={'SettingOutlined'}
items={[ items={union([
{ {
type: 'itemGroup', type: 'itemGroup',
title: t('Display fields'), title: t('Display fields'),
children: useFormItemInitializerFields(), children: useFormItemInitializerFields(),
}, }],
{ associationFields.length > 0 ? [{
type: 'divider',
}, {
type: 'itemGroup',
title: t('Display association fields'),
children: associationFields,
}] : [],
[{
type: 'divider', type: 'divider',
}, },
{ {
@ -34,7 +44,7 @@ export const ReadPrettyFormItemInitializers = (props: any) => {
}, },
}, },
}, },
]} ])}
insertPosition={insertPosition} insertPosition={insertPosition}
component={component} component={component}
title={component ? null : t('Configure fields')} title={component ? null : t('Configure fields')}

View File

@ -193,10 +193,11 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
const { getInterface, getCollectionFields } = useCollectionManager(); const { getInterface, getCollectionFields } = useCollectionManager();
const form = useForm(); const form = useForm();
const { readPretty = form.readPretty, block = 'Form' } = options || {}; const { readPretty = form.readPretty, block = 'Form' } = options || {};
const interfaces = block === 'Form' ? ['m2o'] : ['o2o', 'oho', 'obo', 'm2o']
const groups = fields const groups = fields
?.filter((field) => { ?.filter((field) => {
return ['o2o', 'oho', 'obo', 'm2o'].includes(field.interface); return interfaces.includes(field.interface);
}) })
?.map((field) => { ?.map((field) => {
const subFields = getCollectionFields(field.target); const subFields = getCollectionFields(field.target);
@ -210,7 +211,9 @@ export const useAssociatedFormItemInitializerFields = (options?: any) => {
// title: subField?.uiSchema?.title || subField.name, // title: subField?.uiSchema?.title || subField.name,
'x-designer': 'FormItem.Designer', 'x-designer': 'FormItem.Designer',
'x-component': 'CollectionField', 'x-component': 'CollectionField',
'x-read-pretty': readPretty,
'x-component-props': { 'x-component-props': {
'pattern-disable': block === 'Form' && readPretty,
}, },
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-collection-field': `${name}.${field.name}.${subField.name}`, 'x-collection-field': `${name}.${field.name}.${subField.name}`,