一种基于递归算法的多级表单界面可视化生成方法及装置

摘要

本发明公开了一种基于递归算法的多级表单界面可视化生成方法及装置，属于网络信息技术领域；方法主要包括：建立组件JSON规范，设计组件类型，定义多级组件递归结构，开发可视化搭建面板，创建表单组件编辑面板，以及开发JSON文件生成工具。递归算法在此发明中用于实现各层级初始数据的设置，以及复杂对象类型的渲染和操作。装置主要包括：负责存储基础类型组件和复合类型组件的组件列表模块，实现复合组件的渲染的显示面板模块，实现对组件的编辑和复用等功能的组件编辑操作模块，以及生成符合平台JSON规范的JSON的预构置器模块。本发明能够简化表单开发过程，提高开发效率，具备较高的灵活性和可扩展性，适用于处理多层级嵌套的复杂表单场景。

权利要求

1.一种基于递归算法的多级表单界面可视化生成方法，其特征在于，包括：

步骤1，建立组件JSON规范，其中，父组件与子组件之间构成树形数据结构，该树形数据结构支持使用递归算法处理多层次和嵌套关系的组件；建立组件JSON规范具体包括：设计组件基本信息、设计组件显示属性、设计组件交互属性、设计组件生命周期属性、设计组件远程接口调用属性；

其中，设计组件基本信息时，设计的组件类型包括基础组件类型和复合组件类型；并在复合组件类型的JSON规范中，添加一个用于存储子组件信息的属性，父组件与子组件均遵循JSON规范，且父组件与子组件之间构成树形数据结构；

步骤2，开发组件模板，作为可视化搭建面板中组件的构建块；

步骤3，开发可视化搭建面板，包括开发初始化组件列表和创建显示面板；其中，组件列表提供基础组件模板和组件库支持，并基于初始化JSON数据生成组件表单；显示面板采用流式布局以展示表单组件，并具备组件拖拽、选中和激活功能；

步骤4，创建表单组件编辑面板，实现对JSON相关数据的解耦，支持编辑、删除和复用功能；对于具有子组件的组件提供递归的编辑界面，支持用户添加、删除或修改子组件的属性；

步骤5，开发JSON文件生成工具，根据用户在可视化搭建面板上创建的组件结构和属性，生成符合JSON规范的文件。

2.根据权利要求1所述的基于递归算法的多级表单界面可视化生成方法，其特征在于，步骤2中，开发组件模板具体包括：创建HTML模板、开发组件样式、编写组件逻辑、预留组件接口、测试组件、编写文档和示例、组件封装和注册。

3.根据权利要求2所述的基于递归算法的多级表单界面可视化生成方法，其特征在于，创建HTML模板时，为每个组件模板创建一个HTML模板，定义组件的结构和布局；使用插槽标签为子组件留出位置，在渲染过程中，检查组件对象的属性，如果存在子组件，递归地将子组件渲染到父组件的插槽位置，实现组件无限制的层级嵌套。

4.根据权利要求1所述的基于递归算法的多级表单界面可视化生成方法，其特征在于，步骤3中，组件拖拽功能具体包括：当用户从组件列表中拖拽一个组件到显示面板时，在显示面板的相应位置创建一个新的、独立的组件实例，并将其初始化为适当的默认值；同时为新创建的组件实例分配一个唯一标识符；

组件选中与激活功能具体包括：当用户在显示面板中点击一个组件时，将识别选中的组件并将其激活，激活的组件周围出现边框或其他视觉提示以表示其选中状态，同时跟踪激活组件的相关信息。

5.根据权利要求4所述的基于递归算法的多级表单界面可视化生成方法，其特征在于，创建的显示面板还具备递归渲染的功能，具体实现方法为：定义一个组件渲染函数，接受一个组件对象作为参数，并返回渲染后的组件代码；在渲染函数中，根据组件类型选择不同的组件模板进行渲染；对于基础组件，使用基础组件模板进行渲染；对于复合组件，使用一个循环遍历该复合组件的所有子组件，并对每个子组件进行递归渲染，最终将渲染完成的子组件添加到父组件的相应位置；通过这种递归的方式，遍历整个组件树并将所有组件渲染到显示面板上，实现多级表单界面的可视化搭建。

