CN116663517A - 基于工作流表单系统数据交互与输入内容单屏式操作方法 - Google Patents

Abstract

本发明提出基于工作流表单系统数据交互与输入内容单屏式操作方法，包括如下步骤：加载并解析电子表单，获取电子表单的页面信息，并遍历电子表单的元素信息；获取各元素的相关属性，并捕获元素绑定的事件信息；组织元素信息，形成电子表单的元素信息队列；根据电子表单的页面信息和元素信息在文件底板上渲染展现电子表单；触发电子表单中的某一元素；捕获当前元素绑定的事件信息；在当前展现的电子表单上构建悬浮层；在悬浮层上渲染展现事件信息。此专利杜绝了表单任何功能操作时，操作界面全部或大面积的覆盖掉表单所带来的不良体验度，永远保证电子表单原版原样展示，最大程度地仿真传统的物理场景，使得用户有一用就上手的感觉。

Description

基于工作流表单系统数据交互与输入内容单屏式操作方法

技术领域

本发明涉及单子表单处理领域，特别涉及一种基于工作流表单系统数据交互与输入内容单屏式操作方法。

背景技术

电子表单不同于传统电子文档智能作为静态和割裂的信息、图片以及图形的载体存在，可以是电子的、常见的、便于使用的各类型文档，比如：电子政务领域的网上申报、审批、内部办公、政务信息采集、报送等用到的电子文档，实质都可以应用XML文档技术，不仅保留了纸张文档的最佳特性，还增加了商业逻辑功能，如数据验证、路由指令等。

但是，目前电子表单均基于H5进行数据录入，基于脚本实现数据交互和页面跳转，且电子表单中手写功能都是基于canvs构建悬浮层进行绘制。无法将手写内容进行规范化录入的同时做到所见即所得的效果。基于上述情况发现目前的电子表单的相关操作存在下述问题：

1、页面之间互相跳转、签批过程不能平滑的进行；

2、H5页面中若干的操作方式，均需要按照要求，弹出其他的页面进行签批；交互方式多样化，不够统一；

3、涉及到手写部分，都是采用跳转到画板中，手写点位无法实时填充到电子表单，无法做到实时对比。

发明内容

本发明的目的提供一种基于工作流表单系统数据交互与输入内容单屏式操作方法，解决上述现有技术问题中的一个或多个。

第一方面，本发明提出一种基于工作流表单系统数据交互与输入内容单屏式操作方法，包括如下步骤：

1.1加载并解析电子表单，获取电子表单的页面信息，并遍历电子表单的元素信息；

1.2获取各元素的相关属性，并捕获元素绑定的事件信息；

1.3组织元素信息，形成电子表单的元素信息队列；

1.4根据电子表单的页面信息和元素信息，在文件底板上渲染并展现电子表单；

1.5触发电子表单中某一个元素，在电子表单上构建输入区域；

1.6在输入区域渲染并展现事件信息用以实现数据交互和/或内容输入。

在一些实施方式中，所述页面信息包括文档主体body、文档分区div、table、表格行tr、表头th、表格单元td；

所述元素种类包括普通文本框和特殊的输入框，普通文本框包括单行文本输入框input、多行文本输入框textarea、单选框radio、下拉框select以及多选框checkbox，特殊的输入框包括意见签批框comment。

在一些实施方式中，在触发电子表单中的某一元素后根据当前元素的元素属性对当前元素的元素种类进行判断，

当前元素的元素种类为普通文本框，获取元素的焦点，判断当前元素是否被绑定事件；

当前元素的元素种类为特殊的输入框，获取特殊的输入框对应的特殊的输入模式，将特殊的输入模式作为该元素绑定的事件信息，所述特殊的输入模式包括键盘输入、放大手写以及多元化签批。

在一些实施方式中，多元化签批的过程为：选中多元化签批模式后在电子表单的上构建一个输入区域用于进行多元化签批；鼠标离开指定区域时，自动将多元化签批的内容填充到元素对应的展示区域，多元化签批内容包括文字、图像、音频以及视频中的一种或多种。

