跳到主要内容

动态表单生成

最近在公司项目中,需要实现一个动态表单生成器,通过配置json文件,可以生成一个表单,然后用户可以对表单进行编辑。

需求闭环,完整链路

设计表单->生成schema->表单预览->表单编辑填写->表单数据提交->表单数据回收分析生成完整报告

可扩展的组件库

支持常用组件。提供标准的可配置属性和可配置逻辑。

  • 文本输入框
  • 图片上传
  • 单选多选
  • 文件上传

...可以添加更多不同类型组件。

为了统一管理组件和组件的配置信息,需要维护一套统一的DSL。

需求能力

静态页面设计

通过schema配置,生成一个静态页面。由于需求这边是统一的设计不需要定制页面样式。

组件交互能力

比如跳转链接等能力,通过富文本编辑器实现。

动态表单中的组件交互为表单关联能力,例如表单前后项的关联关系,某些表单项需要在什么条件下才会显示。这里想到两种方式来实现关联关系。

  • 第一种,是通过控制的思想来实现。将存在关联关系的组件分为两种角色:控制者和被控制者。控制者设置满足哪些条件则显示被控制者。在这种思想下,一个控制者可以控制多个被控制者。
    • 优点:简单易懂,逻辑清晰。
    • 缺点:控制逻辑单一,复杂情况下灵活性不足。
  • 第二种,通过依赖的思想来实现。每个问题可以设置自己满足什么条件才能够显示。这样可以设置多个依赖,也可以灵活设置各个依赖之间的关系。
    • 优点:灵活性高,可配置性强。每个问题都可以单独设置自己的依赖。
    • 缺点:依赖关系复杂时,导致逻辑难以维护。

组件通信能力

组件与组件间的交互关系搭建。

常见通信方案:

  • props 父传子
  • 子传父。注册回调函数
  • eventBus 发布订阅模式
  • vuex/redux 等公共状态管理
  • iframe postmessage
  • event emitters

更多

一篇相似业务的总结和实现:星创编辑器在投放业务中的落地|得物技术