logo好方法网

一种基于移动端可拖拽自定义表单组件的实现方法及装置


技术摘要:
本发明提出了一种基于移动端可拖拽自定义表单组件的实现方法及装置。包括:获取当前移动端的屏幕信息,通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配;获取组件拖拽指令,根据该组件拖拽指令将对应组件拖  全部
背景技术:
自定义表单的用途比较广泛,在OA的自定义工作流程以及CMS功能扩展中,自定义 调查中都有涉及到。但目前市面多数的自定义表单系统都是基于PC端设计的,这种自定义 表单系统受到的限制较大,只能使用台式机或笔记本电脑进行操作。 对于移动端,也有表单的应用,但是移动端的表单都是预先设定好了格式,无法轻 易更改,更加实现不了自定义表单的情况,造成了极大的不方便,所以亟需一种方法,能够 实现移动端的表单自定义。 上述内容仅用于辅助理解本发明的技术方案,并不代表承认上述内容是现有技 术。
技术实现要素:
有鉴于此,本发明提出了一种基于移动端可拖拽自定义表单组件的实现方法及装 置,旨在解决现有技术无法实现移动端通过拖拽表单组件实现表单组件自定义的技术问 题。 本发明的技术方案是这样实现的: 一方面,本发明提供了一种基于移动端可拖拽自定义表单组件的实现方法,所述 基于移动端可拖拽自定义表单组件的实现方法包括以下步骤: S1,获取当前移动端的屏幕信息,通过SafeAreaView以及React  Navigation根据 该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配; S2,获取组件拖拽指令,根据该组件拖拽指令将对应组件拖拽到指定位置,并对完 成拖拽的各组件进行数据绑定以及数据缓存,向服务端发送自定义表单组建请求; S3,等待服务端的反馈,根据服务端的反馈完成自定义表单组建,并对该表单进行 命名。 在以上技术方案的基础上,优选的,步骤S1中,获取当前移动端的屏幕信息,通过 SafeAreaView以及React  Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自 定义表单组件页面的适配之前,还包括以下步骤,获取当前移动端操作系统信息,所述操作 系统信息包括:Android系统以及IOS系统,根据该当前移动端操作系统信息通过React  Native框架提高系统的兼容性。 在以上技术方案的基础上,优选的,步骤S1中,获取当前移动端的屏幕信息,通过 SafeAreaView以及React  Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自 定义表单组件页面的适配,还包括以下步骤,获取当前移动端的屏幕信息,所述屏幕信息为 屏幕的高度与宽度之间的比例数据,根据该比例数据通过SafeAreaView以及React  4 CN 111597489 A 说 明 书 2/9 页 Navigation对该移动端的屏幕进行自定义表单组件页面的适配。 在以上技术方案的基础上,优选的,步骤S2中,获取组件拖拽指令,根据该组件拖 拽指令将对应组件拖拽到指定位置,并对完成拖拽的各组件进行数据绑定以及数据缓存, 向服务端发送自定义表单组建请求之前,还包括以下步骤,对完成自定义表单组件页面适 配的屏幕进行界面排版布局,将整个界面上部分作为界面的标题栏,将除去标题栏外的界 面左侧部分作为组件菜单栏,将剩余界面部分作为组件拖拽以及组件编辑区,所述组件菜 单栏用于存放表单组件元素,所述单组件元素包括:单行、单选框、复选框、多行、多选框、日 期、音频、视频、上传图片、地理位置信息、邮箱以及地区。 在以上技术方案的基础上,优选的,步骤S2中,获取组件拖拽指令,根据该组件拖 拽指令将对应组件拖拽到指定位置,并对完成拖拽的各组件进行数据绑定以及数据缓存, 向服务端发送自定义表单组建请求,还包括以下步骤,获取组件拖拽指令,根据该组件拖拽 指令将对应组件拖拽到指定位置,并设定等待时间,实时记录接收下一次拖拽指令的时间, 将该时间大于等待时间时,记录已完成拖拽指令对应组件的信息,并为该组件分配一个表 单ID,获取完成所有拖拽指令对应组件的表单ID,根据这些表单ID生成表单ID查询表,并对 完成拖拽的各组件进行数据绑定以及数据缓存,向服务端发送自定义表单组建请求。 在以上技术方案的基础上,优选的,并对完成拖拽的各组件进行数据绑定以及数 据缓存,还包括以下步骤,对完成拖拽的各组件进行数据绑定以及数据缓存,设置缓存时 间,并实时记录完成拖拽的各组件数据的存储时间,当该存储时间大于缓存时间时,将该完 成拖拽的各组件数据删除,并向用户发送对应报告。 在以上技术方案的基础上,优选的,向服务端发送自定义表单组建请求之后,还包 括以下步骤,当服务端接收到自定义表单组建请求时,从自定义表单组建请求从提取各组 件的名称信息,将各组件的名称转化为拼音拼写,并对转化后的拼音拼写进行查验,当发现 存在重名拼音时,则将重名拼音对应的组件名称转化为英文,完成查验后,将转化完成的各 组件名称重新存入自定义表单组建请求中,并向系统反馈。 更进一步优选的,所述基于移动端可拖拽自定义表单组件的实现装置包括: 屏幕适配模块,用于获取当前移动端的屏幕信息,通过SafeAreaView以及React  Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配; 自定义表单组建模块,用于获取组件拖拽指令,根据该组件拖拽指令将对应组件 拖拽到指定位置,并对完成拖拽的各组件进行数据绑定以及数据缓存,向服务端发送自定 义表单组建请求; 响应模块,用于等待服务端的反馈,根据服务端的反馈完成自定义表单组建,并对 该表单进行命名。 第二方面,所述基于移动端可拖拽自定义表单组件的实现方法还包括一种设备, 所述设备包括:存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的基于 移动端可拖拽自定义表单组件的实现方法程序,所述基于移动端可拖拽自定义表单组件的 实现方法程序配置为实现如上文所述的基于移动端可拖拽自定义表单组件的实现方法的 步骤。 第三方面,所述基于移动端可拖拽自定义表单组件的实现方法还包括一种介质, 所述介质为计算机介质,所述计算机介质上存储有基于移动端可拖拽自定义表单组件的实 5 CN 111597489 A 说 明 书 3/9 页 现方法程序,所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时实现 如上文所述的基于移动端可拖拽自定义表单组件的实现方法的步骤。 本发明的一种基于移动端可拖拽自定义表单组件的实现方法相对于现有技术具 有以下有益效果: (1)通过React  Native框架提高整个系统的兼容性,使系统能够更加适应双平台 (Andriod以及IOS)的屏幕自动适配,保证了整个拖拽自定义过程的稳定性以及高复用性, 提高了用户体验。 (2)通过实时对用户拖拽的组件进行数据存储,能够极大避免数据的丢失,保证整 个自定义表单组件在组建过程的安全性和稳定性。 附图说明 为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本 发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以 根据这些附图获得其他的附图。 图1是本发明实施例方案涉及的硬件运行环境的设备的结构示意图; 图2为本发明基于移动端可拖拽自定义表单组件的实现方法第一实施例的流程示 意图; 图3为本发明基于移动端可拖拽自定义表单组件的实现方法第一实施例的功能模 块示意图。
下载此资料需消耗2积分,
分享到:
收藏