CN107544806A - 可视化表单绘制方法 - Google Patents

Abstract

本发明提供了一种可视化表单绘制方法，该绘制方法包括react构建表单组件并以redux管理数据流创建可视化表单编辑器；采用可视化表单编辑器自定义或外部导入创建表单初始模板；调整表单初始模板布局和基础信息，接收用户将操作对象拖拽至操作终点，通过撤销或还原操作返回至某时刻表单设置状态；表单数据保存至html文件，由JS解析成版式数据流文件。本发明通过可视化表单编辑器中工具栏绘制表单，设置整体样式，并直接将表单组件拖拽至页面设定区域并更改组件属性，实现快速、精确地绘制规范化表单，避免了采用源码修改出现的层级混乱问题；在表单绘制过程中调整步骤的每个操作均会自动保存，通过撤销或还原操作修正调整步骤操作。

Description

可视化表单绘制方法

技术领域

本发明涉及信息技术领域，尤其涉及可视化表单绘制方法。

背景技术

表单(网页)作为一种最常见的信息载体，在各个领域中广为使用(包括政府行业)。表单可通过html、js、css等源码编写生成，但是生成、编辑难度较大(特别是样式复杂的表单效果)，经过多次多人修改后，代码风格大不相同。表单修改调整，后期的调整维护复杂。手动绘制的表单、或通过photoshop构建出来的表单，不能指定各种自动的操作方式，不符版式数据流的标准格式。

例如中国专利CN106202016A公开了基于Bootstrap的自定义表单系统，属于表单数据管理技术领域，包括定义系统提供的表单元素控件，包括表单可视化编辑器，表单元素控件配置信息支持灵活的可扩展属性；表单基础信息和布局配置，以图形化界面和可拖动的组件来完成表单元素控件的选择和拖放，提供实时预览功能，展现表单缩略图；表单呈现，根据配置的表单元素和布局，正确的显示表单信息；表单的查询结果列表配置，根据表单配置信息，提供该表单查询结果列表中要显示的列及其相关的配置；表单实体数据模型动态创建，根据表单配置信息动态生成数据模型。又如中国专利CN102360296A公开了一种基于WEB的在线表单开发工具，包括：可视化表单设计器，用于供用户在该界面上设计待生成表单，所述界面上设置有多个表单控件以及至少一个代码编辑器；保存模块，其以HTML页面文件的格式保存生成的表单，将表单保存在数据库中；数据库，其中设置有保存表单的子数据库和保存业务数据的子数据库；数据集控件，其中建立有表单控件与数据库中的业务数据的对应关系数据；其中，在保存生成的表单时，所述代码编辑器编辑出的业务逻辑与通过表单控件设定的表单页面元素一同保存，并且表单在展现时，通过数据集控件中的对应关系，将数据库中的业务数据显示在表单控件中。两个发明中通过各自表单编辑器绘制表单时，未对表单绘制的步骤表单数据作相应保存，并且表单的基础信息和布局配置过程中出现配置错误时，无法进行撤销或还原操作，不利于文件的修改。

发明内容

为克服现有技术中存在的网页绘制复杂、层级混乱的问题，本发明提供了一种可视化表单绘制方法。

本发明提供了一种可视化表单绘制方法，该表单用于网页，其特征在于：所述方法包括如下步骤：

步骤1，react构建表单组件并以redux管理数据流创建可视化表单编辑器；

步骤2，采用可视化表单编辑器自定义或外部导入创建表单初始模板；

步骤3，调整表单初始模板；包括调整表单初始模板的布局和基础信息，接收用户将表单组件拖拽至操作终点动作，通过撤销或还原操作修正调整步骤操作；

步骤4，表单数据保存至html文件，由JS解析成版式数据流文件。

进一步的，所述可视化编辑器包括页面、菜单栏和可拖拽组件框，页面展现自定义或创建的表单初始模板；菜单栏用于用户对表单基础信息或布局的调整操作；可拖拽组件框中存放有常用的插入表单组件。

