CN113407877A - 一种可配置化的web表单实现方法 - Google Patents

Abstract

本发明公开了一种可配置化的web表单实现方法，属于web前端应用设计技术领域。本发明包括智能表单设计模块、智能表单编辑模块、智能表单属性区别模块、智能表单渲染模块、智能表单数据对比模块和智能表单打印模块；所述智能表单设计模块用于设计出满足用户需求的智能表单，并将设计出的智能表单传输至智能表单编辑模块；所述智能表单编辑模块根据智能表单设计模块设计的智能表单对试验数据进行填写，并将填写后的智能表单传递至智能表单属性区别模块；所述智能表单属性区别单元用于对当前智能表单与上一访视阶段试验记录的表单中各组件属性进行对比，并将对比后的结果数据传输至智能表单渲染模块。

Description

一种可配置化的web表单实现方法

技术领域

本发明涉及web前端应用设计技术领域，具体为一种可配置化的web表单实现方法。

背景技术

在药物临床试验中，需要采集大量试验相关的数据，同时不同访视阶段采集的表格内容各不相同，这样传统的结构化web表单已不能满足现有需求，需要支持用户自己设计表单字段，以及表单内控件的灵活编排。

现有的web表单格式单一化，用户在对不同阶段的试验内容进行记录时，需要更换不同的web表单，不利于对试验结果的对比分析，以及现有的web表单通常采用人工操作的方法对试验结果进行对比分析，使得对比分析结果容易产生误差，降低了web表单的使用效果，以及现有的web表单在使用浏览器进行查阅时，加载时间过长，工作人员需要长时间等待，降低了工作人员的工作效率。

所以，人们需要一种可配置化的web表单实现方法来解决上述问题。

发明内容

本发明的目的在于提供一种可配置化的web表单实现方法，以解决上述背景技术中提出的问题。

为了解决上述技术问题，本发明提供如下技术方案：包括智能表单设计模块、智能表单编辑模块、智能表单属性区别模块、智能表单渲染模块、智能表单数据对比模块和智能表单打印模块；

所述智能表单设计模块用于设计出满足用户需求的智能表单，并将设计出的智能表单传输至智能表单编辑模块；

所述智能表单编辑模块根据智能表单设计模块设计的智能表单对试验数据进行填写，并将填写后的智能表单传递至智能表单属性区别模块；

所述智能表单属性区别单元用于对当前智能表单与上一访视阶段试验记录的表单中各组件属性进行对比，并将对比后的结果数据传输至智能表单渲染模块；

所述智能表单渲染模块用于对智能表单属性区别模块传输的结果数据进行接收，并对区别出的组件进行渲染；

所述智能表单数据对比模块对渲染后在浏览器上进行展示的智能表单的数据进行对比分析，并将对比分析结果进行存储；

所述智能表单打印模块用于对编辑处理后的智能表单进行打印。

进一步的，所述智能表单设计模块包括表单组件生成单元、组件属性设置单元、数据接收处理单元和数据库单元；

所述表单组件生成单元在可视化界面上，通过vue-grid-layout组件使用鼠标拖曳生成各类满足用户需求的组件，将各组件配置成业务需要的表单，并将初步形成的表单传输至组件属性设置单元；

所述组件属性设置单元通过属性页对各个组件的属性进行定义，并将属性设置后组件的位置、排列信息和组件的属性数据使用Json进行装封，并将装封后的数据信息传输至数据接收处理单元，属性设置包括对字段id，字体、对齐方式、显示名称、宽度和选项等设置；

所述数据接收处理单元用于接收组件属性设置单元传输的数据信息，并接收用户发送的AJAX请求，数据接收处理单元根据AJAX请求将Json字符串拆分成两个字段，然后将拆分的两个字段发送至数据库单元；

所述数据库单元用于接收数据接收处理单元发送的数据信息，并将接收的数据信息进行存储。

进一步的，所述智能表单编辑模块包括智能表单数据获取单元、智能表单数据录入单元和智能表单存储单元；

所述智能表单数据获取单元通过AXAJ请求从数据库单元获取符合用户需求的表单模板的排列信息和组件属性数据，并将获取的数据信息传输至智能表单数据录入单元；

