低代码平台实践：打造高效动态表单解决方案的探索与思考

🔥需求背景

我司业务同事在抓取到候选人的简历之后，经常会出现，很多意向候选人简历信息不完整，一个个打电话确认的情况，严重影响了HR的工作效率，于是提出我们可以通过发送邮件、短信、H5链接的方式来提醒候选人完善自身简历信息和基本信息。

🔥如何实现

经过前期的技术调研，我们决定采用后台低代码方式结合H5动态表单，实现一次开发配置多次使用的目的。HR在后台配置完成之后，对应模板会进入集团模板池，其他同事也可快捷方便引用，大大提高工作效率。

🔥组件库设计

输入框
数字输入框
单选框
多选框
select选择器
时间
评分滑块
省市区选择
开关switch
文本分割
超链接

🔥部分界面

在这里插入图片描述

🔥组件DSL配置基本介绍

{component_type：'base_com' ||  'assist_com',ui_type:input,input_number,selcet,radio,checkboxs....lable_name：label  标题，label_width:  lable宽度，label_tip: lable 提示，placeholder： 默认占位文本，show_clear_icon: 是否显示清除按钮，disable：是否只读，col_width: 布局宽度，8,12,24border_color: 边框颜色，border_radius: 圆角，required: 是否必填，rules：校验规则 Array ；required为 true 时候 触发eg：[{filed_type:字段类型（字符串、URL、邮箱、自定义）），change_type:blur,change, validate_type:验证方式，（长度，正则，最小值，最大值），error_msg:错误信息）}]，is_dict_data: 是否字典取值dict_name: 字典取值 Namefiled__id: 字段id (uuid 生成唯一) - 后端数据库使用 filed_type: string，number，boolen，date  字段类型-后端数据库使用，filed_name:''  字段名称-后端数据库使用，
}

🔥Form DSL配置基本介绍

{form_title: 表单名称，form_size: lager、default、smalllabel_position:left,right,topis_line： 是否行内表单，show_require: 显示必填红色星号show_cancel：显示重置、取消按钮，show_save: 显示提交按钮
}

🔥H5端组件库部分代码

编写对应的组件库组件：（我们业务目前有 20个组件，根据不同的 ui_type 结合 Vue 动态组件渲染我们所配置的动态表单页面）

import InputComponents from '@/components/InputComponents'
import InputNumberComponents from '@/components/InputNumberComponents'
import SelectComponents from '@/components/SelectComponents'
import DatePickerComponents from '@/components/DatePickerComponents'
import RadioComponents from '@/components/RadioComponents'
import CheckboxComponents from '@/components/CheckboxComponents'
import CascaderComponents from '@/components/CascaderComponents'
import RateComponents from '@/components/RateComponents'
import ColorPickerComponents from '@/components/ColorPickerComponents'
import SliderComponents from '@/components/SliderComponents'
import UploadComponents from '@/components/UploadComponents'
import SwitchComponents from '@/components/SwitchComponents'
import TextComponents from '@/components/TextComponents'
import PasswordComponents from '@/components/PasswordComponents'const componentsType = [{type:'input',components:InputComponents,},{type:'input_number',components:InputNumberComponents,},{type:'select',components:SelectComponents,},{type:'date_picker',components:DatePickerComponents,},{type:'radio',components:RadioComponents,},{type:'checkbox',components:CheckboxComponents,},{type:'cascader',components:CascaderComponents,},{type:'rate',components:RateComponents,},{type:'slider',components:SliderComponents,},{type:'upload',components:UploadComponents,},{type:'switch',components:SwitchComponents,},{type:'text',components:TextComponents,},{type:'password',components:PasswordComponents,},
]

🔥基础组件内部实现逻辑

<el-col :span="info.col_width" ><el-form-item :label="info.lable_name" :rules="info.rules"><el-input v-bind="$attrs"  v-model="ruleForm[filed_name]" :placeholder="info.placeholder" :disabled="info.disable" :clearable="info.show_clear_icon"/></el-form-item> 
</el-col>
const props = defineProps({info:{type:Object,default:{}}
})<style lang="scss">
.el-input {.el-input-group__prepend {.el-input__wrapper {border-radius:v-bind(info.border_radius);}}.el-input-border {background: v-bind(info.border_color);padding: 0 12px;}
}
</style>

🔥后端返回数据结构解析结构

pageSetting:{form_setting: {form_title: '表单名称',form_size: 'default',label_position: 'left',label_width:'125px',is_line: false,show_require: true,show_cancel: true,show_save: true},components_list: [{component_type: 'base_com',ui_type: 'input',lable_name: '姓名',label_width: '120px',label_tip: '请填写真实姓名',placeholder: '请输入姓名',show_clear_icon: true,disable: false,col_width: '12',border_color: "#fff",border_radius: '4px',required: true,rules: [{ reauired: true, filed_type: 'string', change_type: 'blur', validate_type: 'length', error_msg: '请输入姓名' }],is_dict_data: fasle,dict_name: '',filed__id: 'bcvssadas1sbx',filed_type: 'string',filed_name: 'customer_name',}...// 多个如此格式的对象]
}

🔥H5端页面渲染部分代码

<el-form:model="sizeForm":inline="data.form_setting.is_line"label-width="data.form_setting.label_width":label-position="data.form_setting.label_position":size="data.form_setting.form_size"><template v-for="(item,index) in data.components_list" :key="index"> <component :is="componentsType.find(i=>i.type == item.ui_type).components"   :info="item" /></template>
</form>

🔥反思优化

交互上：
上线业务使用一段时间之后，反馈表单题目顺序调整比较困难，经过前端和产品的多次讨论决定按照“职责分离”的要求，在表单预览的时候，增加拖拽功能，业务可以按照自己的需求对表单所有的题目顺序进行自定义排列，实现“配置”，“预览"，“产出”这样一个闭环的工作流程，并且不会相互影响。
数据结构上：
和后端同学讨论进一步优化数据结构，每次保存数据时，前端增加逻辑校验，将未配置选项的冗余字段过滤，只保存配置的字段，未配置的字段一律设置默认值，前端的渲染逻辑也得到了大大的精简。渲染速度也得到了进一步提升
便捷性上：
第一批完成的组件数量有限，不能够完全覆盖业务场景，有些组件还有些鸡肋，后续能不能完全实现组件自定义？
引入全局组件库的概念，开始精细化区分“表单组件"，“布局组件”，“辅助组件（分割线、提示文本）” ,“信息展示（播报栏、滚动展示）”，“页面美化（swipper，广告位，card卡片）” 等，进一步完善优化系统。