使用ProForm封装可复用新增编辑组件

最新推荐文章于 2023-11-15 10:08:43 发布
最新推荐文章于 2023-11-15 10:08:43 发布
阅读量528 收藏
点赞数
文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55652851/article/details/132313039
版权

这次给大家分享一个封装的新增+编辑的可复用组件，如果公司比较忙，崔的紧可以是使用这个组件，使用antd官网给的例子需要自己去修改一些值，封装这个组件的意义就在于，平常可以直接使用这个组件，像table的columns的方式传值，渲染展示，不仅传值方便，操作也比较方便。

import { NpTableContext } from '@/components/CustomTable';

import { userName } from '@/utils/Regex';

import { FormOutlined, PlusOutlined } from '@ant-design/icons';

import type { ProFormInstance } from '@ant-design/pro-form';

import {

    ModalForm,

    ProFormDatePicker,

    ProFormSelect,

    ProFormText,

    ProFormTextArea,

    ProFormCascader,

    ProFormSwitch,

    ProFormDigit

} from '@ant-design/pro-form';

import { Button, message, Popover } from 'antd';

import { useContext, useRef } from 'react';

import styleContent from './index.less';

css.{

//可创建一个文件引入进去

@import '~antd/es/style/themes/default.less';

.content {

  :global(.ant-form) {

    display: flex;

    flex-wrap: wrap;

  }

  :global(.ant-form-item) {

    padding-left: 10px !important;

  }

}

}

type UpdateFormProps = {

    recordItem?: any | []; //编辑返现，非必传，但是编辑如果要做返现，是必传

    title?: string; //传值->‘add’||‘update’,是告诉组件，引用的是编辑还是新增，必传

    formItemList: any;//这里就是要渲染组件的数组，必传

    update: (params: any) => Promise<{ success: boolean }>;//这里传add或者update的接口，必传

};

//最底部会贴出一个使用方法