在一些实施方式中，

当前元素的元素种类为文本输入区域input和多行文本输入框textarea，则直接获取对应的输入模式，将输入模式作为该元素绑定的事件信息，输入模式包括键盘输入和放大手写；

当前元素的元素种类为单选框radio、下拉框select以及多选框checkbox，则将当前元素对应的页面信息作为该元素绑定的事件信息；

当前元素绑定了脚本触发事件，脚本触发事件即为该元素绑定的事件信息，脚本触发事件包括弹出事件和/或跳转事件。

在一些实施方式中，键盘输入的过程为：选中键盘输入后，在电子表单的上构建一个输入区域用于信息输入；鼠标离开指定区域时，自动将内容填充到元素对应的展示区域。

在一些实施方式中，放大手写的过程为：选中放大手写后，在指定区域创建一个手写展示区域，在放大区域手写时，手写的结果同步展示于元素对应的展示区域内。

在一些实施方式中，当前元素绑定了脚本触发事件,获取相关参数，所述的相关参数包括弹出页面的url地址和页面大小。

在一些实施方式中，触发电子表单中某一个元素时，在电子表单上构建输入区域，输入区域可被拖到任意位置，构建的输入区域的模式包括两种，

其中一种为在电子表单上方叠设悬浮输入区域，电子表单不发生改变，在悬浮输入区域输入完毕后，点击暂存时悬浮输入区域不关闭，悬浮输入区域中的内容对应元素的元素属性，并暂时存储至本地数据库；点击提交后悬浮输入区域中的内容对应元素的元素属性替换本地数据库中该元素属性对应的内容进行存储，悬浮输入区域关闭，并保存电子表单中所有的内容，所述悬浮输入区域与展示的电子表单重叠部分的面积小于（30％*展示的电子表单的面积）；

另一种为直接在电子表单的底部插入输入区域，在输入区域中输入完毕后，点击暂存时输入区域关闭，输入区域中的内容对应元素的元素属性，并暂时存储至本地数据库；点击提交后输入区域中的内容对应元素的元素属性替换本地数据库中该元素属性对应的内容进行存储，关闭输入区域，并保存电子表单中所有的内容。

第二方面，本发明提出基于工作流表单系统数据交互与输入内容单屏式操作系统，包括存储单元和处理器，存储单元用于存储应用程序，处理单元用于执行应用程序实现上述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中处理单元包括解析模块和渲染模块，

解析模块用于获取并加载电子表单、遍历电子表单的页面信息和元素信息，逐个获取各元素的相关属性以及绑定的脚本触发事件，组织元素信息形成电子表单的元素信息列表；

渲染模块用于根据电子表单的页面信息和元素信息在文件底板上渲染并展现电子表单，触发电子表单中的元素，构建输入区域，在输入区域展现事件信息。

本发明所述的基于工作流表单系统数据交互与输入内容单屏式操作方法的优点为：

1、单屏操作杜绝了表单任何功能操作时，其操作界面全部或大面积的覆盖掉表单所带来的不良体验度。

2、单屏操作永远保证电子表单原版原样展示，最大程度地仿真传统的物理场景，使得用户有一用就上手的感觉。

3、精致适配各类屏幕：在屏幕允许的情况下，实现表单页面全保真全显示，在屏幕空白处进行录入操作；在屏幕条件不允许的情况下，可以使得录入工具折叠到表单的底部，亦可以动态拖拽到任意的位置，此工具可大可小，一般情况下，最大不超过屏幕总面积的25%。

附图说明

图1为本发明的一些实施方式中基于工作流表单系统数据交互与输入内容单屏式操作方法的流程图；

图2为本发明的一些实施方式中键盘输入示意图；

图3为本发明的一些实施方式中放大手写示意图；

图4为本发明的一些实施方式中下拉框下拉示意图；

