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

Abstract

本发明提出了一种基于移动端可拖拽自定义表单组件的实现方法及装置。包括：获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。本发明实现了移动端可拖拽自定义表单组件，同时在实现过程中，加强了自定义表单组件的安全性，方便了网课师生的使用，提高了办公学习效率。

Description

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

技术领域

本发明涉及计算机软件技术领域，尤其涉及一种基于移动端可拖拽自定义表单组件的实现方法及装置。

背景技术

自定义表单的用途比较广泛，在OA的自定义工作流程以及CMS功能扩展中，自定义调查中都有涉及到。但目前市面多数的自定义表单***都是基于PC端设计的，这种自定义表单***受到的限制较大，只能使用台式机或笔记本电脑进行操作。

对于移动端，也有表单的应用，但是移动端的表单都是预先设定好了格式，无法轻易更改，更加实现不了自定义表单的情况，造成了极大的不方便，所以亟需一种方法，能够实现移动端的表单自定义。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

发明内容

有鉴于此，本发明提出了一种基于移动端可拖拽自定义表单组件的实现方法及装置，旨在解决现有技术无法实现移动端通过拖拽表单组件实现表单组件自定义的技术问题。

本发明的技术方案是这样实现的：

一方面，本发明提供了一种基于移动端可拖拽自定义表单组件的实现方法，所述基于移动端可拖拽自定义表单组件的实现方法包括以下步骤：

S1，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

S2，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

S3，等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

在以上技术方案的基础上，优选的，步骤S1中，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配之前，还包括以下步骤，获取当前移动端操作***信息，所述操作***信息包括：Android***以及IOS***，根据该当前移动端操作***信息通过ReactNative框架提高***的兼容性。

在以上技术方案的基础上，优选的，步骤S1中，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配，还包括以下步骤，获取当前移动端的屏幕信息，所述屏幕信息为屏幕的高度与宽度之间的比例数据，根据该比例数据通过SafeAreaView以及ReactNavigation对该移动端的屏幕进行自定义表单组件页面的适配。

在以上技术方案的基础上，优选的，步骤S2中，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求之前，还包括以下步骤，对完成自定义表单组件页面适配的屏幕进行界面排版布局，将整个界面上部分作为界面的标题栏，将除去标题栏外的界面左侧部分作为组件菜单栏，将剩余界面部分作为组件拖拽以及组件编辑区，所述组件菜单栏用于存放表单组件元素，所述单组件元素包括：单行、单选框、复选框、多行、多选框、日期、音频、视频、上传图片、地理位置信息、邮箱以及地区。

在以上技术方案的基础上，优选的，步骤S2中，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求，还包括以下步骤，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并设定等待时间，实时记录接收下一次拖拽指令的时间，将该时间大于等待时间时，记录已完成拖拽指令对应组件的信息，并为该组件分配一个表单ID，获取完成所有拖拽指令对应组件的表单ID，根据这些表单ID生成表单ID查询表，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求。

在以上技术方案的基础上，优选的，并对完成拖拽的各组件进行数据绑定以及数据缓存，还包括以下步骤，对完成拖拽的各组件进行数据绑定以及数据缓存，设置缓存时间，并实时记录完成拖拽的各组件数据的存储时间，当该存储时间大于缓存时间时，将该完成拖拽的各组件数据删除，并向用户发送对应报告。

在以上技术方案的基础上，优选的，向服务端发送自定义表单组建请求之后，还包括以下步骤，当服务端接收到自定义表单组建请求时，从自定义表单组建请求从提取各组件的名称信息，将各组件的名称转化为拼音拼写，并对转化后的拼音拼写进行查验，当发现存在重名拼音时，则将重名拼音对应的组件名称转化为英文，完成查验后，将转化完成的各组件名称重新存入自定义表单组建请求中，并向***反馈。

更进一步优选的，所述基于移动端可拖拽自定义表单组件的实现装置包括：

