antd3.x antd 4.x 复杂表单合集

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,
    Button,
    Input,
    Checkbox,
    Icon,
} from 'antd';
import _ from 'lodash';


import FormItem from '@components/formItem';
import Select from '@components/Select';

const typeMap = {
    service: 'service_id',
    field: 'field_id',
    terminal: 'terminal_id',
    node_type: 'node_type',
};

const InterfaceAdd = (props) => {
    const {
        terminal, service_info, form: { getFieldDecorator, resetFields, getFieldsValue },
    } = props;
    const [list, setList] = useState([[{}, {}], [{}], [{}, {}]]);


    useEffect(() => {
        resetFields();
    }, list);


    const handleSubmit = (e) => {
        const { form: { validateFields } } = props;
        e.preventDefault(); // TODO: why

        validateFields(async (err, values) => {
            console.log(err, values)
        });
    };

    const onPlus = (groupNo, index) => {
        const newList = getFieldsValue().business;
        const arr = []
        newList.forEach((group, groupIndex) => {
            if (groupIndex !== groupNo) {
                arr[groupIndex] = group;
            } else {
                let newGroup = [...(group.slice(0, index + 1)), {}, ...(group.slice(index + 1))]
                arr[groupIndex] = newGroup;
            }
        })
        setList(_.cloneDeep(arr));

    };
    const onMinus = (groupNo, index) => {
        const newList = getFieldsValue().business;
        const arr = []
        newList.forEach((group, groupIndex) => {
            if (groupIndex !== groupNo) {
                arr[groupIndex] = group;
            } else {
                let newGroup = [...(group.slice(0, index)), ...(group.slice(index + 1))]
                arr[groupIndex] = newGroup;
            }
        })
        setList(_.cloneDeep(arr));
    };



    const onPlusGroup = (groupNox) => {
        const newList = getFieldsValue().business;
        let arr = [...(newList.slice(0, groupNo + 1)), {}, ...(newList.slice(groupNo + 1))]
        setList(_.cloneDeep(arr));

    };
    const onMinusGroup = (groupNo) => {

        const newList = getFieldsValue().business;
        let arr = [...(newList.slice(0, groupNo)), ...(newList.slice(groupNo + 1))]
        setList(_.cloneDeep(arr));
    };

    const formMap = [
        {
            label: '终端和接口',
            key: 'terminal_id',
            // label: '终端',
            placeholder: '请选择终端',
            component: Select,
            props: { options: terminal, style: { width: 150 } },

            required: true,
        }, {
            key: 'interface_url',
            label: '接口',
            component: Input,
            placeholder: '请输入接口',
            props: { style: { width: 340, marginRight: 10 } },
            required: true,
        }, {
            key: 'regex_flag',
            component: Checkbox,
            valuePropName: 'checked',
            props: {
                children: '支持正则',
            },
        }, {
            key: 'is_mtsi_mark',
            label: '是否已接入MTSI',
            component: Select,
            placeholder: '请选择',
            props: {
                options: [
                    { id: 'y', desc: '是' },
                    { id: 'n', desc: '否' },
                ],
                style: { width: 90 }
            },
            required: true,
        },

    ];

    const formItems = list.map((group, groupNo) => (
        <div key={groupNo}>
            <div style={{
                border: '1px solid #ccc',
                padding: 20,
                marginBottom: 16,
                borderRadius: 2,
                display: 'inline-block'
            }}>
                <div style={{paddingBottom:15}}>
                        <FormItem
                            label={'业务含义'}
                            key={groupNo + '-service_id'}
                            labelCol={null}
                            wrapperCol={null}
                        >

                            {getFieldDecorator(`business[${groupNo}][service_id]`, {
                                valuePropName: 'value',
                                initialValue: list[groupNo]['service_id'],
                                rules: [{
                                    required: true,
                                    message: `不能为空！`,
                                }],
                            })(
                                <Select options={service_info} key={`business-[${groupNo}]-service_id`}
                                    placeholder={'请选择业务含义'} />
                            )}
                        </FormItem>
                        </div>
                {group.map((interfaceAttrs, interfaceNo) => (
                    

                    <div key={groupNo + '-' + interfaceNo} >
                        {formMap.map((item, child) => {
                            const { label, component, key, type } = item;
                            const children = Array.isArray(component) ? component : [item];
                            return (
                                <FormItem
                                    label={label}
                                    key={groupNo + '-' + interfaceNo + '-' + child}
                                    labelCol={null}
                                    wrapperCol={null}
                                >
                                    {
                                        children.map((o) => {
                                            const { required, key, valuePropName, placeholder } = o;
                                            {
                                                const decorator = getFieldDecorator(`business[${groupNo}][${interfaceNo}][${key}]`, {
                                                    valuePropName: valuePropName || 'value',
                                                    initialValue: list[groupNo][interfaceNo][key],
                                                    rules: [{
                                                        required: !!required, message: `不能为空！`,
                                                    }],
                                                });

                                                return (
                                                    decorator(
                                                        <o.component
                                                            {...o.props}
                                                            key={`business-[${groupNo}]-[${interfaceNo}]-[${key}]`}
                                                            placeholder={placeholder === undefined ? "请输入" : placeholder}
                                                        />,
                                                    )
                                                );
                                            }
                                        })
                                    }
                                </FormItem>
                            );
                        })}

                        <FormItem isButton> <Button
                            type="primary"
                            ghost
                            onClick={() => onPlus(groupNo, interfaceNo)}
                        >
                            <Icon type="plus" />
                        </Button></FormItem>
                        <FormItem isButton><Button
                            type="primary"
                            ghost
                            onClick={() => onMinus(groupNo, interfaceNo)}
                            disabled={group.length === 1 && interfaceNo === 0}
                        >
                            <Icon type="minus" style={{
                                color: group.length === 1 && interfaceNo === 0 ? '#d9d9d9' : 'auto'
                            }} />
                        </Button></FormItem>

                    </div>
                ))}
            </div>
            <FormItem isButton> <Button
                type="primary"
                ghost
                onClick={() => onPlusGroup(groupNo)}
            >
                <Icon type="plus" />
            </Button></FormItem>
            <FormItem isButton><Button
                type="primary"
                ghost
                onClick={() => onMinusGroup(groupNo)}
                disabled={list.length === 1}
            >
                <Icon type="minus" style={{
                    color: list.length === 1 ? '#d9d9d9' : 'auto'
                }} />
            </Button></FormItem>
        </div>
    ));

    return (
        <div>
            <Form layout="inline">
                {formItems}
                <FormItem isButton>
                    <Button
                        type="primary"
                        onClick={handleSubmit}
                    >
                        保存
                    </Button>
                </FormItem>
            </Form>
        </div>
    );
};