6.根据权利要求1所述的基于递归算法的多级表单界面可视化生成方法，其特征在于，步骤4中，创建表单组件编辑面板时，提供一个递归的编辑界面，用户在递归的编辑界面中添加、删除或修改子组件的属性。

7.一种基于递归算法的多级表单界面可视化生成装置，其特征在于，包括：

组件列表模块，用于管理组件，包括基础组件、复合组件以及它们之间的父子组件关系，支持树形数据结构，并支持用户选择和配置组件；组件列表模块中，复合组件包括对象、数组、数组对象、标签页，复合组件中嵌套基础组件或其他复合组件；复合组件支持递归读取子组件列表，以实现无限嵌套，在复合组件类型的JSON规范中添加一个用于存储子组件信息的属性，父组件与子组件均遵循JSON规范，且父组件与子组件之间构成树形数据结构；

显示面板模块，用于获取组件列表，并支持递归渲染各层级组件，提供可视化操作表单组件的功能；

组件编辑操作模块，用于筛选JSON相关数据，实现组件的添加、删除、编辑功能，支持对组件属性的修改，从而实现组件的自定义配置和递归操作；

预构置器模块，用于将设计的多级表单界面转换为JSON数据结构，支持输出JSON文件和转化为前端代码。

8.根据权利要求7所述的基于递归算法的多级表单界面可视化生成装置，其特征在于，组件列表模块中，基础组件包括输入框、单选框、多选框、日期选择器。

说明书

一种基于递归算法的多级表单界面可视化生成方法及装置

技术领域

[0001] 本发明属于网络信息技术领域，尤其是涉及一种基于递归算法的多级表单界面可视化生成方法及装置。

背景技术

[0002] 随着各行各业的数字化转型，表单开发越发重要。然而，传统表单开发面临着难以克服的困境：需要编写大量代码，使用和维护效率极低等。

[0003] 公开号为CN113760287A的中国专利文献公开了一种基于JSON结构的表单创建方法及设备，方法包括：根据表单的使用类型选择对应的表单模板，其中，表单模板使用JSON结构进行描述，表单模板的JSON结构包括：数据实体模型、组件模型和视图模型根据所述单的使用场景选择对应的表单数据实体模型，其中，表单数据实体模型包括字段信息；根据使用场景选择表单展示的字段信息，以用于确定表单对应的组件模型和视图模型，并根据表单对应的组件模型和视图模型完成表单创建。

[0004] 公开号为CN113849173A的中国专利文献公开了一种基于JSON的动态表单生成方法及系统，先将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；然后将读取的表单内存对象转换成UI框架特定的前端组件或元素，依托UI框架将最终的表单展现在Web页面中。

[0005] 在现有技术中，前端开发领域已在数据库表单生成上进行了一定程度的探索，包括封装JSON文件的组件库和可视化表单设计器搭建平台等。然而，这些组件库主要面向开发人员，仍需大量代码开发；现有的可视化表单设计器搭建平台往往存在局限性，如仅支持生成单级表单，无法满足多级表单的多层级嵌套和索引结构需求。

[0006] 综上所述，目前市场上急需一种可视化的多级表单生成装置，以便于软件开发和维护。通过实现报表的快速开发和便捷应用，这种装置在推动企业数字化转型和升级过程中具有重要意义。

发明内容

[0007] 本发明提供了一种基于递归算法的多级表单界面可视化生成方法及装置，能够有效简化多层级表单的开发过程，提高开发效率，并且具有较高的灵活性和可扩展性。

[0008] 一种基于递归算法的多级表单界面可视化生成方法，包括：

[0009] 步骤1，建立组件JSON规范，其中，父组件与子组件之间构成树形数据结构，该树形数据结构支持使用递归算法处理多层次和嵌套关系的组件；

[0010] 步骤2，开发组件模板，作为可视化搭建面板中组件的构建块；

