基于工作流的电子表单多媒体数据的无遮挡录入方法与流程

1.本发明涉及电子表单处理领域，特别涉及一种基于工作流的电子表单多媒体数据的无遮挡录入方法。


背景技术：

2.工作流引擎实现了抽象流程的流转，而具体业务的实现需要在电子表单模块中完成，例如公文签批，审核签批意见都对应一个业务模块，具体业务在业务模块中实现并将数据保存到数据库表中，从而实现业务数据的持久化。工作流引擎负责将这些业务模块串起来，实现业务流的流转。基于工作流流转的电子表单显著不同于传统电子文档只能作为静态和割裂的信息、图片和图形等载体存在，可以是电子的、常见的和便于使用的几乎任何类型的文档，比如经常见诸于电子政务领域的网上申报、审批、内部办公、政务信息采集、报送等用到的电子文档，实质都可以应用xml文档技术，不仅保留了纸张文档的最佳特性，如熟悉的外观和感受，同时还增加了功能强大的商业逻辑功能，如数据验证和路由指令。这些功能在提供给人们必要的数据访问和交互功能的同时，还可以使政府与公众应用程序进行更有效的交互操作。工作流表单引擎系统实现了电子表单与各种实际业务逻辑的低耦合衔接，使得传统电子表单与应用系统真正意义上的融合。电子化办公因其方便、快捷而得到了越来越多的使用，但是，随着业务的多元化，电子办公中电子表单得到了广泛使用，填写电子表单审批意见也是常用的一种流程审批方式，现有的电子表单均基于h5进行数据录入，页面基于脚本实现数据交互、页面跳转；操作不便，表单页中手写，都是基于canvs构建悬浮层进行绘制。无法将手写内容进行规范化录入的同时，做到所见即所得到，现有的html电子表单在录入过程种存在以下问题：页面之间互相跳转，签批过程不能平滑的进行；h5页面中若干的操作方式，均需要按照要求，弹出其他的页面进行签批；交互方式多样化，不够统一。
3.涉及到手写部分，都是采用跳转到画板中，手写点位无法实时填充到电子表单，无法做到实时对比；


技术实现要素：