图5为本发明的一些实施方式中悬浮签批示意图；

图6为本发明的一些实施方式中单选框示意图；

图7为本发明的一些实施方式中多选框示意图；

图8为本发明的一些实施方式中输入框移动示意图。

具体实施方式

在阅读器的存储模块中置入基于工作流表单系统数据交互与输入内容单屏式操作的应用程序，阅读器的存储模块中还存储有用户信息，用户信息包括用户名，阅读器中还包括计时模块，计时模块用于记录基于工作流表单系统数据交互与输入内容单屏式操作的应用程序执行过程中各步骤的执行时间。

结合图1所示的内容，本实施例中提出一种基于工作流表单系统数据交互与输入内容单屏式操作方法包括如下步骤：

S1、阅读器解析并获取电子表单的页面信息和元素信息，按照固定的JSON格式进行表单元素重组，并保存到阅读器的工作流引擎系统中，其中

页面信息为除元素以外的其他内容，例如：CSS/JS等相关的页面信息，CSS/JS等相关的页面信息包括文档主体body、文档分区div、table、表格行tr、表头th、表格单元td；

元素信息包括元素种类、各元素的相关属性以及元素对应的展示区域内的内容，元素种类包括普通文本框和特殊的输入框，普通文本框包括单行文本输入框单行文本输入框input、多行文本输入框textarea、单选框radio、下拉框select以及多选框checkbox，特殊的输入框包括意见签批框comment，

需要说明的是，特殊的输入框包括三种输入模式，分别为键盘输入模式、放大手写模式以及多元化签批模式；

S2、阅读器遍历电子表单中的元素信息，捕获各元素绑定的事件信息，各元素绑定的事件信息与元素的元素属性对应暂存于阅读器的存储模块中，事件信息中包括

1）下拉或单选或多选下拉或单选或多选内容，下拉内容对应的元素的元素种类为下拉框select，多选内容对应的元素的元素种类为多选框checkbox；

2）脚本触发事件以及脚本触发事件对应的信息，脚本触发事件包括弹出事件和跳转事件，脚本触发事件对应的信息包括url地址、页面大小等；

S3、在阅读器的文件底板上渲染加载页面信息和元素信息，生成渲染页面，实现阅读器上的电子表单的渲染展现；

S4、用户在渲染页面上进行点击，阅读器获取在渲染页面上点击产生的焦点，并获取该焦点对应的元素（即当前元素）的元素种类和相关属性，相关属性包括元素对应的ID等；

S5、判断当前元素的元素种类，若为普通文本框则进入S6，若为特殊的输入框则进入S10；

S6、当前元素为普通文本框，根据元素的元素属性判断当前元素是否存在绑定的事件信息，

若不存在绑定的事件信息，则直接在当前的电子表单的下方弹出用于显示键盘输入键和键盘输入框的悬浮窗口，形成如图2所示的展示窗口，通过点击键盘输入键输入信息展示于键盘输入框内，输入完成后点击确认，键盘输入框中的内容自动展示于元素对应的展示区域内，同时该内容会对应元素的相关属性进行存储，需要说明的是该步骤中的悬浮窗口也可以直接替换为在电子表单的底部直接插入一个窗口，通过窗口显示键盘输入键和键盘输入框，并输入、确认等操作，确认后该窗口就会自动移除，其中键盘输入键和键盘输入框的显示、输入、确认等操作均可以采用现有技术实现，因此在此不做赘述；

若存在绑定的事件信息，则进行S7；

S7、对事件信息进行判断，事件信息为下拉或单选或多选下拉或单选或多选内容则进入S8，事件信息为脚本触发事件则进入S9；

S8、在渲染页面的底部构建悬浮层，获取下拉或单选或多选的内容，将下拉或单选或多选的内容渲染展示于悬浮层上，形成如图4、图6以及图7中任意一图所示的展示窗口，在当前的悬浮层上对下拉或单选或多选内容进行选择、确认等操作；

