基于资源能力中心的低代码界面配置方法及存储介质技术

本发明专利技术公开了基于资源能力中心的低代码界面配置方法及存储介质，属于信息管理技术领域，本发明专利技术要解决的技术问题为在要管理的数据模型急剧增加的情况下，如何快速生成增删改查界面，彻底摆脱原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的弊端，采用的技术方案为：该方法是基于资源能力中心通过JSON配置生成增删改查界面，在增删改查界面渲染过程中，将JSON转换成对应的Vue组件，通过JSON配置中节点的type信息，在组件池中找到对应的组件实现，把当前节点转给对应组件渲染，再把其他属性作为props传递过去完成渲染。再把其他属性作为props传递过去完成渲染。再把其他属性作为props传递过去完成渲染。

【技术实现步骤摘要】
基于资源能力中心的低代码界面配置方法及存储介质


[0001]本专利技术涉及信息管理
，具体地说是一种基于资源能力中心的低代码界面配置方法及存储介质。

技术介绍

[0002]前端技术在经历了十几年的发展后，前端开发变得越来越复杂，技术门槛也越来越高，要使用当前流行的UI组件库，技术人员必须懂npm、webpack、react/vue，必须熟悉ES6语法等，光入门都很费劲，而入门以后还会发现它还有巨大的生态系统，大量相关的组件库。然而前端技术的发展不会停滞不前，等学完以后可能会发现已掌握的技术已经被新的技术取代了。
[0003]使用前端UI组件库实现用于信息管理的普通的增删改查界面，有大量的细节功能需要处理，比如：可以对数据做筛选、按某列排序、可以隐藏某些列、可以调整列顺序、可以调整列宽、编辑单行数据、批量修改和删除数据、表格有分页功能等等。全部实现这些功能需要大量的编码工作，而且每个数据模型实现一套界面，工作量又被放大的n倍，后续的维护工量更是巨大的难以想象。
[0004]ElementUI是一套基于Vue的前端组件库，与大部分UI框架一样，都只有最通用的组件，如果遇到一些稍微不常用的组件，就得开发自定义组件，而自定义组件的开发门槛高，开发工作量大。
[0005]在要管理的数据模型急剧增加的情况下，如何快速生成增删改查界面，彻底摆脱原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的弊端是目前亟待解决的技术问题。

技术实现思路