const App = Form.create()(InterfaceAdd);

export default App;

4.x

/* eslint-disable */
/* eslint-disable react/prop-types */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable camelcase */
import React, { useState, useEffect } from 'react';
import {
    Form,
    Button,
    Input,
    Checkbox,
} from 'antd-4';

import {
    Icon,
} from 'antd';

import * as actions from '@actions/tactics';
import * as router from '@actions/router';
import { connect } from 'react-redux';

import Select from '@components/Select';
import _ from 'lodash';

const typeMap = {
    service: 'service_id',
    field: 'field_id',
    terminal: 'terminal_id',
    node_type: 'node_type',
};

const InterfaceAdd = (props) => {
    const {
        terminal, service_info,
    } = props;
    const [form] = Form.useForm();

    const [list, setList] = useState({businessGroup: [[{}, {}, {}], [{}], [{}, {}]]});
    form.setFieldsValue(list);


    useEffect(() => {
        form.setFieldsValue(list);
    }, list);

    const handleSubmit = (e) => {
        const { validateFields } = form;
        e.preventDefault(); // TODO: why

        validateFields().then(res => console.log(res));
    };

    const onPlus = (groupNo, index) => {
        const newBusinessGroup = [...(list.businessGroup)];
        if (index === undefined) {
            newBusinessGroup.splice(groupNo + 1, 0, [{}])
        } else {
            if (index === 0) {
                const { service_id } = newBusinessGroup[groupNo][0];
                delete newBusinessGroup[groupNo][0].service_id;
                newBusinessGroup[groupNo].splice(0, 0, { service_id })
            } else {
                newBusinessGroup[groupNo].splice(index, 0, {})
            }
        }
        setList(_.cloneDeep({businessGroup: newBusinessGroup}));

        console.log(list)
    };
    const onMinus = (groupNo, index) => {
        const newBusinessGroup = [...(list.businessGroup)];
        if (index === undefined) {
            newBusinessGroup.splice(groupNo, 1)
        } else {
            if (index === 0) {
                const { service_id } = newBusinessGroup[groupNo].shift();
                newBusinessGroup[groupNo][0].service_id = service_id;
            } else {
                newBusinessGroup[groupNo].splice(index, 1)
            }
        }
        setList(_.cloneDeep({businessGroup: newBusinessGroup}));
    };

    const formMap = [
        {
            label: '终端和接口',
            key: 'terminal_id',
            placeholder: '请选择终端',
            PreComponent: Select,
            props: { options: terminal, style: { width: 150 } },

            required: true,
        }, {
            key: 'interface_url',
            label: '接口',
            PreComponent: Input,
            placeholder: '请输入接口',
            props: { style: { width: 340, marginRight: 10 } },
            required: true,
        }, {
            label: '支持正则',
            key: 'regex_flag',
            PreComponent: Checkbox,
            valuePropName: 'checked',
        }, {
            key: 'is_mtsi_mark',
            label: '是否已接入MTSI',
            PreComponent: Select,
            placeholder: '请选择',
            props: {
                options: [
                    { id: 'y', desc: '是' },
                    { id: 'n', desc: '否' },
                ],
                style: { width: 130 }
            },
            required: true,
        },

    ];

    const formItems = list.businessGroup.map((group, groupNo) => (
        <div key={groupNo}>
            <div className={'group-box'}>
                {group.map((business, index) => (

                    <div key={groupNo + '-' + index} >
                        {formMap.map((item, child) => {
                            const { label, PreComponent, key, type, required, props } = item;
                            return (
                                <Form.Item
                                    {...props}
                                    label={label}
                                    key={groupNo + '-' + index + '-' + child}
                                    labelCol={null}
                                    wrapperCol={null}
                                    name={['businessGroup', groupNo, index, key]}
                                    rules={[{
                                        required: !!required, message: `不能为空！`,
                                    }]}
                                >
                                    <PreComponent {...props} />
                                   

                                </Form.Item>
                            );
                        })}
                        <Form.Item>
                            <Button
                                type="primary"
                                ghost
                                onClick={(e) => onPlus(groupNo, index)}
                            >
                                <Icon type="plus" />
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type="primary"
                                ghost
                                onClick={(e) => onMinus(groupNo, index)}
                                disabled={group.length === 1 && index === 0}
                            >
                                <Icon type="minus" style={{
                                    color: group.length === 1 && index === 0 ? '#d9d9d9' : 'auto'
                                }} />
                            </Button>
                        </Form.Item>

                    </div>
                ))}

            </div>
            <Form.Item> <Button
                type="primary"
                ghost
                onClick={(e) => onPlus(groupNo)}
            >
                <Icon type="plus" />
            </Button></Form.Item>
            <Form.Item><Button
                type="primary"
                ghost
                onClick={(e) => onMinus(groupNo)}
                disabled={list.length === 1}
            >
                <Icon type="minus" style={{
                    color: list.length === 1 ? '#d9d9d9' : 'auto'
                }} />
            </Button></Form.Item>
        </div>
    ));

    return (
        <div>
            <Form layout="inline" form={form} onValuesChange={(value, values) => {
                setList(values)
            }}>
                {formItems}
                <Form.Item>
                    <Button
                        type="primary"
                        onClick={handleSubmit}
                    >
                        保存
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

const mapStateToProps = ({ tactics }) => ({ ...tactics });
const mapDispatchToProps = { ...actions, ...router };

export default connect(mapStateToProps, mapDispatchToProps)(InterfaceAdd);