买专利卖专利找龙图腾，真高效！ 查专利查商标用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：表单内容可根据用户角色和权限来控制其对表单的、编辑和查看操作，确保数据的安全性和完整性。

全文数据：

权利要求：

百度查询： 江西果康信息科技有限公司 基于动态拖拽多种控件实现表单智能创建技术