4.本发明的目的在于提供一种基于工作流的电子表单多媒体数据的无遮挡录入方法，以解决上述背景技术中提出的问题。
5.为实现上述目的，本发明提供如下技术方案：基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于，包括以下步骤：步骤s1：加载并解析电子表单，获取电子表单的页面信息，同时遍历电子表单的元素信息；步骤s2：获取js遍历电子表单的元素信息，解析电子表单各元素信息绑定的事件，获取特殊输入框；
步骤s3：点击表单的普通页面元素时，按照电子表单的方式进行渲染；步骤s4：在电子表单的底部构建“功能区”；步骤s5：点击指定特殊元素将事件直接指向到“功能区”，在电子表单所述“功能区”内录入签批内容。
6.优选的，所述元素信息由普通文本框和特殊输入框组成，所述特殊输入框为支持放大手写、键盘输入、音视频签批框。
7.优选的，所述表单签批包括特殊输入框指定区域的多元素签批和整体电子表单全屏签批两种方式。
8.优选的，所述特殊文本框的输入方法包括键盘输入、放大手写、图片视频、音频、表情、动漫、html文件链接及其他多媒体元素输入多种方式，所述键盘输入内容、放大手写内容、图片视频、表情、动漫、html文件链接及其他多媒体元素的输入内容签批人自定义排序。
9.优选的，所述特殊文本框的键盘输入的过程包括以下步骤：步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
键盘输入’，在弹出的键盘上进行内容输入；步骤三：在键盘上将内容输入完毕后将内容填充到电子表单上的展示区域内。
10.优选的，所述特殊文本框的放大手写的过程包括以下步骤：步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
放大手写’，在电子表单的底部创建一个与“展示区域”等比例放大的“手写区域”；步骤三：在放大的“手写区域”手写，进行内容输入，手写内容在对应的“展示区域”内同步实时展示，所述手写内容具有内容擦除和笔画编辑功能，所述“功能区”在操作过程中根据用户需要自定义大小及位置。
11.优选的，所述特殊文本框的图片视频、表情、动漫、html文件链接及其他多媒体元素签批的过程包括以下步骤；步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
多媒体元素签批’，在电子表单上构建一个多媒体元素输入区域；步骤三：当鼠标离开指定区域时，自动将多媒体元素填充到对应的展示区域内，所述多媒体元素包括文字、图像、音频、视频、表情、动漫、html文件链接。
12.优选的，所述全屏签批的过程包括以下步骤：在电子表单上构建一个透明的悬浮层，在透明悬浮层上进行全屏签批，所述透明悬浮层随着电子表单放大或者缩小，签批时手写内容携带笔锋，基于矢量技术、携带签批人身份信息。
13.优选的，假设移动端中的电子表单的页面高度为a，假设手写或者底部空白区域的高度为b，所述高度a是指按照显示屏幕的长宽等比缩小的高度；若手机屏幕的高度height≥a+b时，电子表单在表单上下均空出高度相同的空间，所述空出空间的高度为（height-a-b）/2；若手机屏幕的高度height《a+b时，屏幕底部的输入操作区与电子表单的部分重叠，所述操作区与电子表单重叠部分的高度为a+b-height，所述表单重叠部分滚动查看。
14.优选的，所述电子表单在阅读过程中根据用户需要自定义大小及位置。
15.与现有技术相比，本发明的有益效果是：本发明可在电子表单的输入框直接选择键盘输入、全屏手写、放大手写、多媒体元素选择录入进行操作，不会出现页面的跳转、操作页面固定遮住表单的情况，从而使得用户完美体验所见即所得的页面效果。
16.本发明可以在不同的终端设备上选择电子表单与功能界面同屏操作、功能界面漂浮操作，使得在不同的终端上同时获得较好的体验度。
17.本发明同时能够使得用户在表单与功能框同屏操作时，实现键盘输入、放大手写、图片视频、音频、链接及其他多媒体元素的输入并实现其自定义混排。
18.本发明完美地实现了在同屏情况下实现了表单作为展示区域，功能区进行操作同时所见所得。特别是在进行放大手写时，手写输入框可根据用户使用需求自行放大缩小和移动位置，从而保证手写输入框不遮挡电子表单原文，功能区作为“放大区域”，在表单对应的区域作为手写“展示区域”，在“放大区域”进行手写，“展示区域”实时展示，展示区域的高度与键盘输入或文字的高度保持一致，从而保证了手写的字跟键盘输入的意见保持一致的大小，内容排列整齐。
附图说明
19.图1为本发明的流程图。
20.图2为键盘输入时手机显示屏幕长度大于等于表单长度加键盘高度的情况。
21.图3为键盘输入时手机显示屏幕长度小于表单长度加键盘高度的情况。
22.图4为放大手写时手机显示屏幕长度大于等于表单长度加键盘高度的情况。
23.图5为放大手写时手机显示屏幕长度小于表单长度加键盘高度的情况。
24.图6为图片视频签批时手机显示屏幕长度大于等于表单长度加键盘高度的情况。
25.图7为图片视频签批时手机显示屏幕长度小于表单长度加键盘高度的情况。
26.图8为键盘输入时手机显示屏幕长度大于等于表单长度加键盘高度的情况。
27.图9为键盘输入时手机显示屏幕长度小于表单长度加键盘高度的情况。
28.图10 为电子表单全屏签批的示意图。
具体实施方式
29.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
30.在阅读器的存储模块中置入基于工作流的电子表单多媒体数据的无遮挡录入操作的应用程序，电子表单的元素信息由普通文本框和特殊输入框组成，普通文本框包括单行文本输入框、多行文本输入框、单选框、下拉框、多选框，特殊输入框为意见签批框。
实施例一
31.当电子表单为特殊文本框签批时，对表单进行多媒体数据录入包括以下步骤：步骤s1：加载并解析电子表单，获取表单的页面信息，同时遍历电子表单的元素信
息，按照固定的json格式对表单元素进行重组，并保存到阅读器的工作流引擎系统中；步骤s2：获取js遍历表单的元素信息，并获取到表单各元素信息绑定的事件信息，各元素绑定的事件信息与元素的元素属性对应暂存于阅读器的存储模块中，其中事件信息包括下拉单选、下拉多选、页面跳转信息，页面跳转信息包括获取页面跳转的地址以及页面被打开的大小，获取特殊输入框，特殊文本框的输入方法包括键盘输入、放大手写、图片视频、音频、表情、动漫、html文件链接及其他多媒体元素输入多种方式，所述键盘输入内容、放大手写内容、图片视频、表情、动漫、html文件链接及其他多媒体元素的输入内容签批人自定义排序；步骤s3：在阅读器的文件底板上渲染加载页面信息和元素信息，按照电子表单的方式进行渲染；步骤s4:用户在阅读器的展示页面上进行阅读，在进行多媒体数据录入时，点击电子表单上需要录入数据的区域，阅读器获取页面上点击产生的焦点，并获取该焦点对应区域的元素信息；步骤s5：点击录入，在电子表单的底部构建“功能区”，在“功能区”内选择
‘
键盘输入’，在电子表单的底部构建一个悬浮的输入框，输入框的宽度与当前元素的宽度相等，在弹出的键盘上进行内容输入，在键盘上将内容输入完毕后将内容填充到电子表单上的展示区域内，当离开指定区域时，则将内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内；在“功能区”内选择
‘
放大手写’，在电子表单的底部创建一个与“展示区域”等比例放大的“手写区域”，在放大的“手写区域”手写，进行内容输入，手写内容在对应的“展示区域”内同步实时展示，手写内容具有内容擦除和笔画编辑功能，手写完成后（可以通过在展示区域的下方设置确认按钮，点击确认按钮确认手写完成）则会将展示区域的内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内，因为展示区域的高度与键盘输入或文字的高度保持一致，保证了手写的字跟键盘输入的意见保持一致的大小、排列整齐。
32.在“功能区”内选择
‘
多媒体元素签批’，在电子表单上构建一个多媒体元素输入输入区域，输入框的宽度与当前元素的宽度相等，高度为默认三行字高度，当鼠标离开指定区域时，则将签批内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内，其中多媒体元素包括文字、图像、音频、视频、表情、动漫、html文件链接中的一种或多种。
33.全屏签批时，在电子表单上构建一个透明的悬浮层，在透明悬浮层上进行全屏签批，透明悬浮层随着电子表单放大或者缩小，签批时手写内容携带笔锋，基于矢量技术、携带签批人身份信息
实施例二
34.工作流的电子表单适应手机屏幕大小显示的方法为首先假设移动端中的电子表单的页面高度为a，假设手写或者底部空白区域的高度为b，所述高度a是指按照显示屏幕的长宽等比缩小的高度；若手机屏幕的高度height≥a+b时，电子表单在表单上下均空出高度相同的空间，
所述空出空间的高度为（height-a-b）/2，电子表单在表单上下均空出高度相同的空间，弹出键盘与表单内容不重叠；若手机屏幕的高度height《a+b时，屏幕底部的输入操作区与电子表单的部分重叠，所述操作区与电子表单重叠部分的高度为a+b-height，表单重叠部分滚动查看。
35.对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