[0011] 步骤3，开发可视化搭建面板，包括开发初始化组件列表和创建显示面板；其中，组件列表提供基础组件模板和组件库支持，并基于初始化JSON数据生成组件表单；显示面板采用流式布局以展示表单组件，并具备组件拖拽、选中和激活功能；

[0012] 步骤4，创建表单组件编辑面板，实现对JSON相关数据的解耦，支持编辑、删除和复用功能；对于具有子组件的组件提供递归的编辑界面，支持用户添加、删除或修改子组件的属性；

[0013] 步骤5，开发JSON文件生成工具，根据用户在可视化搭建面板上创建的组件结构和属性，生成符合JSON规范的文件。

[0014] 进一步地，步骤1中，建立组件JSON规范具体包括：设计组件基本信息、设计组件显示属性、设计组件交互属性、设计组件生命周期属性、设计组件远程接口调用属性；

[0015] 其中，设计组件基本信息时，设计的组件类型包括基础组件类型和复合组件类型；并在复合组件类型的JSON规范中，添加一个用于存储子组件信息的属性，父组件与子组件均遵循JSON规范，且父组件与子组件之间构成树形数据结构。

[0016] 步骤2中，开发组件模板具体包括：创建HTML模板、开发组件样式、编写组件逻辑、预留组件接口、测试组件、编写文档和示例、组件封装和注册。

[0017] 创建HTML模板时，为每个组件模板创建一个HTML模板，定义组件的结构和布局；使用插槽标签为子组件留出位置，在渲染过程中，检查组件对象的属性，如果存在子组件，递归地将子组件渲染到父组件的插槽位置，实现组件无限制的层级嵌套。

[0018] 步骤（3）中，组件拖拽功能具体包括：当用户从组件列表中拖拽一个组件到显示面板时，在显示面板的相应位置创建一个新的、独立的组件实例，并将其初始化为适当的默认值；同时为新创建的组件实例分配一个唯一标识符；

[0019] 组件选中与激活功能具体包括：当用户在显示面板中点击一个组件时，将识别选中的组件并将其激活，激活的组件周围出现边框或其他视觉提示以表示其选中状态，同时跟踪激活组件的相关信息。

[0020] 创建的显示面板还具备递归渲染的功能，具体实现方法为：

[0021] 定义一个组件渲染函数，接受一个组件对象作为参数，并返回渲染后的组件代码；在渲染函数中，根据组件类型选择不同的组件模板进行渲染；对于基础组件，使用基础组件模板进行渲染；对于复合组件，使用一个循环遍历该复合组件的所有子组件，并对每个子组件进行递归渲染，最终将渲染完成的子组件添加到父组件的相应位置；通过这种递归的方式，遍历整个组件树并将所有组件渲染到显示面板上，实现多级表单界面的可视化搭建。

[0022] 步骤4中，创建表单组件编辑面板时，提供一个递归的编辑界面，用户在递归的编辑界面中添加、删除或修改子组件的属性。

[0023] 一种基于递归算法的多级表单界面可视化生成装置，包括：

[0024] 组件列表模块，用于管理组件，包括基础组件、复合组件类型以及它们之间的父子组件关系，支持树形数据结构，并支持用户选择和配置组件；

[0025] 显示面板模块，用于获取组件列表，并支持递归渲染各层级组件，提供可视化操作表单组件的功能；

[0026] 组件编辑操作模块，用于筛选JSON相关数据，实现组件的添加、删除、编辑功能，支持对组件属性的修改，从而实现组件的自定义配置和递归操作；

[0027] 预构置器模块，用于将设计的多级表单界面转换为JSON数据结构，支持输出JSON文件和转化为前端代码。

[0028] 组件列表模块中，基础组件包括输入框、单选框、多选框、日期选择器。

[0029] 复合组件包括对象、数组、数组对象、标签页，复合组件中嵌套基础组件或其他复合组件；

[0030] 复合组件支持递归读取子组件列表，以实现无限嵌套，在复合组件类型的JSON规范中添加一个用于存储子组件信息的属性，父组件与子组件均遵循JSON规范，且父组件与子组件之间构成树形数据结构。

