DingFlowDesigner 流程设计器

钉钉风格的 BPMN 流程设计器。提供可视化的流程设计画布，支持节点的增删改查、分支条件配置、上下文菜单、撤销重做、自动布局、BPMN XML 导入导出。与旧版 FlowModeler 接口 1:1 兼容，可直接替换。

基础用法

vue

<template>
  <DingFlowDesigner
    ref="designerRef"
    :xml="initialXml"
    :readonly="false"
    @change="handleXmlChange"
    @ready="handleReady"
  />
</template>

<script setup>
import { ref } from 'vue'
import DingFlowDesigner from '@/components/flow-designer/DingFlowDesigner.vue'

const designerRef = ref(null)
const initialXml = ref('<?xml version="1.0" encoding="UTF-8"?>...')

function handleXmlChange(xml) {
  console.log('BPMN XML 已更新')
  // 可以将 xml 保存到后端
}

function handleReady() {
  console.log('设计器初始化完成')
}
</script>

Props

属性	类型	默认值	说明
`xml`	`String`	`''`	BPMN XML 字符串，用于初始化流程图。传入已有流程定义时可加载现成设计
`readonly`	`Boolean`	`false`	是否只读模式（仅查看，不可编辑）
`formAssetOptions`	`Array`	`[]`	表单资产选项列表，用于节点配置中的表单选择
`formFieldCatalog`	`Array`	`[]`	表单字段目录，用于条件表达式中的字段选择
`processConfig`	`Object`	`{}`	流程级配置：`{ allowSubmitterWithdraw: Boolean, autoApprovalMode: String }`

Events

事件名	参数	说明
`change`	`(xml: string)`	流程图变化时触发（节流），携带生成的 BPMN XML
`ready`	—	设计器初始化完成
`importStart`	—	开始导入 XML
`importEnd`	`(success: boolean, error: Error \| null)`	XML 导入完成

Exposed Methods

通过 ref 获取组件实例后调用：

方法	参数	说明
`setXML(xml)`	`xml: string`	设置/导入 BPMN XML
`getXML(formatted?)`	`formatted?: boolean`	获取当前流程图的 BPMN XML（先提交打开的抽屉草稿）
`reset()`	—	重置为空白设计器
`undo()`	—	撤销上一步操作
`redo()`	—	重做上一步撤销
`designer`	—	底层 `useFlowDesigner` composable 实例（高级用法）
`history`	—	`useFlowHistory` 实例，可查看操作历史

节点操作

设计器画布支持以下节点操作：

操作	方式
添加节点	从左侧节点面板拖拽到画布
编辑节点	双击节点打开配置抽屉
复制节点	右键菜单 → 复制
上移/下移	右键菜单（同级节点间调整顺序）
删除节点	右键菜单 → 删除，或选中后按 Delete
分支条件	点击分支连线上的标签编辑条件表达式

自动布局

设计器内置自动布局引擎，当流程结构变化时自动重新计算节点位置，保持流程图整洁美观。

与 FlowModeler 的关系

DingFlowDesigner 是新一代流程设计器，与旧版 FlowModeler 接口完全兼容：

相同的 xml / readonly Props
相同的 change / ready Events
相同的 setXML / getXML / undo / redo 方法

可以直接将 FlowModeler 替换为 DingFlowDesigner，无需修改调用代码。

注意事项

change 事件有节流处理，高频操作时不会频繁触发
getXML() 调用前会自动提交所有打开的抽屉草稿
内部使用 FlowCanvas 组件渲染画布，useFlowDesigner composable 管理状态

DingFlowDesigner 流程设计器 ​

基础用法 ​

Props ​

Events ​

Exposed Methods ​

节点操作 ​

自动布局 ​

与 FlowModeler 的关系 ​

注意事项 ​