需要说明的是该步骤中的悬浮层也可以直接替换为在电子表单的底部直接插入一个窗口，通过窗口展示下拉或单选或多选的内容，并在该窗口内进行选择、确认等操作，确认后该窗口就会自动移除；

选择、确认等操作均可以直接采用现有技术实现，因此在此不做赘述；

S9、获取脚本触发事件对应的信息，在当前元素的下方构建一个透明的悬浮层，根据脚本触发事件对应的信息在悬浮层上嵌套页面，或嵌套弹出层，保证当前的渲染页面未被覆盖，并在当前的悬浮层上进行查看等操作，比如：脚本触发事件为对当前电子表单进行整体的签批，则在当前电子表单上构建等比例放大或缩小的透明的悬浮层，比如形成如图5所示的内容，然后直接在当前悬浮层上进行签批操作，签批操作包括手写签批、视频签批、音频签批等，签批的操作均为现有技术因此在此不做赘述；

S10、选择特殊的输入框的输入模式，若为键盘输入模式则进入S11，若为放大手写模式则进入S12，若为多元化签批模式则进入S13；

S11、选中键盘输入后，在指定区域（比如渲染页面的底部）悬浮一个输入框，输入框的宽度与当前元素的宽度相等；高度为默认三行字高度；鼠标离开指定区域时，则将内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内；

S12、放大手写时，在该元素对应的展示区域的上方创建一个透明的悬浮的手写的展示区域，在表单的底部创建一个同比例放大的手写区域（也可以直接在表单的上方构建一个悬浮层，悬浮层不遮挡元素对应的展示区域和手写的展示区域，在悬浮层上构建手写区域），在手写区域手写，展示区域实时展示，比如形成如图3所示的内容；因为展示区域的高度与键盘输入时输入框的高度保持一致，保证了手写的字跟键盘输入的意见保持一致的大小、排列整齐，手写完成后（可以通过在展示区域的下方设置确认按钮，点击确认按钮确认手写完成）则会将展示区域的内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内；

S13、多元化签批时，在指定区域（比如渲染页面的底部）悬浮一个输入框用于进行多元化签批意见，输入框的宽度与当前元素的宽度相等；高度为默认三行字高度；鼠标离开指定区域时，则将签批内容带着落款（为阅读器中存储的用户信息）和时间（即鼠标离开指定区域的时间）一起填充至对应的元素内，其中多元化签批内容包括文字、图像、音频以及视频中的一种或多种。

S6中判断不存在绑定的事件信息的元素也可以具备键盘输入模式和放大手写模式这两种输入模式，此时这两种模式的执行过程与S11和S12的过程相似，唯一不同的时在将内容存入对应的元素时可以不带着落款和时间。

结合图8所示的内容，上述的输入框与阅读器当前展示的电子表单的重叠形成的遮盖区域的面积小于阅读器当前展示的电子表单的面积的30％。

结合图8所示的内容，对于上述的输入框，用户可以根据自身需求通过鼠标将输入框拖拽至所需位置。

以上所述仅是本发明的优选方式，应当指出，对于本领域普通技术人员来说，在不脱离本发明创造构思的前提下，还可以做出若干相似的变形和改进，这些也应视为本发明的保护范围。

Claims (10)

1.基于工作流表单系统数据交互与输入内容单屏式操作方法，其特征在于，包括如下步骤：

1.1加载并解析电子表单，获取电子表单的页面信息，并遍历电子表单的元素信息；

1.2获取各元素的相关属性，并捕获元素绑定的事件信息；

1.3组织元素信息，形成电子表单的元素信息队列；

1.4根据电子表单的页面信息和元素信息，在文件底板上渲染并展现电子表单；

1.5触发电子表单中某一个元素，在电子表单上构建输入区域；

1.6 在输入区域渲染并展现事件信息用以实现数据交互和/或内容输入。

2.根据权利要求1所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，

所述页面信息包括文档主体body、文档分区div、table、表格行tr、表头th、表格单元td；