[0031] 与现有技术相比，本发明具有以下有益效果：

[0032] 1、本发明通过使用递归算法自动处理多级表单的渲染和生成，可以大大减少手动编写代码的工作量，从而提高开发效率。

[0033] 2、由于表单结构和逻辑清晰、规范，维护人员可以更容易地理解和修改代码，从而降低代码维护的难度。

[0034] 3、本发明允许开发人员灵活地组合和嵌套各种基础和复合类型组件，从而实现更为定制化的表单界面。

[0035] 4、由于本发明采用规范化的JSON格式和递归算法，生成的代码具有更高的正确性，从而减少了错误和调试所需的时间。

附图说明

[0036] 图1为本发明实施例提供的一种基于递归算法的多级表单界面可视化生成方法的流程图；

[0037] 图2为本发明实施例中建立组件JSON规范的流程图；

[0038] 图3为本发明实施例中实现递归渲染的流程图；

[0039] 图4为本发明实施例中可视化搭建过程的流程图；

[0040] 图5为本发明实施例提供的一种基于递归算法的多级表单界面可视化生成装置的架构图。

具体实施方式

[0041] 下面结合附图和实施例对本发明做进一步详细描述，需要指出的是，以下所述实施例旨在便于对本发明的理解，而对其不起任何限定作用。

[0042] 如图1所示，一种基于递归算法的多级表单界面可视化生成方法，具体包括以下步骤：

[0043] 步骤1、建立组件JSON规范：为组件建立统一的JSON规范以载入合规的组件JSON数据，规范化的JSON文件将用于后续的可视化搭建过程。

[0044] 如图2所示，建立组件JSON规范包括以下步骤：

[0045] 步骤1‑1，设计组件基本信息：包括组件名称、组件类型、唯一标识符（如ID）、子组件信息等。这些信息有助于区分和管理各种组件。

[0046] 特别地，组件类型包括基础组件类型和复合组件类型。

[0047] 基础组件类型覆盖多级表单的常见需求，以确保可视化搭建面板具有足够的灵活性。基础组件类型包括输入框、单选框、多选框、日期选择器等；

[0048] 复合组件类型，包括：1.对象：在表单中，对象类型的组件可以包含多个不同类型的子组件，用于处理更复杂的数据结构；2.数组：数组类型的组件可以包含多个相同类型的子组件，以实现对列表数据的输入和管理；3.数组对象：表示一组有序的对象，数组对象类型的组件结合了对象和数组的特性，用于处理更复杂的数据结构，如表格等；4.标签页（Tabs）：一种用于在有限空间内展示多个视图的复合组件，每个标签页都可以包含不同的子组件。

[0049] 复合组件具有递归结构：在复合组件的JSON规范中，添加一个名为“children”的属性，用于存储子组件的数据。对于具有子组件的父组件，其“children”属性将包含一个子组件对象信息。子组件对象同样遵循JSON规范，具有与父组件类似的结构。父组件与子组件之间构成树形数据结构，这种树形结构允许使用递归算法，从而可以处理具有多层次和嵌套关系的组件结构。

[0050] 步骤1‑2，设计组件显示属性：包括组件的尺寸、位置、颜色、字体、边距等视觉相关的属性。这些属性将用于控制组件在可视化搭建面板中的外观。

[0051] 步骤1‑3，设计组件交互属性：包括组件的事件监听、响应方式等交互相关的属性。这些属性将用于定义组件与用户或其他组件之间的交互行为。

[0052] 步骤1‑4，设计组件生命周期属性：包括组件的创建、更新、销毁等生命周期相关的属性。这些属性将用于控制组件在不同生命周期阶段所需执行的操作。

[0053] 步骤1‑5，设计组件远程接口调用属性：包括组件与后端服务之间的通信信息，如API地址、请求方法、请求参数等。这些属性将用于定义组件与后端服务的通信行为。

[0054] 步骤2、开发组件模板：为了支持基于VUE的可视化多级表单界面生成方法和装置，需要开发一系列组件模板。这些组件模板将作为可视化搭建面板中组件的构建块，允许用户快速创建复杂的多级表单结构。

