一种多业务场景的树组件封装系统及方法技术方案

本发明专利技术公开了计算机前端页面开发技术领域的一种多业务场景的树组件封装系统及方法，包括：建立基于Angular框架并引入NG

【技术实现步骤摘要】
一种多业务场景的树组件封装系统及方法


[0001]本专利技术涉及一种多业务场景的树组件封装系统及方法，属于计算机前端页面开发


技术介绍

[0002]对于业务场景而言，而当前大多数树组件仅能实现单一业务的树功能。使得该树组件仅作用于这一个页面的某个功能，复用性不够强。对于功能性而言，常见的有自定义图标的树组件、带目录的树组件、带连接线的树组件、受控的树组件、节点可拖拽的树组件等等，树组件功能比较单一。
[0003]在我们项目开发过程中，关于租户、项目、设备、采点等不同业务场景，形成了不同树形结构，有单一的租户树，有从租户到项目层级的项目树，有再下一层级到项目下挂载的设备，甚至到设备下的采点用于采集数据。而租户、项目、设备等我们需要根据不同形态展现，使得用户一目了然的区分。对于设备可能除了不同的类型展现，甚至可能还需要一些不限于查询的功能，比如绑定网关、解绑网关等。面对这种复杂的业务场景，我们需要在不同的场景下展现不同形态的树结构。
[0004]面对上述这种复杂的业务场景需求，既要实现多业务，包括租户树、项目树、设备树、采点树。又要实现复杂的功能需求，在一个树组件中实现包括支持可搜索、支持受控操作、支持添加附加的操作按钮、支持自定义节点图标等中的某个或者同时多个功能。此时使用上述所述功能单一的普通树组件必然无法实现。

技术实现思路