所述智能表单数据录入单元通过prop属性将排列信息和组件属性数据传输至智能表单内部，智能表单通过vue-grid-layout组件渲染到vue组件中，用户在渲染出的表单中填写数据信息，填写时，业务端与智能表单内部通过$emit和$on进行消息通讯，以便传递用户的操作动作及数据，并将录入数据后的智能表单进行提交；

所述智能表单存储单元将提交后的智能表单通过Json格式进行封装，并经过AJAX回传到服务器，对表单数据进行存储。

进一步的，所述智能表单属性区别模块包括组件属性对比单元、组件属性区别标记单元、属性数据封装单元；

所述组件属性对比单元对该次药物临床试验填写的各web表单的属性进行对比，将对比后区别于同属性的组件名称进行记录，并将记录后的组件名称传输至组件属性区别标记单元；

所述组件属性区别标记单元对组件属性对比单元传输的组件名称进行接收，对接收的组件名称的属性进行标记，并将标记后的组件属性传输至属性数据封装单元；

所述属性数据封装单元对组件属性区别标记单元标记后的组件属性数据进行接收，对接收的属性数据通过Json进行装封，并将封装后的属性数据信息传输至能表单渲染模块。

进一步的，所述智能表单渲染模块包括Json页面数据模板转换单元、组件渲染单元和渲染组件显示单元；

所述Json页面数据模板转换单元根据智能表单属性区别模块传输的带有标记的属性对应的Json页面数据进行模板转换，获得待解析的AST文件，并将待解析文件传输至组件渲染单元，Json页面数据模板转换单元用于获取待解析的AST文件；

所述组件渲染单元通过vue组件对待解析的AST文件进行动态渲染，生成目标文件，并将生成的目标文件传输至渲染组件显示单元，目标文件为HTML文件；

所述渲染组件显示单元接收组件渲染单元传输的目标文件，并在浏览器上打开目标文件进行显示。

进一步的，智能表单数据对比模块包括同属性数据折线图绘制单元、数据对比分析单元和数据分析结果存储单元；

所述同属性数据折线图绘制单元根据智能表单属性区别模块区别出的同属性数据绘制出对应的折线图，并将绘制完成的折线图传输至数据对比分析单元，折线图为二维视图，其中x轴记录的为时间，y轴记录的为试验内容数据；

所述数据对比分析单元根据绘制完成的折线图进行对比分析，并结合各个折线图所对应的不同属性的数据进行观察，查找出对试验结果影响最大的数据，并将数据分析结果传输至数据分析结果存储单元；

所述数据分析结果存储单元对数据对比分析单元传输的数据结果进行接收，并将数据对比分析结果与对应的折线图进行组合存储。

进一步的，所述智能表单打印模块从智能表单存储单元获取表单数据，并挂载到智能表单组件，监听mounted生命周期，等待智能表单渲染完成后，计算各组件渲染后的高度，进行分页拆分成若干个组件，每页一个组件，以保证组件在跨页时不被截取。

进一步的，所述数据接收处理单元为服务器，所述渲染组件显示单元为PC浏览器或小程序端，服务器用于对Json格式封装的数据信息进行处理，渲染组件显示单元设置为PC浏览器或小程序端，便于使用者随时对web智能表单进行更改。

进一步的，所述智能表单中的基本控件包括静态文本、单行、多行输入框、单选框、复选框、下拉框、级联组件、日期控件、静态表格和动态表格，静态文本用于显示的静态文本类控件，主要支持域、id、标题、字体、对齐方式等属性；单行、多行输入框主要用于支持id，标题、标题宽度、对齐方式、限制类型(数字、精确度)等；单选框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；复选框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；下拉框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；级联组件主要用于支持id，标题、标题宽度、对齐方式等，其中id支持CDASH字典联想输入，数据来源于业务端，通过回调钩子的方式从业务获取下拉数据，支持多级联动，一般可用于地域以及字典常量的选择；日期控件主要用于支持id，标题、标题宽度、对齐方式、日期格式、缺失选项、未来日期控制、宽高等，其中id支持CDASH字典联想输入；静态表格主要支持id，行列设置(包括数量、列宽、列名)、字体、对齐方式等，支持表格内部添加各类其他空间，以及统一设置每一列的属性等；动态表格主要用于支持id，行列设置(包括数量、列宽、列名)、字体、对齐方式等。支持表格内部添加各类其他空间，以及统一设置每一列的属性等，在表单填写是支持动态添加行，其中单选框、复选框、下拉框和级联组件的id支持CDASH字典联想输入，选择项的配置支持CDASH的codelist自动匹配，支持通过配置逻辑的方式实现子选项的联动操作。

