BPMN 流程设计器

基于 bpmn-js 的 BPMN 2.0 流程设计器和查看器，支持 Flowable 扩展属性。

组件概览

组件	说明
BpmnModeler.vue	基础 BPMN 模型设计器
FlowModeler.vue	增强版 Flowable 模型设计器
ProcessDiagramViewer.vue	流程图查看器（只读）
InteractiveProcessDiagram.vue	交互式流程图查看器
NodePropertiesPanel.vue	节点属性编辑面板
UserSelectModal.vue	用户选择弹窗

BpmnModeler — 基础模型设计器

<template>
  <BpmnModeler
    :xml="bpmnXml"
    :read-only="false"
    @save="onSave"
    @change="onChange"
    @ready="onReady"
  />
</template>

<script setup>
import BpmnModeler from '@/components/bpmn/BpmnModeler.vue'

function onSave(xml) {
  console.log('BPMN XML:', xml)
}
</script>

Props

属性	类型	默认值	说明
xml	String	-	BPMN XML 内容
readOnly	Boolean	false	只读模式

Events

事件	参数	说明
save	(xml: string)	保存时触发
change	-	模型变更
ready	-	模型加载完成

暴露方法

方法	返回值	说明
getXML()	Promise<string>	获取 BPMN XML
getSVG()	Promise<string>	获取 SVG 图片
importXML(xml)	Promise<void>	导入 BPMN XML

工具栏

支持撤销/重做、缩放（放大/缩小/适应）、导出 BPMN/SVG。

---

FlowModeler — 增强版模型设计器

在 BpmnModeler 基础上增加 Flowable 扩展属性支持。

特性

• Flowable moddle 扩展（flowable-moddle.json）
• 增强的工具栏（导入/导出、XML 预览）
• 缩放百分比显示
• 节点属性弹窗（委托给 NodePropertiesPanel）

暴露方法

方法	说明
getXML()	获取 BPMN XML
setXML(xml)	设置 BPMN XML
modeler()	获取底层 bpmn-js Modeler 实例

---

ProcessDiagramViewer — 流程图查看器

显示流程实例的运行状态图。

<template>
  <ProcessDiagramViewer
    process-instance-id="process-123"
    @node-click="onNodeClick"
  />
</template>

Props

属性	类型	必填	说明
processInstanceId	String	是	流程实例 ID

Events

事件	参数	说明
node-click	(nodeData)	节点点击
loaded	-	加载完成

功能

• 从 API 获取 BPMN XML 并渲染
• 节点状态标记（已完成/进行中/待处理）
• 处理人徽章
• 悬浮提示（处理人、时间、持续时间、审批意见）

---

NodePropertiesPanel — 节点属性面板

BPMN 元素的属性编辑器，支持以下节点类型：

节点类型	可配置属性
User Task	分配人类型、候选人/组（支持用户/角色选择器）、表单配置、优先级、截止日期、多实例/会签、任务/执行监听器
Service Task	实现类、表达式
Sequence Flow	条件表达式
Start/End Event	事件配置

---

UserSelectModal — 用户选择弹窗

可复用的用户选择器，支持搜索、分页和单选/多选。

<template>
  <UserSelectModal
    v-model:show="show"
    title="选择处理人"
    :multiple="true"
    :selected-users="selectedUsers"
    @confirm="onConfirm"
  />
</template>

Props

属性	类型	默认值	说明
show	Boolean	false	控制显示（v-model）
title	String	-	弹窗标题
multiple	Boolean	false	是否多选
selectedUsers	Array	[]	已选用户列表

Events

事件	参数	说明
update:show	(value: boolean)	显示状态变更
confirm	(users: Array)	确认选择

功能

• 关键词搜索
• 部门树过滤
• 分页数据表格
• 单选/多选支持

依赖

• bpmn-js
• flowable-moddle.json
• naive-ui
• @/api/flow
• @/utils/http