通俗易懂动态表单自定义字段解决方案

技术分享 11个月前 (03-13) 0 999+

关注

动态表单自定义字段解决方案

1. 背景：

有些项目可能会有要求，客户可以自定义设计字段，并且字段还需要在后台设置可展示、可搜索。

2. 场景：

比如说报名场景，我们并不知道客户想让用户填哪些东西。
下面我就举个例子，场景前提介绍：

我有一个平台，动态表单是平台功能，可以独立运行
我有一个比赛系统，比赛系统是平台下的产品，依赖平台生存
我需要在平台上设计一个动态表单功能可以提供给子产品使用

实现大概过程：

在平台创建动态报名表单
比赛系统创建比赛选择创建的报名表单
搜索、展示报名数据

3. 实现步骤

3.1 设计动态表单

使用市面上的开源表单设计器修改一下生成结构，改成我们想要的结构如：

{   "form": "apply",   "form_name": "报名申请表",   "form_desc": "报名申请表，请各位选手认真填写，填写前请认真阅读报名要求，如不符将会拒绝",   "start_time": "2023-10-19 09:29:37",   "end_time": "2023-10-19 09:29:37",   "create_time":"2023-10-19 09:29:37",   "pay": true,   "pay_price": 100,   "pay_desc": "支付描述",   "system_module": "ims",   "system_module_router": "",   "system": "赛事管理系统",   "theme": "default",   "cssCustom": "",   "ruleJsCustom": "",   "modify": "已提交数据是否可修改，0-不可修改/1-不可修改/3-部分可修改",   "children_unique": [     "uuid"   ],   "children": [      {       "filed": "contestId",       "type": "hiddenFiled", 	  "value": "00a0ca716cc0487d909b5c8654d1cbc0" 	  "column_name": "比赛id",       "column_desc": "比赛id隐藏字段",     },     {       "id": "",       "sort": 1,       "filed": "name",       "column_name": "姓名",       "column_desc": "姓名与身份证上的姓名必须相同",       "type": "text",       "require": true,       "min": 2,       "max": 30,       "ruleText": "姓名必须填写，且字符在2-30个范围内"     },     {       "id": "",       "sort": 2,       "filed": "participation_type",       "column_name": "参加身份",       "column_desc": "个人/企业",       "type": "radio",       "require": true,       "default": "1",       "choose": [         { "label": "个人", "value": "1" },         { "label": "企业", "value": "2" }       ],       "ruleText": "参加身份必须选择"     },     {       "id": "",       "sort": 3,       "filed": "hobby",       "column_name": "爱好",       "column_desc": "爱好Tag",       "type": "checkbox",       "require": false,       "min": 1,       "max": 3,       "choose": [         { "label": "唱歌", "value": "1" },         { "label": "跳舞", "value": "2" },         { "label": "打球", "value": "2" },         { "label": "滑雪", "value": "2" }       ],       "ruleText": "爱好必须选择1-3个"     },     {       "sort": 4,       "filed": "introduce",       "column_name": "介绍",       "column_desc": "尽量写一些特长优势",       "type": "textarea",       "require": true,       "max": 500,       "ruleText": "介绍字符在500个范围内"     },     {       "id": "",       "sort": 5,       "filed": "tel",       "column_name": "电话号码",       "column_desc": "电话号码，只支持中国地区电话号码",       "type": "number",       "require": true,       "rule": "tel",       "ruleText": "电话号码填写错误"     },     {       "id": "",       "sort": 6,       "filed": "birthday",       "column_name": "生日",       "column_desc": "出生年月日",       "type": "year / date / dateTime",       "require": false,       "format": "yyyy-mm-dd"     }     .......   ] }

该结构支持许多自定义设计，如是否需要支付、哪些角色可以提交数据、字段数据查重、提交过的数据是否能修改、常见字段设计、定制化组件等等。这些数据结构存在mysql，这一部分主要是和前端商量怎么样把客户想要设计的表单渲染出来，最终这段json，会渲染成html、js代码，然后返回到前端。

3.2 后端接受表单创建请求

后端在收到创建动态表单请求的时候，需要在mongodb中创建一个集合，一个集合对应着一个表单类型。

3.3 用户填写数据，前端发送用户填写的数据到后台

后端平台收到这个请求，通过表单配置中的system_module区分，转发到子产品中，子产品做一些业务操作、验证等等，验证通过存到mongodb对应集合中，例如

{ 	"_id": "4dc000acd35648c5b273f52b80fa8166", 	"form": "apply", 	"userId": 1001, 	... 	"children": [ 	    { 			"filed": "contestId", 			"id": "1", 			"type": "hiddenFiled", 			"label": "比赛Id", 			"value": "00a0ca716cc0487d909b5c8654d1cbc0", 			"searchText": "第十届互联网大赛" 		}, 		{ 			"filed": "name", 			"filed": "", 			"id": "2", 			"type": "text", 			"label": "姓名", 			"value": "张三", 			"searchText": "张三" 		}, 		{ 			"filed": "participation_type", 			"id": "3", 			"type": "radio", 			"label": "参加身份", 			"value": "0", 			"ItemText": "个人", 			"searchText": "个人" 		} 	] }