特效介绍
yx-bpmn-design-next 是一款基于 Bpmn Process Designer 改造的 vue3+bpmn.js 流程设计器插件，支持查看和设计两种模式，查看模式下，支持高亮当前节点、支持鼠标放上去显示当前节点详情，设计模式支持各种通知事件，自动通知后端需要的数据，后端只要按照格式返回即可。设计模式下，点击保存，会将数据以xml形式emit除去，后端接受保存即可。
使用方法
安装
// 如果您的项目中已经安装 element-plus，这里可以忽略 npm install element-plus --save npm i bpmn-js npm install bpmn-js-token-simulation --save npm install highlight.js --save npm install @highlightjs/vue-plugin --save npm install xml-js --save // 安装 yx-bpmn-design-next npm install yx-bpmn-design-next --save
初始化
// 引入 elementPlus import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 引入本插件 import yxBpmnDesignNext from 'yx-bpmn-design-next' import 'yx-bpmn-design-next/dist/yxBpmnDesignNext.css' // 使用elementPlus app.use(ElementPlus) // 使用本插件 app.use(yxBpmnDesignNext)
使用
<yx-bpmn-design-next />
参数
| 参数名 | 默认值 | 类型 | 解释 |
|---|---|---|---|
| type | 'design' | String | 类型（design、viewer） |
| height | '' | String | 设计器高度 |
| highLightedFlows | [] | Array | 高亮线条 (type=viewer时传) |
| activeActivityIds | [] | Array | 高亮节点 (type=viewer时传) |
| name | '' | String | 流程名称(type=viewer时传) |
| code | '' | String | 流程ID(type=viewer时传) |
| bpmnXml | '' | String | 流程的XML(type=viewer时传) |
事件
| 事件名 | 事件参数 | 解释 |
|---|---|---|
| saveBpmnXml | xml | 保存xml，最好在保存后，给个提示 |
| getActivityInfo | activityId,callback | 鼠标浮上去获取人员信息，成功获取后，调用callback，并将获取的数据传给callback |
| getUserList | query,callback | 人员列表，query参数为{page, pageSize, name, userName}, callback参数为接口返回的row, total |
| getGroupList | callback | 组列表，callback参数为接口返回的data |
| userListByUserIds | ids, callback | ids是id的数组集合，callback参数为接口返回的data |
| groupListByIds | ids, callback | ids是id的数组集合，callback参数为接口返回的data |
方法
| 方法名 | 方法参数 | 解释 |
|---|---|---|
| init | null | 初始化bpmn |
design 模式下使用示例
效果：
代码：
<template>
<yx-bpmn-design-next
ref="yx-bpmn-design-next"
:type="type"
:bpmnXml="bpmnXml"
@saveBpmnXml="saveBpmnXml"
@getUserList="getUserList"
@getGroupList="getGroupList"
/>
</template>
<script>
export default {
name: 'App',
data () {
return {
type: 'design',
bpmnXml: ''
}
},
methods: {
saveBpmnXml(xml) {
console.log(xml)
},
getUserList(query, callback) {
// 模拟请求后回调
setTimeout(()=>{
callback([{
name: 'zhangsan',
username: '张三',
id: 'asdfsafsadf'
},{
name: 'zhangsan',
username: '张三',
id: 'asdfsaddfsadf'
}], 2)
}, 500)
},
getGroupList(callback) {
// 模拟请求后回调
setTimeout(()=>{
callback([{
name: '分组1',
id: 'asdfsafsadf'
},{
name: '分组2',
id: 'asdfsaddfsadf'
}], 2)
}, 500)
}
},
mounted() {
// 模拟获取数据和初始化
setTimeout(() => {
this.bpmnXml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/modeler\"><process id=\"leave\" name=\"请假流程\" isExecutable=\"true\"><startEvent id=\"startEvent1\"></startEvent><userTask id=\"Activity_14x839h\" name=\"提交人\" flowable:assignee=\"${initiator}\" flowable:skipExpression=\"${initiator==''}\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[static]]></flowable:assigneeType></extensionElements></userTask><sequenceFlow id=\"Flow_1en27dc\" sourceRef=\"startEvent1\" targetRef=\"Activity_14x839h\"></sequenceFlow><exclusiveGateway id=\"Gateway_103yogp\" default=\"Flow_1r6ljn8\"></exclusiveGateway><sequenceFlow id=\"Flow_0uus55v\" sourceRef=\"Activity_14x839h\" targetRef=\"Gateway_103yogp\"></sequenceFlow><userTask id=\"Activity_1wz4psz\" name=\"经理\" flowable:assignee=\"10006\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmAssignee><![CDATA[[{\"id\":\"7\",\"name\":\"张三\",\"code\":\"10006\",\"sex\":1,\"mobile\":null,\"companyId\":\"1\",\"companyName\":\"中国石化\",\"deptId\":\"20\",\"deptName\":\"人资部\"}]]]></flowable:idmAssignee></extensionElements></userTask><sequenceFlow id=\"Flow_1r6ljn8\" sourceRef=\"Gateway_103yogp\" targetRef=\"Activity_1wz4psz\"></sequenceFlow><userTask id=\"Activity_0660wym\" name=\"总监\" flowable:assignee=\"10005\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmAssignee><![CDATA[[{\"id\":\"6\",\"name\":\"李四\",\"code\":\"10005\",\"sex\":1,\"mobile\":null,\"companyId\":\"1\",\"companyName\":\"中国石化\",\"deptId\":\"20\",\"deptName\":\"人资部\"}]]]></flowable:idmAssignee></extensionElements></userTask><sequenceFlow id=\"Flow_0ksk662\" name=\"大于三天\" sourceRef=\"Gateway_103yogp\" targetRef=\"Activity_0660wym\"><conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${form.days>3}]]></conditionExpression></sequenceFlow><userTask id=\"Activity_1wkjkk4\" name=\"总经理\" flowable:candidateGroups=\"zjl\"><extensionElements><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmCandidateGroups><![CDATA[[{\"id\":\"3\",\"name\":\"总经理\",\"sn\":\"zjl\",\"companyId\":\"1\",\"companyName\":\"中国石化\"}]]]></flowable:idmCandidateGroups></extensionElements></userTask><sequenceFlow id=\"Flow_1ynp67p\" sourceRef=\"Activity_1wz4psz\" targetRef=\"Activity_0nrwteq\"></sequenceFlow><userTask id=\"Activity_0nrwteq\" name=\"薪酬绩效岗、考勤岗\" flowable:assignee=\"${user}\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[static]]></flowable:assigneeType></extensionElements><multiInstanceLoopCharacteristics isSequential=\"false\" flowable:collection=\"${form_userList}\" flowable:elementVariable=\"user\"></multiInstanceLoopCharacteristics></userTask><endEvent id=\"Event_1938a0o\"></endEvent><exclusiveGateway id=\"Gateway_1jylaav\" default=\"Flow_1pt0zg0\"></exclusiveGateway><sequenceFlow id=\"Flow_1x1gc38\" sourceRef=\"Activity_0660wym\" targetRef=\"Gateway_1jylaav\"></sequenceFlow><sequenceFlow id=\"Flow_1fsku0c\" name=\"大于五天\" sourceRef=\"Gateway_1jylaav\" targetRef=\"Activity_1wkjkk4\"><conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${form.days>5}]]></conditionExpression></sequenceFlow><sequenceFlow id=\"Flow_1pt0zg0\" sourceRef=\"Gateway_1jylaav\" targetRef=\"Activity_0nrwteq\"></sequenceFlow><sequenceFlow id=\"Flow_1op4lgg\" sourceRef=\"Activity_0nrwteq\" targetRef=\"Event_1938a0o\"></sequenceFlow><sequenceFlow id=\"Flow_12odsc1\" sourceRef=\"Activity_1wkjkk4\" targetRef=\"Activity_0nrwteq\"></sequenceFlow></process><bpmndi:BPMNDiagram id=\"BPMNDiagram_leave\"><bpmndi:BPMNPlane bpmnElement=\"leave\" id=\"BPMNPlane_leave\"><bpmndi:BPMNShape bpmnElement=\"startEvent1\" id=\"BPMNShape_startEvent1\"><omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"-215.0\" y=\"105.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_14x839h\" id=\"BPMNShape_Activity_14x839h\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"-130.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Gateway_103yogp\" id=\"BPMNShape_Gateway_103yogp\"><omgdc:Bounds height=\"50.0\" width=\"50.0\" x=\"25.0\" y=\"95.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_1wz4psz\" id=\"BPMNShape_Activity_1wz4psz\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"110.0\" y=\"-30.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_0660wym\" id=\"BPMNShape_Activity_0660wym\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"110.0\" y=\"190.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_1wkjkk4\" id=\"BPMNShape_Activity_1wkjkk4\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"320.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_0nrwteq\" id=\"BPMNShape_Activity_0nrwteq\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"520.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Event_1938a0o\" id=\"BPMNShape_Event_1938a0o\"><omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"722.0\" y=\"102.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Gateway_1jylaav\" id=\"BPMNShape_Gateway_1jylaav\"><omgdc:Bounds height=\"50.0\" width=\"50.0\" x=\"245.0\" y=\"205.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNEdge bpmnElement=\"Flow_0ksk662\" id=\"BPMNEdge_Flow_0ksk662\"><omgdi:waypoint x=\"50.0\" y=\"144.0\"></omgdi:waypoint><omgdi:waypoint x=\"50.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"110.0\" y=\"230.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1x1gc38\" id=\"BPMNEdge_Flow_1x1gc38\"><omgdi:waypoint x=\"209.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"245.0\" y=\"230.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1fsku0c\" id=\"BPMNEdge_Flow_1fsku0c\"><omgdi:waypoint x=\"270.0\" y=\"205.0\"></omgdi:waypoint><omgdi:waypoint x=\"270.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"319.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1r6ljn8\" id=\"BPMNEdge_Flow_1r6ljn8\"><omgdi:waypoint x=\"50.0\" y=\"95.0\"></omgdi:waypoint><omgdi:waypoint x=\"50.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"110.0\" y=\"10.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1ynp67p\" id=\"BPMNEdge_Flow_1ynp67p\"><omgdi:waypoint x=\"209.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"80.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1pt0zg0\" id=\"BPMNEdge_Flow_1pt0zg0\"><omgdi:waypoint x=\"294.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"159.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1en27dc\" id=\"BPMNEdge_Flow_1en27dc\"><omgdi:waypoint x=\"-185.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"-130.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1op4lgg\" id=\"BPMNEdge_Flow_1op4lgg\"><omgdi:waypoint x=\"619.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"722.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_12odsc1\" id=\"BPMNEdge_Flow_12odsc1\"><omgdi:waypoint x=\"419.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"519.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_0uus55v\" id=\"BPMNEdge_Flow_0uus55v\"><omgdi:waypoint x=\"-30.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"25.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>"
this.$refs['yx-bpmn-design-next'].init()
},1000)
}
}
</script>viewer 模式下使用示例
效果：
代码：
<template>
<yx-bpmn-design-next
ref="yx-bpmn-design-next"
:type="type"
:bpmnXml="bpmnXml"
:highLightedFlows="highLightedFlows"
:activeActivityIds="activeActivityIds"
@getActivityInfo="getActivityInfo"
/>
</template>
<script>
export default {
name: 'App',
data () {
return {
highLightedFlows: ['Flow_1en27dc', 'Flow_0uus55v', 'Flow_0ksk662'],
activeActivityIds: ['Activity_0660wym'],
type: 'viewer',
bpmnXml: ''
}
},
methods: {
getActivityInfo(activityId, callback) {
console.log(activityId)
// 模拟请求后回调
setTimeout(()=>{
callback({
activityName: '张三',
assigneeName: '王语嫣',
status: '通过',
startTime: '2023-01-16',
endTime: '2023-01-17',
consumeTime: '1天'
})
}, 500)
},
},
mounted() {
// 模拟获取数据和初始化
setTimeout(() => {
this.bpmnXml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/modeler\"><process id=\"leave\" name=\"请假流程\" isExecutable=\"true\"><startEvent id=\"startEvent1\"></startEvent><userTask id=\"Activity_14x839h\" name=\"提交人\" flowable:assignee=\"${initiator}\" flowable:skipExpression=\"${initiator==''}\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[static]]></flowable:assigneeType></extensionElements></userTask><sequenceFlow id=\"Flow_1en27dc\" sourceRef=\"startEvent1\" targetRef=\"Activity_14x839h\"></sequenceFlow><exclusiveGateway id=\"Gateway_103yogp\" default=\"Flow_1r6ljn8\"></exclusiveGateway><sequenceFlow id=\"Flow_0uus55v\" sourceRef=\"Activity_14x839h\" targetRef=\"Gateway_103yogp\"></sequenceFlow><userTask id=\"Activity_1wz4psz\" name=\"经理\" flowable:assignee=\"10006\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmAssignee><![CDATA[[{\"id\":\"7\",\"name\":\"张三\",\"code\":\"10006\",\"sex\":1,\"mobile\":null,\"companyId\":\"1\",\"companyName\":\"中国石化\",\"deptId\":\"20\",\"deptName\":\"人资部\"}]]]></flowable:idmAssignee></extensionElements></userTask><sequenceFlow id=\"Flow_1r6ljn8\" sourceRef=\"Gateway_103yogp\" targetRef=\"Activity_1wz4psz\"></sequenceFlow><userTask id=\"Activity_0660wym\" name=\"总监\" flowable:assignee=\"10005\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmAssignee><![CDATA[[{\"id\":\"6\",\"name\":\"李四\",\"code\":\"10005\",\"sex\":1,\"mobile\":null,\"companyId\":\"1\",\"companyName\":\"中国石化\",\"deptId\":\"20\",\"deptName\":\"人资部\"}]]]></flowable:idmAssignee></extensionElements></userTask><sequenceFlow id=\"Flow_0ksk662\" name=\"大于三天\" sourceRef=\"Gateway_103yogp\" targetRef=\"Activity_0660wym\"><conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${form.days>3}]]></conditionExpression></sequenceFlow><userTask id=\"Activity_1wkjkk4\" name=\"总经理\" flowable:candidateGroups=\"zjl\"><extensionElements><flowable:assigneeType><![CDATA[idm]]></flowable:assigneeType><flowable:idmCandidateGroups><![CDATA[[{\"id\":\"3\",\"name\":\"总经理\",\"sn\":\"zjl\",\"companyId\":\"1\",\"companyName\":\"中国石化\"}]]]></flowable:idmCandidateGroups></extensionElements></userTask><sequenceFlow id=\"Flow_1ynp67p\" sourceRef=\"Activity_1wz4psz\" targetRef=\"Activity_0nrwteq\"></sequenceFlow><userTask id=\"Activity_0nrwteq\" name=\"薪酬绩效岗、考勤岗\" flowable:assignee=\"${user}\"><extensionElements><modeler:initiator-can-complete xmlns:modeler=\"http://flowable.org/modeler\"><![CDATA[false]]></modeler:initiator-can-complete><flowable:assigneeType><![CDATA[static]]></flowable:assigneeType></extensionElements><multiInstanceLoopCharacteristics isSequential=\"false\" flowable:collection=\"${form_userList}\" flowable:elementVariable=\"user\"></multiInstanceLoopCharacteristics></userTask><endEvent id=\"Event_1938a0o\"></endEvent><exclusiveGateway id=\"Gateway_1jylaav\" default=\"Flow_1pt0zg0\"></exclusiveGateway><sequenceFlow id=\"Flow_1x1gc38\" sourceRef=\"Activity_0660wym\" targetRef=\"Gateway_1jylaav\"></sequenceFlow><sequenceFlow id=\"Flow_1fsku0c\" name=\"大于五天\" sourceRef=\"Gateway_1jylaav\" targetRef=\"Activity_1wkjkk4\"><conditionExpression xsi:type=\"tFormalExpression\"><![CDATA[${form.days>5}]]></conditionExpression></sequenceFlow><sequenceFlow id=\"Flow_1pt0zg0\" sourceRef=\"Gateway_1jylaav\" targetRef=\"Activity_0nrwteq\"></sequenceFlow><sequenceFlow id=\"Flow_1op4lgg\" sourceRef=\"Activity_0nrwteq\" targetRef=\"Event_1938a0o\"></sequenceFlow><sequenceFlow id=\"Flow_12odsc1\" sourceRef=\"Activity_1wkjkk4\" targetRef=\"Activity_0nrwteq\"></sequenceFlow></process><bpmndi:BPMNDiagram id=\"BPMNDiagram_leave\"><bpmndi:BPMNPlane bpmnElement=\"leave\" id=\"BPMNPlane_leave\"><bpmndi:BPMNShape bpmnElement=\"startEvent1\" id=\"BPMNShape_startEvent1\"><omgdc:Bounds height=\"30.0\" width=\"30.0\" x=\"-215.0\" y=\"105.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_14x839h\" id=\"BPMNShape_Activity_14x839h\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"-130.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Gateway_103yogp\" id=\"BPMNShape_Gateway_103yogp\"><omgdc:Bounds height=\"50.0\" width=\"50.0\" x=\"25.0\" y=\"95.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_1wz4psz\" id=\"BPMNShape_Activity_1wz4psz\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"110.0\" y=\"-30.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_0660wym\" id=\"BPMNShape_Activity_0660wym\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"110.0\" y=\"190.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_1wkjkk4\" id=\"BPMNShape_Activity_1wkjkk4\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"320.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Activity_0nrwteq\" id=\"BPMNShape_Activity_0nrwteq\"><omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"520.0\" y=\"80.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Event_1938a0o\" id=\"BPMNShape_Event_1938a0o\"><omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"722.0\" y=\"102.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNShape bpmnElement=\"Gateway_1jylaav\" id=\"BPMNShape_Gateway_1jylaav\"><omgdc:Bounds height=\"50.0\" width=\"50.0\" x=\"245.0\" y=\"205.0\"></omgdc:Bounds></bpmndi:BPMNShape><bpmndi:BPMNEdge bpmnElement=\"Flow_0ksk662\" id=\"BPMNEdge_Flow_0ksk662\"><omgdi:waypoint x=\"50.0\" y=\"144.0\"></omgdi:waypoint><omgdi:waypoint x=\"50.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"110.0\" y=\"230.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1x1gc38\" id=\"BPMNEdge_Flow_1x1gc38\"><omgdi:waypoint x=\"209.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"245.0\" y=\"230.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1fsku0c\" id=\"BPMNEdge_Flow_1fsku0c\"><omgdi:waypoint x=\"270.0\" y=\"205.0\"></omgdi:waypoint><omgdi:waypoint x=\"270.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"319.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1r6ljn8\" id=\"BPMNEdge_Flow_1r6ljn8\"><omgdi:waypoint x=\"50.0\" y=\"95.0\"></omgdi:waypoint><omgdi:waypoint x=\"50.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"110.0\" y=\"10.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1ynp67p\" id=\"BPMNEdge_Flow_1ynp67p\"><omgdi:waypoint x=\"209.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"10.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"80.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1pt0zg0\" id=\"BPMNEdge_Flow_1pt0zg0\"><omgdi:waypoint x=\"294.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"230.0\"></omgdi:waypoint><omgdi:waypoint x=\"570.0\" y=\"159.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1en27dc\" id=\"BPMNEdge_Flow_1en27dc\"><omgdi:waypoint x=\"-185.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"-130.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_1op4lgg\" id=\"BPMNEdge_Flow_1op4lgg\"><omgdi:waypoint x=\"619.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"722.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_12odsc1\" id=\"BPMNEdge_Flow_12odsc1\"><omgdi:waypoint x=\"419.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"519.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge><bpmndi:BPMNEdge bpmnElement=\"Flow_0uus55v\" id=\"BPMNEdge_Flow_0uus55v\"><omgdi:waypoint x=\"-30.0\" y=\"120.0\"></omgdi:waypoint><omgdi:waypoint x=\"25.0\" y=\"120.0\"></omgdi:waypoint></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></definitions>"
this.$refs['yx-bpmn-design-next'].init()
},1000)
}
}
</script>