CN114564194A - 基于vue框架的表单自定义开发方法和系统 - Google Patents

基于vue框架的表单自定义开发方法和系统 Download PDF

Info

Publication number
CN114564194A
CN114564194A CN202210145460.8A CN202210145460A CN114564194A CN 114564194 A CN114564194 A CN 114564194A CN 202210145460 A CN202210145460 A CN 202210145460A CN 114564194 A CN114564194 A CN 114564194A
Authority
CN
China
Prior art keywords
field
type
template
value
formula
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210145460.8A
Other languages
English (en)
Inventor
吕国庆
王兴华
王永鸿
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Mingdu Zhiyun Zhejiang Technology Co Ltd
Original Assignee
Mingdu Zhiyun Zhejiang Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Mingdu Zhiyun Zhejiang Technology Co Ltd filed Critical Mingdu Zhiyun Zhejiang Technology Co Ltd
Priority to CN202210145460.8A priority Critical patent/CN114564194A/zh
Publication of CN114564194A publication Critical patent/CN114564194A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02PCLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了基于VUE框架的表单自定义开发方法和系统,通过新建数据模板,并配置数据模板编码、名称和类型值;然后添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组。在配置完数据字段后保存数据到服务器,并在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。通过动态加载功能菜单,提供用户可自主配置功能菜单的功能,在系统原有菜单的基础上让用户自行定制化创建需要的功能菜单,从而满足用户的多元化需求。

Description

