顶层模型管理着所有字段模型,
每个字段都有着自己的路径
formily表单开发模式
https://v1.formilyjs.org/#/0yTeT0/8MsesjHa
- JSON Schema,纯 JSON数据格式
- Markup Schema,jsx混合 SchemaField json
- 纯JSX
响应式模型
@formily/reactive,Mobx 的核心思想,Mobx 的 Reactive 方案
表单设计器
手写JSONSchema 繁琐,通过可视化界面生成 JSONSchema
由 json数据驱动,从JSON生成表单,重新定义了应用开发的方式
前端技术架构统一
研发工作流沉淀
统一页面设计规范后,中后台需求设计师无需参与
业务研发物料统一
组件的创建,开发,发布,上传,预览
统一交互标准,减少开发负担,通用方案
快速配置项
- 高频重复的拖拽
- 中后台表单规范
- 中后台表格规范
不能浮在最上面的业务代码上,可以多去了解一些构建相关的东西,看看人家的设计思路与提效的方式。
意识到问题是好事,作出反应才有价值
表单业务域
表单设计器要支持多个业务,需要区分业务域,以免混乱
每个业务域内的code不允许重复,业务域之间可以重复
- 业务域的管理员可以对当前业务域内所有表单进行读写,普通用户只能读。
- 界面里,可以切换业务域。
- 超级管理员可以任命所有业务域管理员,业务域管理员可以任命当前业务域管理员
- 发布管理,包括发布历史、回滚、跨环境推送等(建设中)
- 权限管理
- 表单访问量统计
历史记录
在表单列表页面,加上历史记录功能,点击按钮,会弹出表格,可以进行回滚操作。
回滚之后的版本会作为一条新的记录保存。只有发布的表单,才会拥有历史记录
表单设计器中,需要保存之前N的版本的历史,以方便回滚。
- 点击之后,弹窗展示历史列表,可以预览及回滚
- 回滚之后,新增一条历史记录,并更新当前表单内容
- 表单点击保存时,在历史记录中新增一条,上限100条
form 表单协议
状态分布式管理,局部更新,性能能较传统react单向数据流管理提升数倍,
代码可维护性增强:副作用独立管理,业务逻辑、联动收敛到一处维护,
事件处理逻辑与jsx层严格隔离,并采用了标准的json Schema
利用 rxjs提供了一个全局响应式编程的能力,再配合action的处理方式,巧妙的规避了大量onChange事件和全局状态
JSON schema和动态注册组件项的能力提供了一个动态展示和自定义领域表单的功能
UI Schema
UI Schema描述,实现对表单、表单项、嵌套、循环多个表单项、校验、联动、异步、组件扩展及布局等能力
JSONSchema 更新
无缝衔接 JSONSchema,每次配置表单的变动都同步JSONSchema,在客户端将这个 JSONSchema保存到数据库,并生成一个唯一标识;
在客户端渲染时,通过这个唯一标识字段,来查询对应的 JSONSchema