进一步的，所述步骤3中，调整表单接收用户在可拖拽组件框中选取表单组件并拖拽至页面释放动作，修改表单组件属性。

进一步的，所述菜单栏包括编辑按钮、工具按钮、撤销按钮、还原按钮、保存按钮、模板按钮和自定义样式按钮；工具按钮用于对可视化编辑器本身修改；撤销按钮和还原按钮用于对调整表单初始模板步骤中撤销或还原之前调整步骤的某时候表单设置状态；保存按钮用对表单初始模板调整完成后保存表单数据于html文件，自定义样式按钮中保存有调整过程中各表单中各个单元格样式设置数据。

进一步的，所述编辑按钮包括部件按钮、布局按钮和预览按钮，通过编辑按钮将正在调整的表单，布局按钮用于调整表单布局，预览按钮用于预览调整后的表单当前展现结果。

进一步的，所述表单初始模板包含二维数组、样式列表、选用的公用样式id、原始表单的行列数以及表头；其中，每个数组元素代表一个单元格的填充文本，样式列表由一个或若干个公用样式构成，所述单元格中文本的初始样式设定是通过选用的公用样式id从样式列表中调用对应公用样式得到；原始表单的行列数由插入表格框中行数和列数体现。

进一步的，所述调整表单初始模板布局和基础信息步骤主要包括公用样式修改、单个单元格样式修改、单元格合并或拆分调整和表单中组件插入，调整后的表单设置数据将自动保存于可视化编辑器。

进一步的，所述单元格合并或拆分调整步骤主要包括以下步骤：

步骤31，判断当前单元格的mocktype值；

步骤32，根据判定的mocktype值对单元格进行合并或拆分操作。

进一步的，所述可视化编辑器包含操作栈和撤销栈，操作栈用于保存按调整时间顺序依次对应的表单设置状态数据，撤销栈用于保存从操作栈中弹出的不同调整时间顺序下的表单设置状态数据，在撤销栈中用户可通过调整时间选取还原时间点下的表单设置状态数据。

进一步的，所述撤销按钮被点击执行撤销操作，将操作栈中当前调整时间下的表单设置状态数据从操作栈中弹出至撤销栈中，表单变为上一调整时间下的表单设置状态；还原按钮被点击执行取消撤销操作，将最近放入撤销栈中表单设置状态数据从撤销栈中弹回至操作栈中，表单变为从撤销栈中弹回的表单设置状态。

与现有技术相比，本发明的有益效果是：

(1)本发明通过可视化表单编辑器中可直接对目标控件拖拽至设定区域并设置控件属性，实现快速、精确地绘制规范化表单，通过可视化编辑器创建的表单生成的html文件规范，再通过JS解析规范化的html文件从而得到版式数据流文件，无需直接通过html来构建表单，从而避免了对源码中修改过程中出现层级混乱。

(2)在表单绘制过程中每一个调整步骤在可视化编辑器中会自动保存，在调整过程中发生错误时用户通过撤销或还原返回原先调整步骤中某时刻表单设置状态，撤销操作是将操作栈中当前调整时间下的表单设置状态数据从操作栈中弹出至撤销栈中，回到上一调整时间下的表单设置状态；取消撤销操作是将最近放入撤销栈中表单设置状态数据从撤销栈中弹回至操作栈中。

(3)撤销栈用于保存从操作栈中弹出的不同调整时间顺序下的表单设置状态数据，在撤销栈中用户可通过调整时间选取还原时间点下的表单设置状态数据。

附图说明

图1是可视化表单绘制流程图；

图2是单元格合并/拆分流程图；

图3是创建的可视化表单示意图。

结合附图并在其上标记：

