[JavaScript知识库]表单添加相同多组规则实现react+ant3

title: 表单添加多组规则
date: 2021-07-30
tags:
- antd

起因

框架react+ant3（老项目重构很难）

新版本一个需求原型如下：[

可以有多个规则，且规则之间时间需要连续。上一个结束时间的第二天要是下一个规则的开始时间。

如果第一个结束时间是7月30号,下个月的开始时间要是7.31号。依次类推。

还要可以批量设置。就是一次性设置多个。

首先肯定想到的是用数组map,用的form表单。就新建一个数组arr=[0],点击添加按钮的时候就再push一个0，删除按钮就arr.splice(index,1),index是当前元素下标。但是form.item的依赖字段会重复。

然后只能自己用datePicker、Input还有框架封装好的获取企业Id的模糊查询的组件。

且有规则后再修改可以回显数据。

如下：

这是外层的Modal:

因为批量多个参数逗号分隔。

初始化indexOf判断有没有逗号，是单个还是批量，单个的话就获取数据，且把获取到的数据通过props传到子组件当中。因为render是先render。所以这里用个flag。保证获取到的数据可以传到子组件。

再把需要的一些方法传到子组件当中。

子组件中，通过onChange获取到值放到一个对象中添加到数组里。

添加的时候获取到当前的结束时间。通过moment().add(1,'day')当然这里要判断是不是数组中的第一个

还有就是对时间的判断。

因为时间的连续的删除只能删除最后一个。

基本完成了功能，但是感觉很冗余，还要修改，一些细节还要完善。

import React,{Component} from 'react'
import {  Form, Button, Input, message } from "antd"
import fetchHandler from '@/fetch/fetchHandler'
import TrusteeshipForm from './TrusteeshipForm';
import moment from 'moment';
import {settlementSetting,getSettlementSetting} from '@/fetch/fetchApi'


class Trusteeship extends Component {
  constructor(props) {
      super(props)
      this.props = props
      this.state = {
          domArr : [],
          stubId:this.props.stubId,
          info:[],
          flag:true
      }
  }


  componentWillMount() {
      this.getInfo()
  }
 
 async getInfo () {
    if(this.props.stubId.indexOf(',')>0) {
        return
    }
    this.setState({
        flag:false
    })
    await fetchHandler(getSettlementSetting,{
        stubId:this.props.stubId
    }).then( (res)=>{
        if(res&&res.code==='success') {
           const domArr = []
            res.data.map((item,index)=>{
                     let obj = {}
                     obj.unitPrice = item.unitPrice
                     obj.paymentCompanyId=item.paymentCompanyId
                     obj.startDate = moment(item.startDate).format("YYYY-MM-DD")
                     obj.endDate = moment(item.endDate).format("YYYY-MM-DD")
                     obj.companyName = item.companyName
                     domArr.push(obj)
           })
             this.setState({
                 domArr,
                 info:res.data,
                 flag:true
             })
        }
    })
  }
 
  onAdd = (newArr)=>{
        this.setState({
            domArr:newArr
        })
}

  onDel = ()=>{
    const domArr = this.state.domArr
    domArr.splice(domArr.length-1,1)
    this.setState({
        domArr
    })
   }

//    判断对象是否存在空值
   getDetaios(arr) {
    for (var i in arr) {
      if (arr[i] == null) {
        return true
      }
    }
    return false
  }

   onChange = (obj)=>{
    this.props.form.setFieldsValue({
        stubPeriodSetting: obj
    })
   }

onFinish = (e) => {
    const domArr = this.state.domArr
    const isNull = this.getDetaios(domArr[domArr.length-1])
    console.log(domArr);
    if(isNull) {
        message.warning("存在未填项或开始时间在结束时间之前，请检查")
        return
    }
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            values.stubIds = this.state.stubId
            fetchHandler(settlementSetting,values ).then((res) => {
                console.log(res);
                if (res.code === "success") {
                    message.success("保存成功！")
                    this.props.fresh()
                    this.props.onCancel()
                } 
            })
         
        }
    });

};
setFlag  () {
    this.setState({
        flag:true
    })
}

