一种用多层条件组合实现前端页面的方法技术

本发明专利技术公开了一种用多层条件组合实现前端页面的方法，属于计算机前端技术领域，包括基础规则标签和多层规则标签，所述多层规则标签至少包含一个基础规则标签和或多层级规则标签；利用VUE框架及其应用组件库，搭建左右模式布局的工作页面，工作页面左侧部分为基础规则标签选择区，工作页面右侧部分为多层规则标签编辑区；将基础规则标签由左侧插入右侧的多规则标签编辑区，执行操作：替换、插入和组合，从而形成多种基础规则标签组合的多规则标签；可以根据基础规则实现多层规则组合，形成多层级条件组合的页面，且能实现层级条件组合发生改变时无需单独开发，这样不仅节省时间和经济成本，还可以根据项目情况灵活的改变页面。还可以根据项目情况灵活的改变页面。还可以根据项目情况灵活的改变页面。

【技术实现步骤摘要】
一种用多层条件组合实现前端页面的方法


[0001]本专利技术涉及计算机软件前端
，具体涉及一种用多层条件组合实现前端页面的方法。

技术介绍

[0002]近年来，前端行业内开始普及组件化开发的思想，将前端的页面按照功能进行碎片化拆分成一个个可以重复使用的组件。这种组件重复使用常见于前端开发中，可以根据组件的功能进行多种组合，进而形成了多层级条件组合的前端。不过现有的前端页面生成时一般仅支持三层级关系，想要支持多于三层级，需要做单独开发，涉及到单独开发则会使时间和经济成本提高，而且层级一旦改变，则又需要单独开发，这样使多层级条件组合的页面实现起来不够灵活。

技术实现思路