1-菜单栏，2-可拖拽组件框，3-表单初始模板，11-编辑按钮，12-工具按钮，13-撤销按钮，14-还原按钮，15-保存按钮，16-模板按钮，17-自定义样式按钮。

具体实施方式

以下结合附图和实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

本实施方式披露了一种可视化表单绘制方法，该表单用于网页中，绘制后的表单如图3所示，所述绘制方法包括如下步骤(如图1所示)：

步骤1，react构建表单组件并以redux管理数据流创建可视化表单编辑器；

步骤2，采用可视化表单编辑器自定义或外部导入创建表单初始模板3；

步骤3，调整表单初始模板；包括调整表单初始模板3的布局和基础信息，接收用户将表单组件拖拽至操作终点动作，通过撤销或还原操作修正调整步骤操作；

步骤4，表单数据保存至html文件，由JS解析成版式数据流文件。

在本实施例中，可视化表单编辑器是采用react构建界面，以redux管理数据流；并根据store来刻画前端界面，同时以ndexDB浏览器保存数据索引数据库；redux是JS状态容器，提供可预测化的状态管理。可以构建一致化的应用，运行于不同的环境(客户端、服务器、原生应用)，并且易于测试。因此，本实施例中的表单制作不需要通过HTML网页绘制，绘制的表单可通过自定义样式设置用户所需表单样式，且redux通过reducers来管理整个编辑器的state树，简化了整个状态树。通过可视化编辑器创建的表单生成的html文件规范，再通过JS解析规范化的html文件从而得到版式数据流文件，无需直接通过html来构建表单，从而避免了对源码中修改过程中出现层级混乱。所述react构建中还包括组件安排，根据组件代码，向组件中传入数据时添加key值，该key值相当于id，以此作为组件的唯一标识。将对应数据传入组件中，通过key值引用组件，使得代用组件更为简便、高效；通过view直接触发dispatch；将action发送至reducer中，根节点上更新state，进而改变view。在整个redux流程中，reducer根据action确定需要如何返回新的数据，其中一个reducer对应一个字段；此时，数据的结构处理也从store中移到了reducer中。所述reducer是由多个子reducer通过combineReducers方法合并而成，并对该reducer调用creatStore，合并后的reducer可调用各个子reducer，各个子reducer所得结果将其合并成一个state对象，此时state中的数据结构为各个子reducer的集合，为了使得数据传递方便，对每个子reducer分配对应key值。

在本实施例中通过react构建的可视化编辑器包括页面、菜单栏1和可拖’拽组件框2，页面中用于自定义或创建的表单初始模板3；菜单栏1用于用户对表单基础信息或布局的调整操作；可拖拽组件框2中存放有常用的插入表单组件，用户可直接从可拖拽组件框2中将所需组件拖拽至表单初始模板3上对应添加位置。所述菜单栏1包括编辑按钮11、工具按钮12、撤销按钮13、还原按钮14、保存按钮15、模板按钮16和自定义样式按钮17。所述编辑按钮11包括部件按钮、布局按钮和预览按钮，通过编辑按钮11将正在调整的表单，布局按钮用于调整表单布局，预览按钮用于预览调整后的表单最终渲染结果。工具按钮12用于对可视化编辑器本身修改；撤销按钮13和还原按钮14用于对调整表单初始模板3步骤中撤销或还原之前调整步骤的某时候表单设置状态；保存按钮15用对表单初始模板3调整完成后保存表单数据于html文件，自定义样式按钮17中保存有调整过程中各表单中各个单元格样式设置数据。

通过可视化编辑器创建的表单初始模板3包含二维数组、样式列表、选用的公用样式id、原始表单的行列数以及表头；其中，每个数组元素代表一个单元格的填充文本，样式列表由一个或若干个公用样式构成。所述单元格中文本的初始样式设定是通过选用的公用样式id从样式列表中调用对应公用样式得到；原始表单的行列数由插入表格框中行数和列数体现。所述表头包含对表头样式、表头选用的公共样式id和显示标题，其中表头样式设定是由表头选用的公共样式id通过从样式列表中调用对应公用样式得到。所述单元格包含单元格id、单元格自身大小信息、mocktype、组件、单元格样式、选用公共样式的id和文本。其中，当mocktype为true时，表明这个单元格真实存在，在模板中被展示出边界；而当mocktype为false时，表明该单元格已被合并。