render () {
    const {getFieldDecorator} = this.props.form
    const {domArr,flag,info}  = this.state
    console.log(domArr);
    console.log(info);
    return (
        <Form
        name="basic"
        onSubmit={this.onFinish}
    >
           <h5>收费规则</h5>
        {flag? <div><Form.Item label="合同编号"  style={{ display:"flex" }} >
            {getFieldDecorator('concatNo', {
                rules: [{ required: true, message: '该项是必填项' }],
                initialValue: (info.length!==0)?info[0].concatNo:""
            })(
                <Input style={{ 'width': '300px' }} placeholder="请输入合同编号" />,
            )}
        </Form.Item>
       
         <Form.Item>
         {getFieldDecorator('stubPeriodSetting', {
                rules: [{ required: true, message: '该项是必填项',type: 'array' }],
                initialValue:  ""
            })(
                <TrusteeshipForm 
                    setFlag={()=>{this.setFlag}}  
                    domArr={domArr} 
                    onAdd = {this.onAdd} 
                    onDel={this.onDel} 
                    onChange={this.onChange} />,
            )}     
        </Form.Item></div>:""}
            <Form.Item style={{display: "flex",justifyContent:"center"}}>
            <Button type="dashed" htmlType="submit">
                保存
            </Button>
        </Form.Item>
    </Form>
    )
}

    
}


Trusteeship = Form.create({})(Trusteeship)

export default Trusteeship

// 引入react
import React, {
    PureComponent
} from 'react';
import { Form, Button, Input, message,DatePicker } from "antd"
import fetchHandler from '@/fetch/fetchHandler'
import {companyList } from '@/fetch/fetchApi'
import AutoSearch from '@/components/display/input/AutoSearch';
import moment from 'moment';


class TrusteeshipForm extends PureComponent {
    constructor(props) {
        super(props);
        this.props = props
        this.state = {
            domArr :this.props.domArr
        }
    }

   style = {
    display: 'flex',
    alignItems:"center",
    marginBottom:"20px"
   }      

//    判断对象是否存在空值
   getDetaios(arr) {
    for (var i in arr) {
      if (arr[i] == null) {
        return true
      }
    }
    return false
  }

componentDidMount () {
    this.props.onChange(this.state.domArr)
}

  
   onAdd = ()=>{
       const {domArr} = this.state
       this.props.setFlag()
       if(domArr.length>=10) {
        message.warning("最多添加10条！")
        return
       }
       if(this.getDetaios(domArr[domArr.length-1])) {
           message.warning("存在未填项或数据不正确，请检查！")
           return
       } 
       let nextStartDate = moment(new Date()).format("YYYY-MM-DD")
       let nextEndDate = moment(new Date()).add(7,'day').format("YYYY-MM-DD")
       if(domArr.length>0) {
         nextStartDate = moment(domArr[domArr.length-1].endDate).add(1,'day').format("YYYY-MM-DD")
         nextEndDate = moment(nextStartDate).add(7,'day').format("YYYY-MM-DD")
       }

       const  obj ={
        unitPrice:null,
        paymentCompanyId:null,
        startDate:nextStartDate,
        endDate: nextEndDate,
      }
      
       domArr.push(obj)
           this.setState({
               domArr,
           },()=>{
               this.props.onAdd(domArr)
           }
           )
   }

