一种基于元数据的动态表单配置方法技术

技术编号:38770759 阅读:13 留言:0更新日期:2023-09-10 10:44
本发明专利技术涉及元数据技术领域,具体为一种基于元数据的动态表单配置方法,包括以下步骤:统计动态表单的特性;确定表单展示内容;页面渲染;有益效果为:本发明专利技术提出的基于元数据的动态表单配置方法,通过简单的配置以及灵活的渲染方式减少了表单的设计耗时,而且实现了多种同类表单样式的统一;在后续使用过程中,如果有页面的改动需求,只需修改这一个复用页面即可实现所有费用类型表单的改动更新,提升了修改效率,也减少了出现错误的几率,便于维护。便于维护。便于维护。

【技术实现步骤摘要】
一种基于元数据的动态表单配置方法


[0001]本专利技术涉及元数据
,具体为一种基于元数据的动态表单配置方法。

技术介绍

[0002]Vue.js采用自底而上的增量开发设计,是一套用于用户界面的渐进式框架。它借鉴了Angular的模板和数据绑定技术以及react的组件化和虚拟DOM技术。
[0003]现有技术中,Vue.js只关心视图层,具有易学,轻量,灵活的特点,编码简洁,体积小,运行效率高,可以通过简单的API实现响应式的数据绑定和可组合的视图组件,适合移动/PC开发,Mysql是一个关系型数据库管理系统,它可以将数据保存在不同的表中,提升了其数据操作的速度和灵活性。
[0004]但是,传统的前端表单设计采用固定的数据来渲染页面,在同类页面较少时比较方便。但是当需求多样化,同类页面数量较多时,逐一设计页面便会带来大量的重复工作,在统一样式方面也较为麻烦,而且在后续需求变更时,维护原有的页面也会变得困难。

技术实现思路

[0005]本专利技术的目的在于提供一种基于元数据的动态表单配置方法,以解决上述
技术介绍
中提出的问题。
[0006]为实现上述目的,本专利技术提供如下技术方案:一种基于元数据的动态表单配置方法,所述动态表单配置方法包括以下步骤:
[0007]统计动态表单的特性;
[0008]确定表单展示内容;
[0009]页面渲染。
[0010]优选的,统计动态表单的特性分为表格和附件上传两大类。
[0011]优选的,每个表格都有其对应的表头和表体数据,它们主要有以下特性:
[0012]1)费用类型编码:用于根据每种费用类型过滤表格数据列;
[0013]2)字段编码:表头英文编码,用于动态扩展时字段与值的双向绑定;
[0014]3)字段名:表头中文名;
[0015]4)展示类型:确定表头对应的表体数据展示类型,如输入框、下拉选择框、复选框、弹出框、时间选择器、文件,展示类型为文件的数据不在表格中展示,将在后面的附件上传展示;
[0016]5)是否可见:控制这列表头和数据在这个表格中是否展示;
[0017]6)选项:存放名称和编码的数组,当表体数据获取值的方式为下拉选择框选择时,绑定字段多为英文编码,当该表格保存后不可编辑时,由于前台显示大多为中文文字,这时使用该字段对应选项内的名称