[0005]本专利技术的目的在于克服现有技术中的不足，提供一种多业务场景的树组件封装系统及方法，可灵活的手动配置节点和层级定义，并按需定制性满足不同业务场景。
[0006]为达到上述目的，本专利技术是采用下述技术方案实现的：
[0007]第一方面，本专利技术提供了一种多业务场景的树组件封装方法，包括：
[0008]建立基于Angular框架并引入NG
‑
ZORRO的树形控件；
[0009]定义树形控件展开的树节点属性以及元数据属性；
[0010]定义不同类型子模板节点挂载于树形控件；
[0011]获取后端返回的数据类型；
[0012]基于后端返回的数据类型将子模板节点渲染成所需的树结构。
[0013]进一步的，定义树形控件展开的树节点属性以及元数据属性，包括：
[0014]定义nzExpandedKeys展开指定的树节点；
[0015]定义nzData存储元数据；
[0016]定义nzExpandChange用于点击展开树节点图标的触发事件；
[0017]定义nzSearchValue按需筛选树高亮节点，双向绑定；
[0018]定义nzExpandChange绑定点击展开树节点图标触发事件；
[0019]定义nzAsyncData属性用于指定是否异步加载数据。
[0020]进一步的，定义不同类型子模板节点挂载于树形控件，包括：在子模板节点内根据需要采用一个自定义的关键字段加入条件判断，定义不同的节点，其中所述自定义的关键字段供后端开发人员确定判断不同类型的展现与操作。
[0021]进一步的，当后端返回的数据类型为表示租户的字符串
‘
00
’
时，此时<span>标签内加入条件判断
‘
node？.origin？.type＝＝＝'00'
’
，定义样式为
‘
custom
‑
node
’
，点击事件为打开租户openTenant(node)，内部嵌入租户的图标以及租户标题。
[0022]进一步的，当后端返回的数据类型为表示项目的字符串
‘
01
’
时，引入isLeaf布尔值判断是否为根节点及该项目下是否有子节点：
[0023]若不是根节点，此时定义<span>标签，判断是项目并且不是根节点，该节点下存在叶子节点"node？.origin？.type＝＝＝'01'&&！node.isLeaf"，定义样式为
‘
custom
‑
node
’
，点击事件为添加子节点addChildNode(node)；内部嵌入项目的图标以及项目标题，项目图标根据是否为展开状态展示不同打开和关闭状态图标；
[0024]若是根节点，此时定义<span>标签，判断是项目并且是根节点，该节点下不存在子节点"node？.origin？.type＝＝＝'01'&&node.isLeaf"，定义样式为
‘
custom
‑
node
’
，内部嵌入项目的图标以及项目标题。
[0025]进一步的，当后端返回的数据类型为表示设备的字符串
‘
02
’
时，此时定义<span>标签，判断是设备类型并且设备下有子节点node？.origin？.type＝＝＝'02'&&！node.isLeaf，定义样式为
‘
custom
‑
node
’
，根据设备运行的不同状态即node？.origin？.status，包括运行、关机、待机和报警嵌入不同的图标，根据node.title展示设备名称或者设备编码信息。
[0026]第二方面，本专利技术提供了一种多业务场景的树组件封装系统，包括：
[0027]树形控件建立模块：用于建立基于Angular框架并引入NG
‑
ZORRO的树形控件；
[0028]属性定义模块：用于定义树形控件展开的树节点属性以及元数据属性；
[0029]子模板节点定义模块：用于定义不同类型子模板节点挂载于树形控件；
[0030]数据获取模块：用于获取后端返回的数据类型；
[0031]渲染模块：用于基于后端返回的数据类型将子模板节点渲染成所需的树结构。
[0032]第三方面，本专利技术提供了一种多业务场景的树组件封装装置，包括处理器及存储介质；
[0033]所述存储介质用于存储指令；
[0034]所述处理器用于根据所述指令进行操作以执行根据上述任一项所述方法的步骤。
[0035]第四方面，本专利技术提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项所述方法的步骤。
[0036]与现有技术相比，本专利技术所达到的有益效果：
[0037]本专利技术提供了一种对于树组件封装适配不同业务场景的思路，涉及计算机前端页面开发
，利用本专利技术方法，可以实现普通树结构展现其中的层级关系，具有展开收起选择等交互功能，既能够实现普通的单一基础树组件功能，又能够实现复杂业务场景的功能，是一种可用于解决复杂的业务场景解决方案，能本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种多业务场景的树组件封装方法，其特征是，包括：建立基于Angular框架并引入NG
‑
ZORRO的树形控件；定义树形控件展开的树节点属性以及元数据属性；定义不同类型子模板节点挂载于树形控件；获取后端返回的数据类型；基于后端返回的数据类型将子模板节点渲染成所需的树结构。2.根据权利要求1所述的多业务场景的树组件封装方法，其特征是，定义树形控件展开的树节点属性以及元数据属性，包括：定义nzExpandedKeys展开指定的树节点；定义nzData存储元数据；定义nzExpandChange用于点击展开树节点图标的触发事件；定义nzSearchValue按需筛选树高亮节点，双向绑定；定义nzExpandChange绑定点击展开树节点图标触发事件；定义nzAsyncData属性用于指定是否异步加载数据。3.根据权利要求1所述的多业务场景的树组件封装方法，其特征是，定义不同类型子模板节点挂载于树形控件，包括：在子模板节点内根据需要采用一个自定义的关键字段加入条件判断，定义不同的节点，其中所述自定义的关键字段供后端开发人员确定判断不同类型的展现与操作。4.根据权利要求1所述的多业务场景的树组件封装方法，其特征是，当后端返回的数据类型为表示租户的字符串
‘
00
’
时，此时<span>标签内加入条件判断
‘
node？.origin？.type＝＝＝'00'
’
，定义样式为
‘
custom
‑
node
’
，点击事件为打开租户openTenant(node)，内部嵌入租户的图标以及租户标题。5.根据权利要求1所述的多业务场景的树组件封装方法，其特征是，当后端返回的数据类型为表示项目的字符串
‘
01
’
时，引入isLeaf布尔值判断是否为根节点及该项目下是否有子节点：若不是根节点，此时定义<span>标签，判断是项目并且不是根节点，该节点下存在叶子节点"node？.origin？.type＝＝＝'01'&&！node.isLeaf"，定义样...

【专利技术属性】
技术研发人员：王冬梅，
申请(专利权)人：徐工汉云技术股份有限公司，
类型：发明
国别省市：