前言
本次在做低代码平台时，遇见了一个稍微有些复杂的业务场景，需求描述：
- 根据用户拖拽表单生成的JSON数据(本次采用了
FormGenerator去生成JSON数据)，生成对应的所有组件的下拉列表，并在流程图的边（节点连接线）上添加条件判断。 - 当用户点击流程图的边时，生成该边上对应的所有组件的下拉列表，在点击某个组件的选项后，生成对应组件的下拉列表组件，在用户取消选择后，对应组件的下拉列表组件随之消失。
- 针对不同组件对应的下拉列表，要求有不同的条件判断，例如：数字类型的需要有范围选择、大小判断、为空不为空，等条件；文本组件有包含不包含，等条件。
- 当用户选择后，自动保存到当前边对应的JSON数据，若用户的选择无效，则不保存。
- 要求能够回显用户选择的数据，即点击不同边时，回显该边上JSON对应的所有下拉列表组件。
经过梳理后，其实逻辑看起来也不是特别复杂，不过当时确实是有点被难倒了，主要原因就是一些细节性的问题没有考虑到，然后流程图也需要去学习如何操作，时间上有些紧，同时也在思考如何写能够更便于维护。其次就是没有一个清晰的该处业务的流程思考，不过后来捋了捋也就差不多啦，所以说三思而后行啊。
三思而后行：多思考几遍，自己又觉得自己行了哈哈
Logicflow和FromGenerator就不多说了，虽然也有点坑，但都是轮子，主要记录下这块业务场景如何实现的。
组件展示
- 包含所有组件的下拉列表
- 对应组件的下拉列表组件
- 根据条件改变输入形式
具体实现
JSON数据处理
处理JSON，不得不提一嘴ES6结构赋值，属实是属性提取的利器。
原JSON大概长这个样子，为了区别不同类型的组件，和表单那边的小伙伴约定了两个字段，tag用于区分组件输入框的类型，typeNumber用于区分下拉列表内容有哪些
{
"fields": [
{
"__config__": {
"label": "单行文本",
"labelWidth": null,
"showLabel": true,
"changeTag": true,
"tag": "el-input",
"tagIcon": "input",
"required": true,
"layout": "colFormItem",
"span": 24,
"document": "https://element.eleme.cn/#/zh-CN/component/input",
"regList": [],
"formId": 101,
"renderKey": 1649927471934,
"typeNumber": 0
},
"__slot__": {
"prepend": "",
"append": ""
},
"placeholder": "请输入单行文本",
"style": {
"width": "100%"
},
"clearable": true,
"prefix-icon": "",
"suffix-icon": "",
"maxlength": null,
"show-word-limit": false,
"readonly": false,
"disabled": false,
"__vModel__": "field101"
},
{
"__config__": {
"label": "多行文本",
"labelWidth": null,
"showLabel": true,
"tag": "el-input",
"tagIcon": "textarea",
"required": true,
"layout": "colFormItem",
"span": 24,
"regList": [],
"changeTag": true,
"document": "https://element.eleme.cn/#/zh-CN/component/input",
"formId": 102,
"typeNumber": 1,
"renderKey": 1649927472786
},
"type": "textarea",
"placeholder": "请输入多行文本",
"autosize": {
"minRows": 4,
"maxRows": 4
},
"style": {
"width": "100%"
},
"maxlength": null,
"show-word-limit": false,
"readonly": false,
"disabled": false,
"__vModel__": "field102"
},
{
"__config__": {
"label": "级联选择",
"showLabel": true,
"labelWidth": null,
"tag": "el-cascader",
"tagIcon": "cascader",
"layout": "colFormItem",
"defaultValue": [
1,
2
],
"dataType": "dynamic",
"span": 24,
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element.eleme.cn/#/zh-CN/component/cascader",
"formId": 111,
"typeNumber": 9,
"renderKey": 1649942215947
},
"options": [
{
"id": 1,
"value": 1,
"label": "选项1",
"children": [
{
"id": 2,
"value": 2,
"label": "选项1-1"
}
]
}
],
"placeholder": "请选择级联选择",
"style": {
"width": "100%"
},
"props": {
"props": {
"multiple": false,
"label": "label",
"value": "value",
"children": "children"
}
},
"show-all-levels": true,
"disabled": false,
"clearable": true,
"filterable": false,
"separator": "/",
"__vModel__": "field111"
},
{
"__config__": {
"label": "计数器",
"showLabel": true,
"changeTag": true,
"labelWidth": null,
"tag": "el-input-number",
"tagIcon": "number",
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"document": "https://element.eleme.cn/#/zh-CN/component/input-number",
"formId": 105,
"typeNumber": 2,
"renderKey": 1649927477883
},
"placeholder": "计数器",
"step": 1,
"step-strictly": false,
"controls-position": "",
"disabled": false,
"__vModel__": "field105"
},
{
"__config__": {
"label": "下拉选择",
"showLabel": true,
"labelWidth": null,
"tag": "el-select",
"tagIcon": "select",
"layout": "colFormItem",
"span": 24,
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element.eleme.cn/#/zh-CN/component/select",
"formId": 106,
"typeNumber": 6,
"renderKey": 1649927484505
},
"__slot__": {
"options": [
{
"label": "选项一",
"value": 1
},
{
"label": "选项二",
"value": 2
}
]
},
"placeholder": "请选择下拉选择",
"style": {
"width": "100%"
},
"clearable": true,
"disabled": false,
"filterable": false,
"multiple": false,
"__vModel__": "field106"
},
{
"__config__": {
"label": "单选框组",
"labelWidth": null,
"showLabel": true,
"tag": "el-radio-group",
"tagIcon": "radio",
"changeTag": true,
"layout": "colFormItem",
"span": 24,
"optionType": "default",
"regList": [],
"required": true,
"border": false,
"document": "https://element.eleme.cn/#/zh-CN/component/radio",
"formId": 107,
"typeNumber": 4,
"renderKey": 1649927491036
},
"__slot__": {
"options": [
{
"label": "选项一",
"value": 1
},
{
"label": "选项二",
"value": 2
}
]
},
"style": {
},
"size": "medium",
"disabled": false,
"__vModel__": "field107"
},
{
"__config__": {
"label": "多选框组",
"tag": "el-checkbox-group",
"tagIcon": "checkbox",
"defaultValue": [],
"span": 24,
"showLabel": true,
"labelWidth": null,
"layout": "colFormItem",
"optionType": "default",
"required": true,
"regList": [],
"changeTag": true,
"border": false,
"document": "https://element.eleme.cn/#/zh-CN/component/checkbox",
"formId": 108,
"typeNumber": 5,
"renderKey": 1649927491380
},
"__slot__": {
"options": [
{
"label": "选项一",
"value": 1
},
{
"label": "选项二",
"value": 2
}
]
},
"style": {
},
"size": "medium",
"disabled": false,
"__vModel__": "field108"
},
{
"__config__": {
"label": "日期选择",
"tag": "el-date-picker",
"tagIcon": "date",
"defaultValue": null,
"showLabel": true,
"labelWidth": null,
"span": 24,
"layout": "colFormItem",
"required": true,
"regList": [],
"changeTag": true,
"document": "https://element.eleme.cn/#/zh-CN/component/date-picker",
"formId": 110,
"typeNumber": 3,
"renderKey": 1649927506700
},
"placeholder": "请选择日期选择",
"type": "date",
"style": {
"width": "100%"
},
"disabled": false,
"clearable": true,
"format": "yyyy-MM-dd",
"value-format": "yyyy-MM-dd",
"readonly": false,
"__vModel__": "field110"
}
]
最低0.47元/天 解锁文章
1788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
