import React from 'react'; import { Form } from 'antd'; import ButtonForm from './Button'; import TableForm from './Table'; const Page = ({ data, form, form: { getFieldDecorator, getFieldValue }, onUpdateComponentProps }) => { const renderForm = () => { switch (data.node.name) { case 'button': return <ButtonForm getFieldDecorator={getFieldDecorator} data={data.node.data} />; case 'table': return ( <TableForm getFieldDecorator={getFieldDecorator} getFieldValue={getFieldValue} form={form} data={data.node.data.props} /> ); default: break; } }; return <Form layout="inline">{renderForm()}</Form>; }; export default Form.create({ onValuesChange: (props, changedValues, allValues) => { const { onUpdateComponentProps } = props; if(props.data.node.name === 'table') { allValues.columns = allValues.key.map((item, index) => ({ title: allValues.title[index] || 'NA', key: item || 'NA', dataIndex: item || 'NA' })); const { key, keys, title, dataSource, ...other } = allValues; onUpdateComponentProps(other); return; } onUpdateComponentProps(allValues); console.log(allValues); } })(Page);