51-BpmnDesigner集成

51-BpmnDesigner：bpmn-js集成

流程设计器不是从零画图------bpmn-js开源库管画布/图形/连线，browise只做两件事：属性面板（BpmnPropertyPanel 6.2KB）把图形属性转成业务配置、部署按钮把XML交给ProcessModelService。7.8KB的BpmnDesigner是薄壳。

文章目录

51-BpmnDesigner：bpmn-js集成

源码：browise-vue/src/components/workflow/BpmnDesigner.vue（7.8KB）

协作：BpmnPalette（元素面板）、BpmnPropertyPanel（6.2KB）、useBpmnEditor.ts、workflowApi.ts（10.9KB）

后端：ProcessModelService（第41篇）

一、bpmn-js的角色分工

复制代码

bpmn-js（开源）              browise（自研）
├── 画布渲染/缩放/平移        ├── 属性面板------图形属性→业务语义
├── 形状库（BpmnPalette）     ├── 节点id命名约定（startEvent/endEvent）
├── 连线/自动布局             ├── assignee表达式生成
├── BPMN XML序列化/反序列化   ├── 部署/保存/版本管理（调后端）
└── 事件订阅（元素点击等）     └── nextid网关条件模板

bpmn-js管"画"、browise管"业务含义" ------中间的桥梁是BPMN XML：画布操作实时反映到XML、XML可反向加载成画布。

二、Designer的初始化

typescript 复制代码

// useBpmnEditor.ts（简化）
import BpmnModeler from 'bpmn-js/lib/Modeler'

const modeler = new BpmnModeler({
  container: canvasEl,            // 挂载的div
  additionalModules: [            // 自定义模块
    customPropertiesProvider     // 属性面板扩展
  ]
})

// 加载已有模型（Model的editorSource------第41篇buildEmptyBpmn生成）
await modeler.importXML(xmlString)

BpmnModeler vs BpmnViewer ------Modeler可编辑、Viewer只读------流程配置页（查看）用Viewer、模型管理（编辑）用Modeler 。importXML接的是Model.editorSource------新建模型有空白模板保证这里永不null（第41篇讲过这个防白屏设计）。

三、属性面板：图形属性到业务配置

选中一个userTask节点→BpmnPropertyPanel显示：

typescript 复制代码

// bpmn-js的元素业务属性（extensionElements/custom命名空间）
element.businessObject.set('flowable:assignee', '${applyUser}')
element.businessObject.set('name', '申请')

面板的表单字段 ------节点名、assignee表达式、候选组、多实例（会签）配置。写回机制 ------bpmn-js的modeling.updateProperties(element, changes)------改属性=改XML=画布标签实时刷新。

assignee表达式的三种输入 ------手写UEL（${applyUser}）/选人（UserSelect组件）/选角色------本质都是生成字符串 塞进flowable:assignee。第37篇的${applyUser}模式在这里被可视化生产。

四、保存与部署的两条链

typescript 复制代码

// 保存草稿（Model）
async function saveModel() {
  const { xml } = await modeler.saveXML({ format: true })
  await workflowApi.updateModelEditorSource(modelId, xml)
  // → ProcessModelService.updateModelEditorSource → ACT_DE_MODEL编辑
}

// 部署（Deployment）
async function deploy() {
  const { xml } = await modeler.saveXML({ format: true })
  await workflowApi.deploy(modelId, xml)
  // → ProcessModelService.deployFromXml → 新版本ProcessDefinition
  // → 自动建wf_start_菜单（第41篇）
}

saveXML({format:true}) ------画布状态导出为格式化XML------草稿与部署用同一份XML，区别只是落到Model表还是Deployment。

部署后的版本提示 ------同一key重复部署→ProcessDefinition版本+1------在途实例走旧版、新实例走新版------设计器要在部署确认框里提示这一点（避免"改了流程怎么老单子还在走旧流程"的咨询工单）。

五、nextid网关条件的设计器支持

第37篇的排他网关条件（#{nextid == 'apply'}）------手写UEL容易拼错节点id。BpmnPropertyPanel的网关条件编辑器：

复制代码

选中网关的某条出线
  → 面板显示"流转条件"下拉
  → 选项=流程内全部节点id（含endEvent）------从modeler.get('elementRegistry')取
  → 选择"apply" → 自动生成 #{nextid == 'apply'}

从节点列表选而不是手写 ------id拼写错误的整个类别被消灭 。这就是设计器对协议的支撑------协议约定（nextid）+工具防错（下拉选择）=既灵活又可靠。

六、getProcessDiagram：运行中的流程图

ProcessTrack.vue（流程追踪）------查看运行实例走到哪：

复制代码

后端getTasksForDiagram（第41篇）
  → 历史+当前活动节点汇总 → 高亮节点列表
前端BpmnViewer（只读模式）
  → importXML(部署的BPMN) + overlay标注高亮
  → ProcessDiagramRenderer（后端8.2KB）供图片版

同一份BPMN三种视图 ------设计时（Modeler可编辑）、查看定义（Viewer只读）、追踪实例（Viewer+高亮）------图随数据走。

✅ 亮点：bpmn-js管画browise管业务含义的分工、属性面板写回XML的updateProperties机制、assignee表达式的可视化生产、部署的版本隔离提示、网关条件从节点列表下拉防拼写错误、同一份BPMN的三种视图。适合集成bpmn-js的人。扩展方向：第37篇nextid协议、第41篇模型管理、第36篇completeTask。