yx-bpmn-design-next

v1.0.8

Published

10 months ago

基于 bpmn.js 改造的 vue3 + bpmn.js 流程设计器

Downloads

0High
0Medium
0Low

hxz141hxz

yx-bpmn-design-next

基于 Bpmn Process Designer 改造的 vue3 + bpmn.js 流程设计器

打包发布

npm run build
npm publish

安装

// 如果您的项目中已经安装 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 | 组列表，query参数为{type}, type=1 角色，type=2机构部门，callback参数为接口返回的tree data userListByUserIds | ids, callback | ids是id的数组集合，callback参数为接口返回的data groupListByIds | ids, callback | ids是id的数组集合，callback参数为接口返回的tree，是部门和角色两个tree合并的tree

方法

方法名 | 方法参数 | 解释 :---: | :---: | :---: 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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

yx-bpmn-design-next

打包发布

安装

初始化

使用

参数

事件

方法

design 模式下使用示例

viewer 模式下使用示例