进一步的，所述智能表单通过普通npm组件接入的方式即可接入，智能表单主要参数为：isEdit:是否编辑模式；printModel：是否打印模式；userLayout：dom数据；input-search:CDASH字典联想输入回调数据源；cascader：级联组件数据回调；templASTeList：公共模板数据；save：保存回调方法；action-btn：操作按钮响应回调；componentValueChange：组件变化回调响应。

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

1.本发明通过vue-grid-layout实现控件排布和生成，可以让用户灵活配置自定义表单，避免使用者在对表单进行填写时对表单进行更换，有利于对试验结果的对比分析。

2.本发明通过绘制折线图的方式对智能表单记录的试验数据进行分析，效果更加直观，且不易产生误差，进一步增加了了web表单的使用效果。

3.本发明通过将区别于共有属性的组件先进行渲染，使得工作人员在浏览器上对web表单数据进行查阅时，先查看区别数据，在查看过程中web表单加载完成，缩短了等待时间，进一步提高了工作人员的工作效率。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1是本发明一种可配置化的web表单实现方法的工作原理图；

图2是本发明一种可配置化的web表单实现方法的设计模式的过程流程图；

图3是本发明一种可配置化的web表单实现方法的编辑模式的过程流程图；

图4是本发明一种可配置化的web表单实现方法的基本控件展示图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1-3，本发明提供技术方案：包括智能表单设计模块S1、智能表单编辑模块S2、智能表单属性区别模块S3、智能表单渲染模块S4、智能表单数据对比模块S5和智能表单打印模块S6；

智能表单设计模块S1用于设计出满足用户需求的智能表单，并将设计出的智能表单传输至智能表单编辑模块S2；智能表单设计模块S1包括表单组件生成单元S11、组件属性设置单元S12、数据接收处理单元S13和数据库单元S14，表单组件生成单元S11用于在现有组件类型的基础上增加扩展自定义组件，在可视化界面上，通过vue-grid-layout组件使用鼠标拖曳生成各类满足用户需求的组件，将各组件配置成业务需要的表单，并将初步形成的表单传输至组件属性设置单元S12，智能表单中的基本控件包括静态文本、单行、多行输入框、单选框、复选框、下拉框、级联组件、日期控件、静态表格和动态表格，静态文本用于显示的静态文本类控件，主要支持域、id、标题、字体、对齐方式等属性；单行、多行输入框主要用于支持id，标题、标题宽度、对齐方式、限制类型(数字、精确度)等；单选框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；复选框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；下拉框主要用于支持id，标题、标题宽度、对齐方式、选择项的配置等；级联组件主要用于支持id，标题、标题宽度、对齐方式等，其中id支持CDASH字典联想输入，数据来源于业务端，通过回调钩子的方式从业务获取下拉数据，支持多级联动，一般可用于地域以及字典常量的选择；日期控件主要用于支持id，标题、标题宽度、对齐方式、日期格式、缺失选项、未来日期控制、宽高等，其中id支持CDASH字典联想输入；静态表格主要支持id，行列设置(包括数量、列宽、列名)、字体、对齐方式等，支持表格内部添加各类其他空间，以及统一设置每一列的属性等；动态表格主要用于支持id，行列设置(包括数量、列宽、列名)、字体、对齐方式等。支持表格内部添加各类其他空间，以及统一设置每一列的属性等，在表单填写是支持动态添加行，其中单选框、复选框、下拉框和级联组件的id支持CDASH字典联想输入，选择项的配置支持CDASH的codelist自动匹配，支持通过配置逻辑的方式实现子选项的联动操作，组件属性设置单元S12用于通过属性页对各个组件的属性进行定义，并将属性设置后组件的位置、排列信息和组件的属性数据使用Json进行装封，并将装封后的数据信息传输至数据接收处理单元S13，属性设置包括对字段id，字体、对齐方式、显示名称、宽度和选项等设置，数据接收处理单元S13用于接收组件属性设置单元S12传输的数据信息，并接收用户发送的AJAX请求，数据接收处理单元S13根据AJAX请求将Json字符串拆分成两个字段，然后将拆分的两个字段发送至数据库单元S14，数据接收处理单元S13为服务器，服务器用于对Json格式封装的数据信息进行处理，数据库单元S14用于接收数据接收处理单元S13发送的数据信息，并将接收的数据信息进行存储。