在本实施例中，所述调整表单初始模板3的初始信息主要包括公用样式修改、单个单元格样式修改、单元格合并或拆分调整和表单中组件插入。

其中，公用样式的修改会对选用该样式的所有对象整体得到样式改变；而对单个单元格的样式修改是在该单元格选用的公用样式基础上进行修改，修改后的样式可设置自身id保存于样式列表中，且修改后的样式仅在该单元格中展示。所述公用样式包括样式名称、样式自身id、单元格高/宽度、文本位置、文本属性、文本颜色和单元格边框颜色，样式名称由用户自定义，方便用户在编辑过程中在样式列表中查找；样式自身id，用于方便单元格或表头等其他组件对公用样式的调用；单元格高/宽度、文本位置、文本属性、文本颜色和单元格边框颜色等样式设置可由用户挑选所需调整内容进行修改。表单中组件插入是单元格中接受由用户从可拖拽组件框2中移至单元格中的组件，该组件由用户根据所需自定义选取。

在本实施方式中，所述单元格合并或拆分调整步骤主要包括以下步骤(如图2所示)：

步骤31，判断当前单元格的mocktype值；

步骤32，根据判定的mocktype值对单元格进行合并或拆分操作。

在对单元格合并或拆分过程中，单元格的mocktype值会随之改变。当单元格mocktype值为false时，该单元格在表格中并不展示。在合并操作中，选中的单元格的mocktype值为true，将周边同样mocktype值为true的单元格进行合并为一个单元格，合并后的单元格在计算行列数时将各个未展示的单元格行列数相加所得；在对已经合并的单元格进行拆分时，选择的单元格的mocktype值必为true，查找该单元格中是否包含mocktype值必为false的单元格，若存在，则该单元格可进行拆分操作，此时在该单元格周边找出mocktype为false的单元格，将该单元格重新展示，此时重新展示的单元格mocktype变为true，完成单元格拆分步骤。

在所述调整表单初始模板3的初始信息的调整过程中，每一个调整步骤在可视化编辑器中会自动保存；在本实施例中，所述可视化编辑器包含操作栈和撤销栈，操作栈用于保存按调整时间顺序依次对应的表单设置状态数据，撤销栈用于保存从操作栈中弹出的不同调整时间顺序下的表单设置状态数据，在撤销栈中用户可通过调整时间选取不同时间点下的表单设置状态数据进行还原。所述可视化编辑器中点击撤销按钮13执行撤销操作，所述撤销操作是将操作栈中当前调整时间下的表单设置状态数据从操作栈中弹出至撤销栈中，回到上一调整时间下的表单设置状态进行展示；点击还原按钮14执行取消撤销操作，所述取消撤销操作是将最近放入撤销栈中表单设置状态数据从撤销栈中弹回至操作栈中。通过在可视化编辑器上设置操作栈和撤销栈可使得表单在编辑过程中对设置数据可进行撤销或还原操作，可进行反复修改达到用户所需的表单样式，并且可通过在撤销栈中调整时间来选取所需还原的表单设置状态数据。

上述说明示出并描述了本发明的优选实施例，如前所述，应当理解本发明并非局限于本文所披露的形式，不应看作是对其他实施例的排除，而可用于各种其他组合、修改和环境，并能够在本文所述发明构想范围内，通过上述教导或相关领域的技术或知识进行改动。而本领域人员所进行的改动和变化不脱离本发明的精神和范围，则都应在本发明所附权利要求的保护范围内。

Claims (10)