   startChange (startDate,index) {
    const domArr = this.state.domArr    
    const time = moment(startDate).diff(moment(domArr[index].endDate))
    if(time>0) {
        message.warning("开始时间必须在结束时间之前！")
        return
    }

    domArr[index].startDate = startDate
       this.setState({
        domArr
       },()=>{
        const domArr = this.state.domArr
           this.props.onChange(domArr)
           this.props.onAdd(domArr)
       })

   }
   endChange (endDate,index) {
    const domArr = this.state.domArr  
    let time 
    if( domArr[index+1]) {
        time = moment(endDate).diff(moment(domArr[index+1].endDate))
    }
    if(time>0||time===0) {
       domArr.forEach((item,i)=>{
           if(i>index) {
               item.endDate = null
               item.startDate = null
           }
       })
    }
    if(domArr[index+1]) {
        domArr[index+1].startDate = moment(endDate).add(1,'day').format("YYYY-MM-DD")
    }
     domArr[index].endDate = endDate
       this.setState({
        domArr
       },()=>{
        const domArr = this.state.domArr
           this.props.onChange(domArr)
           this.props.onAdd(domArr)
       })

   }
 
   feeChange (fee,index) {
    const domArr = this.state.domArr 
    domArr[index].unitPrice = fee
       this.setState({
        domArr
       },()=>{
        const domArr = this.state.domArr
           this.props.onChange(domArr)
           this.props.onAdd(domArr)
       })
   }

   companyChange  (e,index) {
    const domArr = this.state.domArr 
    domArr[index].paymentCompanyId = e
       this.setState({
        domArr
       },()=>{
        const domArr = this.state.domArr
           this.props.onChange(domArr)
           this.props.onAdd(domArr)
       })
   }




    render() {
        const {domArr} = this.state
        return <div style={{width:"552px"}}>
           {domArr&&domArr.map((item,index)=>{
               return <div key={index}>
               <div style={this.style}>
                    <label><span style={{color:"red"}}>*</span> 时间周期：</label>
                     <DatePicker 
                        placeholder="开始时间"
                        disabled={index!==0} 
                        value = {moment(item.startDate,"YYYY-MM-DD")}
                        onChange={(e,date)=>{
                        this.startChange(date,index)
                    }}/>
                     <span>—</span>
                    <DatePicker 
                    placeholder="结束时间"
                    defaultValue={moment(item.endDate,"YYYY-MM-DD")}
                    disabledDate={(current)=> {
                         return current && current <moment(item.startDate)
                       }} 
                    onChange={(e,date)=>{
                        this.endChange(date,index)
                    }} />
               </div>  
               <div style={this.style}> 
                      <label><span style={{color:"red"}}>*</span> 托管费用：</label>
                      <Input 
                       defaultValue={item.unitPrice}
                       type="number"
                       style={{ 'width': '300px' }}
                       onChange={(e)=>{
                        this.feeChange(e.target.value,index)
                       }}
                       placeholder="请输入托管费用" addonAfter="元/年" />
               </div>
               <div style={this.style}>
                  <label><span style={{color:"red"}}>*</span> 承担企业：</label>
               <AutoSearch
                  key={item.companyName||'add'}
                  placeholder='请输入商户名称模糊搜索'
                  config={{
                    allowClear: true,//是否允许清除,
                    showParam: 'companyName', // 展示的条目参数
                    choseParam: 'companyId', // 选中的参数
                    sourceApi: companyList, // 选项接口
                    initialValue: item.companyName,
                    fetchParams:{
                      status:1
                    }
                  }}
                  module='company'
                  setValue={(e) => {
                    this.companyChange(e,index)
                  }}
                />
                 </div>
                 <hr/>
               </div>
               }) }
                  <div style={{display: "flex",justifyContent:"center"}}>
                  <Button  type="primary"  onClick={()=>{
                       this.onAdd()
                   }}> 添加规则</Button>
                   {domArr&&domArr.length!==0? <Button style={{marginLeft:"20px"}} type="primary" onClick={()=>{
                       this.props.onDel()
                  }}>删除</Button>:""}
                 </div>
           
              </div>
    }
}

TrusteeshipForm = Form.create({})(TrusteeshipForm)

export default TrusteeshipForm;