BusinessProcessDesigner 业务流程设计器

业务流程编排设计器。提供可视化画布用于编排业务流程，支持添加条件节点（CONDITION）、动作节点（ACTION）、审批节点（APPROVAL）、子流程节点（SUB_PROCESS）。包含工具栏、节点面板、流程校验、草稿自动保存、冲突检测等完整功能。

• 基础用法
• Props
• Events
• Exposed Methods
• 节点类型
• 自动保存与冲突检测
• 流程校验
• 注意事项

基础用法

<template>
  <BusinessProcessDesigner
    ref="designerRef"
    :schema="processSchema"
    :readonly="false"
    :business-actions="actions"
    :flow-models="flowModels"
    :message-templates="templates"
    @update:schema="handleSchemaChange"
    @save="handleSave"
  />
</template>

<script setup>
import { ref } from 'vue'
import BusinessProcessDesigner from '@/components/business-process-designer/BusinessProcessDesigner.vue'

const designerRef = ref(null)
const processSchema = ref({ nodes: [], edges: [], subject: '采购审批' })

function handleSchemaChange(schema) {
  console.log('Schema 已更新', schema)
}

async function handleSave(schema, meta) {
  // meta.reason: 'manual' | 'auto'
  // meta.hashInput: 用于冲突检测
  await api.saveProcess(schema)
  designerRef.value?.markSaved()
}
</script>

Props

属性	类型	默认值	说明
schema	Object	必填	业务流程 schema，含 nodes、edges、subject、processCode 等
processName	String	'业务流程'	流程名称（展示用）
readonly	Boolean	false	是否只读
autoSaveDelay	Number	900	自动保存延迟（毫秒）
saveState	String	'idle'	保存状态：'idle' | 'saving' | 'saved' | 'conflict' | 'error'
saveError	String	''	保存错误提示信息
serverValidation	Object	—	服务端校验结果：{ issues: [], errors: [] }
objectName	String	''	业务对象名称
fields	Array	[]	字段列表，用于条件表达式
objects	Array	[]	业务对象列表
flowModels	Array	[]	可引用的流程模型列表（审批节点使用）
formAssets	Array	[]	表单资产列表
businessActions	Array	[]	业务动作列表（动作节点使用）
messageTemplates	Array	[]	消息模板列表（通知节点使用）
capabilities	Array	[]	能力列表
subProcesses	Array	[]	子流程列表
serviceActors	Array	[]	服务执行者列表

Events

事件名	参数	说明
update:schema	(schema)	Schema 变化时触发
save	(schema, meta)	保存请求。meta: { reason, hashInput, clientValidation }
validate	(schema, clientValidation)	点击检查流程时触发
openFlowDesigner	—	请求打开独立流程设计器
refreshFlowModel	—	请求刷新流程模型列表
dirtyChange	(dirty: boolean)	脏状态变化（有未保存修改）
locateIssue	(issue)	点击流程问题时触发，需定位到对应节点
reload	—	冲突场景下请求刷新草稿

Exposed Methods

方法	说明
designer	底层 useBusinessProcessDesigner composable 实例
markSaved()	标记当前状态为已保存（清除脏标记）
exportSchema()	导出当前 schema
hasUnsavedChanges	computed ref，是否有未保存的修改

节点类型

类型	标识	说明
条件节点	CONDITION	分支判断，根据字段值决定流程走向
动作节点	ACTION	执行业务动作，如更新数据、发送通知
审批节点	APPROVAL	引用已发布的流程模型，触发审批
子流程节点	SUB_PROCESS	引用另一个业务流程，实现流程嵌套复用

自动保存与冲突检测

• 设置 autoSaveDelay 后，Schema 变化会在指定延迟后自动触发 save 事件
• save 事件的 meta.hashInput 用于服务端冲突检测
• 服务端检测到冲突后，设置 saveState='conflict' 并显示冲突提示

流程校验

点击工具栏的「检查」按钮后：

1. 组件内部执行客户端校验（节点配置完整性、连线闭合性等）
2. 触发 validate 事件，传入 (schema, clientValidation)
3. 父组件可调用服务端校验 API，将结果通过 serverValidation 传回
4. 客户端和服务端校验结果合并展示在问题面板

注意事项

• schema 为核心数据，组件内部会修改其内容并通过 update:schema 同步
• 保存时需要调用 markSaved() 清除脏标记，否则自动保存会持续触发
• flowModels 用于审批节点关联流程模型，需确保包含已发布的流程
• 服务端校验结果通过 serverValidation 回传后自动与客户端问题合并展示