fix: improve form field config
This commit is contained in:
parent
8cfa623636
commit
41cbb26b2e
@ -20,10 +20,10 @@ import {
|
||||
updateSchema,
|
||||
} from '../';
|
||||
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 cls from 'classnames';
|
||||
import { FormLayout } from '@formily/antd';
|
||||
import { FormDialog, FormLayout } from '@formily/antd';
|
||||
import './style.less';
|
||||
import AddNew from '../add-new';
|
||||
import { DraggableBlockContext } from '../../components/drag-and-drop';
|
||||
@ -33,20 +33,27 @@ import { useEffect } from 'react';
|
||||
import { uid } from '@formily/shared';
|
||||
import { getSchemaPath } from '../../components/schema-renderer';
|
||||
import { RandomNameContext } from '.';
|
||||
import { useDisplayedMapContext } from '../../constate';
|
||||
import { useCollectionContext, useDisplayedMapContext } from '../../constate';
|
||||
import SwitchMenuItem from '../../components/SwitchMenuItem';
|
||||
|
||||
export const FieldDesignableBar = observer((props) => {
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { designable, schema, deepRemove } = useDesignable();
|
||||
const { schema, deepRemove } = useDesignable();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { dragRef } = useContext(DraggableBlockContext);
|
||||
const randomName = useContext(RandomNameContext);
|
||||
const displayed = useDisplayedMapContext();
|
||||
const fieldName = schema['x-component-props']?.['fieldName'];
|
||||
if (!designable) {
|
||||
return null;
|
||||
}
|
||||
const { getField } = useCollectionContext();
|
||||
|
||||
const collectionField = getField(fieldName);
|
||||
|
||||
console.log({ collectionField });
|
||||
|
||||
const realField = field
|
||||
.query(field.address.concat(randomName, fieldName))
|
||||
.take();
|
||||
|
||||
return (
|
||||
<div className={cls('designable-bar', { active: visible })}>
|
||||
<span
|
||||
@ -59,6 +66,7 @@ export const FieldDesignableBar = observer((props) => {
|
||||
<AddNew.FormItem defaultAction={'insertAfter'} ghost />
|
||||
{dragRef && <DragOutlined ref={dragRef} />}
|
||||
<Dropdown
|
||||
placement={'bottomRight'}
|
||||
trigger={['click']}
|
||||
visible={visible}
|
||||
onVisibleChange={(visible) => {
|
||||
@ -69,17 +77,43 @@ export const FieldDesignableBar = observer((props) => {
|
||||
<Menu.Item
|
||||
key={'update'}
|
||||
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
|
||||
.query(field.address.concat(randomName, fieldName))
|
||||
.take((f) => {
|
||||
f.title = title;
|
||||
f.title = title || collectionField?.uiSchema?.title;
|
||||
});
|
||||
console.log(
|
||||
'fieldfieldfieldfieldfield',
|
||||
field.address.concat(randomName, fieldName).entire,
|
||||
schema,
|
||||
);
|
||||
schema['title'] = title;
|
||||
await updateSchema({
|
||||
key: schema['key'],
|
||||
@ -87,8 +121,56 @@ export const FieldDesignableBar = observer((props) => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
修改字段配置
|
||||
修改字段名称
|
||||
</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.Item
|
||||
key={'delete'}
|
||||
@ -104,7 +186,7 @@ export const FieldDesignableBar = observer((props) => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
删除当前字段
|
||||
移除
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
|
@ -156,6 +156,9 @@ Form.Field = observer((props: any) => {
|
||||
}
|
||||
const randomName = useContext(RandomNameContext);
|
||||
const title = schema['title'] || collectionField?.uiSchema?.title;
|
||||
const required = schema['required'] || collectionField?.uiSchema?.required;
|
||||
const description =
|
||||
schema['description'] || collectionField?.uiSchema?.description;
|
||||
return (
|
||||
<RecursionField
|
||||
name={randomName}
|
||||
@ -167,6 +170,8 @@ Form.Field = observer((props: any) => {
|
||||
[collectionField.name]: {
|
||||
...collectionField.uiSchema,
|
||||
title,
|
||||
required,
|
||||
description,
|
||||
'x-decorator': 'FormilyFormItem',
|
||||
},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user