[0006]本专利技术的技术任务是提供一种基于资源能力中心的低代码界面配置方法及存储介质，来解决原有一个模型开发一套增删改查界面，工作量巨大且代码重复度高的问题。
[0007]本专利技术的技术任务是按以下方式实现的，一种基于资源能力中心的低代码界面配置方法，该方法是基于资源能力中心通过JSON配置生成增删改查界面，在增删改查界面渲染过程中，将JSON转换成对应的Vue组件，通过JSON配置中节点的type信息，在组件池中找到对应的组件实现(Component)，把当前节点转给对应组件渲染，再把其他属性作为props传递过去完成渲染。
[0008]作为优选，增删改查界面分别对应查询方案、新增方案、编辑方案以及删除方案四种不同的JSON配置方案；
[0009]其中，查询方案包括查询条件属性配置及展示结果属性配置；
[0010]新增方案和编辑方案包括新增属性配置和编辑属性配置；
[0011]删除方案包括级联模型删除验证关系配置。
[0012]更优地，新增方案包括如下属性：
[0013]①
、name属性：用于存储方案名称；
[0014]②
、form属性：用于存储表单配置；
[0015]③
、form.formItems属性：用于存储新增表单的所有表单项信息；
[0016]④
、formItem.name属性：用于存储表单项英文名；
[0017]⑤
、formItem.alias属性：用于存储表单项中文名；
[0018]⑥
、formItem.type属性：用于存储渲染该表单项使用的Vue组件类型；
[0019]⑦
、formItem.relatedDict属性：用于存储枚举选择组件的枚举值；
[0020]⑧
、formItem.relatedTrans属性：用于存储关联翻译组件对应的模型英文名。
[0021]更优地，Vue组件类型包括Text、Dict和Trans；
[0022]其中，Text表示文本输入组件，Dict表示枚举选择组件，Trans表示关联翻译组件。
[0023]更优地，文本输入组件采用Text文本组件ToyInput，基于el
‑
input二次开发，具体逻辑如下：
[0024]①
、将value属性绑定到el
‑
input的value属性；
[0025]②
、将itemProps属性解构后绑定到el
‑
input上；
[0026]③
、监听el
‑
input的change事件，并抛出change事件。
[0027]更优地，枚举选择组件采用Dict字典组件ToyDict，基于el
‑
select二次开发，具体逻辑如下：
[0028]①
、将value属性绑定到el
‑
select的value属性；
[0029]②
、将itemProps属性解构后绑定到el
‑
select上；
[0030]③
、监听el
‑
select的change事件，并抛出change事件；
[0031]④
、使用v
‑
for循环枚举列表(itemProps.relatedDict)生成el
‑
option列表，将relatedDict的value绑定到el
‑
option的key、value属性，将relatedDict的label绑定到el
‑
option的label属性。
[0032]更优地，关联翻译组件采用Trans翻译组件ToyTrans，基于el
‑
autocomplete二次开发，具体逻辑如下：
[0033]①
、将value属性绑定到el
‑
autocomplete的value属性；
[0034]②
、将itemProps属性解构后绑定到el
‑
autocomplete上；
[0035]③
、监听el
‑
autocomplete的select事件，并抛出change事件；
[0036]④
、将异步数据查询函数querySearchAsync函数绑定到el
‑
autocomplete的fetch
‑
suggestions属性，querySearchAsync函数调用资源能力中心通用查询接口，使用模型英文名(itemProps.relatedTrans)及用户输入(queryString)作为查询条件，将查询结果通过回调函数cb返回给el
‑
autocomplete。
[0037]更优地，新增方案的渲染组件ToyAddForm，基于el
‑
form二次开发，具体逻辑如下：
[0038]①
、根组件使用el
‑
form，并将表单数据对象formModel绑定到el
‑
form的model属性；
[0039]②
、使用v
‑
for循环新增方案JSON中的表单项配置sc本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于资源能力中心的低代码界面配置方法，其特征在于，该方法是基于资源能力中心通过JSON配置生成增删改查界面，在增删改查界面渲染过程中，将JSON转换成对应的Vue组件，通过JSON配置中节点的type信息，在组件池中找到对应的组件实现，把当前节点转给对应组件渲染，再把其他属性作为props传递过去完成渲染。2.根据权利要求1所述的基于资源能力中心的低代码界面配置方法，其特征在于，增删改查界面分别对应查询方案、新增方案、编辑方案以及删除方案四种不同的JSON配置方案；其中，查询方案包括查询条件属性配置及展示结果属性配置；新增方案和编辑方案包括新增属性配置和编辑属性配置；删除方案包括级联模型删除验证关系配置。3.根据权利要求2所述的基于资源能力中心的低代码界面配置方法，其特征在于，新增方案包括如下属性：
①
、name属性：用于存储方案名称；
②
、form属性：用于存储表单配置；
③
、form.formItems属性：用于存储新增表单的所有表单项信息；
④
、formItem.name属性：用于存储表单项英文名；
⑤
、formItem.alias属性：用于存储表单项中文名；
⑥
、formItem.type属性：用于存储渲染该表单项使用的Vue组件类型；
⑦
、formItem.relatedDict属性：用于存储枚举选择组件的枚举值；
⑧
、formItem.relatedTrans属性：用于存储关联翻译组件对应的模型英文名。4.根据权利要求3所述的基于资源能力中心的低代码界面配置方法，其特征在于，Vue组件类型包括Text、Dict和Trans；其中，Text表示文本输入组件，Dict表示枚举选择组件，Trans表示关联翻译组件。5.根据权利要求4所述的基于资源能力中心的低代码界面配置方法，其特征在于，文本输入组件采用Text文本组件ToyInput，基于el
‑
input二次开发，具体逻辑如下：
①
、将value属性绑定到el
‑
input的value属性；
②
、将itemProps属性解构后绑定到el
‑
input上；
③
、监听el
‑
input的change事件，并抛出change事件。6.根据权利要求4所述的基于资源能力中心的低代码界面配置方法，其特征在于，枚举选择组件采用Dict字典组件ToyDict，基于el
‑
select二次开发，具体逻辑如下：
①
、将value属性绑定到el
‑
select的value属性；
②
、将itemProps属性解构后绑定到el
‑
select上；
③
、监听el
‑
select的change事件，并抛出change事件；
④
、使用v
‑
for循环枚举列表生成el
‑
option列表，将relatedDict的value绑定到el
...

【专利技术属性】
技术研发人员：吴瑞，唐勇，
申请(专利权)人：浪潮通信信息系统有限公司，
类型：发明
国别省市：