[发明专利]可视化表单绘制方法

说明书

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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