[0055] 组件模板开发的主要步骤如下：

[0056] 步骤2‑1，创建HTML模板：为每个组件模板创建一个HTML模板，定义组件的结构和布局。使用VUE指令、插槽（slot）等特性实现组件的动态渲染和可嵌套化。其具体实现为，使用VUE的slot标签为子组件留出位置，在渲染过程中，检查组件对象的“children”属性，如果存在子组件，递归地将子组件渲染到父组件的slot位置，实现组件无限制的层级嵌套。

[0057] 步骤2‑2，开发组件样式：为每个基础组件和复合组件定义相应的CSS样式表，设置组件的外观和样式，并预设主题和样式变量，以便用户根据需要定制组件外观。

[0058] 步骤2‑3，开发组件逻辑：为每个基础组件编写JavaScript逻辑，实现组件的交互功能和数据处理。使用VUE组件生命周期钩子（如created、mounted等）来初始化组件状态和事件监听器。确保组件逻辑遵循良好的编程实践，以便于维护和扩展。

[0059] 步骤2‑4，预留组件属性接口：为每个组件定义接收的组件的属性(props)类型，包括组件显示属性、远程接口调用属性等。在VUE中，组件的属性(props)是一种允许父组件向子组件传递数据的机制。在开发过程中，为了保证组件的可靠性和稳定性，需要对每个组件的props类型进行描述和明确规定。props类型的描述方式和检查校验可以通过以下几个方面实现，包括：类型检查、默认值、必要性检查、自定义校验。

[0060] 类型检查用于检测父组件传递的属性类型是否正确。通过设置props的type选项来规定传入的属性类型。

[0061] 默认值为组件的props属性设置默认值(default values)，以便在父组件没有传递该属性时，组件能够使用默认值进行渲染和处理。

[0062] 必要性检查通过设置props的required选项为true，强制规定必须传递该属性，否则会在控制台中抛出警告信息。

[0063] 自定义校验通过设置props的validator选项为一个函数来实现自定义的校验逻辑。这样可以更加灵活地控制属性的类型和取值范围。

[0064] 步骤2‑5，测试组件：对每个基础组件进行严格的测试，以确保其功能正确、性能良好且兼容主流浏览器。使用自动化测试框架（如Jest、Mocha等）来编写和执行测试用例，测试覆盖各种使用场景，包括不同的属性设置、嵌套结构和数据类型，最终执行测试用例以确保组件功能正确、性能良好且兼容主流浏览器。

[0065] 步骤2‑6，编写文档和示例：编写详细的组件文档和示例，介绍每个组件的功能、属性、使用方法和注意事项。

[0066] 步骤2‑7，组件封装和注册：将开发好的基础组件封装后注册到VUE应用，以便在可视化搭建面板中使用。

[0067] 步骤3，开发可视化搭建面板，包括初始化组件列表和显示面板。初始化组件列表提供基础组件模板和组件库支持，并基于初始化JSON数据生成组件表单。显示面板采用流式布局，以实现表单组件的列表显示，并支持组件拖拽功能、选中与激活功能。其中，当用户拖拽组件列表中的组件时，系统将为该组件生成相应的深拷贝初始化数据。

[0068] 开发可视化搭建面板具体包括如下子步骤：

[0069] 步骤3‑1，开发初始化组件列表：创建组件列表，其中包括预定义的一系列基础组件，如文本框、按钮、下拉菜单等。为每个组件分配一个缩略图以表示其视觉效果，并为其添加拖拽功能。

[0070] 步骤3‑2，创建显示面板：显示面板是用户在可视化搭建过程中用于放置和编辑组件的工作区域。显示面板采用流式布局，以便灵活地调整组件的位置。

[0071] 步骤3‑3，开发拖拽功能：当用户从组件列表中拖拽一个组件到显示面板时，系统会在显示面板的相应位置创建一个新的、独立的组件实例，并将其初始化为适当的默认值。同时，系统会为新创建的组件实例分配一个唯一标识符（如ID），以便后续操作。

