动态表单的技术方案。
（2022年12月13日更新: 最近看了AWT，用这个思路就可以了，没有必要自己创建一套）
前端动态表单技术方案 Alibaba Formily
服务端不直接生成formily schema ， 前后端使用独立的协议由前端转化为 formily schema。
协议模型
Json表达形式
- name 标签的name，表单提交用
- type 标签的类型，可以扩展
- radio
- checkbox
- text
- textarea
- upload
- select
- title 展示标题
- valueType 值的类型，多选的时候使用array
- required 是否必填
- maxLength 最大值
- enums [] 选项枚举
实例
radio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"enums":[
{
"label":"选项1",
"value":"1"
},
{
"label":"选项2",
"value":"2"
}
],
"name":"radioName",
"title":"单选",
"type":"radio",
"valueType":"string"
}
|
checkbox
bool 类型的， 比如是否确认[]
1
2
3
4
5
6
| {
"name":"checkBox1",
"title":"是否确认",
"type":"checkbox",
"valueType":"bool"
}
|
array类型，代选项的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"enums":[
{
"label":"选项1",
"value":"1"
},
{
"label":"选项2",
"value":"2"
}
],
"name":"checkBox2",
"title":"复选",
"type":"checkbox",
"valueType":"array"
}
|
text
1
2
3
4
5
6
7
| {
"maxLength":20,
"name":"textName",
"title":"输入框",
"type":"text",
"valueType":"string"
}
|
textarea
1
2
3
4
5
6
7
8
| {
"maxLength":200,
"name":"textAreaName",
"required":true,
"title":"输入框",
"type":"textarea",
"valueType":"string"
}
|
upload
1
2
3
4
5
6
| {
"name":"uploadName",
"title":"上传文件",
"type":"upload",
"valueType":"array"
}
|
select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"enums":[
{
"label":"选项1",
"value":"1"
},
{
"label":"选项2",
"value":"2"
}
],
"name":"selectName",
"title":"选择框",
"type":"select",
"valueType":"string"
}
|