Bpmn.js 自定义描述文件使用说明_vue.js_

{ "name": "self", "uri": "https://self", "prefix": "se", "xml": { "tagAlias": "lowerCase" }, "types": [ { "name": "AttrOne", "superClass": [ "Element" ], "properties": [ { "name": "name", "type": "String", "isAttr": "true" }, { "name": "values", "type": "AttrOneProp", "isMany": true } ] }, { "name": "AttrOneProp", "superClass": [ "Element" ], "meta": { "allowedIn": [ "*" ] }, "properties": [ { "name": "propName", "type": "String", "isAttr": true }, { "name": "value", "type": "String", "isAttr": true } ] }, { "name": "AttrTwo", "superClass": [ "Element" ], "meta": { "allowedIn": [ "*" ] }, "properties": [ { "name": "value", "type": "String", "isBody": true } ] } ] } 

import $ from 'jquery'; import BpmnModeler from 'bpmn-js/lib/Modeler'; // 侧边栏 import propertiesPanelModule from 'bpmn-js-properties-panel'; // camunda 侧边栏内容构建器 import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; // camunda 属性解析文件 import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'; // 自定义的属性解析文件 import SelfDescriptor from "./SelfDescriptor.json"; // 省略部分内容... // 初始化 modeler var bpmnModeler = new BpmnModeler({ container: canvas, propertiesPanel: { parent: '#js-properties-panel' }, additionalModules: [ propertiesPanelModule, propertiesProviderModule ], moddleExtensions: { // 使用引入的属性解析文件 camunda: camundaModdleDescriptor, self: SelfDescriptor } }); // 使用与创建自定义属性标签 bpmnModeler.on("element.click", function (event, eventObj) { const moddle = bpmnModeler.get("moddle"); // 自定义属性1 const attrOne = moddle.create("se:AttrOne", { name: "testAttrOne", values: [] }); // 自定义属性子属性 const attrOneProp = moddle.create("se:AttrOneProp", {propName: "propName1", value: "propValue1"}) // 自定义属性2 const attrTwo = moddle.create("se:AttrTwo", { value: "testAttrTwo" }) // 原生属性Properties const props = moddle.create("camunda:Properties", { values: [] }); // 原生属性Properties的子属性 const propItem = moddle.create("camunda:Property", { name: "原生子属性name", values: "原生子属性value" }); // 原生扩展属性数组 const extensions = moddle.create("bpmn:ExtensionElements", { values: [] }) // 开始节点插入原生属性 if (eventObj.element.type === "bpmn:StartEvent") { props.values.push(propItem); extensions.values.push(props); } // 任务节点插入多种属性 if (eventObj.element.type === "bpmn:Task") { props.values.push(propItem, propItem); attrOne.values.push(attrOneProp); extensions.values.push(props, attrOne, attrTwo); } // root插入自定义属性 if (eventObj.element.type === "bpmn:Process") { attrOne.values.push(attrOneProp, attrOneProp); extensions.values.push(attrOne); } bpmnModeler.get("modeling").updateProperties(eventObj.element, { extensionElements: extensions }); }) 

Flow_066c7c5testAttrTwoFlow_066c7c5Flow_0qmpzc7testAttrTwoFlow_0qmpzc7Flow_03hry06testAttrTwoFlow_03hry06Flow_1h7pp7lFlow_1h7pp7l