技术特征：
1.基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于，包括以下步骤：步骤s1：加载并解析电子表单，获取电子表单的页面信息，同时遍历电子表单的元素信息；步骤s2：获取js遍历电子表单的元素信息，解析电子表单各元素信息绑定的事件，获取特殊输入框；步骤s3：点击表单的普通页面元素时，按照电子表单的方式进行渲染；步骤s4：在电子表单的底部构建“功能区”；步骤s5：点击指定特殊元素将事件直接指向到“功能区”，在电子表单所述“功能区”内录入签批内容。2.根据权利要求1所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于：所述元素信息由普通文本框和特殊输入框组成，所述特殊输入框为支持放大手写、键盘输入、音视频签批框。3.根据权利要求1所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于：所述表单签批包括特殊输入框指定区域的多元素签批和整体电子表单全屏签批两种方式。4.根据权利要求2所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于：所述特殊文本框的输入方法包括键盘输入、放大手写、图片视频、音频、表情、动漫、html文件链接及其他多媒体元素输入多种方式，所述键盘输入内容、放大手写内容、图片视频、表情、动漫、html文件链接及其他多媒体元素的输入内容签批人自定义排序。5.根据权利要求4所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其中：所述特殊文本框的键盘输入的过程包括以下步骤：步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
键盘输入’，在弹出的键盘上进行内容输入；步骤三：在键盘上将内容输入完毕后将内容填充到电子表单上的展示区域内。6.根据权利要求4所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其中：所述特殊文本框的放大手写的过程包括以下步骤：步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
放大手写’，在电子表单的底部创建一个与“展示区域”等比例放大的“手写区域”；步骤三：在放大的“手写区域”手写，进行内容输入，手写内容在对应的“展示区域”内同步实时展示，所述手写内容具有内容擦除和笔画编辑功能，所述“功能区”在操作过程中根据用户需要自定义大小及位置。7.根据权利要求4所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其中：所述特殊文本框的图片视频、表情、动漫、html文件链接及其他多媒体元素签批的过程包括以下步骤；步骤一：点击录入，在电子表单的底部构建“功能区”；步骤二：在“功能区”内选择
‘
多媒体元素签批’，在电子表单上构建一个多媒体元素输入区域；步骤三：当鼠标离开指定区域时，自动将多媒体元素填充到对应的展示区域内，所述多
媒体元素包括文字、图像、音频、视频、表情、动漫、html文件链接。8.根据权利要求3所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于：所述全屏签批的过程包括以下步骤：在电子表单上构建一个透明的悬浮层，在透明悬浮层上进行全屏签批，所述透明悬浮层随着电子表单放大或者缩小，签批时手写内容携带笔锋，基于矢量技术、携带签批人身份信息。9.基于工作流的电子表单多媒体数据录入适应手机屏幕大小显示的方法，其特征在于：假设移动端中的电子表单的页面高度为a，假设手写或者底部空白区域的高度为b，所述高度a是指按照显示屏幕的长宽等比缩小的高度；若手机屏幕的高度height≥a+b时，电子表单在表单上下均空出高度相同的空间，所述空出空间的高度为（height-a-b）/2；若手机屏幕的高度height<a+b时，屏幕底部的输入操作区与电子表单的部分重叠，所述操作区与电子表单重叠部分的高度为a+b-height，所述表单重叠部分滚动查看。10.根据权利要求9所述的基于工作流的电子表单多媒体数据的无遮挡录入方法，其特征在于：所述电子表单在阅读过程中根据用户需要自定义大小及位置。

技术总结
本发明提出基于工作流的电子表单多媒体数据的无遮挡录入方法，首先，加载并解析电子表单，获取表单的页面信息，遍历电子表单的元素信息；获取JS遍历表单的元素信息及各元素信息绑定的事件信息，获取特殊输入框；对电子表单进行渲染；在电子表单的底部构建“功能区”，在“功能区”内录入内容；本发明可在电子表单的输入框直接进行操作，不会出现页面跳转、操作页面固定遮住表单的情况，使得用户完美体验所见即所得的页面效果，实现键盘输入、放大手写、图片视频、音频、链接及其他多媒体元素的输入并实现其自定义混排，特别是在进行放大手写时，手写输入框可根据用户使用需求自行放大缩小和移动位置，从而保证手写输入框不遮挡电子表单原文。表单原文。表单原文。


技术研发人员：蔡亚军 何冉冉 何中 常梦雨 严伟 于晓丽 蒋烽
受保护的技术使用者：江苏中威科技软件系统有限公司
技术研发日：2023.08.08
技术公布日：2023/9/16