智能表单编辑模块S2用于根据智能表单设计模块S1设计的智能表单对试验数据进行填写，并将填写后的智能表单传递至智能表单属性区别模块S3，智能表单编辑模块S2包括智能表单数据获取单元S21、智能表单数据录入单元S22和智能表单存储单元S23，智能表单数据获取单元S21通过AXAJ请求从数据库单元S14获取符合用户需求的表单模板的排列信息和组件属性数据，并将获取的数据信息传输至智能表单数据录入单元S22，智能表单数据录入单元S22通过prop属性将排列信息和组件属性数据传输至智能表单内部，智能表单通过vue-grid-layout组件渲染到vue组件中，用户在渲染出的表单中填写数据信息，填写时，业务端与智能表单内部通过$emit和$on进行消息通讯，$emit用于将消息进行发送，$on用于接收发送的消息，以便传递用户的操作动作及数据，并将录入数据后的智能表单进行提交，智能表单存储单元S23将提交后的智能表单通过Json格式进行封装，并经过AJAX回传到服务器，对表单数据进行存储。

智能表单属性区别单元S3用于对当前智能表单与上一访视阶段试验记录的表单中各组件属性进行对比，并将对比后的结果数据传输至智能表单渲染模块S4，智能表单属性区别模块S3包括组件属性对比单元S31、组件属性区别标记单元S32、属性数据封装单元S33，组件属性对比单元S31对该次药物临床试验填写的各web表单的属性进行对比，将对比后区别于同属性的组件名称进行记录，并将记录后的组件名称传输至组件属性区别标记单元S32，组件属性区别标记单元S32对组件属性对比单元S31传输的组件名称进行接收，对接收的组件名称的属性进行标记，并将标记后的组件属性传输至属性数据封装单元S33，属性数据封装单元S33对组件属性区别标记单元S32标记后的组件属性数据进行接收，对接收的属性数据通过Json进行装封，并将封装后的属性数据信息传输至能表单渲染模块S4，智能表单渲染模块S4用于对智能表单属性区别模块S3传输的结果数据进行接收，并对区别出的组件进行渲染；智能表单渲染模块S4包括Json页面数据模板转换单元S41、组件渲染单元S42和渲染组件显示单元S43，Json页面数据模板转换单元S41根据智能表单属性区别模块S3传输的带有标记的属性对应的Json页面数据进行模板转换，获得待解析的AST文件，并将待解析文件传输至组件渲染单元S42，AST文件不依赖于具体的文法，不依赖于语言的细节，将Json页面数据转化为待解析的AST文件后，便于对AST文件进行相关操作，组件渲染单元S42通过vue组件对待解析的AST文件进行动态渲染，生成目标文件，目标文件为HTML，HTML文件运行在浏览器上，由浏览器进行解析，并将生成的目标文件传输至渲染组件显示单元S43，渲染组件显示单元S43接收组件渲染单元S42传输的目标文件，并在浏览器上打开目标文件进行显示，智能表单数据对比模块S5对渲染后在浏览器上进行展示的智能表单的数据进行对比分析，并将对比分析结果进行存储，渲染组件显示单元S43为PC浏览器或小程序端，渲染组件显示单元S43设置为PC浏览器或小程序端，便于使用者随时对web智能表单进行更改。

