买专利卖专利找龙图腾,真高效! 查专利查商标用IPTOP,全免费!专利年费监控用IP管家,真方便!
申请/专利权人:江西果康信息科技有限公司
摘要:本发明提出一种基于动态拖拽多种控件实现表单智能创建技术,其特征是:在WEB端页面,根据每个控件都是一个Vue组件的基础上,并且具有统一的接口、数据结构时,选择可拖拽控件中的文本框、单选框、复选框、等到页面容器内生成表单。生成表单后可以重新排序、删除、显示、隐藏、编写表单校验逻辑、表单样式。本发明的目的是:通过让用户自行拖拽可选控件组成表单,智能生成定制化表单,表单可多页面复用。
主权项:1.一种基于动态拖拽多种控件实现表单智能创建技术,其特征在于,包括如下步骤:步骤S1:安装必要的库,如VUEdraggable、ElementUI等等;步骤S2:引入库和样式;步骤S3:WEB前端创建一个可视化的表单设计界面,在左侧空闲区域可放入可选控件,上侧或下侧可放入操作按钮如清空页面、返回上一次操作、预览实际页面等等;步骤S4:左侧控件容器中,放入基础常用可拖拽的ElementUI组件控件如:输入框、文本框、时间选择器、单选框、多选框、按钮、标题文字、上传文件、图片上传、富文本框、滑块控制器、分割线等等;这些控件以图标或缩略图的形式显示在设计区域中,方便用户进行拖拽操作;步骤S5:用户可以通过鼠标将这些控件拖拽到设计区域的指定位置,监听拖拽事件,捕获相关数据,在拖拽过程中,根据拖拽容器的位置计算控件的新位置,根据计算出的新位置,动态的更新控件的样式如高度、宽度、距离周围的边距;步骤S6:当用户完成控件的拖拽后,获取控件的类型数据以及具体位置信息来生成相对应的代码,这些代码将在后续用于生成的动态表单的源码;步骤S7:每一个拖拽出来的控件,都有一个唯一的时间戳标识符、位置点位属性,当控件位置发生改变时,将会自动把新的点位去覆盖旧点位,如果删除该控件,该控件的唯一时间戳标识符以及位置点位属性一起清空;步骤S8:表单设计给每个控件设置样式定义,如颜色、字体大小、边框等等可复用的样式,也可以根据需求定义样式,在控件上面去绑定单独的样式;步骤S9:表单控件可添加校验的逻辑,如是否为必填项、数据长度限制等等,一些特殊的需要校验格式的控件,如邮箱、手机号、身份证号;步骤S10:根据需求设计多款常用表单模板数据,直接拖拽引用整个表单,在模板基础上加上新数据,可高效快速完成表单设计;步骤S11:表单设计完成后,可通过预览功能查看生成的表单效果,如果不满意,可随时修改并且重新生成数据,这种预览以及修改功能可让用户实时查看表单效果,并且根据实际情况来按需调整,生成的表单做到符合用户的需求,如果不小心操作失误删除了以及拖拽的控件,可返回上一次的操作;页面做有缓存功能,如不小心关闭当前可视化的表单设计界面,下次再点击新增动态拖拽表单时,会恢复上一次存储的数据;步骤S12:表单查看完生成的效果后,可点击保存把表单数据转为JSON格式,传递给后台,后台接收到数据后,会自动生成一条新数据给前端展示;步骤S13:表单生成后的数据根据后台返回形成分页数据,可自行维护该表单的启用状态;步骤S14:表单配置完毕保存到后台,使用时后台返回一个list集合配置数据给前端选择,当前页面渲染哪个表单数据;步骤S15:表单内容可根据用户角色和权限来控制其对表单的、编辑和查看操作,确保数据的安全性和完整性。
全文数据:
权利要求:
百度查询: 江西果康信息科技有限公司 基于动态拖拽多种控件实现表单智能创建技术
免责声明
1、本报告根据公开、合法渠道获得相关数据和信息,力求客观、公正,但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解,仅供参考使用,不能作为本公司承担任何法律责任的依据或者凭证。