react+ts+antd 表单的二次封装

在系统管理项目中，多次出现表单的提交，现将表单进行简单的一些二次封装，将表现层和数据层分离，只需要传入数据进行。循环数据类型生成对应表单。

父组件
//仿造数据
const getCaseTypeList = () =>{
      getCaseType().then(res => {
        if (res.status === 200) {
          const data = [{orderId:'0',orderName:'全部'},{orderId:'1',orderName:'进行   中'},{orderId:'2',orderName:'结束行程'}]
          let obj = {
            type: 'SELECT',
            label: '订单状态',
            field:'order_status',
            placeholder:'全部',
            initialValue:'',
            message:"请输入订单",
          }
          analysisList(setFormList,formList,data,obj,'orderId','orderName')

        }
      })
    }
    
    //list解析函数
    const analysisList = (setFormFn:(val:[]) => void,formListData:[],data:object[],obj:any,id:string,name:string) =>{
      let list:any = []
      data.map((value:any,index:number)=>{
        list.push({ 'id': value[id], 'name': value[name] })
      })
      obj.list = list
      let objClone = JSON.parse(JSON.stringify(formListData));
      objClone.push(obj);
      setFormFn(objClone)
    }
    
    //表单默认数据
    const initState = {
      city:'1',
      mode:"aaa",
      order_status:'2',
      city2:'0'
    }
//表单基础配置  （）
  const propsData = {
    add_modalVisible,
    filterSubmit,
    removeModel,
    modalWidth:900,
    colNumber:12,
    formList,
    initState,
  }
<BaseForm {...propsData}/>

//表单组件
interface IProps {
    formList:any;
    add_modalVisible:boolean;
    filterSubmit:any;
    removeModel:()=>void;
    modalWidth:number;
    colNumber:number;
    hideRequiredMark?:boolean;
    initState:object,
    slotContent?:any
}


class FilterForm extends React.Component<IProps> {
    formRef: React.RefObject<FormInstance> = React.createRef();
    componentDidMount = () =>{
        
    }

    //手机
    handleValidator(rules: any,val: string,callback: any){
        if (!val) {
            return Promise.reject()
        }
        return Promise.reject()
    }
    
    initFormList =() =>{
        const {formList,colNumber,slotContent} = this.props;
        console.log(formList) 
        const formItemList:any = []
        if(formList && formList.length>0){
            formList.map((item:any,i:number)=>{
                const {label,field,placeholder,required,message,width} = item
                if(item.type=="INPUT"){ 
                    const INPUT = 
                    <Col span={colNumber} key={field}>
                            <FormItem label={label}  
                                name = {field}
                                rules = {[
                                    { required: required, message: message},
                                    { validator:(rules:any,val:any,callback:any)=>this.handleValidator(rules,val, callback)}
                                    ]}
                                >
                                <Input type='text' style={{width: width}} placeholder={placeholder}/>
                            </FormItem>
                    </Col>
                        formItemList.push(INPUT)
                }else if(item.type=="SELECT"){
                    const SELECT = 
                    <Col span={colNumber}  key={field}>
                                    <FormItem label={label}
                                        name = {field}
                                        rules = {[
                                            { required: required, message: message},
                                        ]}
                                    >
                                    <Select
                                        style={{width: width}}
                                        placeholder={placeholder}
                                        >
                                        {Utils.getOptionList(item.list)}
                                    </Select>
                                </FormItem>
                                </Col>
                                formItemList.push(SELECT)
                }else if (item.type == 'CHECKBOX') {
                    const CHECKBOX = 
                    <Col span={colNumber}  key={field}>
                            <FormItem label={label}
                                        name = {field}
                                        rules = {[
                                            { required: required, message: message},
                                        ]}
                                    >
                                    <Checkbox>
                                        {label}
                                    </Checkbox>
                            </FormItem>;
                    </Col>
                    formItemList.push(CHECKBOX);
                }else if (item.type == 'DATE') {
                    const Date =
                    <Col span={colNumber} key={field}>
                        <FormItem label={label} 
                                        name = {field}
                                        rules = {[
                                            { required: required, message: message},
                                        ]}
                                    >
                                <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/> 
                        </FormItem>;
                    </Col>
                    formItemList.push(Date);
                }
            })
        }
        let rowFormItemList =  
            <Row style={{width:'100%'}}>
                {formItemList}
            </Row>
        return  rowFormItemList
    }

    //确定
    handleOk = (values: any) =>{
        this.props.filterSubmit(values)
        if(this.formRef && this.formRef.current){
            this.formRef.current.resetFields();
        }
    }

    //取消
    handleCancel = () =>{
        if(this.formRef && this.formRef.current){
            this.formRef.current.resetFields();
            this.props.removeModel()
        }
    }
    render(){
        const {add_modalVisible,modalWidth,hideRequiredMark,initState} = this.props
        return  <>
                    <Modal
                        title="Basic Modal"
                        visible={add_modalVisible}
                        footer={false}
                        width={modalWidth}
                        onCancel={this.handleCancel}
                    >
                        <Form 
                        className={styles.form_container} 
                        onFinish={this.handleOk} 
                        hideRequiredMark={hideRequiredMark}
                        ref={this.formRef} 
                        initialValues={initState}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 17 }}>
                            {this.initFormList()}
                            <br/>
                            <div style={{width:"100%"}}>
                                <Form.Item wrapperCol={{ span: 24 }} style={{ textAlign: 'right',marginBottom:0}}>
                                    <QynButton onClick={this.handleCancel} style={{marginRight:"20px"}}>取消</QynButton>
                                    <QynButton type='primary' htmlType='submit'>确认</QynButton>
                                </Form.Item> 
                            </div>
                        </Form> 
                    </Modal>
                </>
    }
}

export default FilterForm