内容概述
本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文
前情提要
前面我们讨论了bpmn流程图的基本绘制、添加节点颜色等,本次我们来说,如何把xml文件中各种标签包裹的节点属性,转成前端常用的json格式,方便回显在页面。首先,我们通过一张图看一下流程图xml文件中,节点的属性有哪几种格式。
思路分析
可以看到,节点的属性被包含在<bpmn:extensionElements>下的<camunda:inputOutput>标签下,下一层的每个 <camunda:inputParameter>都是一个属性,属性共分为三总格式
-
- <camunda:inputParameter>标签下没有子元素
它的属性“name”便是节点的属性名,标签中值“少年的你”便是节点属性值。所以我们得到的第一个属性为“selfName:少年的你“ - <camunda:inputParameter>下有子元素
2.1 子元素为<camunda:map>,map在后端语言里相当于前端的对象(object),对,没有错,这个<camunda:map>标签表示的就是对象。它的下一级标签<camunda:entry>表示对象下的各个键值对。key是键名,标签值是属性值。所以,根据<camunda:map>标签,我们得到节点的第二个属性:nodeDesc: { class: ‘一年一班’,age: ‘8’},看来这个节点是个刚上一年级的8岁小朋
- <camunda:inputParameter>标签下没有子元素