智能表单数据对比模块S5包括同属性数据折线图绘制单元S51、数据对比分析单元S52和数据分析结果存储单元S53；同属性数据折线图绘制单元S51根据智能表单属性区别模块S3区别出的同属性数据绘制出对应的折线图，并将绘制完成的折线图传输至数据对比分析单元S52，折线图为二维视图，其中x轴记录的为时间，y轴记录的为试验内容数据，将试验数据以折线图的方式进行展示，便于对试验结果进行有效分析，数据对比分析单元S52根据绘制完成的折线图进行对比分析，并结合各个折线图所对应的不同属性的数据进行观察，查找出对试验结果影响最大的数据，并将数据分析结果传输至数据分析结果存储单元S53，数据分析结果存储单元S53对数据对比分析单元S52传输的数据结果进行接收，并将数据对比分析结果与对应的折线图进行组合存储。

智能表单打印模块S6用于对编辑处理后的智能表单进行打印，智能表单打印模块S6从智能表单存储单元S23获取表单数据，并挂载到智能表单组件，监听mounted生命周期，等待智能表单渲染完成后，计算各组件渲染后的高度，进行分页拆分成若干个组件，每页一个组件，以保证组件在跨页时不被截取，避免打印出的智能表单无法进行使用，mounted生命周期为vue的生命周期。

智能表单通过普通npm组件接入的方式接入，智能表单主要参数为：isEdit:是否编辑模式；printModel：是否打印模式；userLayout：dom数据；input-search:CDASH字典联想输入回调数据源；cascader：级联组件数据回调；templASTeList：公共模板数据；save：保存回调方法；action-btn：操作按钮响应回调；componentValueChange：组件变化回调响应。

实施例：

Vue，是一套用于构建用户界面的渐进式JavaScript框架，Vue被设计为可以自底向上逐层应用；

npm组件，npm是一个软件包管理器，主要进行JAVAScript的包管理；

Json(JavaScript Object Notation,JS对象简谱)，是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据,简洁和清晰的层次结构使得Json成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率；

vue-grid-layout，是一个非常优秀的vue栅格拖动布局的组件；

AJAX，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术；

Prop属性，是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件，在没有状态管理机制的时候,prop属性是组件之间主要的通信方式；

CDASH(Clinical Data Acquisition Standards Harmonization)，表示临床数据获取标准协调；

Codelist，指代码列表；

$emit用于发送数据，$on用于接收数据；

Mounted，vue的生命周期；

HTML，是一种用于创建网页的标准标记语言；

AST，是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种可配置化的web表单实现方法，其特征在于：包括智能表单设计模块(S1)、智能表单编辑模块(S2)、智能表单属性区别模块(S3)、智能表单渲染模块(S4)、智能表单数据对比模块(S5)和智能表单打印模块(S6)；

所述智能表单设计模块(S1)用于设计出满足用户需求的智能表单，并将设计出的智能表单传输至智能表单编辑模块(S2)；

所述智能表单编辑模块(S2)根据智能表单设计模块(S1)设计的智能表单对试验数据进行填写，并将填写后的智能表单传递至智能表单属性区别模块(S3)；

所述智能表单属性区别单元(S3)用于对当前智能表单与上一访视阶段试验记录的表单中各组件属性进行对比，并将对比后的结果数据传输至智能表单渲染模块(S4)；

所述智能表单渲染模块(S4)用于对智能表单属性区别模块(S3)传输的结果数据进行接收，并对区别出的组件进行渲染；

所述智能表单数据对比模块(S5)对渲染后在浏览器上进行展示的智能表单的数据进行对比分析，并将对比分析结果进行存储；

所述智能表单打印模块(S6)用于对编辑处理后的智能表单进行打印。

2.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单设计模块(S1)包括表单组件生成单元(S11)、组件属性设置单元(S12)、数据接收处理单元(S13)和数据库单元(S14)；

所述表单组件生成单元(S11)在可视化界面上，通过vue-grid-layout组件使用鼠标拖曳生成各类满足用户需求的组件，将各组件配置成业务需要的表单，并将初步形成的表单传输至组件属性设置单元(S12)；

所述组件属性设置单元(S12)通过属性页对各个组件的属性进行定义，并将属性设置后组件的位置、排列信息和组件的属性数据使用Json进行装封，并将装封后的数据信息传输至数据接收处理单元(S13)；

所述数据接收处理单元(S13)用于接收组件属性设置单元(S12)传输的数据信息，并接收用户发送的AJAX请求，数据接收处理单元(S13)根据AJAX请求将Json字符串拆分成两个字段，然后将拆分的两个字段发送至数据库单元(S14)；