const BaseModalForm = (props: UpdateFormProps) => {

    const { recordItem, title, formItemList, PageCode, initialState, update, } = props;

    const restFormRef = useRef<ProFormInstance>();//这个是from表单的ref方法

    const { actionRef } = useContext(NpTableContext);//这里是刷新table的，点击确定后可以直接获取table的接口，可以去看下小编的之前的一篇文章封装protable：封装ProTable组件__琉的博客-CSDN博客

    const propsfrom = () => {

        const formList: any = [];

        if (formItemList && formItemList.length > 0) {

            formItemList.map((item: any, index: number) => {

                const { name, label, width = 'sm', disabled = false, rules = false, options = [], optionType = [],

                    modes = '', } = item;

                if (item.option === 'userText' && item.patterns.pattern === userName) {

                    const userText = (

                        <ProFormText

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label}

                            disabled={disabled}

                            rules={rules === true ? [{ required: true, message: '这是必填项' }] : []}

                            fieldProps={{

                                onChange: (value: any) => {

                                    const text = value?.target?.value;

                                    if (/[\u4E00-\u9FA5]/g.test(text)) {

                                        restFormRef.current?.setFieldsValue({

                                            userName: text.replace(/[\u4E00-\u9FA5]/g, ''),

                                        });

                                    } else {

                                        restFormRef.current?.setFieldsValue({ userName: text.toLowerCase() });

                                    }

                                },

                                autoComplete: 'off',

                            }}

                        />

                    );

                    formList.push(userText);

                } else if (item.option === 'text') {

                    const text = (

                        <ProFormText

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label}

                            disabled={disabled}

                            rules={[

                                { required: rules, message: '这是必填项' },

                                item.patterns

                                    ? { pattern: item.patterns.pattern, message: item.patterns.message }

                                    : {},

                            ]}

                            fieldProps={{

                                autoComplete: 'off',

                            }}

                        />

                    );

                    formList.push(text);

                } else if (item.option === 'ProFormSelect') {

                    const Select = (

                        <ProFormSelect

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label}

                            fieldProps={{

                                mode: modes,

                                options: optionType,

                            }}

                            placeholder="请选择"

                            rules={[{ required: rules, message: '请选择!' }]}

                        />

                    );

                    formList.push(Select);

                } else if (item.option === 'ProFormTextArea') {

                    const textArwa = (

                        <ProFormTextArea

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label}

                            placeholder="请输入"

                        />

                    );

                    formList.push(textArwa);

                } else if (item.option === 'ProFormDatePicker') {

                    const DatePicker = (

                        <ProFormDatePicker rules={[{ required: rules, message: '请选择!' }]} key={item.id || index} name={name} label={label} width={width} />

                    );

                    formList.push(DatePicker);

                } else if (item.option === 'ProFormCascader') {

                    const Cascader = (

                        <ProFormCascader

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label}

                            fieldProps={{

                                options: options,

                            }}

                        />

                    );

                    formList.push(Cascader);

                } else if (item.option === 'ProFormSwitch') {

                    const Switch = (

                        <ProFormSwitch

                            key={item.id || index}

                            width={width}

                            name={name}

                            label={label} />

                    );

                    formList.push(Switch);

                } else if (item.option === 'ProFormDigit') {

                    const Digit = (

                        <ProFormDigit

                            width={width}

                            key={item.id || index}

                            label={label}

                            name={name}

                            min={0}

                            rules={[{ required: rules, message: '请输入!' }]}

                            fieldProps={{ precision: 0 }}

                        />

                    );

                    formList.push(Digit);

                }

            });

        }

        return formList;

    };

    const onVisibleChange = (visible: boolean) => {

        restFormRef?.current?.resetFields();

    };

    return !enabled ? <></> : (

        <ModalForm

            onVisibleChange={onVisibleChange}

            width={512}

            initialValues={recordItem}

            modalProps={{

                centered: true,

                className: styleContent.content,

            }}

            formRef={restFormRef}

            title={title === 'add' ? '新增' : '编辑'}

            trigger={

                title === 'update' ? (

                    <Popover content="编辑" placement="rightTop" trigger="hover">

                        <FormOutlined style={{ color: '#1890FF' }} />

                    </Popover>

                ) : (

                    <Button key="button" disabled={!enabled} type="primary" icon={<PlusOutlined />}>

                        新增

                    </Button>

                )

            }

            submitter={

                title === 'update'

                    ? {

                        searchConfig: {

                            resetText: '重置',

                        },

                        resetButtonProps: {

                            onClick: () => {

                                onVisibleChange(true);

                            },

                        },

                    }

                    : {}

            }

            onFinish={async (values) => {

                let res: any = {};

                if (title === 'add') {

                    res = await update(values);

                } else {

//这一步是编辑的时候拿到编辑行的数据，valeus的值就是可编辑的数据，循环recordItem的每一项并修改值，但是这样做是提交了整个一个编辑行的数据，使用的人可以根据规则进行修改，

//可修改成 const obj={

                        ...values,

                        id: recordItem.id,

                    }

                for (const key in recordItem) {

                    if (values.recordItem(key)) {

                      selectedDevice[key] = values[key];

                    }

                  }   

                obj 和recordItem传一个进去，具体传那个需要根据自己项目制定的规则去传

                res = await update(obj  ||  recordItem);

                }

                if (res.success) {

                    message.success('更新成功!');

                    restFormRef?.current?.resetFields();

                    restFormRef.current?.validateFields();

                    actionRef?.current?.reload();

                    return true;

                }

                throw new Error('更新失败');

            }}

        >

            {propsfrom()}

        </ModalForm>

    );

};

export default BaseModalForm;

BaseModalForm组件使用方法：

name：传给后端的字段名；

label：组件title；

width：组件宽度，可设置number类型，也可设置官网给的例子；

option：组件的类型[ 'userText{做的有正则限制}',

'text',

'ProFormDatePicker',

'ProFormSelect',

'ProFormTextArea',

'ProFormText',

'ProFormCascader',

'ProFormSwitch',

'ProFormDigit'

]；

disabled：是否禁用;

rules:是否必传