[0072] 步骤3‑4，开发组件选中与激活功能：当用户在显示面板中点击一个组件时，系统将识别选中的组件并将其激活。激活的组件周围可能会出现边框或其他视觉提示以表示其选中状态。同时，系统将跟踪激活组件的相关信息，以便在属性编辑面板中进行修改。

[0073] 步骤3‑5，实现实时预览功能：在可视化搭建过程中，为用户提供实时预览功能，以便用户能够查看组件在实际运行环境中的效果。所述预览功能由使用Vuex数据共享来实现。具体实现方式为，在用户对表单进行编辑时，将编辑后的表单数据存储到Vuex中。同时，将存储的表单数据传递给表单预览组件，以实时显示表单的预览效果。这样，只要表单数据发生变化，就会自动触发表单预览的更新，从而实现实时预览功能。

[0074] 步骤3‑6，构建树形数据结构：如果用户将组件拖拽到复合组件（如对象、数组、标签页）中，需要在其“children”属性中增加相应子组件信息。这样，可以构建出表示多级表单结构的树形数据结构。

[0075] 步骤3‑7，实现递归渲染：根据构建的树形数据结构，使用递归算法遍历组件树并将每个组件渲染到显示面板。

[0076] 如图3所示，实现递归渲染的具体方法为：定义一个组件渲染函数，接受一个组件对象作为参数，并返回渲染后的组件代码。在渲染函数中，根据组件类型选择不同的组件模板进行渲染。对于基础组件，使用基础组件模板进行渲染；对于复合组件，递归地渲染其子组件并将渲染完成的子组件通过VUE的slot标签添加到父组件的相应位置。具体来说，使用一个循环遍历该复合组件的所有子组件，并对每个子组件进行递归渲染，最终将渲染完成的子组件添加到父组件的相应位置。通过这种递归的方式，可以遍历整个组件树并将所有组件渲染到显示面板上，实现了多级表单界面的可视化搭建。

[0077] 步骤3‑8，模板与组件库支持：提供预定义的表单模板和组件库支持，以帮助用户快速搭建常见类型的多级表单界面。用户可以从模板库中选择适合他们需求的模板，并根据需要对模板中的组件进行添加、删除或修改。同时，用户可以将自己开发的组件添加到组件库中，以便日后重复使用。

[0078] 步骤4、创建表单组件编辑面板，实现对JSON相关数据的解耦，同时实现编辑、删除、复用功能。由于存在多层级嵌套组件，对于具有子组件的组件，提供一个递归的编辑界面，允许用户添加、删除或修改子组件的属性。

[0079] 创建表单组件编辑面板具体包括以下步骤：

[0080] 步骤4‑1，创建属性编辑面板：属性编辑面板用于修改选中组件的属性，如显示属性、交互属性等。根据组件的JSON规范，为每个属性创建相应的输入控件，如文本框、颜色选择器、下拉菜单等。当用户修改属性值时，实时更新组件的深拷贝JSON数据，并在显示面板中反映更改。

[0081] 步骤4‑2，撤销和重做功能：实现撤销和重做功能，以便用户能够方便地撤销或恢复他们在可视化搭建过程中所做的更改。通过使用备忘录模式，记录用户在显示面板和属性编辑面板中的操作历史，并根据需要撤销或重做其历史操作。

[0082] 步骤4‑3，实现递归编辑：在可视化搭建面板中，对于复合组件设计相应的递归算法，根据当前组件是否具有子组件，自动显示相应的子组件编辑选项。用户可以在递归的编辑界面中添加、删除或修改子组件的属性，以满足不同的业务需求。

[0083] 步骤5、开发JSON文件生成工具实现代码的生成，该工具将根据用户在可视化搭建面板上创建的组件结构和属性，生成符合JSON规范的文件，从而简化开发过程并规范化代码。

[0084] 开发JSON文件生成工具的主要步骤包括：

[0085] 步骤5‑1，提取组件树信息：遍历可视化搭建面板中的组件树，提取每个组件的属性以及子组件信息并将其组织成一个结构化的对象，以便后续转换为JSON文件。

