import React , { useEffect , useState } from 'react' ; import { Form , Input , InputNumber , Button , Checkbox } from 'antd' ; import { FormItemProps } from 'antd/lib/form' ; import _ from 'lodash' ; import { ColorPicker } from './ColorPicker' ; import { getLocale } from '@/locale' ; type Props = { /** 表单配置 */ config : Array < { type : string ; attributeId : string ; displayName : string ; formItemProps ? : FormItemProps ; cfg ? : { [ k ] : any ; } ; } > ; /** 表单已配置内容 */ value : { [ key ] : any ; } ; onChange : ( v : any ) => void ; } ; const FormItemComponentMap = ( type ) => ( props = { value : null } ) => { switch ( type ) { case 'checkbox' : return < Checkbox { ... props } / > ; case 'input' : return < Input { ... props } / > ; case 'number' : return < InputNumber { ... props } / > ; case 'textArea' : return < Input . TextArea { ... props } / > ; case 'color-picker' : return < ColorPicker { ... props } / > ; default : return < Input />; } } ; export const FormCreator = props => { const i18n = getLocale ( ) ; const [ fields , setFields ] = useState ( [ ] ) ; useEffect ( ( ) => { const datas = Object . keys ( props . value || { } ) . map ( d => ( { name : [ d ] , value : props . value [ d ] , } ) ) ; setFields ( datas ) ; } , [ props . value ] ) ; const onFinish = ( values ) => { props . onChange ( values ) ; } ; return ( < div > < Form labelCol = { { span : 6 } } initialValues = { props . value } fields = { fields } onFinish = { onFinish } > { _ . map ( props . config , c => { return ( < Form . Item key = { c . attributeId } label = { c . displayName } wrapperCol = { c . displayName ? { span : 18 } : { span : 24 } } name = { c . attributeId } { ... ( c . formItemProps || { } ) } > { FormItemComponentMap ( c . type ) ( { ... ( c . cfg || { } ) , value : _ . get ( props . value , [ c . attributeId ] ) , } ) } < /Form.Item>); } ) } < Form . Item wrapperCol = { { offset : 6 } } > < Button type = "primary" htmlType = "submit" > { i18n . get ( '提交' ) } < /Button> < /Form.Item> < /Form> < /div>); } ;