表单渲染方法、表单渲染系统及表单渲染装置与流程

本技术涉及计算机应用，具体而言，涉及一种表单渲染方法、表单渲染系统及表单渲染装置。

背景技术：

1、react是由facebook开发的用于构建用户界面的javascript库。react组件是可复用的、独立的代码单元，可以用于构建前端应用程序。许多常见的react前端组件库提供了丰富的表单组件，以满足表单相关的需求。现有的自定义表单组件和相关的表单控制组件，开发人员可以按需选择合适的表单组件，根据具体的表单需求进行组合和使用。其他常见的react前端组件库，如material-ui，也提供了类似的表单组件，供开发人员使用和定制。

2、然而，现有技术使用前端硬编码开发表单的展示字段，对于表单配置灵活，场景丰富的业务场景，前端代码量将随着业务的复杂度而增加，导致开发效率低。

技术实现思路

1、本技术实施例的目的在于提供一种表单渲染方法、表单渲染系统及表单渲染装置，用以解决现有技术使用前端硬编码开发表单的展示字段，对于表单配置灵活，场景丰富的业务场景，前端代码量将随着业务的复杂度而增加，导致开发效率低的问题。

2、本技术实施例提供的一种表单渲染方法，应用于表单渲染系统，包括：

3、获取设定数据格式的原始数据；其中，原始数据用于生成表单；设定数据格式的原始数据，包括分组属性对应的数据、表单字段值属性对应的数据、表单字段布局属性对应的数据和表单字段配置属性对应的数据；

4、根据分组属性对应的数据，进行分组配置，并展示表单的分组；

5、对每一分组，根据表单字段布局属性对应的数据，进行字段布局配置，并展示每一分组的字段布局；其中，字段布局包括每一行或列展示的内容和效果；

6、对每一分组内的每一行或列，根据表单字段配置属性对应的数据，渲染对应的表单控件；

7、对每一表单控件，根据表单字段值属性对应的数据，填充对应的字段默认值。

8、上述技术方案中，表单渲染系统获取的输入数据为设定数据格式的原始数据，即将数据按照设定数据格式，将数据划分为分组属性对应的数据、表单字段值属性对应的数据、表单字段布局属性对应的数据和表单字段配置属性对应的数据，使得表单的各个方面能够独立管理，提高了可维护性和扩展性。分组属性用于管理表单的分组配置；表单字段值属性用于存储表单字段值集合；表单字段布局属性用于关联表单布局，规范表单每行或每列展示的内容和布局效果等；表单字段配置属性用于每个表单控件的配置，表单控件例如单行文本组件。通过解析规范化数据结构的原始数据，可以根据配置信息自动生成表单布局，实现快速的表单渲染，减少手动编写大量表单布局代码的工作量，提高开发效率，并且，通过数据配置，可以支持多种表单布局的渲染，这样的灵活性使得开发人员能够根据实际需求选择适合的布局方式，并快速实现不同类型的表单展示。

9、在一些可选的实施方式中，其中，表单字段布局属性对应的数据包括联动规则解析表；

10、在对每一表单控件，根据表单字段值属性对应的数据，填充对应的字段默认值之后，方法还包括：

11、接收对目标表单控件的字段默认值的更改；

12、根据联动规则解析表，查询目标表单控件对应的联动规则；

13、若查询到目标表单控件对应的联动规则，则执行联动规则，对目标表单控件的关联表单控件的字段值进行联动更改。

14、上述技术方案中，表单字段布局属性对应的数据包括联动规则解析表，在目标表单控件的字段默认值更改之后，根据该联动规则解析表能够查询到对应的联动规则，并，进行目标表单控件与对应关联表单控件的字段值联动，例如目标表单控件的字段值改变时，影响其他字段的可见性、禁用状态或选项值等。此外，若无法查询到目标表单控件字段值更改对应的联动规则，则无需执行联动，结束当前流程。因此，本实施例提供了对表单数据的处理和字段联动配置的支持，以通过配置实现表单字段之间的联动效果。

15、在一些可选的实施方式中，其中，联动规则包括：固定值联动；

16、执行联动规则，对目标表单控件的关联表单控件的字段值进行联动更改，包括：

17、执行固定值联动，根据目标表单控件的更改后字段值，联动生成后续的关联表单控件，并为关联表单控件填充对应的字段默认值。

18、在一些可选的实施方式中，其中，联动规则包括：有值即联动；

19、执行联动规则，对目标表单控件的关联表单控件的字段值进行联动更改，包括：

20、若判定目标表单控件的字段值从空值更改为非空值，则联动生成后续的关联表单控件，并为关联表单控件填充对应的字段默认值；

21、或，若判定目标表单控件的字段值从非空值更改为空值，则删除目标表单控件的关联表单控件。

22、在一些可选的实施方式中，其中，联动规则包括：行内联动和跨行联动；通过行内联动配置，可以实现同一行的多个表单控件之间的字段值联动；通过跨行联动配置，可以实现不同行的多个表单控件之间的字段值联动。

23、在一些可选的实施方式中，其中，表单控件包括单行文本组件、多行文本组件、浏览框组件、日期选择器组件、时间选择器组件、评分组件、开关组件、区间组件和自定义组件中的至少一个；其中，自定义组件通过插件的形式传入表单渲染系统。