[0086] 步骤5‑2，转换为JSON格式：通过JavaScript内置的JSON.stringify方法将组件树对象转换为JSON格式字符串。转换后的JSON格式字符串支持使用服务器端或浏览器的文件操作API（FileSaver）将字符串保存为JSON文件。

[0087] 步骤5‑3，保存和导出功能：开发保存和导出功能，以便用户能够将搭建好的多级表单界面保存为JSON文件或其他格式。保存功能可以将当前显示面板中的所有组件及其属性数据序列化为符合平台JSON规范的JSON字符串，并将其存储到云端。导出功能可以将JSON数据通过代码生成功能转换为前端代码，包括HTML模板、CSS样式和JavaScript逻辑，以便用户能够将生成的多级表单界面直接嵌入到他们的项目中。

[0088] 下面介绍可视化搭建过程中，可视化搭建面板、表单组件编辑面板渲染生成过程、以及操作组件更新的过程。

[0089] 如图4所示，在可视化搭建过程中，首先开始载入首层组件的JSON数据。然后，按顺序读取每个组件的基本信息和属性，并根据该信息载入对应的组件模板。接着，根据组件的JSON数据，在可视化搭建面板中渲染组件，使其可见并可编辑。

[0090] 随后，通过解耦组件的JSON数据，生成对应的表单组件编辑界面，该界面用于修改组件的属性。如果当前组件包含子组件，继续载入子组件的JSON数据，以便依次读取子组件的基本信息和属性，并进行后续操作。

[0091] 如果当前组件没有子组件，继续判断是否需要更新组件的属性。如果需要更新，JSON文件生成工具将更新后的组件属性同步到组件的JSON数据中。然后，重新回到可视化搭建面板，根据更新后的组件JSON数据重新渲染组件。

[0092] 如果当前组件不需要更新属性，则表示可视化搭建过程结束，完成了表单的构建。

[0093] 基于同样的发明思路，如图5所示，实施例还提供了一种基于递归算法的多级表单界面可视化生成装置，包括：

[0094] 组件列表模块：该模块包含基础类型组件和复合类型组件，支持树形数据结构和递归操作。其中基础类型组件可以实现常见的表单输入、数据展示等功能，包括输入框、选择框、单选框、日期选择器、文件上传等；而复合类型组件通常用于实现比较复杂的数据输入和展示功能，包括对象、数组和数组对象等，它们支持父子组件关系和递归渲染。通过组件列表模块，用户可以轻松地选择需要的组件，并进行快速的配置和使用，大大提高了页面设计的效率和灵活性。

[0095] 显示面板模块：该模块用于获取组件列表，支持递归渲染和树形数据结构，以设置各层级初始数据。在渲染数组类型组件时，模块遍历数组及每个单项的属性描述，渲染相应操作组件，实现多级表单渲染和展示。它支持复杂对象、数组类型数据结构，处理父子组件关系和递归渲染。通过显示面板模块，用户可以可视化地操作表单组件，快速构建多级表单界面。

[0096] 组件编辑操作模块：该模块筛选相关JSON数据，包括组件名称、类型、位置、大小、样式、事件等信息，实现组件的添加、删除、编辑等功能。用户可通过操作JSON数据调整组件布局和样式，满足页面设计需求。同时，模块支持递归处理树形数据结构、父子组件关系，提供撤销和重做功能，记录用户操作历史，便于撤销和重做。这提高了用户操作灵活性和效率，简化了多级表单界面的搭建和编辑过程。

[0097] 预构置器模块：该模块用于将用户在可视化搭建面板中设计的多级表单界面转换为相应的JSON数据结构。模块分析组件列表、显示面板和组件编辑操作模块的数据，处理递归、树形数据结构，以及父子组件关系，生成符合平台JSON规范的JSON文件。支持输出JSON文件和转化为前端代码，方便后续开发过程中使用，提高了表单设计和开发的效率。

[0098] 以上所述的实施例对本发明的技术方案和有益效果进行了详细说明，应理解的是以上所述仅为本发明的具体实施例，并不用于限制本发明，凡在本发明的原则范围内所做的任何修改、补充和等同替换，均应包含在本发明的保护范围之内。