编码数组,用于编码向文字转换,在后续保存数据到数据库时,也同样会用到选项来做文字向编码转换;
[0018]7)是否禁用:控制表体数据是否可以编辑;
[0019]8)宽度:控制列宽;
[0020]9)校验规则函数:控制可编辑数据列的校验规则,如非空、只允许数字、精确度;
[0021]10)值来源方式:表体数据的来源方式分为输入和计算两种方式,来源方式为输入的表体数据只会随输入值变化而变化,来源方式为计算的表体数据会监控值计算公式关联的字段值,当这些字段值发生变化时,解析值计算公式重新计算得出新数值;
[0022]11)值计算公式:用于在与值计算公式相关的字段值发生变化后,js获取值计算公式来自动计算表格数据,如单价和数量发生变化后,根据申请总额对应的值计算公式price*num得出申请总额等;
[0023]12)序号:确定表头排列顺序。
[0024]优选的,附件上传具体包括:
[0025]1)费用类型编码:用于根据每种费用类型过滤展示文件;
[0026]2)字段编码:附件类别编码;
[0027]3)字段名:文件类别名,类似文件夹,例如“发票文件”、“其它文件”之类;
[0028]4)展示类型:只有展示类型为文件的字段才会在附件上传展示;
[0029]5)是否可见:控制这类文件是否展示;
[0030]6)校验规则函数:控制文件上传规则,如必填、限制上传文件类型png、jpg、doc、docx、xls、xlsx。
[0031]优选的,确定表单展示内容时,根据费用类型查询出此表单需要展示的元数据数组,数组内包含非文件类的表格元数据和文件类的附件上传元数据,根据“是否可见”的值为“是”将所有元数据进行初步过滤,保留下“可见”的元数据。
[0032]优选的,过滤出“展示类型”为输入框、下拉选择器、复选框、弹出框、时间选择器的表格类元数据;过滤出“展示类型”为文件的文件类元数据,判断文件类元数据的“校验规则”。
[0033]优选的,所述页面渲染包括表格渲染和附件上传;
[0034]表格渲染时,根据表头数组遍历得出表格动态列,动态绑定字段编码、字段名、列宽等属性,根据不同的“展示类型”选择诸如时间选择器、输入框等不同的组件,同时绑定校验;
[0035]附件上传时,根据文件数组遍历得出展示附件类别,动态绑定字段编码、字段名等属性。
[0036]与现有技术相比,本专利技术的有益效果是:
[0037]本专利技术提出的基于元数据的动态表单配置方法,通过简单的配置以及灵活的渲染方式减少了表单的设计耗时,而且实现了多种同类表单样式的统一;在后续使用过程中,如果有页面的改动需求,只需修改这一个复用页面即可实现所有费用类型表单的改动更新,提升了修改效率,也减少了出现错误的几率,便于维护。
附图说明
[0038]图1为本专利技术方法流程图。
具体实施方式
[0039]为了使本专利技术的目的、技术方案进行清楚、完整地描述,及优点更加清楚明白,以下结合附图对本专利技术实施例进行进一步详细说明。应当理解,此处所描述的具体实施例是本专利技术一部分实施例,而不是全部的实施例,仅仅用以解释本专利技术实施例,并不用于限定本专利技术实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。
[0040]实施例一
[0041]请参阅图1,本专利技术提供一种技术方案:一种基于元数据的动态表单配置方法,所述动态表单配置方法包括以下步骤:
[0042]1、统计动态表单的特性
[0043]主要分为表格和附件上传两大类,将它们在一张元数据表中记录。
[0044]1.1、表格
[0045]每个表格都有其对应的表头和表体数据,它们主要有以下特性:
[0046]1)费用类型编码:用于根据每种费用类型过滤表格数据列;
[0047]2)字段编码:表头英文编码,用于动态扩展时字段与值的双向绑定;
[0048]3)字段名:表头中文名;
[0049]4)展示类型:确定表头对应的表体数据展示类型,如输入框、下拉选择框、复选框、弹出框、时间选择器、文件(展示类型为文件的数据不在表格中展示,将在后面的附件上传展示)等;
[0050]5)是否可见:控制这列表头和数据在这个表格中是否展示;
[0051]6)选项:存放名称和编码的数组,当表体数据获取值的方式为下拉选择框选择时,绑定字段多为英文编码,当该表格保存后不可编辑时,由于本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种基于元数据的动态表单配置方法,其特征在于:所述动态表单配置方法包括以下步骤:统计动态表单的特性;确定表单展示内容;页面渲染。2.根据权利要求1所述的一种基于元数据的动态表单配置方法,其特征在于:统计动态表单的特性分为表格和附件上传两大类。3.根据权利要求2所述的一种基于元数据的动态表单配置方法,其特征在于:每个表格都有其对应的表头和表体数据,它们主要有以下特性:1)费用类型编码:用于根据每种费用类型过滤表格数据列;2)字段编码:表头英文编码,用于动态扩展时字段与值的双向绑定;3)字段名:表头中文名;4)展示类型:确定表头对应的表体数据展示类型,如输入框、下拉选择框、复选框、弹出框、时间选择器、文件,展示类型为文件的数据不在表格中展示,将在后面的附件上传展示;5)是否可见:控制这列表头和数据在这个表格中是否展示;6)选项:存放名称和编码的数组,当表体数据获取值的方式为下拉选择框选择时,绑定字段多为英文编码,当该表格保存后不可编辑时,由于前台显示大多为中文文字,这时使用该字段对应选项内的名称

编码数组,用于编码向文字转换,在后续保存数据到数据库时,也同样会用到选项来做文字向编码转换;7)是否禁用:控制表体数据是否可以编辑;8)宽度:控制列宽;9)校验规则函数:控制可编辑数据列的校验规则,如非空、只允许数字、精确度;10)值来源方式:表体数据的来源方式分为输入和计算两种方式,来源方式为输入的表体数据只会随输入值变化而变化,来源方式为计算的表体数据会监控值计算公式关联的字段值,当这些字段值发生变化时,解析值计算公式重新计算得出新数值;11)值计算公式:用于在与值计算公式相关的字段值发生变化后,js获取值...

【专利技术属性】
技术研发人员:隋岩松单静静高鹏超毕云鹏
申请(专利权)人:浪潮云信息技术股份公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1