react+antd拖拽生成/排序自定义配置表单

代码压缩包下载地址
相关技术与第三方：react,ts,less，引用antd图标与组件
配置说明：

[
 {
        label: "输入框", // 标签名称
        tips: "请输入", // 提示语
        rule: "validateNone", // 需要的规则类型，正则表达式文件可自行修改配置
        type: "Input", // 控件类型
        required: false, //是否必填
        value: "", //参数默认值
        options: [], //选项参数-非必 选项手动编辑后续考虑导入
        allowClear: true, //是否允许清除-默认true
    },
]

即使不需要这个功能板块，reduction提供的表单生成在编写管理系统也非常方便，模板一键生成表单
使用说明：左边是表单配置，右边是生成后的效果可编辑，配置可自由更改，新增，通过json控制，方便使用。最终将右边所得的json串保存，就可以使用该json串通过组件reduction还原表单
说明：主要是为了配置表单，具体表单控件就不直接手写使用现在的比较快，组件目前在初版调试阶段

主文件展示,文件较多，后续上传到资源包

/*
 * @Author: 刘强
 * @Date: 2022-06-16 16:50:05
 * @LastEditTime: 2022-07-05 16:33:36
 * @LastEditors: 刘强
 * @Description:
 * @FilePath: \form\src\page\form\index.tsx
 * 这是注释!
 */
import React, { useState } from "react";
import "./index.less";
import UiForm from "./module/index";
import UiCatalogue from "./catalogue/index";
import UiConfig from "./config/index";

const Drag = () => {
    const [list, setList] = useState([]); //列表
    const [newParams, setNewParams] = useState({}); //当前拖拽新增元素
    const [dragEnd, setDragEnd] = useState(true); //拖拽是否结束
    const [valid, setValid] = useState(false); //拖拽是否有效
    const [active, setActive] = useState(-1); //当前编辑控件下标

    return (
        <div className="drag">
            <UiCatalogue
                formList={list}
                setDragEnd={setDragEnd}
                setNewParams={setNewParams}
                setValid={setValid}
                valid={valid}
            />
            <UiForm
                setActive={setActive.bind(this)}
                setList={setList.bind(this)}
                formList={list}
                newParams={newParams}
                dragEnd={dragEnd}
                valid={valid}
                active={active}
                setValid={setValid}
            />
            <UiConfig
                setActive={setActive.bind(this)}
                active={active}
                formList={list}
                setList={setList.bind(this)}
            />
        </div>
    );
};
export default Drag;