屏幕适配模块，用于获取当前移动端的屏幕信息，通过SafeAreaView以及ReactNavigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

自定义表单组建模块，用于获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

响应模块，用于等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

第二方面，所述基于移动端可拖拽自定义表单组件的实现方法还包括一种设备，所述设备包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的基于移动端可拖拽自定义表单组件的实现方法程序，所述基于移动端可拖拽自定义表单组件的实现方法程序配置为实现如上文所述的基于移动端可拖拽自定义表单组件的实现方法的步骤。

第三方面，所述基于移动端可拖拽自定义表单组件的实现方法还包括一种介质，所述介质为计算机介质，所述计算机介质上存储有基于移动端可拖拽自定义表单组件的实现方法程序，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时实现如上文所述的基于移动端可拖拽自定义表单组件的实现方法的步骤。

本发明的一种基于移动端可拖拽自定义表单组件的实现方法相对于现有技术具有以下有益效果：

(1)通过React Native框架提高整个***的兼容性，使***能够更加适应双平台(Andriod以及IOS)的屏幕自动适配，保证了整个拖拽自定义过程的稳定性以及高复用性，提高了用户体验。

(2)通过实时对用户拖拽的组件进行数据存储，能够极大避免数据的丢失，保证整个自定义表单组件在组建过程的安全性和稳定性。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例方案涉及的硬件运行环境的设备的结构示意图；

图2为本发明基于移动端可拖拽自定义表单组件的实现方法第一实施例的流程示意图；

图3为本发明基于移动端可拖拽自定义表单组件的实现方法第一实施例的功能模块示意图。

具体实施方式

下面将结合本发明实施方式，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式仅仅是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。

