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

权利要求书

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