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

🔥需求背景

我司业务同事在抓取到候选人的简历之后,经常会出现,很多意向候选人简历信息不完整,一个个打电话确认的情况,严重影响了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>

🔥反思优化

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

🔥后续扩展

基于此模块,二次开发 “候选人求职意向调查问卷“,“职业性格测评问卷“等模块, 新增(评分、跳题、一题一页、表格题目、)等功能,使得系统更加健壮,满足业务场景,实现业务需求

🔥结语

通过上述实践,我们不仅解决了业务上的燃眉之急,也为低代码平台的深度应用提供了宝贵经验。未来,我们计划继续深化低代码平台的建设,探索更多创新功能,如集成更多问卷元素(如评分、跳题)、支持多页面表单等,不断拓展平台的边界,为企业数字化转型赋能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/361552.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迈巴赫S480升级增强现实AR抬头显示hud比普通抬头显示HUD更好用吗

增强AR实景抬头显示HUD&#xff08;Augmented Reality Head-Up Display&#xff09;是一种更高级的驾驶辅助技术&#xff0c;相比于普通抬头显示HUD&#xff0c;它提供了更丰富、更具沉浸感的驾驶体验。以下是它比普通抬头显示HUD多的一些功能&#xff1a; • 信息呈现方式&am…

七天速通javaSE:第二天 基础:标识符与数据类型

文章目录 前言一、注释与标识符1. 注释2. 标识符2.1 标识符2.2 关键字 二、数据类型1. 语言类型2. 数据类型2.1 基本数据类型2.2引用数据类型 三、类型转换1. 自动转换2. 强制转换&#xff08;不建议&#xff09; 四、代码规范 前言 今天将学习Java语法的基础&#xff0c;认识…

idea添加文档注释

一、easy javadoc插件 在settings的plugins中下载easy javadoc插件。 安装完成后重启idea&#xff0c;再次打开settings界面。会出现easyDoc相关配置。 二、设置模版以及使用 类描述模版参考设置&#xff1a; /** * 类描述 -> * * Author: ywz * Date: $Date$ */ 方法描述…

【SSM】

Spring常见面试题总结 Spring 基础 什么是 Spring 框架? Spring 是一款开源的轻量级 Java 开发框架&#xff0c;旨在提高开发人员的开发效率以及系统的可维护性。 我们一般说 Spring 框架指的都是 Spring Framework&#xff0c;它是很多模块的集合&#xff0c;使用这些模块…

AI助力校园安全:EasyCVR视频智能技术在校园欺凌中的应用

一、背景分析 近年来&#xff0c;各地深入开展中小学生欺凌行为治理工作&#xff0c;但有的地方学生欺凌事件仍时有发生&#xff0c;严重损害学生身心健康&#xff0c;引发社会广泛关注。为此&#xff0c;教育部制定了《防范中小学生欺凌专项治理行动工作方案》进一步防范和遏…

布隆过滤器(Bloom Filter)

什么是布隆过滤器 它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是否在一个集合中。它的优点是空间效率和查询时间都比一般的算法要好的多&#xff0c;缺点是有一定的误识别率和删除困难。主要用于判断一个元素是否在一个集合中。 布…

Go语言学习:每日一练1

Go语言学习&#xff1a;每日一练1 目录 Go语言学习&#xff1a;每日一练1变量声明函数定义流程控制 ifrange遍历switch 变量声明 package main//定义变量 var a 1 const Message “hello,world”func main() {b : 2 //短变量声明var c 3c TestMethod(a, b, c)} //定义函数…

铸就创新之盾:知识产权管理体系认证,赋能企业卓越前行

在当今知识经济时代&#xff0c;知识产权已成为企业竞争力的核心要素。知识产权的有效管理不仅关乎企业的技术创新和市场竞争力&#xff0c;更是推动整个行业乃至社会经济发展的重要驱动力。随着全球化进程的加速&#xff0c;知识产权的保护和管理愈发受到重视&#xff0c;企业…

国产车规MCU OTA方案总结

目录 1. 旗芯微FC4150 OTA 2. 云途YTM32B1MD OTA 3.小结 今天没有废话&#xff0c;啪一下很快&#xff0c;把目前接触到的国内带eFlash的车规MCU硬件OTA方案做一个梳理。 1. 旗芯微FC4150 OTA 旗芯微FC4150是基于ARM Cortex(快去审核下官网介绍&#xff0c;少了个T)-M4F内…

