作者：TC维尼_748 | 来源：互联网 | 2023-09-11 15:20
basicFormUtil.jsimportReactfromreactimport{Form,Input,Tooltip,Icon,Cascader,Select,Radio,R
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
}else if(item.tag =="Radio"){
return
}else if(item.tag =="Select"){
const optiOns= item.props.options.map(d => );
return
}else if(item.tag =="RangePicker"){
return
}else if(item.tag =="DatePicker"){
return
}else if(item.tag =="Button"){
return
}else{
return 表单设置信息有误
}
}
getElement (){
const { getFieldDecorator } = this.props.form;
let elements = []
this.props.formItme.forEach((item,index)=>{
if(item.tag){
elements.push(
key={item.tag+index}
{...item.tailFormItemLayout}
label={item.lable}
>
{getFieldDecorator(item.id, item.getFieldDecoratorOption)(
this.getInput(item)
)}
)
}
})
return elements
}
render(){
return(
{this.getElement( )}
)
}
}
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"
}
}
]
//规划
formItemLayout={formItemLayout}
//form内容
formItme={formOption}
/>
京公网安备 11010802041100号