ant-customize-form

动态表单的基本使用

1：安装 npm install  ant-customize-form   或者 yarn add  ant-customize-form

2：开箱即用，支持所有的ant组件属性 基本的使用

import { CustomizeForm, ItemTypes } from 'ant-customize-form';
import { Form } from 'antd';
export default () => {
    const [formRef] = Form.useForm()
    // 可以在onChange里面设置其他表单的值
    const formItemConfig = [
        {
            itemProps: { 
                        name: 'name', 
                        label: '关键字', 
                        rules: [{ required: true }] 
                        }, 
                 type: ItemTypes.INPUT,
            typeProps: {
                placeholder: '请输入收费标准',
                showCount: true,
                maxLength: 100,
            }
        },
        {
            itemProps: { name: '', label: '', }, type: ItemTypes.BUTTON,
        },
 
    ]
    const formBaseConfig = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        form: formRef,
        onValuesChange: (changedValues?: any, values?: unknown): void => {
            console.log(changedValues, values, 1212132312);
        },
        initialValues: {},
 
    }
    const formConfig = {
        col: 2,//一行几列，支持多列的情况
        formProps: formBaseConfig,
        formItemOption: formItemConfig,
    }
 
    return <div>
        <CustomizeForm  {...formConfig} />
    </div>
};

常用的表单： formItemConfig的配置

    // 可以在onChange里面设置其他表单的值
    const formItemConfig = [
        {
            itemProps: { name: 'Tnput', label: 'Tnput' },
            type: ItemTypes.INPUT,
            typeProps: { showCount: true, maxLength: 30, style: { width: 400 } }
        },
        {
            itemProps: { name: 'Select', label: 'Select', }, type: ItemTypes.SELECT,
            typeProps: { options: [{ label: '项目一', value: 1 }, { label: '项目二', value: 2 }], style: { width: 400 } }
        },
        {
            itemProps: { name: 'Cascader', label: 'Cascader', }, type: ItemTypes.CASCADER,
            typeProps: {
                style: { width: 400 },
                options: [{
                    value: 'zhejiang',
                    label: 'Zhejiang',
                    children: [
                        {
                            value: 'hangzhou',
                            label: 'Hangzhou',
                            children: [{ value: 'xihu', label: 'West Lake', },
                            ],
                        },
                    ],
                },]
            }
        },

        {
            itemProps: { name: 'Raido', label: 'Raido', rules: [{ required: true }] },
            type: ItemTypes.RADIO, typeProps: {
                style: { width: 400 },
                options: [
                    { value: '1', label: 'Raido1', },
                    { value: '2', label: 'Raido2', },
                ]
            }
        },
        {
            itemProps: { name: 'TextArea', label: 'TextArea', rules: [{ required: true }] },
            type: ItemTypes.TEXTAREA, typeProps: { style: { width: 400 }, }
        },
        {
            itemProps: { name: 'TnputNumber', label: 'TnputNumber', },
            type: ItemTypes.INPUTNUMBER, typeProps: {
                style: { width: 400 },
            }
        },
        {
            itemProps: { name: 'Checkbox', label: 'Checkbox', },
            type: ItemTypes.CHECKBOX,
            typeProps: {
                style: { width: 400 },
                options: [
                    { value: '1', label: 'Checkbox1', },
                    { value: '2', label: 'Checkbox2', },
                ]
            }
        },
        {
            itemProps: {
                name: 'Upload', label: '附件', valuePropName: "fileList",
                getValueFromEvent: (e: { fileList: any; }) => {
                    if (Array.isArray(e)) return e;
                    return e?.fileList;
                }
            },
            type: ItemTypes.UPLOAD,
            typeProps: { action: "/upload.do", listType: "picture-card", style: { width: 400 } }
        }, {
            itemProps: { name: 'DatePicker', label: 'DatePicker' },
            type: ItemTypes.DATEPICKER,
            typeProps: {
                style: { width: 400 },
            }
        }, {
            itemProps: { name: 'RangePicker', label: 'RangePicker' },
            type: ItemTypes.RANGEPICKER,
            typeProps: { style: { width: 400 }, }
        },
        {
            itemProps: { label: 'MOREITEM' },
            type: ItemTypes.MOREITEM,
            children: [
                {
                    itemProps: { name: 'TnputNumber', label: 'TnputNumber', },
                    type: ItemTypes.INPUTNUMBER, typeProps: { style: { width: 260 }, }
                },
                {
                    itemProps: { name: 'Checkbox', label: 'Checkbox', },
                    type: ItemTypes.CHECKBOX,
                    typeProps: {
                        style: { width: 100 },
                        options: [{ value: '1', label: 'Checkbox1', },]
                    }
                },
            ]
        },
        {
            itemProps: { name: 'TreeSelect', label: 'TreeSelect' },
            type: ItemTypes.TREESELECT,
            typeProps: {
                style: { width: 400 },
                treeData: [
                    {
                        value: 'parent 1',
                        title: 'parent 1',
                        children: [
                            {
                                value: 'parent 1-0',
                                title: 'parent 1-0',
                                children: [{ value: 'leaf1', title: 'leaf1', },
                                ],
                            },
                        ],
                    },
                ]
            }
        },
        {
            itemProps: {},
            type: ItemTypes.BUTTON,
        },
    ]

以上是一些基本配置支持antd的组件的基本配置，详情配置请看文档

• 动态表单组件支持复杂的联动，自定义组件，
• 复杂表单联动：
• 收费类型：周期收费
• 账单生成模式：自动生成
• 账单生成评率：按月生成
• 是否征税：征税

• 表单可以实时联动
• 收费类型：周期收费——————走表收费
• 账单生成模式：自动生成
• 账单生成频率：每个月——————每三个月生成
• 是否征税：征税————-变成不增税