【low-ui-vue】实现原生可扩展动态表格组件

本文字数&#xff1a;3520字 预计阅读时间&#xff1a;20分钟 所谓动态列的表格&#xff0c;就是列数不固定。像广为使用的elementUI的table组件就是表头写死的&#xff0c;这种也叫列数固定的表格。 01 效果 当然&#xff0c;动态性增加了&#xff0c;当然要做出一定“牺牲”。…

C#基于SkiaSharp实现印章管理(2)

上一篇文章最后提到基于System.Text.Json能够序列化SKColor对象&#xff0c;但是反序列化时却无法解析本地json数据。换成Newtonsoft.Json进行序列化和反序列化也是类似的问题。   通过百度及查看微软的帮助文档&#xff0c;上述情况下需自定义转换类以处理SKColor类型数据的…

Vite响应Ajax请求

Vite响应Ajax请求 陈拓 2024/06/20-2024/06/24 1. 概述 http-server、live-server 等常用于本地测试和开发的http服务器不能很好的支持 ES 模块&#xff0c;在测试ES 模块时浏览器控制台经常显示错误&#xff1a; Failed to load module script: Expected a JavaScript modu…

C++用Crow实现一个简单的Web程序,实现动态页面,向页面中输入数据并展示

Crow是一个轻量级、快速的C微框架&#xff0c;用于构建Web应用程序和RESTful API。 将处理前端页面的POST请求以添加数据的逻辑添加到 /submit 路由中&#xff0c;并添加了一个新的路由 / 用于返回包含输入框、按钮和表格的完整页面。当用户向表格添加数据时&#xff0c;JavaS…

021.合并两个有序链表,递归和遍历

题意 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 难度 简单 标签 链表、排序 示例 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]…

PCM、WAV,立体声,单声道,正弦波等音频素材

1&#xff09;PCM、WAV音频素材&#xff0c;分享给将要学习或者正在学习audio开发的同学。 2&#xff09;内容属于原创&#xff0c;若转载&#xff0c;请说明出处。 3&#xff09;提供相关问题有偿答疑和支持。 常用的Audio PCM WAV不同采样率&#xff0c;不同采样深度&#…

CubeFS - 新一代云原生存储系统

CubeFS 是一种新一代云原生存储系统,支持 S3、HDFS 和 POSIX 等访问协议,支持多副本与纠删码两种存储引擎,为用户提供多租户、 多 AZ 部署以及跨区域复制等多种特性。 官方文档 CubeFS 作为一个云原生的分布式存储平台,提供了多种访问协议,因此其应用场景也非常广泛,下面…

DataGrip 2024 po for Mac 数据库管理工具解

Mac分享吧 文章目录 效果一、下载软件二、开始安装1、双击运行软件&#xff08;适合自己的M芯片版或Intel芯片版&#xff09;&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功3、打开访达&#xff0c;点击【文…

MySQL进阶-索引-使用规则-最左前缀法则和范围查询

文章目录 1、最左前缀法则2、启动mysql3、查询tb_user4、查看tb_user的索引5、执行计划 profession 软件工程 and age31 and status 06、执行计划 profession 软件工程 and age317、执行计划 profession 软件工程8、执行计划 age31 and status 09、执行计划 status 010、执行…

前端实战:实现块级元素的拖拽与缩放功能

在现代网页开发中&#xff0c;用户交互是一个非常重要的部分。在这篇文章中&#xff0c;我们将详细介绍如何使用原生 JavaScript 实现块级元素的拖拽与缩放功能。具体来说&#xff0c;我们将实现以下功能&#xff1a; 点击并拖动 outer 元素&#xff0c;可以移动整个块。点击并…

利用LinkedHashMap实现一个LRU缓存

一、什么是 LRU LRU是 Least Recently Used 的缩写&#xff0c;即最近最少使用&#xff0c;是一种常用的页面置换算法&#xff0c;选择最近最久未使用的页面予以淘汰。 简单的说就是&#xff0c;对于一组数据&#xff0c;例如&#xff1a;int[] a {1,2,3,4,5,6}&#xff0c;…