From 41cbb26b2e04bd55ea40dad004f5e5bb84517f61 Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 5 Aug 2021 00:08:01 +0800 Subject: [PATCH] fix: improve form field config --- .../src/schemas/form/Field.DesignableBar.tsx | 116 +++++++++++++++--- packages/client/src/schemas/form/index.tsx | 5 + 2 files changed, 104 insertions(+), 17 deletions(-) diff --git a/packages/client/src/schemas/form/Field.DesignableBar.tsx b/packages/client/src/schemas/form/Field.DesignableBar.tsx index 72624a33e..0a6adec05 100644 --- a/packages/client/src/schemas/form/Field.DesignableBar.tsx +++ b/packages/client/src/schemas/form/Field.DesignableBar.tsx @@ -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 (
{ {dragRef && } { @@ -69,17 +77,43 @@ export const FieldDesignableBar = observer((props) => { { - const title = uid(); + const values = await FormDialog('修改字段名称', () => { + return ( + + + + ); + }).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) => { }); }} > - 修改字段配置 + 修改字段名称 + { + const values = await FormDialog('编辑描述', () => { + return ( + + + + ); + }).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, + }); + }} + > + 编辑描述 + + { + field + .query(field.address.concat(randomName, fieldName)) + .take((f: any) => { + f.required = checked; + schema.required = checked; + updateSchema(schema); + }); + }} + /> { } }} > - 删除当前字段 + 移除 } diff --git a/packages/client/src/schemas/form/index.tsx b/packages/client/src/schemas/form/index.tsx index 6899a0503..6eca14ae0 100644 --- a/packages/client/src/schemas/form/index.tsx +++ b/packages/client/src/schemas/form/index.tsx @@ -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 ( { [collectionField.name]: { ...collectionField.uiSchema, title, + required, + description, 'x-decorator': 'FormilyFormItem', }, },