深色模式
流程图绘制
基本用法
点击查看代码
vue
<template>
<bpmn-designer autoInit border></bpmn-designer>
</template>
<script setup lang="ts">
</script>1
2
3
4
5
6
2
3
4
5
6
节点校验
点击查看代码
vue
<template>
<bpmn-designer autoInit border @nodeValid="handleBpmnNodeValid"></bpmn-designer>
</template>
<script setup lang="ts">
import { get } from "lodash";
import { Node } from "@antv/x6";
const handleBpmnNodeValid = (node: Node, done: (messages?: string[]) => void) => {
const validResult: string[] = [];
const nodeName: string | undefined = node.getProp("name");
switch (nodeName) {
case "task-user":
// 示例：用户任务节点审批人配置项必填校验
const nodeData: Record<string, any> = node.getData() || {};
const nodeApprovers: Record<string, any> = get(nodeData, "approvalProps.approvers");
!(nodeApprovers?.length > 0) && validResult.push("请设置节点审批人");
break;
default:
break;
}
done((validResult.length > 0) ? validResult : undefined);
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24