vue3+ts实现拖拽生成页面

定义数据结构

{
    "title": "品牌库详情",
    
    "layout": {
        "componentCode": "win-tabs",
        "componentProperties": {
            "position": "", // 选项卡位置
            "type": "", // 选项卡类型
            "direction": "", // 选项卡方向
            "size": "", // 选项卡大小
        },
        // 渲染layout部分
        "tabs": [
            {
                "tabName": "品牌基础信息",
                "tabConfig": {
                    "detailDisplay": true, // 详情可见
                    "editDisplay": true, // 编辑可见
                },
                "tabGroup": [
                    {
                        "groupName": "基础信息",
                        "gruopConfig": {
                            "col": 2
                        },
                        "fields": [
                            {},
                            {}
                        ]
                    }
                ]
            }
        ],
    },
    "buttons": {
        "headButton": [
            {}
        ],
        "footButton": [
            {}
        ]
    },
    "config": {
        "formLayout":"", //侧面展示 horizontal，顶部展示 vertical
        "mainTable": "", // 主表名称
    }
}

拖拽编码

使用开源组件
拉下来修改 变成基于 vue3 + ts + arco 的组件 ，并融入业务.