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
}else if(item.tag =="TextArea"){
return
}else if(item.tag =="Checkbox"){
return
{getFieldDecorator(item.id, item.getFieldDecoratorOption)(
this.getInput(item)
)}
)
}
})
return elements
}
render(){
return(
)
}
}
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"
}
}
]