所述数据库单元(S14)用于接收数据接收处理单元(S13)发送的数据信息，并将接收的数据信息进行存储。

3.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单编辑模块(S2)包括智能表单数据获取单元(S21)、智能表单数据录入单元(S22)和智能表单存储单元(S23)；

所述智能表单数据获取单元(S21)通过AXAJ请求从数据库单元(S14)获取符合用户需求的表单模板的排列信息和组件属性数据，并将获取的数据信息传输至智能表单数据录入单元(S22)；

所述智能表单数据录入单元(S22)通过prop属性将排列信息和组件属性数据传输至智能表单内部，智能表单通过vue-grid-layout组件渲染到vue组件中，用户在渲染出的表单中填写数据信息，填写时，业务端与智能表单内部通过$emit和$on进行消息通讯，以便传递用户的操作动作及数据，并将录入数据后的智能表单进行提交；

所述智能表单存储单元(S23)将提交后的智能表单通过Json格式进行封装，并经过AJAX回传到服务器，对表单数据进行存储。

4.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单属性区别模块(S3)包括组件属性对比单元(S31)、组件属性区别标记单元(S32)、属性数据封装单元(S33)；

所述组件属性对比单元(S31)对该次药物临床试验填写的各web表单的属性进行对比，将对比后区别于同属性的组件名称进行记录，并将记录后的组件名称传输至组件属性区别标记单元(S32)；

所述组件属性区别标记单元(S32)对组件属性对比单元(S31)传输的组件名称进行接收，对接收的组件名称的属性进行标记，并将标记后的组件属性传输至属性数据封装单元(S33)；

所述属性数据封装单元(S33)对组件属性区别标记单元(S32)标记后的组件属性数据进行接收，对接收的属性数据通过Json进行装封，并将封装后的属性数据信息传输至能表单渲染模块(S4)。

5.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单渲染模块(S4)包括Json页面数据模板转换单元(S41)、组件渲染单元(S42)和渲染组件显示单元(S43)；

所述Json页面数据模板转换单元(S41)根据智能表单属性区别模块(S3)传输的带有标记的属性对应的Json页面数据进行模板转换，获得待解析的AST文件，并将待解析文件传输至组件渲染单元(S42)；

所述组件渲染单元(S42)通过vue组件对待解析的AST文件进行动态渲染，生成目标文件，并将生成的目标文件传输至渲染组件显示单元(S43)；

所述渲染组件显示单元(S43)接收组件渲染单元(S42)传输的目标文件，并在浏览器上打开目标文件进行显示。

6.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：智能表单数据对比模块(S5)包括同属性数据折线图绘制单元(S51)、数据对比分析单元(S52)和数据分析结果存储单元(S53)；

所述同属性数据折线图绘制单元(S51)根据智能表单属性区别模块(S3)区别出的同属性数据绘制出对应的折线图，并将绘制完成的折线图传输至数据对比分析单元(S52)；

所述数据对比分析单元(S52)根据绘制完成的折线图进行对比分析，并结合各个折线图所对应的不同属性的数据进行观察，查找出对试验结果影响最大的数据，并将数据分析结果传输至数据分析结果存储单元(S53)；

所述数据分析结果存储单元(S53)对数据对比分析单元(S52)传输的数据结果进行接收，并将数据对比分析结果与对应的折线图进行组合存储。

7.根据权利要求3所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单打印模块(S6)从智能表单存储单元(S23)获取表单数据，并挂载到智能表单组件，监听mounted生命周期，等待智能表单渲染完成后，计算各组件渲染后的高度，进行分页拆分成若干个组件，每页一个组件，以保证组件在跨页时不被截取。

8.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述数据接收处理单元(S13)为服务器，所述渲染组件显示单元(S43)为PC浏览器或小程序端。

9.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单中的基本控件包括静态文本、单行、多行输入框、单选框、复选框、下拉框、级联组件、日期控件、静态表格和动态表格。

10.根据权利要求1所述的一种可配置化的web表单实现方法，其特征在于：所述智能表单通过普通npm组件接入的方式即可接入。

Images