flowable 配置自定义表单_基于react/vue搭建一个通用的表单管理配置平台

前言

熟悉我的朋友可能会知道，我一向是不写热点的。为什么不写呢？是因为我不关注热点吗？其实也不是。有些事件我还是很关注的，也确实有不少想法和观点。 但我一直奉行一个原则，就是：要做有生命力的内容。

这篇文章是一篇应用性极强的文章，我们通过一个实际的应用场景，去解决某一类的问题，提供一种或者几种解决方案，来探索技术的魅力。接下来笔者主要分析表单定制平台的实现思路和技术方案，来实现一个类似于金数据或者问卷星一样的表单配置平台，大家也可以基于此方案，扩展出功能更加强大的可视化平台。

正文

为什么要做一个这样的平台呢？一方面是因为笔者多年来一直服务于B端产品，对于动态表单以及配置化表单有一定的项目积累，并且深知配置化表单的价值所在。举一个很传统的B端表单配置化的例子：传统2B企业在提供saas服务时，为了满足不同企业的定制化需求，往往会给企业客户提供定制化或者自由配置的功能，如下图：

对于saas系统而言，软件即服务，在提供基础服务的同时，同样要满足用户个性化需求，所以传统的saas软件提供商往往会提供给客户自由配置的空间，这种自由配置的桥梁就是通过表单，举一个简单的例子：

通过这种方法就可以定制不同风格的企业产品，这里只是举了个比较简单的例子，往往实际项目中会更加复杂，可能会有几十个配置项，当然这种模式是比较传统的配置化方案，也仅仅是saas软件提供的很小的一个服务模块。目前主流的做法是采用可视化方案，而且国内也有非常成熟的方案，但基本的思想是一致的，只不过后者的体验更好，操作难度更低。

笔者简单介绍一下saas，方便大家更容易理解其模式：

saas(软件即服务)是一种云计算产品，为用户提供对供应商云端软件的访问。用户无需在其本地设备上安装应用。相反，应用驻留在远程云网络中，通过 Web 或 API 进行访问。通过应用，用户可以存储和分析数据，并可进行项目协作。

类似的云计算产品也有很多，比如Paas（平台即服务），Iaas（基础架构即服务）等，感兴趣的朋友可以学习了解一下。

以上介绍更多的是为了让大家理解笔者设计这套平台的基本背景，我们还可以举个更实际的例子就是金数据或者问卷星的表单配置模式，用户可以在管理后台定制自己的表单，并生成一个可访问的链接来向目标用户发放问卷，填写信息，收集信息，最后实现数据分析的目的。

本文介绍的表单定制平台,也同样支持表单管理,表单数据分析, 表单数据收集, 表单定制等功能, 笔者将采用比较熟悉的技术栈react以及第三方ui库antd4.0来开发, 后端采用node + koa来设计路由接口.

设计思路

实现效果与分析

1. 表单定制管理列表

管理列表主要用来查看我们配置的表单模板,分析不同表单模板收集的数据,对表单模板进行编辑删除等操作.

2. 表单定制页面

由上图可知表单定制页面主要用来编辑自定义表单模板,我们可以添加表单标题,表单字段等,目前提供了几种自定义表单控件如下: 文本框 多行文本框 下拉框 单选框 复选框 文件上传控件

基本涵盖了我们所需要的所有表单业务场景.由上图可知我们可以在任意位置插入自定义字段,同时可以编辑修改删除表单字段.如果想象力再大一点,我们可以基于它来实现不仅仅是表