react和antd3 实现动态表单

最新推荐文章于 2023-08-16 16:46:54 发布
最新推荐文章于 2023-08-16 16:46:54 发布
阅读量965 收藏 4
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50962392/article/details/122941270
版权 
import React, { Component } from 'react';
import { Spin, Form, Row, Col, Card,Icon } from 'antd';
import { OcirfButton,OcirfInput } from '@/components';
import { handleNewFilter, getStringLength } from '@/utils/utils';
import styles from './index.less';
import { connect } from 'dva';

const FormItem = Form.Item;
const createForm = Form.create;
const infoColProps = {
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8,
};
@connect(({ litigationList, loading }) => ({
  litigationList,
  detailLoading: loading.effects['litigationList/litigationBasicInformationDetails'],
}))
@createForm()
class OcirfFilterForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            extend: false,
            otherDefendantPeope:[{name:'',nameId:'',id:new Date().getTime()}],//其他被告人，默认为1
            thirdPeope:[{name:'',nameId:'',id:new Date().getTime()}],//第三人，默认为1
            // allLitigationData:{},//掉接口获取的数据
            // reallyOptions:{},//处理后用于 提交诉讼基本信息 的入参数
        }
    }

    componentDidMount() {
      const { onRef } = this.props;
      onRef&&this.props.onRef(this);
      this.getBasicsLitigationInfo()
    }

    //判断是否为必填---其他被告人和第三人
    getIsRequired = (type) => {
      const { otherDefendantPeope ,thirdPeope} = this.state
      const { form } = this.props;
      form.validateFields((err, values)=>{
        if(err) {return;}
      })
    }


    //查询诉讼基本信息
    getBasicsLitigationInfo = () => {
      const { dispatch,litigationId, } = this.props
      // console.log('litigationId===========',litigationId)
      let otherDefendantPeopeArr = []
      let thirdPeopeArr = []
      dispatch({
        type: 'litigationList/litigationBasicInformationDetails',
        payload: {
          litigationId,
        },
        callback: (res) => {
          
          if(res.otherDefendantEntities){
            res.otherDefendantEntities.map((item,index)=>{
              otherDefendantPeopeArr.push({name:item.name,nameId:item.id,id:new Date().getTime()+index})
            })
            // console.log('otherDefendantPeopeArr',otherDefendantPeopeArr)
            if(otherDefendantPeopeArr.length>0){
              this.setState({
                otherDefendantPeope:otherDefendantPeopeArr
              })
            }
          }
    
          if(res.thirdPartyEntities){
            res.thirdPartyEntities.map((item,index)=>{
              thirdPeopeArr.push({name:item.name,nameId:item.id,id:new Date().getTime()+index})
            })
            if(thirdPeopeArr.length>0){
              this.setState({
                thirdPeope:thirdPeopeArr
              })
            }
          }

        }
      })
    } 

    renderNewFilterForm = (type) => {
        const { form: { getFieldDecorator }, formList,basicFormList,litigationFormList } = this.props;
        return (<Row gutter={32} className="filter-wrap">{
            ((type==='basicInfo'?basicFormList:litigationFormList)||[]).map((item,index)=>{
                const len = getStringLength(item.label);
                return <Col {...infoColProps} className={`filter-item ${index>2?'hide-filter-item':''}`} key={index}>
                    {len < 13 && (<label>{item.label}</label>)}
                    {12 < len && len < 25 && (<label className={item.labelSingleline ? '' : 'new-label-lines'}>{item.label}</label>)}
                    {len > 24 && (<label className="new-label-lines"><ChannelEllipsis lines={2} title={item.label}>{item.label}</ChannelEllipsis></label>)}
                    <span className="filter-opera">
                        {!item.filedType && (<FormItem>
                            {getFieldDecorator(item.getField, {
                                initialValue: item.initialValue,
                                ...item.getFieldDecorator
                            })(
                                React.createElement(
                                item.dom,
                                {...item.props},
                                item.children
                                )
                            )}
                        </FormItem>)}
                        {item.filedType == 'line' && (<FormItem className={styles.middle_line_box}>
                            <FormItem  className={styles.middle_line_item}>{getFieldDecorator(item.getField1, {
                                initialValue: item.initialValue,
                                ...item.getFieldDecorator
                            })(
                                React.createElement(
                                item.dom,
                                item.props1?{...item.props1}:{...item.props},
                                item.children
                                )
                            )}</FormItem>
                            <span className={styles.middle_line_txt}>-</span>
                            <FormItem className={styles.middle_line_item}>
                                {getFieldDecorator(item.getField2, {
                                    initialValue: item.initialValue,
                                    ...item.getFieldDecorator
                                })(
                                    React.createElement(
                                    item.dom,
                                    item.props2?{...item.props2}:{...item.props},
                                    item.children
                                    )
                                )}
                            </FormItem>
                        </FormItem>)}
                    </span>
                </Col>
            })}
        </Row>)
    }
    //点击确定按钮 数据处理
    searchInfo = () => {
        const { otherDefendantPeope,thirdPeope } = this.state
        const { form, getData } = this.props;
        
        const otherDefendantPeopeArr = []
        const thirdPeopeArr = []
        // const tagOtherDefendantPeopeArr = []
        // const reallyOptions = {}
        form.validateFields((err, values)=>{
          // console.log('values',values)
          if(err) {return;}

          otherDefendantPeope.map((item,index)=>{
            otherDefendantPeopeArr.push({
              name:values[`otherDefendantName${item.id}`],
              id:values[`otherDefendantId${item.id}`]
            })
            // if(values[`otherDefendantName${item.id}`]&&values[`otherDefendantName${item.id}`]!=''){
            //   otherDefendantPeope.splice(index,1,{...item,isTageOtherDefendantId:true})
            // }
            // if(values[`otherDefendantId${item.id}`]&&values[`otherDefendantId${item.id}`]!=''){
            //   otherDefendantPeope.splice(index,1,{...item,isTageOtherDefendantName:true})
            // }
          })
          thirdPeope.map((item,index)=>{
            thirdPeopeArr.push({
              name:values[`thirdPartyName${item.id}`],
              id:values[`thirdPartyId${item.id}`]
            })
            // if(values[`thirdPartyName${item.id}`]&&values[`thirdPartyName${item.id}`]!=''){
            //   thirdPeope.splice(index,1,{...item,isTageThirdPartyId:true})
            // }
            // if(values[`thirdPartyId${item.id}`]&&values[`thirdPartyId${item.id}`]!=''){
            //   thirdPeope.splice(index,1,{...item,isTageThirdPartyName:true})
            // }
          })
          //确定时执行函数
          getData(JSON.parse(JSON.stringify({
                ...values,
                otherDefendantEntities:otherDefendantPeopeArr,
                thirdPartyEntities:thirdPeopeArr
              }
          )));
        })

    }

    resetMyForm = () => {
        const { form, resetFormCallback } = this.props;
        form.resetFields();
        resetFormCallback&&resetFormCallback();
    }

    //点击增加一列
    addListInfo = (index,value) => {
      const { thirdPeope,otherDefendantPeope} = this.state
      switch(value){
        case 'otherDefendantPeope' :
          return this.setState(()=>({
            otherDefendantPeope:otherDefendantPeope.concat({name:'',nameId:'',id:new Date().getTime()})
          }))
        case 'thirdPeope' :
          return this.setState(()=>({
            thirdPeope:thirdPeope.concat({name:'',nameId:'',id:new Date().getTime()})
          }))
      }
    }
    //删除一列
    reduceListInfo = (item,type) => {
      const { thirdPeope,otherDefendantPeope} = this.state
      switch(type){
        case 'otherDefendantPeope' :
          return this.setState(()=>({
            otherDefendantPeope:otherDefendantPeope.filter((valueItem)=>{
                  return valueItem.id != item.id
                }
              )
          }))
        case 'thirdPeope' :
          return this.setState(()=>({
            thirdPeope:thirdPeope.filter((valueItem)=>{
                  return valueItem.id != item.id
                }
              )
          }))
      }
    }
  


    render() {
        const { children, className, formList,cancel,confirm,allLitigationData,defendantInfo,form} = this.props;
        const { extend,otherDefendantPeope,thirdPeope } = this.state;
        const { getFieldDecorator } = this.props.form;

        // console.log('otherDefendantPeope',otherDefendantPeope)
        // console.log('thirdPeope',thirdPeope)

        return (
            <div className={`ocirf-filter new-filter-wrap`} style={{paddingRight:'0px'}}>
                <div className="new-filter-contant" style={{maxHeight:'none'}}>
                  <div className={styles.content_title}>诉讼基本信息</div>
                  <Form className="ocirf-filter-form">
                    <div style={{borderBottom:'1px dashed #E8E8E8',marginBottom:'16px'}}>
                      <p className={styles.content_node}>
                        <span className={styles.content_node_icon}></span>
                        <span className={styles.content_node_text}>基本信息</span>
                      </p>
                      {this.renderNewFilterForm('basicInfo')}
                    </div>
                    <div style={{borderBottom:'1px dashed #E8E8E8',marginBottom:'16px'}}>
                      <p className={styles.content_node}>
                        <span className={styles.content_node_icon}></span>
                        <span className={styles.content_node_text}>诉讼信息</span>
                      </p>
                      {this.renderNewFilterForm('litigationInfo')}
                    </div>
                    <div>
                      <p className={styles.content_node}>
                        <span className={styles.content_node_icon}></span>
                        <span className={styles.content_node_text}>被告信息</span>
                      </p>
                      <Row gutter={32} className="filter-wrap">
                        <Col span={8} className="filter-item">
                          <label className={styles.pop_label} style={{lineHeight:'normal'}}>被告人</label>
                          <span className="filter-opera">
                            <FormItem style={{lineHeight:'0'}} label={`defendantName`}>
                              {getFieldDecorator(`defendantName` ,{initialValue:defendantInfo.customerName||'',rules: [{ required: true, message: '请输入被告人姓名' }]})(<OcirfInput/>)}
                            </FormItem>
                          </span>
                        </Col>
                        <Col span={8} className="filter-item" >
                          <label className={styles.pop_label} style={{lineHeight:'normal'}}>证件号码</label>
                          <span className="filter-opera">
                            <FormItem style={{lineHeight:'0'}} label={`defendantId`}>
                              {getFieldDecorator(`defendantId`, {initialValue:defendantInfo.certNo||'', rules: [{ required: true, message: '请输入被告人证件号码' }]})(<OcirfInput/>)}
                            </FormItem>
                          </span>
                        </Col>   
                      </Row>
                      {
                        otherDefendantPeope.map((item,index)=>{
                          return <Row gutter={32} className="filter-wrap" key={index}>
                            <Col span={8} className="filter-item" >
                              <label className={styles.pop_label} style={{lineHeight:'normal'}}>其他被告人（姓名/名称）</label>
                              <span className="filter-opera">
                                <FormItem label={`otherDefendantName${item.id}`} style={{lineHeight:'0'}}>
                                  {getFieldDecorator(`otherDefendantName${item.id}`,
                                  {initialValue:item.name||'',rules: [{ required: form.getFieldValue(`otherDefendantId${item.id}`)?true:false, message: '请输入其他被告人姓名' }]})(<OcirfInput onBlur={()=>this.getIsRequired(`otherDefendantName${item.id}`)}/>)}
                                </FormItem>
                              </span>
                            </Col>
                            <Col span={8} className="filter-item" >
                              <label className={styles.pop_label} style={{lineHeight:'normal'}}>证件号码</label>
                              <span className="filter-opera">
                                <FormItem style={{lineHeight:'0'}} label={`otherDefendantId${item.id}`}>
                                  {getFieldDecorator(`otherDefendantId${item.id}`, 
                                  // {initialValue:item.nameId||'',rules: [{ required: form.getFieldValue(`otherDefendantName${item.id}`)?true:false, message: '请输入证件号码' }]})(<OcirfInput onBlur={()=>this.getIsRequired(`otherDefendantId${item.id}`)}/>)}
                                  {initialValue:item.nameId||''})(<OcirfInput onBlur={()=>this.getIsRequired(`thirdPartyId${item.id}`)}/>)}
                                </FormItem>
                              </span>
                            </Col> 
                            <Col span={8} className="filter-item" style={{lineHeight:'36px',fontSize:'20px'}}>
                              {
                                index === 0
                                ?
                                <Icon type="plus-circle" onClick={()=>this.addListInfo(index,'otherDefendantPeope')} style={{color:'#3D83FF'}}/>
                                :
                                <Icon type="minus-circle" onClick={()=>this.reduceListInfo(item,'otherDefendantPeope')} style={{color:'#F5222D'}}/>
                              }
                            </Col>     
                          </Row>
                        })
                      } 
                      {
                        thirdPeope.map((item,index)=>{
                          return <Row gutter={32} className="filter-wrap" key={index}>
                            <Col span={8} className="filter-item" >
                              <label className={styles.pop_label} style={{lineHeight:'normal'}}>第三人（姓名/名称）</label>
                              <span className="filter-opera">
                                <FormItem style={{lineHeight:'0'}} label={`thirdPartyName${item.id}`}>
                                  {getFieldDecorator(`thirdPartyName${item.id}`, {initialValue:item.name||'',rules: [{ required: form.getFieldValue(`thirdPartyId${item.id}`)?true:false, message: '请输入第三人姓名' }]})(<OcirfInput onBlur={()=>this.getIsRequired(`thirdPartyId${item.id}`)}/>)}
                                </FormItem>
                              </span>
                            </Col>
                            <Col span={8} className="filter-item">
                              <label className={styles.pop_label} style={{lineHeight:'normal'}}>证件号码</label>
                              <span className="filter-opera">
                                <FormItem style={{lineHeight:'0'}} label={`thirdPartyId${item.id}`}>
                                  {/* {getFieldDecorator(`thirdPartyId${item.id}`, {initialValue:item.nameId||'',rules: [{ required: form.getFieldValue(`thirdPartyName${item.id}`)?true:false, message: '请输入证件号码' }]})(<OcirfInput onBlur={()=>this.getIsRequired(`thirdPartyName${item.id}`)}/>)} */}
                                  {getFieldDecorator(`thirdPartyId${item.id}`, {initialValue:item.nameId||''})(<OcirfInput onBlur={()=>this.getIsRequired(`thirdPartyId${item.id}`)}/>)}
                                </FormItem>
                              </span>
                            </Col> 
                            <Col span={8} className="filter-item" style={{lineHeight:'36px',fontSize:'20px'}}>
                              {
                                index === 0
                                ?
                                <Icon type="plus-circle" onClick={()=>this.addListInfo(index,'thirdPeope')} style={{color:'#3D83FF'}}/>
                                :
                                <Icon type="minus-circle" onClick={()=>this.reduceListInfo(item,'thirdPeope')} style={{color:'#F5222D'}}/>
                              }
                            </Col>     
                          </Row>
                        })
                      } 
                    </div>
                  </Form>
                  <div style={{paddingBottom:'16px',textAlign:"center"}}>
                      <OcirfButton className="new-ocirf-btn btn-64" type="primary" onClick={this.searchInfo}>{confirm||'查询'}</OcirfButton>
                      <OcirfButton className="new-ocirf-btn-empty btn-64 ml16" onClick={this.resetMyForm}>{cancel||'重置'}</OcirfButton>
                  </div>
                </div>
            </div>
        );
    }
}