基于VUE框架的表单自定义开发方法和系统
技术领域
本发明涉及医药信息化技术领域,尤其涉及一种基于VUE框架的表单自定义开发方法和系统。
背景技术
vue框架,是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,vue框架被设计为可以自底向上逐层应用,且vue框架的核心数据库只关注视图层,便于与第三方数据库或既有项目整合。在大部分的系统中,只提供用户固定的功能菜单,往往不能满足用户的一些特殊的功能需求,系统管理人员只能提供定制化开发以满足用户需求,不过这会导致用户过多时管理和维护的混乱。例如MES系统中已有物料管理模块,但是药厂物料管理比较细致,需要对不同的物料分不同的菜单进行管理。使得在MES系统开发过程中,客户现场觉得已有的功能菜单不能完全满足实际需求,而不同客户需要的功能菜单又很难达成统一。为解决这一问题,目前常规的实现方式是根据不同的用户来定制化开发,但是这会导致后期管理和维护的困难。
发明内容
本发明针对现有技术中的不足,公开了一种基于VUE框架的表单自定义开发方法,包括如下步骤:
S1,新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板;
S2,添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板;
S3,配置完数据字段后,保存数据到服务器;
S4,在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。
优选的,所述数值字段组还包括公式字段,所述步骤S2包括:获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字;获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
优选的,所述步骤S2还包括判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。
优选的,所述步骤S2还具体包括:在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
优选的,所述步骤S2还具体包括:
判断第一类特征是否对应数据模板或其它数据模板中已预存的匹配字段,如具有对应匹配字段则调取第一类特征所匹配字段的对应赋值;
否则判断该第一类特征对应字段是否属于文本字段组,如果属于文本字段组则则获取该字段预设范围内的属于数值字段组的各字段名称,并将这些字段名称组成可选字段组生成推荐替换列表;
如果第一类特征对应字段在本数据模板或其它数据模板中均不存在,则输出字段名称错误通知,并获取本模板内其余属于数值字段组的各字段名称以及关联模板中属于数值字段组的各字段名称组成可选字段组生成推荐替换列表。
本发明还公开了一种基于VUE框架的表单自定义开发系统,包括:数据模板构建模块,用于新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时为用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板;字段信息添加模块,用于添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板;存储模块,用于在配置完数据字段后,将数据保存到服务器;菜单更新模块,用于在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。
优选的,所述数值字段组还包括公式字段,所述字段信息添加模块还被配置为获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字;获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
优选的,所述字段信息添加模块还被配置为判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。
优选的,所述字段信息添加模块还被配置为在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
本发明还公开了一种基于VUE框架的表单自定义开发装置,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如上述任一所述方法的步骤。
本发明公开的基于VUE框架的表单自定义开发方法和系统,对基于vue框架的系统,使用本发明可以在系统原有菜单的基础上,让用户自己定制化创建需要的功能菜单,满足用户的多元化需求。通过设置不同的字段类型来定义功能菜单的展示效果,使用基于VUE框架的vue-router路由的addRoutes函数将菜单动态添加到数据库中,通过服务器交互,动态加载功能菜单。克服了目前在MES等系统开发过程中,针对客户现场发现其功能菜单不能完全满足其实际需求但不同的客户所需功能菜单又很难达成统一时,采用根据不同用户需求进行定制化开发的方式所带来的后期管理和维护困难的问题。
本发明的附加方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
此处所说明的附图用来提供对本发明的进一步理解,构成本申请的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1为一实施例公开的基于VUE框架的表单自定义开发方法的流程示意图。
图2为一实施例公开的数值字段组信息配置示意图。
图3为一实施例公开的配置的数据字段移动示意图。
图4为一实施例公开的步骤S2的具体流程示意图。
图5为一实施例公开的步骤S103的具体流程示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例的附图,对本发明实施例的技术方案进行清楚、完整地描述。显然,所描述的实施例是本发明的一部分实施例,而不是全部的实施例。基于所描述的本发明的实施例,本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。
在本发明中,除非另有明确的规定和限定,此处使用的技术术语或者科学术语应当为本发明所属领域内具有一般技能的人士所理解的通常意义。本发明专利申请说明书以及权利要求书中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性,而只是用来区分不同的组成部分。同样,“一个”或者“一”等类似词语也不表示数量限制,而是表示存在至少一个。
在大部分的系统中,只提供用户固定的功能菜单,往往不能满足用户的一些特殊的功能需求。系统管理人员只能提供定制化开发以满足用户需求,不过这会导致用户过多时,管理和维护的混乱,提供一个用户可自主配置功能菜单的功能,可以节省厂家的精力,也可以获得用户的满意。本发明基于vue框架的系统,在系统原有菜单的基础上,让用户自己定制化创建需要的功能菜单,从而满足用户的多元化需求。如附图1所述,本实施例公开了一种基于VUE框架的表单自定义开发方法,其包括如下步骤内容。
步骤S1,新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板。具体的,用户新建一数据模板后,配置数据模板编码、数据模板名称、数据模板类型,当数据模板类型没有值时,则表明该数据模板为用户完全自定义模板。当数据模板类型有值时,则表明该数据模板为基于系统菜单创建的模板。
步骤S2,添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板。
在本实施例中,用户在新建数据模板后就进行添加该数据模板字段,其中该数据模板字段可以分为文本字段组、数值字段组、日期字段组、单选字段组、复选字段组、基础字段组。其中基础字段组只有是基于系统菜单创建的模板才可以配置。其中文本字段组可用于定义文本类型的数据,该文本字段组的属性有显示名称、字段名、聚合、序号、必填、多行、默认值、最小长度、最大长度、只读、指定搜索、计算公式、关联数据模板、关联字段、分组、检验类型、错误提示等。如附图2所示,其中数值字段组可用于定义数值类型的数据,其属性有显示名称、字段名、聚合、序号、必填、单位、默认值、最小值、最大值、只读、指定搜索、计算公式、关联数据模板、关联字段、分组、小数位数等。其中日期字段组用于定义日期类型的数据,其属性有显示名称、字段名、聚合、必填、日期格式、关联数据模板、关联字段、分组等。该单选字段组可用于定义单选类型的数据,其属性有显示名称、字段名、聚合、序号、必填、分组、选项信息列表。其中复选字段组可用于定义复选类型的数据,其属性有显示名称、字段名、聚合、序号、必填、分组、选项信息列表等,该选项信息列表用于为方便用户录入信息,支持导入excel文件、支持按照特定格式的数据的快速添加。其中基础字段组可用于为系统内部已存在的基础菜单自定义用户需求,如用户可为数据配置默认值、显示隐藏等。
在本实施例中,如附图3所示,配置的数据字段支持移动位置,以调整符合用户期望的显示顺序:用户也可以自定义移动间隔,一键完成顺序调整,同时使用了vxe-table插件和sortable.js脚本,用户可以通过拖动快速调整显示顺序。其中vxe-table插件为可动态编辑表格的表格插件,sortable.js为移动脚本文件,与vxe-table结合使用可移动表格顺序。
在本实施例中,所述数值字段组还包括公式字段,如附图4所示,所述步骤S2包括:
步骤S101,获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字。在该字段中的当前字段的值可以通过其他字段的值计算得出。具体的,该公式字段中输入的为由字段名以及各运算符合组成的公式,例如(num1+2*num2+num4)*num5,该公式中的num1、num2、num4、num6均为各字段名。
步骤S102,获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
所述步骤S2还包括:步骤S103,判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。将公式字段中的字段名依次分别与数据库中存储的其它预存模板内的各字段名称进行匹配,可先对本数据模板中的各字段名称进行匹配,然后再调取其它预存数据模板中的各字段名进行匹配。
在本实施例中,如附图5所示,所述步骤S103还可具体包括如下内容。
步骤S1031,判断第一类特征是否对应数据模板或其它数据模板中已预存的匹配字段,如具有对应匹配字段则调取第一类特征所匹配字段的对应赋值。
步骤S1032,否则判断该第一类特征对应字段是否属于文本字段组,如果属于文本字段组则获取该字段预设范围内的属于数值字段组的各字段名称,并将这些字段名称组成可选字段组生成推荐替换列表。其中预设范围可以是归属于本数据模板内的各字段,也可以是按存储顺序排列在本字段前后设定区间内的多个字段。文本字段往往是用户输错字段名称所致,用户最大可能是要输入与文本字段名称近似的其它字段,因此系统可根据该文本字段名称前后设定区域的其它数值字段名称提供给用户选择,可避免用户重新再去寻找原本想输入的数值字段名称,提高用户对字段名称的输入效率。在数据库中,归属于同一数据模板内的各字段属性值存储于同一数列中,各字段属性值中还包含有字段所在位置。
步骤S1033,如果第一类特征对应字段在本数据模板或其它数据模板中均不存在,则输出字段名称错误通知,并获取本模板内其余属于数值字段组的各字段名称以及关联数据模板中属于数值字段组的各字段名称来组成可选字段组生成推荐替换列表。具体的,在发现公式中所填写的字段名称在所存储的本数据模板或其它数据模板中均无法匹配时,表明该字段名称填写存在错误,则获取属于该数据模板的数值字段组内的各字段名称。并查询该数据模板中是否存在关联数据模板字段,若存在则再次从数据库中检索该关联数据模板的各字段,获取属于该关联数据模板的数值字段组内的各字段名称,将其与上述自身数据模板中的数值字段组内的各字段名称一起组成可选字段组生成推荐替换列表,供用户来修改替换输入的错误字段名称。
所述步骤S2还具体包括:在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
具体的,在提取配置脚本文件中的第三字段内关联字段名称后,搜寻并获取该配置脚本文件中的第四字段内的关联数据模板信息,查找位于所述关联数据模板中的关联字段名称并将该关联字段名称内对应值赋予第三字段。其中第三字段内填写的是与该字段内容相等的位于该数据模板其它位置或者位于其它数据模板中的相关字段名称,在菜单最终显示时该字段位置就将显示关联字段内数据,可不重复进行字段内容配置,且只需对一原始字段进行数值维护即可同时修改各数据模板中的内容,方便维护且不易出错。
其中该步骤还可包括这些内容:在提取配置脚本文件中的第三字段内关联字段名称后,检索该数据模板配置脚本文件中是否存在第四字段,所述第四字段用于配置关联数据模板名称;如果没有第四字段则查找位于本数据模板中的关联字段名称并将该关联字段名称内对应值赋予第三字段。如果存在第四字段则获取第四字段内的关联数据模板名称,查找位于所述关联数据模板中的该关联字段名称并将该关联字段名称内对应值赋予第三字段。
步骤S3,配置完数据字段后,保存数据到服务器。
步骤S4,在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。具体的,根据用户登录请求获取对应数据模板信息,根据数据模板信息通过循环遍历的方式补充router路由,调用router.addRoutes(),将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。其中router为vue框架的路由管理对象,router.addRoutes()为vue框架的路由管理对象里的新增路由函数。
本实施例还包括如下步骤:根据用户点击事件,调用mixin-template.js配置脚本文件,所述配置脚本文件根据数据字段信息来搭建用户处理界面,并配置正则校验来限制界面输入。其中mixin-template.js为动态菜单显示的配套脚本文件,配置数据字段的属性信息,如正则校验、长度限制等。
根据配置脚本文件中第一字段赋值来判断菜单呈现框架,若第一字段为第一值则使用template-form-item动态表单组件搭建表单显示,否则使用IVIEW的表格组件动态创建表格columns信息来搭建表格显示,并根据其它字段信息对菜单呈现框架内数据进行填充。其中template-form-item为动态表单组件,可以根据数据字段信息返回相应类型的表单元素。columns为IVIEW表格组件的列配置信息。
在本实施例中,第一字段为聚合属性,当第一字段为第一值时表示该字段组为非聚合字段,则使用template-form-item动态表单组件来搭建表单。如果第一字段非第一值则表示该字段组为聚合字段,则使用IVIEW的表格组件,动态创建表格columns信息,搭建表格显示。文本字段使用IVIEW的Input文本输入组件,数值字段使用IVIEW的InputNumber数值输入组件,日期字段使用IVIEW的DatePicker日期选择组件/TimePicker时间选择组件,单选字段与复选字段使用IVIEW的Select组件。
上述实施例的基于VUE框架的表单自定义开发方法使用IVIEW的UI框架,通过搭建数据模板配置模块,通过设置不同的字段类型来定义功能菜单的展示效果,使用基于VUE框架的vue-router路由的addRoutes函数将菜单动态添加到数据库中,通过服务器交互,动态加载功能菜单。本基于VUE框架的表单自定义开发方法提供了用户可自主配置功能菜单的功能,基于vue框架的系统,在系统原有菜单的基础上让用户自行定制化创建需要的功能菜单,从而满足用户的多元化需求。克服了目前在MES等系统开发过程中,针对客户现场发现其功能菜单不能完全满足其实际需求但不同的客户所需功能菜单又很难达成统一时,采用根据不同用户需求进行定制化开发的方式所带来的后期管理和维护困难的问题。
在另一实施例中,还公开了基于VUE框架的表单自定义开发系统,包括:数据模板构建模块,用于新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时为用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板。字段信息添加模块,用于添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板。存储模块,用于在配置完数据字段后,将数据保存到服务器。菜单更新模块,用于在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。
在本实施例中,所述数值字段组还包括公式字段,所述字段信息添加模块还被配置为获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字;获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
在本实施例中,所述字段信息添加模块还被配置为判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。
在本实施例中,所述字段信息添加模块还被配置为在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
上述基于VUE框架的表单自定义开发系统的具体功能与前面实施例所公开的基于VUE框架的表单自定义开发方法一一对应,故在此不再详细展开描述,具体可参考前面公开的基于VUE框架的表单自定义开发方法各实施例。需要说明的是,本说明书中各个实施例采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似部分互相参见即可。
在另一些实施例中,还提供了一种基于VUE框架的表单自定义开发装置,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,该处理器执行所述计算机程序时实现如上述各实施例中描述的基于VUE框架的表单自定义开发方法的各个步骤。其中该基于VUE框架的表单自定义开发装置可包括但不仅限于处理器、存储器。本领域技术人员可以理解,所述示意图仅仅是服务器的示例,并不构成对服务器的限定。
所称处理器可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现成可编程门阵列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等,所述处理器是所述服务器设备的控制中心,利用各种接口和线路连接整个服务器设备的各个部分。
所述存储器可用于存储所述计算机程序和/或模块,所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块,以及调用存储在存储器内的数据,实现所述服务器的各种功能。所述存储器可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序等此外,存储器可以包括高速随机存取存储器,还可以包括非易失性存储器,例如硬盘、内存、插接式硬盘,智能存储卡(Smart MediaCard,SMC),安全数字(Secure Digital,SD)卡,闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
所述基于VUE框架的表单自定义开发方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明实现上述实施例方法中的全部或部分流程,也可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一计算机可读存储介质中,该计算机程序在被处理器执行时,可实现上述各个方法实施例的步骤。其中,所述计算机程序包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括电载波信号和电信信号。
最后应说明的是:以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
总之,以上所述仅为本发明的较佳实施例,凡依本发明申请专利范围所作的均等变化与修饰,皆应属本发明专利的涵盖范围。

