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

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

【技术实现步骤摘要】
一种可配置化的web表单实现方法


[0001]本专利技术涉及web前端应用设计
，具体为一种可配置化的web表单实现方法。

技术介绍

[0002]在药物临床试验中，需要采集大量试验相关的数据，同时不同访视阶段采集的表格内容各不相同，这样传统的结构化web表单已不能满足现有需求，需要支持用户自己设计表单字段，以及表单内控件的灵活编排。
[0003]现有的web表单格式单一化，用户在对不同阶段的试验内容进行记录时，需要更换不同的web表单，不利于对试验结果的对比分析，以及现有的web表单通常采用人工操作的方法对试验结果进行对比分析，使得对比分析结果容易产生误差，降低了web表单的使用效果，以及现有的web表单在使用浏览器进行查阅时，加载时间过长，工作人员需要长时间等待，降低了工作人员的工作效率。
[0004]所以，人们需要一种可配置化的web表单实现方法来解决上述问题。

技术实现思路

[0005]本专利技术的目的在于提供一种可配置化的web表单实现方法，以解决上述
技术介绍
中提出的问题。
[0006]为了解决上述技术问题，本专利技术提供如下技术方案：包括智能表单设计模块、智能表单编辑模块、智能表单属性区别模块、智能表单渲染模块、智能表单数据对比模块和智能表单打印模块；
[0007]所述智能表单设计模块用于设计出满足用户需求的智能表单，并将设计出的智能表单传输至智能表单编辑模块；
[0008]所述智能表单编辑模块根据智能表单设计模块设计的智能表单对试验数据进行填写，并将填写后的智能表单传递至智能表单属性区别模块；
[0009]所述智能表单属性区别单元用于对当前智能表单与上一访视阶段试验记录的表单中各组件属性进行对比，并将对比后的结果数据传输至智能表单渲染模块；
[0010]所述智能表单渲染模块用于对智能表单属性区别模块传输的结果数据进行接收，并对区别出的组件进行渲染；
[0011]所述智能表单数据对比模块对渲染后在浏览器上进行展示的智能表单的数据进行对比分析，并将对比分析结果进行存储；
[0012]所述智能表单打印模块用于对编辑处理后的智能表单进行打印。
[0013]进一步的，所述智能表单设计模块包括表单组件生成单元、组件属性设置单元、数据接收处理单元和数据库单元；
[0014]所述表单组件生成单元在可视化界面上，通过vue
‑
grid
‑
layout组件使用鼠标拖曳生成各类满足用户需求的组件，将各组件配置成业务需要的表单，并将初步形成的表单
传输至组件属性设置单元；
[0015]所述组件属性设置单元通过属性页对各个组件的属性进行定义，并将属性设置后组件的位置、排列信息和组件的属性数据使用Json进行装封，并将装封后的数据信息传输至数据接收处理单元，属性设置包括对字段id，字体、对齐方式、显示名称、宽度和选项等设置；
[0016]所述数据接收处理单元用于接收组件属性设置单元传输的数据信息，并接收用户发送的AJAX请求，数据接收处理单元根据AJAX请求将Json字符串拆分成两个字段，然后将拆分的两个字段发送至数据库单元；
[0017]所述数据库单元用于接收数据接收处理单元发送的数据信息，并将接收的数据信息进行存储。
[0018]进一步的，所述智能表单编辑模块包括智能表单数据获取单元、智能表单数据录入单元和智能表单存储单元；
[0019]所述智能表单数据获取单元通过AXAJ请求从数据库单元获取符合用户需求的表单模板的排列信息和组件属性数据，并将获取的数据信息传输至智能表单数据录入单元；
[0020]所述智能表单数据录入单元通过prop属性将排列信息和组件属性数据传输至智能表单内部，智能表单通过vue
‑
grid
‑
layout组件渲染到vue组件中，用户在渲染出的表单中填写数据信息，填写时，业务端与智能表单内部通过$emit和$on进行消息通讯，以便传递用户的操作动作及数据，并将录入数据后的智能表单进行提交；
[0021]所述智能表单存储单元将提交后的智能表单通过Json格式进行封装，并经过AJAX回传到服务器，对表单数据进行存储。
[0022]进一步的，所述智能表单属性区别模块包括组件属性对比单元、组件属性区别标记单元、属性数据封装单元；
[0023]所述组件属性对比单元对该次药物临床试验填写的各web表单的属性进行对比，将对比后区别于同属性的组件名称进行记录，并将记录后的组件名称传输至组件属性区别标记单元；
[0024]所述组件属性区别标记单元对组件属性对比单元传输的组件名称进行接收，对接收的组件名称的属性进行标记，并将标记后的组件属性传输至属性数据封装单元；
[0025]所述属性数据封装单元对组件属性区别标记单元标记后的组件属性数据进行接收，对接收的属性数据通过Json进行装封，并将封装后的属性数据信息传输至能表单渲染模块。
[0026]进一步的，所述智能表单渲染模块包括Json页面数据模板转换单元、组件渲染单元和渲染组件显示单元；
[0027]所述Json页面数据模板转换单元根据智能表单属性区别模块传输的带有标记的属性对应的Json页面数据进行模板转换，获得待解析的AST文件，并将待解析文件传输至组件渲染单元，Json页面数据模板转换单元用于获取待解析的AST文件；
[0028]所述组件渲染单元通过vue组件对待解析的AST文件进行动态渲染，生成目标文件，并将生成的目标文件传输至渲染组件显示单元，目标文件为HTML文件；
[0029]所述渲染组件显示单元接收组件渲染单元传输的目标文件，并在浏览器上打开目标文件进行显示。
[0030]进一步的，智能表单数据对比模块包括同属性数据折线图绘制单元、数据对比分析单元和数据分析结果存储单元；
[0031]所述同属性数据折线图绘制单元根据智能表单属性区别模块区别出的同属性数据绘制出对应的折线图，并将绘制完成的折线图传输至数据对比分析单元，折线图为二维视图，其中x轴记录的为时间，y轴记录的为试验内容数据；
[0032]所述数据对比分析单元根据绘制完成的折线图进行对比分析，并结合各个折线图所对应的不同属性的数据进行观察，查找出对试验结果影响最大的数据，并将数据分析结果传输至数据分析结果存储单元；
[0033]所述数据分析结果存储单元对数据对比分析单元传输的数据结果进行接收，并将数据对比分析结果与对应的折线图进行组合存储。
[0034]进一步的，所述智能表单打印模块从智能表单存储单元获取表单数据，并挂载到智能表单组件，监听mounted生命周期，等待智能表单渲染完成后，计算各组件渲染后的高度，进行分页拆分成若干个组件，每页一个组件，以保证组件在跨页时不被截取。
[0035]进一步的，所述数据接收处理单元为服务器，所述渲染组件显示单元为PC浏览器或小程序端，服务器用于对Json格式封本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的一种可配...

【专利技术属性】
技术研发人员：尉建锋，叶建统，袁飞，陈少君，余思远，朱小燕，
申请(专利权)人：杭州卓健信息科技股份有限公司，
类型：发明
国别省市：