24、上述技术方案中，表单控件除了常规的单行文本组件、多行文本组件、浏览框组件、日期选择器组件、时间选择器组件、评分组件、开关组件、区间组件等组件之外，还包括了自定义组件。通过自定义组件，支持以插件好的形式集成多种定制的表单组件，为开发人员提供了更多选择和定制化的可能性。

25、在一些可选的实施方式中，其中，表单字段配置属性对应的数据包括字段检验规则；

26、方法还包括：

27、接收表单校验请求，并对表单控件的字段值，根据对应的字段检验规则进行校验；

28、在表单控件的字段值与对应的自动校验规则不匹配的情况下，判定校验不通过，并展示校验不通过的表单控件的字段显示区域。

29、上述技术方案中，表单字段配置属性对应的数据包括字段检验规则，通过字段检验规则的配置，提供了表单校验的功能，字段检验规则包括内置标准校验规则和扩展自定义校验规则，实现了对表单控制的字段值的校验，并且，展示校验不通过的表单控件的字段显示区域，以提醒用户。

30、本技术实施例提供的一种表单渲染系统，包括：

31、交互端设备，用于获取设定数据格式的原始数据；其中，原始数据用于生成表单；设定数据格式的原始数据，包括分组属性对应的数据、表单字段值属性对应的数据、表单字段布局属性对应的数据和表单字段配置属性对应的数据；展示表单的分组；展示每一分组的字段布局；

32、处理端设备，用于根据分组属性对应的数据，进行分组配置；对每一分组，根据表单字段布局属性对应的数据，进行字段布局配置；其中，字段布局包括每一行或列展示的内容和效果；对每一分组内的每一行或列，根据表单字段配置属性对应的数据，渲染对应的表单控件；对每一表单控件，根据表单字段值属性对应的数据，填充对应的字段默认值。

33、上述技术方案中，表单渲染系统包括交互端设备和处理端设备，交互端设备用于与用户或其他设备进行交互，以获取设定数据格式的原始数据，例如用户直接将该原始数据通过交互端设备进行数据的输入，或者，将其他设备的该原始数据通过交互端设备进行数据的导入。之后，处理端设备根据分组属性对应的数据，进行分组配置；对每一分组，根据表单字段布局属性对应的数据，进行字段布局配置；对每一分组内的每一行或列，根据表单字段配置属性对应的数据，渲染对应的表单控件；对每一表单控件，根据表单字段值属性对应的数据，填充对应的字段默认值。并且，交互端设备还展示表单的分组，每一分组的字段布局，每一表单控件的字段值等内容。

34、在一些可选的实施方式中，其中，表单字段布局属性对应的数据包括联动规则解析表；

35、交互端设备，还用于：接收对目标表单控件的字段默认值的更改；

36、处理端设备，还用于：根据联动规则解析表，查询目标表单控件对应的联动规则；若查询到目标表单控件对应的联动规则，则执行联动规则，对目标表单控件的关联表单控件的字段值进行联动更改。

37、上述技术方案中，用户通过交互端设备进行字段值的更改，处理端设备可根据该字段值的更改，进行目标表单控件和关联表单空的字段值之间的联动更改，并将联动更改后的表单通过交互端设备展示给用户。

38、在一些可选的实施方式中，其中，表单字段配置属性对应的数据包括字段检验规则；

39、交互端设备，还用于接收表单校验请求，并展示校验不通过的表单控件的字段显示区域；

40、处理端设备，还用于：对表单控件的字段值，根据对应的字段检验规则进行校验；在表单控件的字段值与对应的自动校验规则不匹配的情况下，判定校验不通过。

41、上述技术方案中，用户通过交互端设备输入请求表单校验的指令，处理单设备根据该指令，利用配置的字段检验规则进行校验，确定出校验不通过的表单控件的字段值，再通过交互端设备展示校验不通过的表单控件的字段显示区域。

42、本技术实施例提供的一种表单渲染装置，包括：

43、获取模块，用于获取设定数据格式的原始数据；其中，原始数据用于生成表单；设定数据格式的原始数据，包括分组属性对应的数据、表单字段值属性对应的数据、表单字段布局属性对应的数据和表单字段配置属性对应的数据；

44、分组展示模块，用于根据分组属性对应的数据，进行分组配置，并展示表单的分组；

45、布局展示模块，用于对每一分组，根据表单字段布局属性对应的数据，进行字段布局配置，并展示每一分组的字段布局；其中，字段布局包括每一行或列展示的内容和效果；

46、控件生成模块，用于对每一分组内的每一行或列，根据表单字段配置属性对应的数据，渲染对应的表单控件；

47、字段填充模块，用于对每一表单控件，根据表单字段值属性对应的数据，填充对应的字段默认值。

48、上述技术方案中，利用获取模块，获取原始数据，利用分组展示模块、布局展示模块、控件生成模块和字段填充模块，解析规范化数据结构的原始数据，可以根据配置信息自动生成表单布局，实现快速的表单渲染，减少手动编写大量表单布局代码的工作量，提高开发效率，并且，通过数据配置，可以支持多种表单布局的渲染，这样的灵活性使得开发人员能够根据实际需求选择适合的布局方式，并快速实现不同类型的表单展示。

49、本技术实施例提供的一种电子设备，包括：处理器和存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述机器可读指令被所述处理器执行时执行如以上任一所述的方法。

50、本技术实施例提供的一种计算机可读存储介质，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如以上任一所述的方法。