[0003]本专利技术的目的在于，提供一种用多层条件组合实现前端页面的方法，可以根据基础规则实现多层规则组合，形成多层级条件组合的页面，且能实现层级条件组合发生改变时无需单独开发，这样不仅节省时间和经济成本，还可以根据项目情况灵活的改变页面。
[0004]为解决上述技术问题，本专利技术采用如下的技术方案：一种用多层条件组合实现前端页面的方法，包括基础规则标签和多层规则标签，所述多层规则标签至少包含一个基础规则标签；
[0005]具体实现步骤为：
[0006]S1、利用VUE框架和view
‑
design应用组件库，搭建左右模式布局的工作页面，工作页面左侧部分为基础规则标签选择区，工作页面右侧部分为多层规则标签编辑区；
[0007]S2、将基础规则标签由左侧插入右侧的多规则标签编辑区，根据基础规则标签插入到多规则标签编辑器的位置，执行对应的操作有：替换、插入和组合，从而形成多种基础规则标签组合的多规则标签；
[0008]S3、根据多规则标签中的多种基础规则标签和事件进行数据处理，得到多规则标签的层级，以及每个层级中基础规则标签的高度和宽度；
[0009]S4、依据前端页面展示规则，调整多规则标签的层级，以及每个层级中多规则标签的高度和宽度，使多规则标签正常显示在前端页面上。
[0010]前述用多层条件组合实现前端页面的方法，其中所述多规则标签中包含至少一个基础规则标签，和/或，
[0011]所述多规则标签中包含至少一个多规则标签。
[0012]前述用多层条件组合实现前端页面的方法，其中所述多规则标签中存放的数据有：多规则标签数组、多规则标签数组之间的关系、基础规则标签数组、基础规则标签数组之间的关系、结果值和宽度；
[0013]所述多规则标签数组存多规则标签，所述多规则标签数组之间的关系为对多规则
标签数组关系进行的动态赋值，所述基础规则标签数组存放基础规则标签，所述基础规则标签数组之间的关系为对基础规则标签数组关系进行的动态赋值，所述结果值用于存放多规则标签数组和多规则标签数组之间的关系后，最用运算出来的结果值，需要在最终的前端页面上显示，所述宽度为前端页面展示层级的宽度，是由多规则标签数组宽度和再加上左右边距得出，每个层级的宽度都由子层级递归算出。
[0014]前述用多层条件组合实现前端页面的方法，其中所述基础规则标签中存放规则配置对象、配置内部规则之间的关系、规则配置描述信息、结果值、问题标识、宽度；
[0015]所述规则配置对象为可动态配置多层底层规则、数据筛选的时间和表范围，所述配置内部规则之间的关系为对多层底层规则关系进行的动态赋值，所述规则配置描述信息为将配置内部规则转化为自然语义，所述结果值为用于存放配置内部规则最终运算出来的结果值，最终在页面显示，所述问题标识用于数据保存时的数据校验，页面根据此属性来判断将问题多规则标签进行标红醒目提示用户进行修改，并通过弹出给与提示，所述宽度为页面显示最内层的宽，人为设定，便于后面进行递归算出每个层级的宽度。
[0016]前述用多层条件组合实现前端页面的方法，其中根据基础规则标签插入到多规则标签编辑器的位置，执行对应的操作有：替换、插入和组合，具体为：
[0017]利用view
‑
design应用组件实现基础规则标签选择区到多规则标签编辑区的拖拽完成替换、插入和组合操作，以及，多规则标签编辑区内的基础规则标签和多规则标签到其他多规则标签的拖拽完成替换、插入和组合操作；
[0018]从基础规则标签选择区中选择基础规则标签拖拽到多规则标签编辑区时，所述替换操作是通过目标基础规则标签所在多规则标签中的索引位置，将目标基础规则标签从多规则标签中移除，根据拖拽的基础规则标签内容在多规则标签中生成一个新的基础规则标签，并将新生成的基础规则标签插入目标基础规则标签所在多规则标签中的索引位置；
[0019]所述插入操作是根据拖拽的基础规则标签内容生成一个新的基础规则标签，并将新生成的基础规则标签插入到目标基础规则标签所在多规则标签中的索引位置；
[0020]所述组合操作是根据拖拽基础规则标签内容生成一个新的基础规则标签，新的基础规则标签和目标基础规则标签组合成新的多规则标签，通过目标基础规则标签所在多规则标签中的索引位置，将目标基础规则标签从多规则标签中移除，并将新生成多规则标签插入到目标基础规则标签所在多规则标签中的索引位置；
[0021]在多规则标签编辑区内对基础规则标签拖拽时，获取拖拽基础规则标签及此其所在多规则标签内的索引值，拖拽到目标多规则标签时，将此拖拽基础规则标签的索引值从所在多规则标签中移除，根据拖拽基础规则标签内容在目标多规则标签内生成索引值；如果拖拽基础规则标签所在多规则标签内只有一个基础规则标签，则此多规则标签层级要上移一层并更新索引值。
[0022]前述用多层条件组合实现前端页面的方法，其中步骤S3中所述数据处理具体为：
[0023]每次有新的基础规则标签拖拽到多规则标签编辑区，都需重新计算多规则标签编辑区内的层级，以及，计算所有层级中的多规则标签的高度和宽度；
[0024]所述计算多规则标签编辑区层级需要分别计算最外层级里多规则标签数组的总层级数；
[0025]最内层级的基础规则标签的高度和宽度是固定的，每层级与子层级的上边距、下
边距、左右边距都是固定的，
[0026]所述多规则标签每层级的高度计算公式为：
[0027]HN＝(TLN
‑
LN)
×
(HT+HB)+H；
[0028]其中，H为最内层级的基础规则标签的高度，HN为每层多规则标签高度，TLN为最外层多规则标签里的多规则标签数组的总层级数，LN为HN所在层级数，HT为每层级内子层级标签距离每层级上边框距离，HB为最内层基础规则标签距离最近外层级下边框距离；
[0029]多规则标签的宽度计算公式为：
[0030]WN＝∑W+WR
×
(Y+1)；
[0031]其中，W为最内每层级的基础规则内的子标签的宽度，∑W为每层级内所有子标签宽度和，WN为最内每层多规则标签宽度，WR为每层级内子层级标签的左右最内层基础规则标签距离最近外层级一层边本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用多层条件组合实现前端页面的方法，其特征在于，包括基础规则标签和多层规则标签，所述多层规则标签至少包含一个基础规则标签；具体实现步骤为：S1、利用VUE框架和view
‑
design应用组件库，搭建左右模式布局的工作页面，工作页面左侧部分为基础规则标签选择区，工作页面右侧部分为多层规则标签编辑区；S2、将基础规则标签由左侧插入右侧的多规则标签编辑区，根据基础规则标签插入到多规则标签编辑器的位置，执行对应的操作有：替换、插入和组合，从而形成多种基础规则标签组合的多规则标签；S3、根据多规则标签中的多种基础规则标签和事件进行数据处理，得到多规则标签的层级，以及每个层级中基础规则标签的高度和宽度；S4、依据前端页面展示规则，调整多规则标签的层级，以及每个层级中多规则标签的高度和宽度，使多规则标签正常显示在前端页面上。2.根据权利要求1所述的用多层条件组合实现前端页面的方法，其特征在于，所述多规则标签中包含至少一个基础规则标签，和/或，所述多规则标签中包含至少一个多规则标签。3.根据权利要求2所述的用多层条件组合实现前端页面的方法，其特征在于，所述多规则标签中存放的数据有：多规则标签数组、多规则标签数组之间的关系、基础规则标签数组、基础规则标签数组之间的关系、结果值和宽度；所述多规则标签数组存多规则标签，所述多规则标签数组之间的关系为对多规则标签数组关系进行的动态赋值，所述基础规则标签数组存放基础规则标签，所述基础规则标签数组之间的关系为对基础规则标签数组关系进行的动态赋值，所述结果值用于存放多规则标签数组和多规则标签数组之间的关系后，最用运算出来的结果值，需要在最终的前端页面上显示，所述宽度为前端页面展示层级的宽度，是由多规则标签数组宽度和再加上左右边距得出，每个层级的宽度都由子层级递归算出。4.根据权利要求2所述的用多层条件组合实现前端页面的方法，其特征在于，所述基础规则标签中存放规则配置对象、配置内部规则之间的关系、规则配置描述信息、结果值、问题标识、宽度；所述规则配置对象为可动态配置多层底层规则、数据筛选的时间和表范围，所述配置内部规则之间的关系为对多层底层规则关系进行的动态赋值，所述规则配置描述信息为将配置内部规则转化为自然语义，所述结果值为用于存放配置内部规则最终运算出来的结果值，最终在页面显示，所述问题标识用于数据保存时的数据校验，页面根据此属性来判断将问题多规则标签进行标红醒目提示用户进行修改，并通过弹出给与提示，所述宽度为页面显示最内层的宽，人为设定，便于后面进行递归算出每个层级的宽度。5.根据权利要求4所述的用多层条件组合实现前端页面的方法，其特征在于，根据基础规则标签插入到多规则标签编辑器的位置，执行对应的操作有：替换、插入和组合，具体为：利用view
‑
design应用组件实现基础规则标签选择区到多规则标签编辑区的拖拽完成替换、插入和组合操作，以及，多规则标签编辑区内的基础规则标签和多规则标签到其他多规则标签的拖拽完成替换、插入和组合操作；从基础规则标签选择区中选择基础规则标签拖拽到多规则标签编辑区时，所述替换操
作是通过目标基础规则标签所在多规则标签中的索引位置，将目标基础规则标签从多规则标签中移除，根据拖拽的基础规则标签内容在多规则标签中生成一个新的基础规则标签，并将新生成的基础规则标签插入目标基础规则标签所在多规则标签中的索引位置；所述插入操作是根据拖拽的基础规则标签内容生成一个新的基础规则标签，并将新生成的基础规则标签插入到目标基础规则标签所在多规则标签中的索引位置；所述组合操作是根据拖拽基础规则标签内容生成一个新的基础规则标签，新的基础规则标签和目标基础规则标签组合成新的多规则标签，通过目标基础规则标签所在多规则标签中的索引位置，将目标基础规则标签从多规则标签中移除，并将新生成多规则标签插入到目标基础规则标签所在多规则标签中的索引位置；在多规则标签编辑区内对基础规则标签拖拽时，获取拖拽基础规则标签及此其所在多规则标签内的索引值，拖拽到目标多规则标签时，将此拖拽基础规则标签的索引值从所在多规则标签中移除，根据拖拽基础规则标签内容在目标多规则标签内生成索引值；如果拖拽基础规则标签所在多规则标签内只有一个基础规则标签，则此多规则标签层级要上移一层并更新索引值。6.根据权利要求1所述的用多层条件组合实现前端页面的方法，其特征在于，步骤S3中所述数据处理具体为：每次有新的基础规则标签拖拽到多规则标签编辑区，都需重新计算多规则标签编辑区内的层级，以及，计算所有层级中的多规则标签的高度和宽度；所述计算多规则标签编辑区层级需要分别计算最外层级里多规则标签数组的总层级数；最内层级的基础规则标签的高度和宽度是固定的，每层级与子层级的上边距、下边距、左右边距都是固定的，所述多规则标签每...

【专利技术属性】
技术研发人员：毕颖丽，危明，张万成，
申请(专利权)人：易视腾科技股份有限公司，
类型：发明
国别省市：