fix: improve form field config
This commit is contained in:
parent
8cfa623636
commit
41cbb26b2e
@ -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>
|
||||||
}
|
}
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user