basicFormUtil.js
import React from 'react'
import {Form, Input, Tooltip, Icon, Cascader, Select,Radio, Row, Col,DatePicker, Checkbox, Button, AutoComplete} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
const {Option} = Select;
const {TextArea} = Input;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const {MonthPicker, RangePicker,WeekPicker} = DatePicker;
class basicFormUtil extends React.Component{constructor(props){super(props);
}
handleSubmit = (e) => {e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {if (!err) {console.log('Received values of form:', values);
}
});
}
getInput(item){if(item.tag =="Input"){return <Input {...item.props}/>
}else if(item.tag =="TextArea"){return <TextArea {...item.props}/>
}else if(item.tag =="Checkbox"){return <CheckboxGroup {...item.props} />
}else if(item.tag =="Radio"){return <RadioGroup {...item.props} />
}else if(item.tag =="Select"){const options = item.props.options.map(d => <Option key={d.value}>{d.label}</Option>);
return <Select {...item.props}>{options}</Select>
}else if(item.tag =="RangePicker"){return <RangePicker {...item.props}/>
}else if(item.tag =="DatePicker"){return <DatePicker {...item.props}/>
}else if(item.tag =="Button"){return <Button {...item.props}>{item.props.text}</Button>
}else{return <div style={{color:"red"}}> 表单配置信息有误 </div>
}
}
getElement (){const { getFieldDecorator} = this.props.form;
let elements = []
this.props.formItme.forEach((item,index)=>{if(item.tag){
elements.push(
<Form.Item
key={item.tag+index}
{...item.tailFormItemLayout}
label={item.lable}
>
{getFieldDecorator(item.id, item.getFieldDecoratorOption)(this.getInput(item)
)}
</Form.Item>
)
}
})
return elements
}
render(){
return(<Form {...this.props.formItemLayout} onSubmit={this.handleSubmit}>
{this.getElement()}
</Form>
)
}
}
const WrappedBasicForm = Form.create({name: 'basicForm'})(basicFormUtil);
export default WrappedBasicForm;调用 basicFormUtil.js
const formItemLayout = {
labelCol: {md: { span: 24},
lg: {span:3},
xl: {span:3},
},
wrapperCol: {md: { span: 24},
lg: {span: 15},
xl: {span: 15},
},
};
const tailFormItemLayout = {
wrapperCol: {
md: {offset: 0,},
lg: {offset: 3,},
},
};
//form 配置
const formOption = [
{
tag:"Input",
lable:"名称",
id:"name",
// 表单的属性按照 antd api 加入
props:{
type:"text",
placeholder:"请输入名称",
},
//getFieldDecoratorOption 参数按照 antd api 加入
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"Input",
lable:"URL",
id:"url",
props:{
type:"text",
placeholder:"请输入 URL",
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输入名称"
}
]
}
},{
tag:"TextArea",
lable:"描述",
id:"desc",
props:{
type:"text",
placeholder:"请输入描述",
},
},{
tag:"Checkbox",
lable:"多选",
id:"Checkbox",
placeholder:"Checkbox",
props:{
placeholder:"Checkbox",
options: [{ label: 'Apple', value: 'Apple'},
{label: 'Pear', value: 'Pear'},
{label: 'Orange', value: 'Orange'},
]
},
getFieldDecoratorOption:{
rules:[
{
required:true,
message:"请输选择"
}
]
}
},{
tag:"Radio",
lable:"单选",
id:"Radio",
props:{
placeholder:"Radio",
options: [{ label: 'Apple', value: 'Apple'},
{label: 'Pear', value: 'Pear'},
{label: 'Orange', value: 'Orange'},
]
},
},{
tag:"Select",
lable:"Select",
id:"Select",
props:{
placeholder:"Select",
mode:"multiple",
options: [{ label: 'Apple', value: 'Apple'},
{label: 'Pear', value: 'Pear'},
{label: 'Orange', value: 'Orange'},
]
},
},{
tag:"DatePicker",
lable:"DatePicker",
id:"DatePicker",
props:{
placeholder:"选择日期",
format:'YYYY/MM/DD',
onChange:this.onchange
}
},{
tag:"RangePicker",
lable:"RangePicker",
id:"RangePicker",
props:{
placeholder:"选择日期",
format:'YYYY/MM/DD',
onChange:this.onchange
}
},{
tag:"Button",
id:"submit",
tailFormItemLayout:tailFormItemLayout,
props:{
text:"提交",
type:"primary",
htmlType:"submit"
}
}
]<BasicFormUtil
// 布局
formItemLayout={formItemLayout}
//form 内容
formItme={formOption}
/>