fix: improve form field config

This commit is contained in:
chenos 2021-08-05 00:08:01 +08:00
parent 8cfa623636
commit 41cbb26b2e
2 changed files with 104 additions and 17 deletions

View File

@ -20,10 +20,10 @@ import {
updateSchema, updateSchema,
} from '../'; } from '../';
import get from 'lodash/get'; import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd'; import { Button, Dropdown, Menu, Space, Switch } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons'; import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames'; import cls from 'classnames';
import { FormLayout } from '@formily/antd'; import { FormDialog, FormLayout } from '@formily/antd';
import './style.less'; import './style.less';
import AddNew from '../add-new'; import AddNew from '../add-new';
import { DraggableBlockContext } from '../../components/drag-and-drop'; import { DraggableBlockContext } from '../../components/drag-and-drop';
@ -33,20 +33,27 @@ import { useEffect } from 'react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer'; import { getSchemaPath } from '../../components/schema-renderer';
import { RandomNameContext } from '.'; import { RandomNameContext } from '.';
import { useDisplayedMapContext } from '../../constate'; import { useCollectionContext, useDisplayedMapContext } from '../../constate';
import SwitchMenuItem from '../../components/SwitchMenuItem';
export const FieldDesignableBar = observer((props) => { export const FieldDesignableBar = observer((props) => {
const field = useField(); const field = useField();
const fieldSchema = useFieldSchema(); const { schema, deepRemove } = useDesignable();
const { designable, schema, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext); const { dragRef } = useContext(DraggableBlockContext);
const randomName = useContext(RandomNameContext); const randomName = useContext(RandomNameContext);
const displayed = useDisplayedMapContext(); const displayed = useDisplayedMapContext();
const fieldName = schema['x-component-props']?.['fieldName']; const fieldName = schema['x-component-props']?.['fieldName'];
if (!designable) { const { getField } = useCollectionContext();
return null;
} const collectionField = getField(fieldName);
console.log({ collectionField });
const realField = field
.query(field.address.concat(randomName, fieldName))
.take();
return ( return (
<div className={cls('designable-bar', { active: visible })}> <div className={cls('designable-bar', { active: visible })}>
<span <span
@ -59,6 +66,7 @@ export const FieldDesignableBar = observer((props) => {
<AddNew.FormItem defaultAction={'insertAfter'} ghost /> <AddNew.FormItem defaultAction={'insertAfter'} ghost />
{dragRef && <DragOutlined ref={dragRef} />} {dragRef && <DragOutlined ref={dragRef} />}
<Dropdown <Dropdown
placement={'bottomRight'}
trigger={['click']} trigger={['click']}
visible={visible} visible={visible}
onVisibleChange={(visible) => { onVisibleChange={(visible) => {
@ -69,17 +77,43 @@ export const FieldDesignableBar = observer((props) => {
<Menu.Item <Menu.Item
key={'update'} key={'update'}
onClick={async () => { onClick={async () => {
const title = uid(); const values = await FormDialog('修改字段名称', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
fieldName: {
type: 'string',
title: '原字段名称',
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
title: {
type: 'string',
title: '自定义名称',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
}}
/>
</FormLayout>
);
}).open({
initialValues: {
fieldName: collectionField?.uiSchema?.title,
title: schema['title'],
},
});
const title = values.title || null;
field field
.query(field.address.concat(randomName, fieldName)) .query(field.address.concat(randomName, fieldName))
.take((f) => { .take((f) => {
f.title = title; f.title = title || collectionField?.uiSchema?.title;
}); });
console.log(
'fieldfieldfieldfieldfield',
field.address.concat(randomName, fieldName).entire,
schema,
);
schema['title'] = title; schema['title'] = title;
await updateSchema({ await updateSchema({
key: schema['key'], key: schema['key'],
@ -87,8 +121,56 @@ export const FieldDesignableBar = observer((props) => {
}); });
}} }}
> >
</Menu.Item> </Menu.Item>
<Menu.Item
style={{ minWidth: 150 }}
onClick={async () => {
const values = await FormDialog('编辑描述', () => {
return (
<FormLayout layout={'vertical'}>
<SchemaField
schema={{
type: 'object',
properties: {
description: {
type: 'string',
'x-component': 'Input.TextArea',
},
},
}}
/>
</FormLayout>
);
}).open({
initialValues: {
description: schema['description'],
},
});
const description = values.description || null;
realField.description = description || collectionField?.uiSchema?.description;
schema['description'] = description;
await updateSchema({
key: schema['key'],
description,
});
}}
>
</Menu.Item>
<SwitchMenuItem
title={'必填'}
checked={schema.required as boolean}
onChange={(checked) => {
field
.query(field.address.concat(randomName, fieldName))
.take((f: any) => {
f.required = checked;
schema.required = checked;
updateSchema(schema);
});
}}
/>
<Menu.Divider /> <Menu.Divider />
<Menu.Item <Menu.Item
key={'delete'} key={'delete'}
@ -104,7 +186,7 @@ export const FieldDesignableBar = observer((props) => {
} }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -156,6 +156,9 @@ Form.Field = observer((props: any) => {
} }
const randomName = useContext(RandomNameContext); const randomName = useContext(RandomNameContext);
const title = schema['title'] || collectionField?.uiSchema?.title; const title = schema['title'] || collectionField?.uiSchema?.title;
const required = schema['required'] || collectionField?.uiSchema?.required;
const description =
schema['description'] || collectionField?.uiSchema?.description;
return ( return (
<RecursionField <RecursionField
name={randomName} name={randomName}
@ -167,6 +170,8 @@ Form.Field = observer((props: any) => {
[collectionField.name]: { [collectionField.name]: {
...collectionField.uiSchema, ...collectionField.uiSchema,
title, title,
required,
description,
'x-decorator': 'FormilyFormItem', 'x-decorator': 'FormilyFormItem',
}, },
}, },