一个多种属性配置的用户任务节点
网络异常,图片无法展示
|
主要留意属性/内容
shape: { id: "节点id", type: "节点类型", x: "x轴坐标", y: "y轴坐标", width: "宽度", height: "高度", businessObject: { $type: "与上级 type 一致", documentation: "元素文档", extensionElements: "包含监听器、输入输出、扩展属性等", formKey: "绑定表单key", id: "与上级 id 一致", name: "节点名称", $attrs: {}, // 自定义属性 $parent: {} // 父级元素 }, outgoing: refs[], // 直连的出口元素(通常为连接线) incoming: refs[] // 直连的来源元素(通常为连接线) }
属性分析
// 原始实例和工具类实例 this.modeler = new BpmnModeler(options); const eventBus = this.modeler.get("eventBus"); const modeling = this.modeler.get("modeling"); const elementRegistry = this.modeler.get("elementRegistry"); const bpmnFactory = this.modeler.get("bpmnFactory"); const moddle = this.modeler.get("moddle"); // 获取选中元素(这里监听鼠标单击事件) eventBus.on("element.click", (e) => { if (!e || !e.element) return; this.element = e.element; }); // 保证元素有效 const shape = this.modeler.get("elementRegistry").get(this.element.id);
1. 基础信息
Shape.id
:节点唯一标识,新增节点自动生成,自动生成节点有固定单词开头
Shape.type
: 节点类型
Shape.businessObject
: 节点的绑定属性,常用于业务流转;原生支持属性会同步更新到xml的节点内部;不具有get/set方法,vue2.x好像不能直接监听变化
Shape.order
: 暂时还不了解
Shape.parent
: 父级元素,与businessObject
内的$parent
一致
2. BusinessObject
包含节点的大部分配置信息与自定义属性,属性更新可使用
updateProperties
方法
modeling.updateProperties(shape, { name: "节点1", myConfig: { nodeName: "nodeName1" } });
原生支持属性会同步更新到
Shape.businessObject
内,并更新到xml节点内;用户自定义属性,会更新到Shape.businessObject.$attrs
内,并转换为{ [key: string]: string }
的形式更新为xml节点标签的属性。比如上面的
myConfig
会更新为...
2.1 documentation
元素文档
BusinessObject.documentation
: ModdleElement[]
// 变量和工具类的声明方式在上面 // 创建元素文档 const DOC = bpmnFactory.create("bpmn:Documentation", { text: "测试元素文档" }) // 更新到节点 modeling.updateProperties(shape, { documentation: [ DOC ] })
2.2 extensionElements
扩展配置
包含两个属性:
$type: "bpmn:ExtensionElements"
和values: ModdleElement[]
values
内部包含的常用类型有[ "camunda:InputOutput", "camunda:Properties", "camunda:ExecutionListener", "camunda:TaskListener", "camunda:FormData" ]
camunda:InputOutput
输入输出
待试验,流程与创建扩展属性类似
camunda:Properties
扩展属性
// 1. 创建一个扩展属性 const exCamProperty = bpmnFactory.create("camunda:Property", { name: "clickAdd", value: "definedWithJS" }); console.log("exCamProperty", exCamProperty); // 2. 创建一组扩展属性分组(默认panel只有一个, 包含若干个 扩展属性) const exProperties = bpmnFactory.create("camunda:Properties", { values: [] }); console.log("exProperties", exProperties); // 3. 创建节点的扩展配置项 const extensions = bpmnFactory.create("bpmn:ExtensionElements", { values: [] }); console.log("extensions", extensions); // 组装数据 exProperties.values.push(exCamProperty); extensions.values.push(exProperties); // 更新到节点 this.modeling.updateProperties(element, { extensionElements: extensions }); // 更新后的结果(xml) // <userTask id="Activity_1owrwsz"> // <extensionElements> // <camunda:properties> // <camunda:property name="clickAdd" value="definedWithJS" /> // </camunda:properties> // </extensionElements> // </userTask>
camunda:ExecutionListener
监听器 -- 执行监听
待试验,流程与创建扩展属性类似
camunda:TaskListener
监听器 -- 任务监听
待试验,流程与创建扩展属性类似
camunda:FormData
表单
待试验,流程与创建扩展属性类似
两个条件配置的连接线
基础信息与节点差不多
属性分析
BusinessObject
1. BusinessObject.ConditionExpression
连线对应条件表达式/脚本配置
// 变量和工具类的声明方式在上面 // 创建条件 const conditionExpression = moddle.create("bpmn:FormalExpression", { body: "${ handle == 'pass' }" }) // 更新到节点 modeling.updateProperties(shape, { conditionExpression: conditionExpression })
2. BusinessObject.sourceRef
连接线来源元素
3. BusinessObject.targetRef
连接线目标元素
后记
由于工作需要(其实不是很需要),在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。