1.一种可视化表单绘制方法，该表单用于网页，其特征在于：所述方法包括如下步骤：

步骤1，react构建表单组件并以redux管理数据流创建可视化表单编辑器；

步骤2，采用可视化表单编辑器自定义或外部导入创建表单初始模板(3)；

步骤3，调整表单初始模板；包括调整表单初始模板(3)的布局和基础信息，接收用户将表单组件拖拽至操作终点动作，通过撤销或还原操作修正调整步骤操作；

步骤4，表单数据保存至html文件，由JS解析成版式数据流文件。

2.根据权利要求1所述的可视化表单绘制方法，其特征在于：所述可视化编辑器界面包括页面、菜单栏(1)和可拖拽组件框(2)，页面展现自定义或创建的表单初始模板(3)；菜单栏(1)用于用户对表单基础信息或布局的调整操作；可拖拽组件框(2)中存放有表单组件。

3.根据权利要求2所述的可视化表单绘制方法，其特征在于：所述步骤3中，调整表单接收用户在可拖拽组件框(2)中选取表单组件并拖拽至页面释放动作，修改表单组件属性。

4.根据权利要求2所述的可视化表单绘制方法，其特征在于：所述菜单栏(1)包括编辑按钮(11)、工具按钮(12)、撤销按钮(13)、还原按钮(14)、保存按钮(15)、模板按钮(16)和自定义样式按钮(17)；工具按钮(12)用于对可视化编辑器本身修改；撤销按钮(13)和还原按钮(14)用进行撤销或还原操作，调整至某时候表单设置状态；保存按钮(15)用于调整完成后保存表单数据于html文件，自定义样式按钮(17)中保存有调整过程中表单的各个单元格样式设置数据。

5.根据权利要求4所述的可视化表单绘制方法，其特征在于：所述编辑按钮(11)包括部件按钮、布局按钮和预览按钮，通过编辑按钮(11)将正在调整的表单，布局按钮用于调整表单布局，预览按钮用于预览调整后的表单当前展现结果。

6.根据权利要求1所述的可视化表单绘制方法，其特征在于：所述表单初始模板(3)包含二维数组、样式列表、选用的公用样式id、原始表单的行列数以及表头；其中，每个数组元素代表一个单元格的填充文本，样式列表由一个或若干个公用样式构成，所述单元格中文本的初始样式设定是通过选用的公用样式id从样式列表中调用对应公用样式得到；原始表单的行列数由插入表格框中行数和列数体现。

7.根据权利要求1所述的可视化表单绘制方法，其特征在于：所述调整表单初始模板(3)布局和基础信息步骤包括公用样式修改、单个单元格样式修改、单元格合并或拆分调整和表单中组件插入，调整后的表单设置数据将自动保存于可视化编辑器。

8.根据权利要求7所述的可视化表单绘制方法，其特征在于：所述单元格合并或拆分调整步骤如下：

步骤31，判断当前单元格的mocktype值；

步骤32，根据判定的mocktype值对单元格进行合并或拆分操作。

9.根据权利要求7所述的可视化表单绘制方法，其特征在于：所述可视化编辑器包含操作栈和撤销栈，操作栈用于保存按调整时间顺序依次对应的表单设置状态数据，撤销栈用于保存从操作栈中弹出的不同调整时间顺序下的表单设置状态数据，在撤销栈中用户可通过调整时间选取还原时间点下的表单设置状态数据。

10.根据权利要求9所述的可视化表单绘制方法，其特征在于：所述撤销按钮(13)被点击执行撤销操作，将操作栈中当前调整时间下的表单设置状态数据从操作栈中弹出至撤销栈中，表单变为上一调整时间下的表单设置状态；还原按钮(14)被点击执行取消撤销操作，将最近放入撤销栈中表单设置状态数据从撤销栈中弹回至操作栈中，表单调整为从撤销栈中弹回的表单设置状态。