const formItemList = [

        {

            name: 'name',

            label: '名称',

            width: 'sm',

            option: 'text',

            disabled: false,

            rules: true

        },

        {

            name: 'code',

            label: '代码',

            width: 'sm',

            option: 'text',

            disabled: false,

        },

        {

            name: 'warehouseId',

            label: '仓库',

            width: 'sm',

            option: 'ProFormSelect',

            disabled: false,

            optionType: resourceData//搜索框传入的数组[{label:'',value:''}],

            rules: true

        },

        {

            name: 'projectType',

            label: '项目类型',

            width: 'sm',

            option: 'ProFormSelect',

            disabled: false,

            optionType: [{

                label: 'KLT',

                value: 'KLT'

            }, {

                label: 'GLT',

                value: 'GLT'

            }],

            rules: true

        },

        {

            name: 'type',

            label: '产线类型',

            width: 440,

            option: 'ProFormSelect',

            disabled: false,

            optionType: [{

                label: '流水线',

                value: 'LINE'

            }, {

                label: '工作岛',

                value: 'ISLAND'

            }],

            rules: true

        },

        {

            name: 'description',

            label: '描述',

            width: 440,

            option: 'ProFormTextArea',

            disabled: false,

        },

    ]

const tableAttribute = {

    title：'updata',//这里以编辑为例子

    recordItem：recordItem,//这里是编辑行的数据，如果是新增可以不用传

    formItemList：formItemList,//这里是需要渲染的组件

    update: (params: Partial<User.Update>) => generalAccountRequest.update(params),

  }

<BaseModalForm {...tableAttribute}/>