Claims (10)

1.基于VUE框架的表单自定义开发方法,其特征在于,包括如下步骤:
S1,新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板;
S2,添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板;
S3,配置完数据字段后,保存数据到服务器;
S4,在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。
2.根据权利要求1所述的基于VUE框架的表单自定义开发方法,其特征在于,所述数值字段组还包括公式字段,所述步骤S2包括:
获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字;
获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
3.根据权利要求2所述的基于VUE框架的表单自定义开发方法,其特征在于,所述步骤S2还包括:判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。
4.根据权利要求3所述的基于VUE框架的表单自定义开发方法,其特征在于,所述步骤S2还具体包括:
在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
5.根据权利要求4所述的基于VUE框架的表单自定义开发方法,其特征在于,所述步骤S2还具体包括:
判断第一类特征是否对应数据模板或其它数据模板中已预存的匹配字段,如具有对应匹配字段则调取第一类特征所匹配字段的对应赋值;
否则判断该第一类特征对应字段是否属于文本字段组,如果属于文本字段组则则获取该字段预设范围内的属于数值字段组的各字段名称,并将这些字段名称组成可选字段组生成推荐替换列表;
如果第一类特征对应字段在本数据模板或其它数据模板中均不存在,则输出字段名称错误通知,并获取本模板内其余属于数值字段组的各字段名称以及关联模板中属于数值字段组的各字段名称组成可选字段组生成推荐替换列表。
6.一种基于VUE框架的表单自定义开发系统,其特征在于,包括:
数据模板构建模块,用于新建一数据模板,并配置数据模板编码、名称和类型值,当所述类型值为第一值时为用户完全自定义模板,当所述类型值为第二值时为基于系统菜单创建的模板;
字段信息添加模块,用于添加表单上所需呈现的数据模板字段信息,根据不同的字段类型来对应配置字段属性,所述数据字段信息包括但不限于文本字段组、数值字段组和日期字段组,其中所述文本字段组包括但不限于关联字段、关联模板、检验类型、最小输入长度值和最大输入长度值,所述数值字段组包括但不限于关联字段、关联模板、检验类型、最小值和最大值,所述关联字段为当前字段的值可通过关联模板内的关联字段获取,所述检验类型为用于配置正则表表达式以辅助校验数据合法性,所述关联模板为记录与当前字段相关联的字段所在模板;
存储模块,用于在配置完数据字段后,将数据保存到服务器;
菜单更新模块,用于在用户登录后向服务器发起请求,获取所述数据模板信息,并通过循环遍历的方式补充router路由,调用新增路由函数将动态路由绑定到系统的路由库,vue根据最新路由更新菜单。
7.根据权利要求6所述的基于VUE框架的表单自定义开发系统,其特征在于,所述数值字段组还包括公式字段,所述字段信息添加模块还被配置为获取完成配置的公式字段内容,对公式字段内容进行识别分类,提取第一类特征、第二类特征和第三类特征,所述第一类特征为字段名称,所述第二类特征为公式符合,所述第三类特征为前后均为公式符号的数字、或位于首尾部且另一侧为公式符号的数字;获取公式内第一类特征所对应字段内容的最大值和最小值限定的取值空间,将各字段的取值空间代入公式中进行计算获取该公式的取值区域,如果该取值区域在本数值字段组设置的最大值和最小值之外,则发出该公式字段出错通知。
8.根据权利要求7所述的基于VUE框架的表单自定义开发系统,其特征在于:所述字段信息添加模块还被配置为判断公式字段内容中的各第一类特征是否均对应有该数据模板或其它数据模板中已预存的匹配字段,若存在则调取第一类特征所匹配字段的对应赋值,将所述赋值代入公式信息内计算获取公式字段最终值。
9.根据权利要求8所述的基于VUE框架的表单自定义开发系统,其特征在于:所述字段信息添加模块还被配置为在公式字段内输入一第二类特征后就对位于该第二类特征前的第一类特征进行判断,如该第一类特征为本数据模板的预存字段名称,则获取本数据模板的关联字段和关联模板信息,将所述关联模板中的对应关联字段名称作为可选字段组生成推荐字段名称列表,并对所选定的推荐字段名称列表中的字段名称自动添加至该第二类特征后部。
10.一种基于VUE框架的表单自定义开发装置,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于:所述处理器执行所述计算机程序时实现如权利要求1-5任一所述方法的步骤。
CN202210145460.8A 2022-02-17 2022-02-17 基于vue框架的表单自定义开发方法和系统 Pending CN114564194A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210145460.8A CN114564194A (zh) 2022-02-17 2022-02-17 基于vue框架的表单自定义开发方法和系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210145460.8A CN114564194A (zh) 2022-02-17 2022-02-17 基于vue框架的表单自定义开发方法和系统