如图1所示，该设备可以包括：处理器1001，例如中央处理器(Central ProcessingUnit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(Random Access Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对设备的限定，在实际应用中设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种介质的存储器1005中可以包括操作***、网络通信模块、用户接口模块以及基于移动端可拖拽自定义表单组件的实现方法程序。

在图1所示的设备中，网络接口1004主要用于建立设备与存储基于移动端可拖拽自定义表单组件的实现方法***中所需的所有数据的服务器的通信连接；用户接口1003主要用于与用户进行数据交互；本发明基于移动端可拖拽自定义表单组件的实现方法设备中的处理器1001、存储器1005可以设置在基于移动端可拖拽自定义表单组件的实现方法设备中，所述基于移动端可拖拽自定义表单组件的实现方法设备通过处理器1001调用存储器1005中存储的基于移动端可拖拽自定义表单组件的实现方法程序，并执行本发明实施提供的基于移动端可拖拽自定义表单组件的实现方法。

结合图2，图2为本发明基于移动端可拖拽自定义表单组件的实现方法第一实施例的流程示意图。

本实施例中，所述基于移动端可拖拽自定义表单组件的实现方法包括以下步骤：

S10：获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配。

应当理解的是，当下主流的移动端操作***主要是Android和IOS，众所周知。两种操作***分别使用Java和Object-C开发各自***上的软件，因此首要是使用React Native框架解决跨平台开发，使用React Native框架进行合理的界面布局，并按照不同手机终端屏幕的大小使用SafeAreaView和React Navigation按照宽(高)度(px)*宽(高)度缩放的比例/设备的像素密度以达到自动适配。

应当理解的是，双平台(Android和IOS)手机屏幕自动适配，React Native在布局方面采用的是Flexbox，为保证代码具有更高复用性以及兼容性，需要将Android和IOS的样式尽量保持一致。为了提高代码的兼容性，需要判断当前***的平台是Android或IOS。

应当理解的是，以下对不同一些特殊情况的适配进行了特殊的处理：

在适配视图设置阴影时候需要使用Shadow Propsapi，而该api支持IOS平台，在Android平台下设置阴影则需要使用elevation。

文字的默认背景。在IOS中文字默认背景为灰色，而Android中文字背景默认为透明，在IOS端的布局样式中设置背景色为“transparent”，使两个版本的样式一致。

文字垂直居中。在IOS端中字默认没有下划线，而且垂直居中，在Android中设置下划线透明，并且垂直居中。

底部导航栏。在IOS中使用NavigatorIOS组件实现，但Android中是没有该组件的，通过第三方的react-native-tab-navigator组件实现Android端的地步导航，该组件使用包括：下载react-native-tab-navigator以及将react-native-tab-navigator组件引入到项目的需要使用的文件中。

为了使图标能够适配不同分辨率的设备。需要为每个图标提供1x、2x、3x三种大小的尺寸，然后通过React Native根据屏幕的分辨率来动态的选择显示不同尺寸的图片。

使用一套样式表文件，控制不同平台下的样式，两个平台样式需要处理的样式使用下划线对样式表中的属性进行定义，“height:100”此种写法代表是IOS和Android统一高度为100，而“_height:100”的写法则表示单独的给Android平台设置样式，只在Android平台上生效。并且在需要适配的地方使用三目运算符进行判断。

应当理解的是，IOS11前屏幕的分辨率为375*667，而iPhoneX屏幕的高度则变为812，顶部高出145。所以适配的问题基本围绕UI来解决，并且适配的核心思路就是：【避开安全区域，使布局自适应】

而IOS 11前导航栏的高度是64，其中状态栏(StatusBar)的高度为20。iPhoneX的状态栏(StatusBar)高度变为了44(传感器区域高度)，如果是自定义的TopBar，这部分需要做相应的适配。

iPhoneX的底部增加了虚拟Home区，由于安全区域的原因默认TabBar的高度由49变为83，增高了34(Home区高度)，自定义的底部TabBar改其适配方案。具体实现方法如下：

1.为每个界面的顶部布局和底部有导航的布局曾加高度，修改PaddingTop和PaddingBottom。同时为了iOS11之前同样适用，根据版本来让***选择不同的Style即可。第一步判定当前的手机设备是否为iPhoneX。通过屏幕高度进行判断。

2.根据设备环境版本，触摸区域，获取对应的Padding样式，并赋值给safeAreaStyle。

3.将样式传递给顶层布局View，使得布局自适应。

S20：获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求。

应当理解的是，本实施例在进行拖拽之前会对页面进行排版布局，界面整体由上、左、右三部分构成，上部分为当前界面的标题栏，左侧为组件菜单栏，右侧为组件拖拽和编辑区。

应当理解的是，左侧菜单栏为所有的自定义表单组件元素集合，表单组件元素集包括：单行、单选框、复选框、多行、多选框、日期、音频、视频、上传图片、地理位置信息、邮箱以及地区组件，并可通过滚动条通过手指上下滑动查看被遮挡住的组件。为节约带宽，提高上传速度需要对上传的视频文件进行压缩，使用react-native-video-processing实现压缩，react-native-video-processing可确保在不改变清晰度的前提将原文件压缩到原来视频大小的十分之一。地区组件为默认为三级联动，本实施例中使用reacct-nativer-picker实现。

应当理解的是，用户通过左侧的表单组件菜单按照业务要求要求通过手指滑动选择需要的组件至右侧的组件编辑区(右侧的组件编辑区中最多可从左侧组件菜单中拖拽20个组件，20个组件为默认的数量，但可通过后台对其设置，但最大上限值位50个，一般的业务要求20个组件已经足够)，当前多个表单组件构成了一个模型。

比如统计学生每天考勤需要采集如下信息：学号、姓名、性别、地点以及上传图片。具体操作如下：进入自定义表单拖拽界面，按照业务需求将自定义组件拖拽至组件编辑区域，拖拽单行组件后设置该组件名称为序号，拖拽第二个单行组件后设置该组件名称为姓名，拖拽单选按钮组件设置名为性别，并未设置单独设置每一个单选按钮的名字。拖拽地理信息位置组件设置组件名为地点，选择上传图片组件设置组件名字为上传图片，拖拽好所有的组件后还可以对各组件先后顺序进行滑动排列。操作方便简单，通过简单演示一次，使用者即可熟练的操作，而且还是在手机终端操作，不用受限于电脑，或者网络(只需要有手机的移动网络)因此极大的提高的使用的工作效率，为使用者节约了时间成本，业务软件公司减少录沟通和培训成本。

应当理解的是，自定义组件被选择到右侧组件编辑区，即可对组件进行编辑，可设置组件名，可在规则校验库中选择相应的规则附加至组件上。校验规则库了常用的校验规则，包括非空、长度、邮箱、数字格式、字母格式、电话及手机格式、身份证、特殊字符、中文、日期格式、上传文件后缀名的校验。用户也可以用自定义校验规则，选择自定义规则后，需要输入校验规则的规则名称以及校验组件的正则表达式，***会对规则名称进行校验(不允许有重名的校验规则)，接下来会对用户输入的正则表达式进行语法和格式的正确性进行检查，检查通过后，该自定义校验规则，将被存储到校验规则库中。作为为一条新的校验规则，用户在编辑其他组件时就可以选择该校验规则。不需要或者拖拽错误的组件还可以通过点击删除按钮删除对应的组件。

应当理解的是，根据上述实施例中拖拽的信息，***会通过react-native-swipeout第三方框架监听手指滑动，实现对推拽组件的位置信息进行实时监听。其具包括如下操作：先拦截touch事件，判断scrollview滑动事件还是view的触摸事件；然后判断view的触摸事件后禁止scrollview的滑动；最后触摸事件结束以后允许scrollview滑动。

应当理解的是，为了防止用户的误操作或手机断电或程序异常退出，导致用户已经拖拽后编辑过的表单组件数据丢失，需要在用户每一次拖拽到组件编辑区和每一次编辑一次表单自定义后均需要对当前编辑区内的表单数据进行本地存储，具体操作如下：

使用Realm平台基于NoSQL的服务器和客户端组件的组合，通过快速高效的同步协议连接，以实现实时、连接的应用程序和服务，这些应用程序和服务响应迅速，性能不受网络状态的影响。领域平台有两个主要组件：领域数据库(Realm Database)和领域对象服务器(Realm Object Server)。这两个组件协同工作，可以自动同步数据，从而实现大量的用例，从离线的第一个应用程序、现场服务和数据收集应用程序、数据可用性和用户响应性是关键的移动服务。

当表单拖拽至编辑编辑区域内，在拖拽事件中判断拖拽是否已经完成，如果已经完成，获取各组件的信息，包括，整个编辑区内组件构成的表单ID，该ID的作用为确保可以便于定位到每一个不同的组件表单。组件名字，组件ID并且为每一个组件设置一个唯一id确保组件的唯一性，并且在开发自定义组件的时移动端和服务端有统一的规范约束，使用type的值表示每一种组件的类型，这是要确保服务端也需要能精准的掌握每一个组件的作用，组件的校验信息，均要保存至本地，当使用者重新添加了新的组件、或者修改组件信息，亦或删除组件时均要将，组件编辑区内所有的最新组件信息重新保存至本地，原有的组件信息将在本地中删除，删除原有组件信息时就是通过整个编辑区内组件构成的表单ID在本地中检索到的组件信息。

同时，***还会对保存在本地的数据设置有效期，这一步非常重用，如不设置过期时间，手机中的本地数据的容量是有限的，如果数据没有有效期，随着数据量的不断增加，当达到本地数据存储的阈值时，新的数据时无法进行存储的，当数据到达过期时间时本地存储或自动清这些过期的数据，另外在移动端向服务端提交该界面请求时，如果服务端返回成功，也需要将存储在本地中的数据进行删除，使用者在一次进入原来编辑的页面时是从服务端保存的整个当前界面的表单组件信息。

S30：等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

应当理解的是，移动端按照业务需求构建完一个表单(一个界面中按照业务要求的组件集合)后需要将这些数据提交至服务端，服务端再将这些数据进行解析处理，最终按照业务规则保存至数据库中，这样其他使用者即可通过手机终端访问发不好的业务表单界面，提交表单界面需要采集的信息。

应当理解的是，服务端接收到移动端提交的表单信息后，对其传递的JSON数据进行解析，解析后的数据需要一次后去每一个组件的名称，移动端提交的组件均为中文，需要将这些中文转换成拼音，然后对拼音名称进行重名判断，如果出现重名拼音将其进行转换成英文。

应当理解的是，移动端提交的每一次请求的数据最终将需要保存到数据库中进行持久化，由于使用者按照业务要求在一次请求中提交多少个组件，组件的名字是什么，***是无法预先得知的，故而在不能使用固定的一张表来固化表单组件中的数据，需要按照如下方式进行实现：

每一个表单请求服务端均动态创建一张数据表与之对应，为防止表名重复使用UUID产生的32位随机字符串作为表明。

根据本实施例中解析获取到的组件名称并将中文中文名称转拼音。

需要说明的是，以上仅为举例说明，并不对本申请的技术方案构成任何限定。

通过上述描述不难发现，本实施例通过获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。本发明实现了移动端可拖拽自定义表单组件，同时在实现过程中，加强了自定义表单组件的安全性，方便了网课师生的使用，提高了办公学习效率。

此外，本发明实施例还提出一种基于移动端可拖拽自定义表单组件的实现装置。如图3所示，该基于移动端可拖拽自定义表单组件的实现装置包括：屏幕适配模块10、自定义表单组建模块20、响应模块30。

屏幕适配模块10，用于获取当前移动端的屏幕信息，通过SafeAreaView以及ReactNavigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

自定义表单组建模块20，用于获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

响应模块30，用于等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

此外，需要说明的是，以上所描述的装置实施例仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的，此处不做限制。

另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的基于移动端可拖拽自定义表单组件的实现方法，此处不再赘述。

此外，本发明实施例还提出一种介质，所述介质为计算机介质，所述计算机介质上存储有基于移动端可拖拽自定义表单组件的实现方法程序，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时实现如下操作：

S1，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

S2，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

S3，等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

获取当前移动端操作***信息，所述操作***信息包括：Android***以及IOS***，根据该当前移动端操作***信息通过React Native框架提高***的兼容性。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

获取当前移动端的屏幕信息，所述屏幕信息为屏幕的高度与宽度之间的比例数据，根据该比例数据通过SafeAreaView以及React Navigation对该移动端的屏幕进行自定义表单组件页面的适配。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

对完成自定义表单组件页面适配的屏幕进行界面排版布局，将整个界面上部分作为界面的标题栏，将除去标题栏外的界面左侧部分作为组件菜单栏，将剩余界面部分作为组件拖拽以及组件编辑区，所述组件菜单栏用于存放表单组件元素，所述单组件元素包括：单行、单选框、复选框、多行、多选框、日期、音频、视频、上传图片、地理位置信息、邮箱以及地区。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并设定等待时间，实时记录接收下一次拖拽指令的时间，将该时间大于等待时间时，记录已完成拖拽指令对应组件的信息，并为该组件分配一个表单ID，获取完成所有拖拽指令对应组件的表单ID，根据这些表单ID生成表单ID查询表，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

对完成拖拽的各组件进行数据绑定以及数据缓存，设置缓存时间，并实时记录完成拖拽的各组件数据的存储时间，当该存储时间大于缓存时间时，将该完成拖拽的各组件数据删除，并向用户发送对应报告。

进一步地，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时还实现如下操作：

当服务端接收到自定义表单组建请求时，从自定义表单组建请求从提取各组件的名称信息，将各组件的名称转化为拼音拼写，并对转化后的拼音拼写进行查验，当发现存在重名拼音时，则将重名拼音对应的组件名称转化为英文，完成查验后，将转化完成的各组件名称重新存入自定义表单组建请求中，并向***反馈。

以上所述仅为本发明的较佳实施方式而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种基于移动端可拖拽自定义表单组件的实现方法，其特征在于：包括以下步骤；

S1，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

S2，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

S3，等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

2.如权利要求1所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：步骤S1中，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配之前，还包括以下步骤，获取当前移动端操作***信息，所述操作***信息包括：Android***以及IOS***，根据该当前移动端操作***信息通过React Native框架提高***的兼容性。

3.如权利要求2所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：步骤S1中，获取当前移动端的屏幕信息，通过SafeAreaView以及React Navigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配，还包括以下步骤，获取当前移动端的屏幕信息，所述屏幕信息为屏幕的高度与宽度之间的比例数据，根据该比例数据通过SafeAreaView以及React Navigation对该移动端的屏幕进行自定义表单组件页面的适配。

4.如权利要求3所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：步骤S2中，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求之前，还包括以下步骤，对完成自定义表单组件页面适配的屏幕进行界面排版布局，将整个界面上部分作为界面的标题栏，将除去标题栏外的界面左侧部分作为组件菜单栏，将剩余界面部分作为组件拖拽以及组件编辑区，所述组件菜单栏用于存放表单组件元素，所述单组件元素包括：单行、单选框、复选框、多行、多选框、日期、音频、视频、上传图片、地理位置信息、邮箱以及地区。

5.如权利要求4所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：步骤S2中，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求，还包括以下步骤，获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并设定等待时间，实时记录接收下一次拖拽指令的时间，将该时间大于等待时间时，记录已完成拖拽指令对应组件的信息，并为该组件分配一个表单ID，获取完成所有拖拽指令对应组件的表单ID，根据这些表单ID生成表单ID查询表，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求。

6.如权利要求5所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：并对完成拖拽的各组件进行数据绑定以及数据缓存，还包括以下步骤，对完成拖拽的各组件进行数据绑定以及数据缓存，设置缓存时间，并实时记录完成拖拽的各组件数据的存储时间，当该存储时间大于缓存时间时，将该完成拖拽的各组件数据删除，并向用户发送对应报告。

7.如权利要求5所述的基于移动端可拖拽自定义表单组件的实现方法，其特征在于：向服务端发送自定义表单组建请求之后，还包括以下步骤，当服务端接收到自定义表单组建请求时，从自定义表单组建请求从提取各组件的名称信息，将各组件的名称转化为拼音拼写，并对转化后的拼音拼写进行查验，当发现存在重名拼音时，则将重名拼音对应的组件名称转化为英文，完成查验后，将转化完成的各组件名称重新存入自定义表单组建请求中，并向***反馈。

8.一种基于移动端可拖拽自定义表单组件的实现装置，其特征在于，所述基于移动端可拖拽自定义表单组件的实现装置包括：

屏幕适配模块，用于获取当前移动端的屏幕信息，通过SafeAreaView以及ReactNavigation根据该移动端的屏幕信息对该移动端的屏幕进行自定义表单组件页面的适配；

自定义表单组建模块，用于获取组件拖拽指令，根据该组件拖拽指令将对应组件拖拽到指定位置，并对完成拖拽的各组件进行数据绑定以及数据缓存，向服务端发送自定义表单组建请求；

响应模块，用于等待服务端的反馈，根据服务端的反馈完成自定义表单组建，并对该表单进行命名。

9.一种设备，其特征在于，所述设备包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的基于移动端可拖拽自定义表单组件的实现方法程序，所述基于移动端可拖拽自定义表单组件的实现方法程序配置为实现如权利要求1至7任一项所述的基于移动端可拖拽自定义表单组件的实现方法的步骤。

10.一种介质，其特征在于，所述介质为计算机介质，所述计算机介质上存储有基于移动端可拖拽自定义表单组件的实现方法程序，所述基于移动端可拖拽自定义表单组件的实现方法程序被处理器执行时实现如权利要求1至7任一项所述的基于移动端可拖拽自定义表单组件的实现方法的步骤。

Images