通俗易懂动态表单自界说字段解决方案

动态表单自界说字段解决方案

1. 背景：

有些项目可能会有要求，客户可以自界说设计字段，并且字段还需要在后台设置可展示、可搜索。
2. 场景：

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

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

实现大概过程：

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

3. 实现步骤

3.1 设计动态表单

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

1. {
2.   "form": "apply",
3.   "form_name": "报名申请表",
4.   "form_desc": "报名申请表，请各位选手认真填写，填写前请认真阅读报名要求，如不符将会拒绝",
5.   "start_time": "2023-10-19 09:29:37",
6.   "end_time": "2023-10-19 09:29:37",
7.   "create_time":"2023-10-19 09:29:37",
8.   "pay": true,
9.   "pay_price": 100,
10.   "pay_desc": "支付描述",
11.   "system_module": "ims",
12.   "system_module_router": "",
13.   "system": "赛事管理系统",
14.   "theme": "default",
15.   "cssCustom": "",
16.   "ruleJsCustom": "",
17.   "modify": "已提交数据是否可修改，0-不可修改/1-不可修改/3-部分可修改",
18.   "children_unique": [
19.     "uuid"
20.   ],
21.   "children": [
22.      {
23.       "filed": "contestId",
24.       "type": "hiddenFiled",
25.           "value": "00a0ca716cc0487d909b5c8654d1cbc0"
26.           "column_name": "比赛id",
27.       "column_desc": "比赛id隐藏字段",
28.     },
29.     {
30.       "id": "",
31.       "sort": 1,
32.       "filed": "name",
33.       "column_name": "姓名",
34.       "column_desc": "姓名与身份证上的姓名必须相同",
35.       "type": "text",
36.       "require": true,
37.       "min": 2,
38.       "max": 30,
39.       "ruleText": "姓名必须填写，且字符在2-30个范围内"
40.     },
41.     {
42.       "id": "",
43.       "sort": 2,
44.       "filed": "participation_type",
45.       "column_name": "参加身份",
46.       "column_desc": "个人/企业",
47.       "type": "radio",
48.       "require": true,
49.       "default": "1",
50.       "choose": [
51.         { "label": "个人", "value": "1" },
52.         { "label": "企业", "value": "2" }
53.       ],
54.       "ruleText": "参加身份必须选择"
55.     },
56.     {
57.       "id": "",
58.       "sort": 3,
59.       "filed": "hobby",
60.       "column_name": "爱好",
61.       "column_desc": "爱好Tag",
62.       "type": "checkbox",
63.       "require": false,
64.       "min": 1,
65.       "max": 3,
66.       "choose": [
67.         { "label": "唱歌", "value": "1" },
68.         { "label": "跳舞", "value": "2" },
69.         { "label": "打球", "value": "2" },
70.         { "label": "滑雪", "value": "2" }
71.       ],
72.       "ruleText": "爱好必须选择1-3个"
73.     },
74.     {
75.       "sort": 4,
76.       "filed": "introduce",
77.       "column_name": "介绍",
78.       "column_desc": "尽量写一些特长优势",
79.       "type": "textarea",
80.       "require": true,
81.       "max": 500,
82.       "ruleText": "介绍字符在500个范围内"
83.     },
84.     {
85.       "id": "",
86.       "sort": 5,
87.       "filed": "tel",
88.       "column_name": "电话号码",
89.       "column_desc": "电话号码，只支持中国地区电话号码",
90.       "type": "number",
91.       "require": true,
92.       "rule": "tel",
93.       "ruleText": "电话号码填写错误"
94.     },
95.     {
96.       "id": "",
97.       "sort": 6,
98.       "filed": "birthday",
99.       "column_name": "生日",
100.       "column_desc": "出生年月日",
101.       "type": "year / date / dateTime",
102.       "require": false,
103.       "format": "yyyy-mm-dd"
104.     }
105.     .......
106.   ]
107. }

复制代码

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

后端在收到创建动态表单请求的时间，需要在mongodb中创建一个集合，一个集合对应着一个表单类型。
3.3 用户填写数据，前端发送用户填写的数据到后台

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

1. {
2.         "_id": "4dc000acd35648c5b273f52b80fa8166",
3.         "form": "apply",
4.         "userId": 1001,
5.         ...
6.         "children": [
7.             {
8.                         "filed": "contestId",
9.                         "id": "1",
10.                         "type": "hiddenFiled",
11.                         "label": "比赛Id",
12.                         "value": "00a0ca716cc0487d909b5c8654d1cbc0",
13.                         "searchText": "第十届互联网大赛"
14.                 },
15.                 {
16.                         "filed": "name",
17.                         "filed": "",
18.                         "id": "2",
19.                         "type": "text",
20.                         "label": "姓名",
21.                         "value": "张三",
22.                         "searchText": "张三"
23.                 },
24.                 {
25.                         "filed": "participation_type",
26.                         "id": "3",
27.                         "type": "radio",
28.                         "label": "参加身份",
29.                         "value": "0",
30.                         "ItemText": "个人",
31.                         "searchText": "个人"
32.                 }
33.         ]
34. }

复制代码

3.4 后台数据逻辑

前置工作我们都已经做好了，现在需要怎么样和后台数据关联起来。
现在来到了后台，前端现在连有哪些字段都不知道，所以后台需要回传表单有什么数据给前端。然后一起约定搜索格式，什么type的表单可以搜索，比如说时间、数字可以区间查询、text可以模糊查询，后端需要把这个格式转化成数据库搜索。
3.5 优点和缺点

优点：满足动态表单需求，灵活性高
缺点：动态表单操纵有难度，基本需要运维人员运维，适合展示多，逻辑少的场景

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。