Publications (1)

Publication Number Publication Date
CN114564194A true CN114564194A (zh) 2022-05-31

Family

ID=81713276

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210145460.8A Pending CN114564194A (zh) 2022-02-17 2022-02-17 基于vue框架的表单自定义开发方法和系统

Country Status (1)

Country Link
CN (1) CN114564194A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114968410A (zh) * 2022-06-06 2022-08-30 携程商旅信息服务(上海)有限公司 数据配置表单生成方法、系统、电子设备和存储介质
CN115407992A (zh) * 2022-10-31 2022-11-29 平安银行股份有限公司 数据查询菜单的配置方法、装置、电子设备以及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114968410A (zh) * 2022-06-06 2022-08-30 携程商旅信息服务(上海)有限公司 数据配置表单生成方法、系统、电子设备和存储介质
CN115407992A (zh) * 2022-10-31 2022-11-29 平安银行股份有限公司 数据查询菜单的配置方法、装置、电子设备以及存储介质

Similar Documents

Publication Publication Date Title
US20210034990A1 (en) Rule Assignments and Templating
CN108292231B (zh) 从数据生成应用的方法和系统
JP2019036331A (ja) ダイアログカスタマイズのためのシステムおよび方法
CN106599039B (zh) 一种支持关系数据库数据自由组合嵌套的统计表述方法
CN108984712A (zh) 基于业务场景的造数方法、设备及可读存储介质
CN105487864A (zh) 代码自动生成的方法和装置
CN114564194A (zh) 基于vue框架的表单自定义开发方法和系统
US20150067520A1 (en) System for generating a plurality of graphical reports from a data set
CN111694565A (zh) 数据可视化应用开发方法及系统
CN109947399A (zh) 代码结构生成方法、装置、计算机装置及可读存储介质
CN111767704A (zh) Excel表格模板生成方法及装置
CN110837366A (zh) 一种表单生成方法、电子装置及计算机可读存储介质
CN113420044A (zh) 数据查询方法、装置、设备和存储介质
CA3142770A1 (en) Component linkage configuration method, device, computer equipment and storage medium
CN112558967A (zh) 页面自动生成方法、装置、电子设备和存储介质
CN114327458A (zh) 一种快速搭建企业信息化系统的方法及系统
CN114860218A (zh) 一种低代码开发方法和装置
CN112181409A (zh) 一种应用构建方法、应用渲染方法及装置
CN114564196A (zh) 一种基于vue框架的系统菜单生成方法、装置和存储介质
CN114398226A (zh) 一种网络资产报告生成方法及装置
CN115268863A (zh) 一种低代码平台数据描述方法、设备及介质
CN111797125A (zh) 报表的创建方法、装置、电子设备及计算机可读存储介质
CN112068895A (zh) 代码配置方法、装置、视频播放设备及存储介质
CN111078337A (zh) 样式调整方法、系统及计算机可读存储介质
JP2014059666A (ja) 業務入力画面カスタマイズシステム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination