DingFlowViewer 钉钉流程查看器

钉钉风格的流程查看器组件。支持从 API 自动加载或直接传入 BPMN XML，渲染只读流程图，支持节点点击弹出详情气泡。

基本用法

<template>
  <!-- 从 API 加载（推荐） -->
  <DingFlowViewer
    :process-instance-id="instanceId"
    @ready="handleReady"
    @error="handleError"
  />

  <!-- 直接传入 BPMN XML -->
  <DingFlowViewer
    :bpmn-xml="xmlString"
    :node-instance-list="nodeList"
  />
</template>

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

const instanceId = ref(123)

const handleReady = (diagramInfo) => {
  console.log('流程图加载完成:', diagramInfo)
}
const handleError = (err) => {
  console.error('加载失败:', err)
}
</script>

Props

属性	类型	默认值	说明
processInstanceId	String | Number	null	流程实例 ID，传此值时自动调 API 加载 BPMN XML
compact	Boolean	false	紧凑模式（隐藏顶部信息条）
bpmnXml	String	''	直接传入 BPMN XML，跳过 API 加载
nodeInstanceList	Array	null	直接传入节点实例信息列表
nodes	Array	null	兼容后端的 ProcessDiagramInfo.nodes
nodeStatuses	Array | Object	null	兼容旧版 nodeStatuses 映射

Events

事件名	参数	说明
ready	diagramInfo	API 数据加载完成，传递格式化后的图表信息
error	Error	API 加载失败

Expose 方法

方法/属性	类型	说明
designer	object	useFlowDesigner() 返回值
diagramInfo	ref	当前图表信息响应式对象
loading	ref	加载状态
renderError	ref	渲染错误信息
nodeStatusMap	computed	节点状态映射
applyXml(xml)	function	手动切换 BPMN XML
loadFromApi()	function	手动触发 API 加载
fitViewerToScreen()	function	自适应视图缩放

依赖

• flowApi — 自动调 API 获取 BPMN XML
• FlowCanvas / EdgeLayer / NodeRenderer — 自研画布渲染
• useFlowDesigner — 状态管理
• convertBpmnToJson — BPMN 转 JSON
• NodeDetailPopover — 节点详情气泡