_琉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
proForm高级组件ppt
08-07
proForm高级组件ppt
McgsPro软件使用教程v1.0_样例工程
07-19
McgsPro软件使用教程v1.0_样例工程
textArea高度自适应最优解决方案
weixin_44658445的博客
08-14 1201
问题：需求中form表单输入框需要根据输入内容动态调整输入框高度。 方案：动态获取textarea元素的scrollHeight属性值，设置到textarea元素的style.height属性中。 这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto，否则获取的高度会受到元素padding等属性值的影响。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
ant-d pro ProFormText 二次封装
weixin_47338877的博客
02-28 2488
这里没啥好说的 只是单纯的合并了’password’ | ‘textArea’ 此外配合其他封装 /* * @Author: your name * @Date: 2021-10-28 18:01:14 * @LastEditTime: 2022-02-22 15:19:03 * @LastEditors: Mao * @Description: In User Settings Edit * @FilePath: \archives-web\src\components\myComponen
form表单name命名问题
NULL码农
08-02 1721
在实际开发中，需要使用二维数组，所以form，name命名规则应该这样才能正确使用 <input class="txt" type="text" name="port[te1]" value="1"> <input class="txt" type="text" name="port[te2]" value="2"> <input class="txt" type="...
使用AntdPro创建基于React的管理后台（学习笔记4）（技术笔记2）中 ＜火山引擎后台管理＞商品模块的实现；有代码结构简析；文末附有源码
房森的博客
03-21 2547
.商品模块的实现；有代码结构简析；文末附有源码
ant designd pro Form表单的 默认值
qq_39314683的博客
11-09 1384
当表单 新增和修改 共用一个页面时 const [form] = Form.useForm(); const data = props.location.query useEffect(() => { form.setFieldsValue({...data}); }, []);
arduino pro mini 封装、pcb图及原理图
04-02
arduino pro mini 封装、pcb图及原理图，可以下载研究
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样调用，就可以了 补充知识：Ant Design Pro，用setFieldsValue方法，...
解决antd的Form组件setFieldsValue的警告问题
01-21
使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置了表单值的问题。 解决 在使用...
Form-switch开关
hrbsfdxzhq01的博客
01-05 995
&lt;!--绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。--&gt; &lt;el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"&gt; &lt;/el-switch&gt; &lt
@mosowe2/element-pro：【proForm】基于elementUI2.x版本的高级表单
mosowe
07-03 886
通过配置自动生成表单页面：自动生成布局支持远程支持联动支持原有属性事件等示例结构，[prop]为数据关键字，[groupKeyName]为分栏关键字，均唯一： proForm options 属性 说明 类型 必填 form form组件的配置，支持所有属性，model已被单独提出来作为value传入 object 否 list 分栏配置，子元素为分栏的标识且唯一，开发者自定义，list.[groupKeyName] object 是 events 组件单元的事件，events ob
ProFormUploadButton中的自定义受控组件fileList属性
KisJLLLLLL的博客
07-21 733
antdPro的ProFormUploadButton自定义数据回显，由于功能需求，需要通过接口获取已上传的文件，而且不是通过form包起来，所以initialValue是不可用的，所以我们需要通过fileList来进行数据回显。
ant design pro v5 之 ProForm自定义表单项
无缺的博客
04-24 6762
需求背景：ProForm 默认提供的表单项无法满足项目开发 解决方案：ProForm本身是在原来的Ant Design Form 的基础上增加一些语法糖和布局设置等等，那我们就看看ProForm是如何做的不就行了 了解之后得知：ProForm的表单代码是通过如下方式来创建的： const ProFormText = (props) => { return ( <ProForm.Item {...props}> <Input placeholder={p
PowerDesigner的样式设置
weixin_34319640的博客
01-13 375
PD提供了强大的配置功能，可以对生成的数据库对象命名、数据模型的展现进行设置。这里首先讲下样式的设置。 颜色和字体设置 1.单独设置某个对象的颜色和字体 1.1修改实体填充色 （1）单击选中某个需要修改填充色的实体。 （2）右击，在弹出式菜单中选择“Format”选项，系统将弹出格式化窗口。 （3）切换到“Fill”选项卡中，选择Fill color为白色，如图所示： （4）单...
Ant Design Pro(5)-6.高级表单ProForm
AG.『Feng』的博客
10-18 4552
PrForm表单使用
Antd Procomponent 之 proForm - 高级表单
奇舞周刊
11-06 959
本文作者系360奇舞团前端开发工程师ProForm 在原来的 Form 基础上增加一些语法糖和更多的布局设置，帮助我们快速的开发一个表单。同时添加一些默认行为，让我们的表单默认好用。分步表单，Modal 表单，Drawer 表单，查询表单，轻量筛选等多种 layout 可以覆盖大部分的使用场景，脱离复杂而且繁琐的表单布局工作，更少的代码完成更多的功能。ProForm 高级表单使用 initialV...
解决ProFormText的onChange事件获取不到最新state值问题
最新发布
qq_48691693的博客
11-15 318
解决ProFormText的onChange事件获取不到最新state值问题
ant-design-ProComponents-ProForm重置表单值
WebView
09-17 2642
1、重置某一表单值，获取表单实例，调用表单方法 const formRef = useRef(); const handleSubmit = async (values) => { formRef.current.resetFields(['code']); 2、
antpro design pro中的子组件使用父组件的dva
05-24
Ant Design Pro 中的子组件可以使用父组件的 dva Model，可以通过 props 的方式将 dva Model 传递给子组件。具体方法如下： 1. 在父组件中引入 dva 的 connect 方法，并将 Model 中需要的 state 和 dispatch 通过 props 传递给子组件。 ```javascript import { connect } from 'dva'; const mapStateToProps = ({ myModel }) => ({ myState: myModel.myState, }); const mapDispatchToProps = dispatch => ({ myDispatch: dispatch.myModel.myDispatch, }); class MyParentComponent extends React.Component { render() { return <MyChildComponent {...this.props} />; } } export default connect(mapStateToProps, mapDispatchToProps)(MyParentComponent); ``` 2. 在子组件中使用 props 中传递的 state 和 dispatch。 ```javascript class MyChildComponent extends React.Component { handleClick = () => { const { myState, myDispatch } = this.props; // 使用 myState 和 myDispatch }; render() { return <div onClick={this.handleClick}>Hello World</div>; } } ``` 这样子组件就可以使用父组件的 dva Model 中的 state 和 dispatch 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值