阅读 488

可视化表单搭建系统的开发与思考

最近着手做一个低代码平台中的可视化表单搭建系统,可视化搭建简单来说主要使用 vue-draggable 拖拽组件生成表单页面,渲染成表单,组件的属性可以通过面板进行可视化配置,生成的表单页面可以支撑系统后续数据的增删改查。

核心技术点:拖拽元素生成 JSON 数据,可支持嵌套布局,JSON 数据渲染其实就是使用了 vue 的动态组件功能,每个拖拽过来的数据里有组件的名称字段,根据动态组件 component 生成对应的组件并挂载上所有的属性。

页面布局

<div>
  <div>组件列表</div>
  <div>渲染面板</div>
  <div>属性面板</div>
</div>
复制代码

核心代码:

<component :is="name" v-bind="prop"></component>
复制代码

真的核心只有这一行,其他的工作都是修改 JSON 配置文件,从左侧的组件面板拖来一个组件,逻辑就是在配置文件中添加一项配置;在右侧属性修改面板中对属性进行修改,逻辑就是修改该组件配置项的某一项配置属性值;对 JSON 做出修改后,渲染面板会根据配置信息进行重新渲染。整体逻辑就是围绕 JSON 配置文件的增删改,渲染引擎根据 JSON 来渲染。

逻辑上没有很复杂,复杂情况有 2 个地方,一个是组件增多的情况下属性面板的配置也是个麻烦活,十几个组件,每个组件的属性都会不太一样,因此属性面板也需要进行可配置,每个组件的可配置属性都需要一个 json 来配置,简单的一个label属性配置 scheme 如下:

{
  "key": "label", // 标记属性字段
  "title": "标签", // 属性面板配置项名称
  "name": "CText", //  组件名称,根据名称渲染出不同的组件(input,number,select)
  "value": "简单文本" // 属性的默认值
}
复制代码

根据配置出来的页面,渲染出对应的表单新增页面、表单详情页面,对接好数据提交接口、流程流转接口,就完成了一个低代码平台的基础功能。

扩展功能:自定义组件与事件

用户的需求千变万化,简单的表单不可能满足所有人的需求,有的项目里可能还有一些定制化的功能,这种情况下就需要给用户可以自己扩展的能力。在表单引擎中我们加入了自定义组件,支持用户自己编写渲染代码,在表单的局部区域内进行渲染。

同时,还有事件支持,当点击了某个表单组件或者它绑定的数据改变的时候触发事件,提供了一系列简单的内置表单API,方便对表单进行联动,同时也支持用户自定义代码,提供了很大的灵活性。

另外,表单还支持将拖拽生成的页面转为Vue代码,这是提供给开发者的高级功能,能够实现更大的灵活性。

面向的用户

这是表单引擎产品形态的决定性因素,这款产品的用户到底是谁,我们做出来后给谁用。这个将决定我们产品的形态以及各个组件的可配置属性。

我们产品面向的用户主要是业务人员,因此我们的组件设计要尽可能面向业务,而不是面向开发人员,组件在设计上也需要尽量的贴近业务,组件也不需要那么多的配置项属性,比如label的宽度、高度、是否可清空、是否可编辑代码等,这些属性我们可以部分内置,部分去掉;对于传统的24列栅格布局,大多数业务人员也并不了解,我们只需要做到一行2列,一行3列等这种简单易懂的形态。

用户群体决定了我们的产品形态,因此我们的组件尽量偏向业务,包含了一些常见的业务组件,比如部门、人员的选择、签批组件等,而在组件的配置项上也尽可能的精简,每个基本只保留4-5个可配置项。市面上较多的开源产品,它们大多可以复刻elementUI中表单组件的所有属性,然而,这是面向开发人员的,业务人员需要的是尽量少的配置和尽量多的业务组件。

一个项目面向的用户群体不同,做法也会大不一样,更多的了解产品,而不是只停留在代码上。

存在的问题

1、我司在表单引擎之前有一套低代码平台,不过当时的表单全是代码编写的。应用迁移的过程中原有的开发人员倾向于直接复制前期的代码过来,而新平台的代码支持不全,导致问题较多。

2、项目场景需求千变万化,产品经理与项目经理在设计功能时没有考虑当前平台的能力,出现不支持的需求,经常使用自定义代码编辑表单,拖拽生成的表单应用较少。

思考

1、新平台做完后没有及时更新帮助文档,也没有排出写文档的时间,一群开发与产品的自我满足,项目之外的人员一脸懵逼,完全不知道怎么用,因此便出现项目迁移过程中他们更倾向使用自己属性的代码编辑,而新出的拖拽功能无人问津。产品功能很重要,但是帮助文档也很重要,没有文档的产品不是一个合格的产品。

2、低代码平台虽然火热,目前看的到更多是前端页面、表单场景的低代码化。然而这一块面对外部客户的需求可能就没那么好用了,需求千变万化,不可能覆盖住全部场景,低代码平台更多的是保持后端数据增删改查、流程流转的接口逻辑复用,简单的前端低代码很难满足所有需求。

3、低代码平台主要的重点是前端页面的快速搭建,但是搭建出来的页面还需要跟业务绑定,可以提交数据、编辑数据,可以流转下去,单纯的搭建出一个前端页面并没有什么意义。

文章分类
前端
文章标签