所述元素种类包括普通文本框和特殊的输入框，普通文本框包括单行文本输入框单行文本输入框input、多行文本输入框textarea、单选框radio、下拉框select以及多选框checkbox，特殊的输入框包括意见签批框comment。

3.根据权利要求2所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，在触发电子表单中的某一元素后根据当前元素的元素属性对当前元素的元素种类进行判断，

当前元素的元素种类为普通文本框，获取元素的焦点，判断当前元素是否被绑定事件；

当前元素的元素种类为特殊的输入框，获取特殊的输入框对应的特殊的输入模式，将特殊的输入模式作为该元素绑定的事件信息，所述特殊的输入模式包括键盘输入、放大手写以及多元化签批。

4.根据权利要求3所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，多元化签批的过程为：选中多元化签批模式后在电子表单的上构建一个输入区域用于进行多元化签批；鼠标离开指定区域时，自动将多元化签批的内容填充到元素对应的展示区域，多元化签批内容包括文字、图像、音频以及视频中的一种或多种。

5.根据权利要求3所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，

当前元素的元素种类为文本输入区域input和多行文本输入框textarea，则直接获取对应的输入模式，将输入模式作为该元素绑定的事件信息，所述输入模式包括键盘输入和放大手写；

当前元素的元素种类为单选框radio、下拉框select以及多选框checkbox，则将当前元素对应的页面信息作为该元素绑定的事件信息；

当前元素绑定了脚本触发事件，脚本触发事件即为该元素绑定的事件信息，脚本触发事件包括弹出事件和/或跳转事件。

6.根据权利要求3或5所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，键盘输入的过程为：选中键盘输入后，在电子表单的上构建一个输入区域用于信息输入；鼠标离开指定区域时，自动将内容填充到元素对应的展示区域。

7.根据权利要求3或5所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，放大手写的过程为：选中放大手写后，在指定区域创建一个手写展示区域，在放大区域手写时，手写的结果同步展示于元素对应的展示区域内。

8.根据权利要求5所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，当前元素绑定了脚本触发事件,获取相关参数，所述的相关参数包括弹出页面的url地址和页面大小。

9.根据权利要求1所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中，触发电子表单中某一个元素时，在电子表单上构建输入区域，输入区域可被拖到任意位置，构建的输入区域的模式包括两种，

其中一种为在电子表单上方叠设悬浮输入区域，电子表单不发生改变，在悬浮输入区域输入完毕后，点击暂存时悬浮输入区域不关闭，悬浮输入区域中的内容对应元素的元素属性，并暂时存储至本地数据库；点击提交后悬浮输入区域中的内容对应元素的元素属性替换本地数据库中该元素属性对应的内容进行存储，悬浮输入区域关闭，并保存电子表单中所有的内容，所述悬浮输入区域与展示的电子表单重叠部分的面积小于（30％*展示的电子表单的面积）；

另一种为直接在电子表单的底部插入输入区域，在输入区域中输入完毕后，点击暂存时输入区域关闭，输入区域中的内容对应元素的元素属性，并暂时存储至本地数据库；点击提交后输入区域中的内容对应元素的元素属性替换本地数据库中该元素属性对应的内容进行存储，关闭输入区域，并保存电子表单中所有的内容。

10.基于工作流表单系统数据交互与输入内容单屏式操作系统，其特征在于，包括存储单元和处理器，存储单元用于存储应用程序，处理单元用于执行应用程序实现权利要求1-9所述的基于工作流表单系统数据交互与输入内容单屏式操作方法，其中处理单元包括解析模块和渲染模块，

解析模块用于获取并加载电子表单、遍历电子表单的页面信息和元素信息，逐个获取各元素的相关属性以及绑定的脚本触发事件，组织元素信息形成电子表单的元素信息列表；

渲染模块用于根据电子表单的页面信息和元素信息在文件底板上渲染并展现电子表单，触发电子表单中的元素，构建输入区域，在输入区域展现事件信息。