export default OcirfFilterForm
冲南
关注
React、AntD，封装动态表单
读心悦
08-08 310
在React中使用Ant Design（简称AntD）来封装动态表单是一个常见的需求，特别是在需要灵活配置表单字段的场景下。以下是一个基本的步骤和示例代码，展示如何使用React和AntD来封装一个动态表单。
React+AntDesign实现Form表单的动态增加删除操作
Alanrnzearn的博客
04-20 3709
效果示例 1. 原来效果 2. 点击+之后 实现说明 此次开发需要用到动态生成多行表单，因为新老数据要兼顾，老数据是对象存储走的一个接口，新数据走的多行配置，对象数组存储，走的另一个接口，所以在展示上就需要区分下。 注意这里默认了第一行不能删除，当然你也可以在变成多行的时候，给每一行都加上删除，但是为了避免数据被删成一行都不剩了，你需要处理下，要么在删成一行的时候禁止删除或者隐掉删除按钮，要么就在删除后要调接口的时候判断处理下，具体的得看需求来开发。 因为这块的按钮有设置，如果配置的参数含有passwo
antd表单数据 如何动态设置,React + antd 实现动态表单添加删除功能
weixin_33994072的博客
03-18 1785
类似下面这种功能：点击添加表增加一行，删除表删除一行，思路：将这个表单抽成一个单独的组件，维护一个时间戳数组，这个数组的作用就是通过map循环来生成动态表单，每次点击添加就在数组里添加一个时间戳。最终遍历有几个item就渲染几个表单。实现：dynamic.js 动态表单 子组件import React from 'react';import { Select } from 'antd';expor...
react动态表单
追逐蓦然
09-29 1253
react动态表单 1.小要求 在工作中，我们也会碰到这样子的需求：在填写信息的时候，可以填写多个人名、多个需求、以及动态生产一个分组。 今天我们就以: 可以动态的添加/删除人名、路径以及可以添加/删除一个分组的需求来开始今天的学习之旅。需求如下图所示: 2.技术点分析 1.数据结构 2.react+antd 动态编辑表格数据提及的知识点 3.js操作数据的方法: 添加数据、根据下标删除数据 3.代码分析 3.1 数据结构分析 /** * 1. 最外面是一个数组 * 2. 中间是一个字典，每个字典就是一个
实现vue图片缩放-拖拽组件
zhou15184409854的博客
09-17 2627
实现效果如下： 这几天做了个没做过的组件，以此记录下，需要的效果是在一个dom内，缩放拖拽图片。 封装的子组件imgbox.Vue。父组件中使用，需要在父组件中准备一个盒子用来装图片，在这个盒子中可以缩放拽拽图片。 父组件如下 父组件html部分 <!-- 普通方形盒子 --> <div class="box1"> <imgbox :config="data1" @enlarge="enlargeImg" @narrow="narrowImg" @changeIm
antd form表单
www_wjg的博客
10-31 886
1.antd3 form表单实时验证 import React, { Component } from 'react'; import { Card, Form, Input, Button, } from 'antd'; class RegistrationForm extends React.Component { state = { confirmDirty: false, }; handleSubmit = e
react+antd拖拽生成自定义表单.rar
06-08
首先，让我们了解一下`react+antd拖拽生成自定义表单.rar`这个项目的核心概念。项目使用TypeScript（TS）进行编写，这是一种在JavaScript基础上添加静态类型检查的超集。TypeScript提供更好的代码工具支持，有助于...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
React+Antd-可视化拖拽表单
12-03
基于react结合antd-form，实现可视化表单拖拽，左侧为自定义所有的组件，中间为工作区，拖拽左侧到工作区，目前可以进行删除等操作，可以自己再优化添加其他功能，右侧为组件名称，描述等，可以自己优化添加其他。...
react+antd+redux实现的一个超全后台管理系统
10-12
React Router是React社区广泛使用的路由库，它可以实现动态路由配置。结合Redux，我们可以创建一个中间件来处理用户登录状态，从而决定哪些路由可以访问，哪些需要权限验证。 5. **提炼业务模型与功能组件** 基于...
item-generator:基于Antd3的配置化表单解决方案
03-13
项目生成器 基于antd 3.0表单方案，从API使用转化为JSON配置化，提高开发效率 类型增强：增加了input.trim，textarea.trim两个trim类型，内置文本文本，hidden，html，suggest类型 支持表单状态：1份json配置，支持编辑，查看状态配置 支持基础的表单类型配置，表单级联 支持注册自定义类型组件及挂钩组件，组件自定义模板 拉平数据类型处理（如：moment类型） 拉平不同表单配置（如：valueProp的处理） 解决不同表单元素类型展示UI出现错乱的问题（如：inputNumber，RangePicker等） 如何使用？ PS：请确保已经安装React / Antd 3.19.0以上版本 npm i item-generator@latest -S css引用 特别注意 使用了babel-import插件来进行antd的初始化加载，代码层次需
react实战系列 —— 我的仪表盘（bizcharts、antd、moment）.doc
07-09
react实战系列 —— 我的仪表盘（bizcharts、antd、moment）.doc
react+antd开发钉钉应用学习3
04-14 2180
准备为学校应用做免登。需要获取当前登录的用户信息，觉得除了免登，其他都可以在服务器端进行。其他jsapi都是根据AccessToken来访问的。调试的话，用钉钉RC版+chrome。免登参考这篇文章https://yq.aliyun.com/articles/53957#3发送钉钉短信logger.i("test2");DingTalkPC.ready(    DingTalkPC.device....
antd3.x antd 4.x 复杂表单合集
weixin_43929884的博客
03-26 545
3.x /* eslint-disable */ /* eslint-disable react/prop-types */ /* eslint-disable react/destructuring-assignment */ /* eslint-disable camelcase */ import React, { useState, useEffect } from 'react'; import moment from 'moment'; import { Form, Butto.
react+antd+table实现表格数据，从头到尾循环、自动分页、滚动展示
weixin_45481456的博客
08-16 1033
【代码】react+antd+table实现表格数据，从头到尾循环、自动分页、滚动展示。
ant.d中动态增减表单项
weixin_43443341的博客
04-14 1666
ant.d中动态增减表单项介绍实现 介绍 项目中经常会用到动态增减表单的需求，虽然ant.design官网也有相关的demo代码演示，但在实际的应用项目中需要动态增减的表单远远比demo复杂多了，具体如何实现呢？先来看看我们实现后的具体效果是什么样的吧： 实现 初始化时默认有一条 一条时不允许删除 可以设置key 校验不能重复 import React, { Component, Fragm...
antd组件3.0到4.0Form表单的使用（1）
zhongqiu911的博客
03-22 2034
大四毕业季，计算机相关的专业要开始做毕设了，有同学找我帮忙写个页面，作为一名在公司实习了好几个月的前端人士，我是一口答应下来，心想着这不小意思嘛！也就增删改查功能，但是事实狠狠的打了我的打脸~~~ 原本我也没意识到antd版本之间的问题，但是在写页面的时候各种bug出现了，这就让人很纳闷了，原本几个小时能完成的东西，耗了我一整天，一直在疯狂百度中，话不多说，下面开始吧！！！ 创建表单页面： antd 3.0版本>>> class newForm extends Component{} ex
react+antd动态表单以及数组对象示例
热门推荐
feinifi的博客
07-31 1万+
在实际开发中，我们会遇到表单中有些数据项是多个，并不是普通的一个值，或者一组值，而是一个数组，比如联系人这一项，我们通常会有多个联系人，这时候，表单的设计会有些不一样。 先给出一个示例： 在react+antd中，我们需要注意的是，表单的数据表示需要根据数据项的数组长度来制作。我们不能像jQuery那样，在已经生成的dom文档中，通过append的方式或者remove的方式来增减dom中的结点。这里，我们需要借助数据模型，也就是状态的改变来改变dom结点，实现动态增加...
为React项目启用AntDesign组件
whuhewei的博客
05-03 297
AntDesign是蚂蚁金服开发的一个UI框架，为开发人员提供了丰富易用的各种组件。下面我们演示在React中使用AntDesign渲染一个时间选择器组件： 首先装包：npm i antd -S 按需导入组件：import {DatePicker} from "antd"; 全局导入css：import "antd/dist/antd.css" 使用：像使用一般组件那样使用<DatePick...
react+antd实现tabs和form实现表单提交
最新发布
09-11
在React项目中使用Ant Design (antd) 库可以非常方便地实现标签页（Tabs）和表单（Form）组件。以下是实现这些功能的基本步骤和代码示例： 1. **实现Tabs（标签页）**： 使用antd的`Tabs`组件，你可以快速创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值