介绍
分享一下自己设计动态表单拖拽设计的一些心路历程,和产品成果。给有实际需要的用户、或者给需要设计动态表单的开发者和团队一些参考。
背景
到今年刚好10年的开发经验了,涉及过分布式游戏服务器开发、商城项目;近几年负责企业ERP、MES等信息化项目。所有的系统都需要一个后台管理系统。首先是权限,不同的用户有不同的权限,权限至少要管理到菜单级别,现在要控制到按钮级别,游戏GM后台需要控制后台的接口权限,可能会涉及渠道商要数据...等等,权限是管理后台的一个刚需功能,出厂标配。
其他的功能就是业务表,单表、一对多、多对多、1:1:n:n:1:n等等此类的。在企业管理系统中,这些业务表的数据很重要,业务表的关系很复杂。如果用代码复制、拷贝、修改去写,简单又重复没什么意义。所以需要高效优雅的优化这个事情。
还有一点呢就是,自有的项目、接私活的项目也需要后台管理系统。
基于以前工作的总结、和未来自身需要的考虑,决定自己写一个表单设计系统,他应该包含这些功能:
- 表单能拖拽设计,随心所欲、所见即所得;
- 表单 对应着 数据库表模型,不用建表、更不用生成代码再重启服务,必须实时生成;
- 表单支持:单表、一对多、1:1:n:n:1:n诸如此类,(因为多对多实际用的少,而且主要是查询、新增。用自定义JS和go语言脚本来扩展它);
- 支持手写vue单文件,比如这种:
<template></template><script setup></script> <style scoped></style>; - 支持扩展增、删、改、查逻辑;比如商品出库时,会操作很多业务表:库存、订单、发票、等等,新增或修改就要扩展服务端逻辑,表单能根据业务自身扩展这个逻辑;
- 能导入、导出JSON配置,实现业务表+表单,随意迁移;
- 表单设计好后,管理表格、查询条件、字段列等都能默认生成,并且能自定义修改;
- 能开放给别人免费用,且别人不受功能限制。同时保护自身的代码不被泄露;
表单设计界面
经过近一年的时间,上述功能我们都实现了,并且做了很多测试。 拖拽设计的界面长这样子,还是很干净清爽吧,哈哈~~~~~~:
表单设计后,能直接预览:
能看到设计的全部字段:
扩展增、删、改、查的服务端逻辑,按照自己的想法写逻辑:
表单对应的管理表格
表单设计好后,会绑定一个菜单用于管理表格,看看效果:
管理表格想个性化?没问题:
不完善的地方
组件代码配置很多,后续考虑变成可视化配置,因为本质是改变配置代码,后续升级成可视化配置组件也是兼容的,由于时间有限,后续会优化这一点。
安装包地址:
码云搜:godata,我叫二十四桥明月夜
谢谢阅读,又问题评论区留言,哈哈~~。