├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── examples
    ├── App.vue
    ├── demo.bpmn
    ├── main.js
    └── view.bpmn
├── package.json
├── packages
    ├── BpmnModeler
    │   ├── index.js
    │   └── src
    │   │   └── BpmnModeler.vue
    ├── BpmnViewer
    │   ├── index.js
    │   └── src
    │   │   └── BpmnViewer.vue
    ├── CustomControls
    │   ├── CustomContextPad.js
    │   ├── CustomPalette.js
    │   └── index.js
    ├── CustomModeler
    │   ├── Custom
    │   │   ├── CustomContextPadProvider.js
    │   │   ├── CustomPalette.js
    │   │   └── index.js
    │   └── index.js
    ├── CustomTranslate
    │   ├── index.js
    │   └── translations.js
    └── index.js
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /lib
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | src/
 4 | packages/
 5 | public/
 6 | vue.config.js
 7 | babel.config.js
 8 | *.map
 9 | *.html
10 | 
11 | # local env files
12 | .env.local
13 | .env.*.local
14 | 
15 | # Log files
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | 
20 | # Editor directories and files
21 | .idea
22 | .vscode
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw*


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | ## 1.2.0
 3 | * `FEATURE`: 新增 propertiesPanel
 4 | * `OPTIMIZE`: 更新bpmn版本依赖
 5 | ## 1.0.3 ~ 1.0.4
 6 | * `OPTIMIZE`: 完善动态添加节点 可替换更多场景(task, sequenceFlow, gateway ...)
 7 | ## 1.0.2
 8 | * `FIXED`: 完善流程预览,修复流程多分支问题
 9 | ## 1.0.0
10 | * `FEATURE`: 支持任务替换
11 | * `FIXED`: 完善流程预览
12 | ## 0.1.18
13 | * `FIXED`: 更新开始和结束节点标识逻辑
14 | ## 0.1.17
15 | * `FEATURE`: 新增动态添加任务
16 | ## 0.1.16
17 | * `FIXED`:   通过锁定流程编辑区域来判断自动完成的逻辑
18 | ## 0.1.14
19 | * `FIXED`:   修复输入法弹框导致自动完成编辑的bug
20 | ## 0.1.13
21 | * `FEATURE`: 新增流程模板编辑(导入)功能
22 | ## 0.1.8
23 | * `FIXED`:   光标移出编辑区域自动完成当前编辑转台
24 | ## 0.1.7
25 | * `FIXED`:   更新版本号
26 | ## 0.1.6
27 | * `DELETED`: 删除无用依赖
28 | * `FIXED`:   修复预览key值丢失
29 | ## 0.1.5
30 | * `FEATURE`: 新增流程预览功能
31 | ## 0.1.0
32 | * `FEATURE`: 完成基础的BPMN模型设计功能


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2019-present evanyangg
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-bpmn-modeler
  2 | 
  3 | Design BPMN 2.0 modeler in a [Vue.js](https://vuejs.org) application based on  [bpmn-js](https://github.com/bpmn-io/bpmn-js).
  4 | 
  5 | ## Usage
  6 | ```bash
  7 | yarn add vue-bpmn-modeler
  8 | ```
  9 | ```js
 10 | # main.js
 11 | import VueBpmnModeler from "vue-bpmn-modeler";
 12 | Vue.use(VueBpmnModeler);
 13 | ```
 14 | 
 15 | ```html
 16 | # yourPage.vue
 17 | <style lang="less">
 18 | @import "~vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
 19 | </style>
 20 | ```
 21 | ![viewer](http://image.ulitom.com/other/modeler.png)
 22 | 
 23 | 组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。
 24 | ```html
 25 | <template>
 26 |   <BpmnModeler v-model="modeler"></BpmnModeler>
 27 | </template>
 28 | 
 29 | <script>
 30 |   export default {
 31 |     name: "BpmnModeler",
 32 |     props: {
 33 |       diagramXML: String
 34 |     },
 35 |     watch: {
 36 |       diagramXML(val) {
 37 |         this.openDiagram(val)
 38 |       }
 39 |     },
 40 |     data() {
 41 |       modeler: {
 42 |         // 模型xml数据
 43 |         // model xml data
 44 |         xmlData: "",
 45 |         // svg图片数据
 46 |         // svg data
 47 |         svgImage: ""
 48 |       }
 49 |     },
 50 |     // 详细代码请参考源码
 51 |     // see source code for detail
 52 |     mounted() {
 53 |     },
 54 |     methods: {
 55 | 
 56 |       openDiagram(xml) {
 57 |         if (xml) {
 58 |           this.modeler.importXML(xml, function(err) {
 59 |             if (err) {
 60 |               console.error(err);
 61 |             } else {
 62 |             }
 63 |           });
 64 |           this.xmlData = xml;
 65 |         } else {
 66 |           this.modeler.createDiagram();
 67 |           let _self = this;
 68 |           setTimeout(() => {
 69 |             /**
 70 |              * 修改xml属性值 isExecutable = false => true
 71 |              * isExecutable = false 后端部署流程时 不会创建流程定义数据
 72 |              */
 73 |             let modelerCanvas = _self.modeler.get("canvas");
 74 |             let rootElement = modelerCanvas.getRootElement();
 75 |             let modeling = _self.modeler.get("modeling");
 76 |             // modeling.updateProperties(rootElement, {
 77 |             //   // isExecutable: true
 78 |             // });
 79 |             // 设定开始节点名称和结束节点名称
 80 |             // set StartEvent name 'start' and EndEvent name 'end'
 81 |             rootElement.children.forEach(n => {
 82 |               if (n.type === 'bpmn:StartEvent') {
 83 |                 modeling.updateProperties(n, {
 84 |                   name: '开始',
 85 |                 });
 86 |               } else if (n.type === 'bpmn:EndEvent') {
 87 |                 modeling.updateProperties(n, {
 88 |                   name: '结束',
 89 |                 });
 90 |               }
 91 |             })
 92 |           });
 93 |         }
 94 |       }
 95 |     }
 96 |   };
 97 | </script>
 98 | ```
 99 | #### 当流程启动时，流程会默认走到第一个节点 提交申请，此时的待办任务会显示橙色。
100 | #### When the process starts, the process will complete first task by default, and the TODO tasks will be orange.
101 | ![viewer](http://image.ulitom.com/other/viewer.png "todo task")
102 | #### 当流程完成 提交申请 且满足 条件1 时，流程会走到 成本中心 节点，此时已经完成的待办任务会显示绿色。
103 | #### when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.
104 | ![viewer](http://image.ulitom.com/other/viewer-completed.png "completed task")
105 | 
106 | 参数介绍：
107 | xmlData: 表示流程图的xml数据
108 | taskList: 表示流程的历史记录 可以通过服务的接口 historyService 获得
109 | ```html
110 | <template>
111 |   <BpmnViewer :xmlData="xmlData" :taskData="taskList"></BpmnViewer>
112 | </template>
113 | 
114 | <script>
115 |   export default {
116 |     data() {
117 |       modeler: {
118 |         // 模型xml数据
119 |         xmlData: "",
120 |         // 任务列表
121 |         taskList: [{
122 |           // 任务定义的key
123 |           "key": "",
124 |           // 任务是否完成
125 |           "completed": true
126 |         }]
127 |       }
128 |     }
129 |   };
130 | </script>
131 | ```
132 | #### 动态添加/替换任务节点
133 | #### dynamically add/replace task
134 | ![viewer](http://image.ulitom.com/other/add-task.gif)
135 | ```javascript
136 | addTask () {
137 |   let addOrReplace = {
138 |     // task || sequenceFlow || gateway
139 |     replaceActivity: 'UserTask_0hkfnx2',
140 |     taskList: [
141 |       {
142 |         label: 'test task'
143 |       }
144 |     ]
145 |   }
146 |   this.$refs.modeler.replace(addOrReplace).then((taskList) => {
147 |     // new task list, incluce taskId
148 |     console.log(taskList);
149 |   });
150 | }
151 | ```
152 | #### 开启 propertiesPanel
153 | ```html
154 | <template>
155 |   <BpmnModeler v-model="modeler" propertiesPanel></BpmnModeler>
156 | </template>
157 | ```
158 | ## Examples
159 | ```bash
160 | # clone the project
161 | git clone https://github.com/evanyangg/vue-bpmn-modeler.git
162 | 
163 | # enter the project directory
164 | cd vue-bpmn-modeler
165 | 
166 | # install dependencies
167 | yarn
168 | 
169 | # serve with hot reload at localhost:8080
170 | yarn serve
171 | ```
172 | ## License
173 | MIT 
174 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <BpmnModeler ref='modeler' v-model="modeler" :diagramXML="propXmlData" propertiesPanel></BpmnModeler>
 4 |     <!-- <BpmnViewer :xmlData="viewData" :taskData="propTaskList"></BpmnViewer> -->
 5 |     <button @click="addTask" class="button" v-if="$refs.modeler">add task</button>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import demo from './demo.bpmn';
10 | import view from './view.bpmn';
11 | export default {
12 |   data() {
13 |     return {
14 |       propXmlData: demo,
15 |       viewData: view,
16 |       propTaskList: [
17 |         {
18 |           key: 'UserTask_06zjapk',
19 |           completed: true
20 |         },
21 |         {
22 |           key: 'UserTask_07cj5cp',
23 |           completed: true
24 |         },
25 |         {
26 |           key: 'UserTask_0hkfnx2',
27 |           completed: true
28 |         },
29 |         {
30 |           key: 'UserTask_1pvvtgn',
31 |           completed: true
32 |         },
33 |         {
34 |           key: 'Task_02tadrd',
35 |           completed: false
36 |         }
37 |       ],
38 |       modeler: {
39 |         xmlData: "",
40 |         svgImage: ""
41 |       }
42 |     }
43 |   },
44 |   watch: {
45 |     modeler (val) {
46 |       console.log(val)
47 |     }
48 |   },
49 |   methods: {
50 |     test (list) {
51 |       console.log(list);
52 |     },
53 |     addTask () {
54 |       let taskList = []
55 |       if (Math.round(Math.random()) === 0) {
56 |         taskList = [
57 |           {
58 |             label: 'test task1'
59 |           },
60 |           {
61 |             label: '通用节点'
62 |           }
63 |         ]
64 |       } else {
65 |         taskList = [
66 |           // {
67 |           //   label: 'test task1'
68 |           // }
69 |         ]
70 |       }
71 |       let addOrReplace = {
72 |         replaceActivity: 'UserTask_0hkfnx2',
73 |         taskList: taskList
74 |       }
75 |       this.$refs.modeler.replace(addOrReplace).then((data) => {
76 |         // new task list
77 |         console.log(data);
78 |       });
79 |     }
80 |   }
81 | }
82 | </script>
83 | <style lang="less">
84 | .button {
85 |   position: absolute;
86 |   right:15px;
87 |   bottom:100px;
88 |   height: 40px;
89 |   width: 80px;
90 |   z-index: 100;
91 |   color: green;
92 |   background: rgba(0, 128, 0, 0.2);
93 |   border: 1px solid rgb(0, 128, 0);
94 |   border-radius: 4px;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/examples/demo.bpmn:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" expressionLanguage="http://www.w3.org/1999/XPath" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" typeLanguage="http://www.w3.org/2001/XMLSchema">
  3 |   <bpmn:process id="Process_dc8c70468ac840d3b9a0f5a7a6e966b7" isClosed="false" isExecutable="true" name="报销流程AA" processType="None">
  4 |     <bpmn:startEvent id="StartEvent_1" isInterrupting="true" name="开始" parallelMultiple="false">
  5 |       <bpmn:outgoing>SequenceFlow_0vgxp3k</bpmn:outgoing>
  6 |     </bpmn:startEvent>
  7 |     <bpmn:userTask camunda:formKey="UserTask_06zjapk_form" completionQuantity="1" id="UserTask_06zjapk" implementation="##unspecified" isForCompensation="false" name="提交申请" startQuantity="1">
  8 |       <extensionElements xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
  9 |         <camunda:formData>
 10 |           <camunda:formField defaultValue="false" id="force" label="强制二级审批" type="boolean"/>
 11 |         </camunda:formData>
 12 |       </extensionElements>
 13 |       <bpmn:incoming>SequenceFlow_0vgxp3k</bpmn:incoming>
 14 |       <bpmn:outgoing>SequenceFlow_1l3hfbd</bpmn:outgoing>
 15 |     </bpmn:userTask>
 16 |     <bpmn:sequenceFlow id="SequenceFlow_0vgxp3k" sourceRef="StartEvent_1" targetRef="UserTask_06zjapk"/>
 17 |     <bpmn:exclusiveGateway default="SequenceFlow_0bxrlcy" gatewayDirection="Unspecified" id="ExclusiveGateway_13yj8os">
 18 |       <bpmn:incoming>SequenceFlow_1l3hfbd</bpmn:incoming>
 19 |       <bpmn:outgoing>SequenceFlow_0bxrlcy</bpmn:outgoing>
 20 |       <bpmn:outgoing>SequenceFlow_1kpcoba</bpmn:outgoing>
 21 |     </bpmn:exclusiveGateway>
 22 |     <bpmn:sequenceFlow id="SequenceFlow_1l3hfbd" sourceRef="UserTask_06zjapk" targetRef="ExclusiveGateway_13yj8os"/>
 23 |     <bpmn:userTask camunda:assignee="${assignee}" camunda:formKey="UserTask_0cekja5_form" completionQuantity="1" id="UserTask_0cekja5" implementation="##unspecified" isForCompensation="false" name="上级部门负责人" startQuantity="1">
 24 |       <extensionElements xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 25 |         <camunda:formData>
 26 |           <camunda:formField defaultValue="departmentLeader" id="assigneeType" label="审批人类型" type="string"/>
 27 |           <camunda:formField defaultValue="" id="assigneeName" label="审批人名称" type="string"/>
 28 |           <camunda:formField defaultValue="" id="assignee" label="审批人编号" type="string"/>
 29 |           <camunda:formField defaultValue="true" id="canSign" label="允许加签" type="boolean"/>
 30 |           <camunda:formField defaultValue="true" id="canEdit" label="允许修改" type="boolean"/>
 31 |           <camunda:formField defaultValue="true" id="canRecall" label="允许撤回" type="boolean"/>
 32 |           <camunda:formField defaultValue="true" id="canCountersign" label="启用会签(默认为或签)" type="boolean"/>
 33 |         </camunda:formData>
 34 |       </extensionElements>
 35 |       <bpmn:incoming>SequenceFlow_0bxrlcy</bpmn:incoming>
 36 |       <bpmn:outgoing>SequenceFlow_0nd69xd</bpmn:outgoing>
 37 |       <multiInstanceLoopCharacteristics camunda:collection="UserTask_0cekja5" camunda:elementVariable="assignee" id="multiInstanceLoopCharacteristics_9adaf268-ecdc-4665-98ee-50995813486e" isSequential="false" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 38 |         <completionCondition id="completionCondition_78455020-42b9-4e35-8aff-3426ed0e959d" xsi:type="bpmn:tFormalExpression">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</completionCondition>
 39 |       </multiInstanceLoopCharacteristics>
 40 |     </bpmn:userTask>
 41 |     <bpmn:sequenceFlow id="SequenceFlow_0bxrlcy" name="默认" sourceRef="ExclusiveGateway_13yj8os" targetRef="UserTask_0cekja5"/>
 42 |     <bpmn:userTask camunda:assignee="${assignee}" camunda:formKey="UserTask_07cj5cp_form" completionQuantity="1" id="UserTask_07cj5cp" implementation="##unspecified" isForCompensation="false" name="成本中心" startQuantity="1">
 43 |       <extensionElements xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 44 |         <camunda:formData>
 45 |           <camunda:formField defaultValue="costcenterLeader" id="assigneeType" label="审批人类型" type="string"/>
 46 |           <camunda:formField defaultValue="" id="assigneeName" label="审批人名称" type="string"/>
 47 |           <camunda:formField defaultValue="" id="assignee" label="审批人编号" type="string"/>
 48 |           <camunda:formField defaultValue="true" id="canSign" label="允许加签" type="boolean"/>
 49 |           <camunda:formField defaultValue="true" id="canEdit" label="允许修改" type="boolean"/>
 50 |           <camunda:formField defaultValue="true" id="canRecall" label="允许撤回" type="boolean"/>
 51 |           <camunda:formField defaultValue="true" id="canCountersign" label="启用会签(默认为或签)" type="boolean"/>
 52 |         </camunda:formData>
 53 |       </extensionElements>
 54 |       <bpmn:incoming>SequenceFlow_0nd69xd</bpmn:incoming>
 55 |       <bpmn:incoming>SequenceFlow_1kpcoba</bpmn:incoming>
 56 |       <bpmn:outgoing>SequenceFlow_03gqy8l</bpmn:outgoing>
 57 |       <multiInstanceLoopCharacteristics camunda:collection="UserTask_07cj5cp" camunda:elementVariable="assignee" id="multiInstanceLoopCharacteristics_75d714ef-9d43-444d-89e0-1cde95b8043b" isSequential="false" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 58 |         <completionCondition id="completionCondition_57bca92d-8d04-4456-b754-58f353cf6bd6" xsi:type="bpmn:tFormalExpression">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</completionCondition>
 59 |       </multiInstanceLoopCharacteristics>
 60 |     </bpmn:userTask>
 61 |     <bpmn:sequenceFlow id="SequenceFlow_0nd69xd" sourceRef="UserTask_0cekja5" targetRef="UserTask_07cj5cp"/>
 62 |     <bpmn:userTask camunda:assignee="${assignee}" camunda:formKey="UserTask_0hkfnx2_form" completionQuantity="1" id="UserTask_0hkfnx2" implementation="##unspecified" isForCompensation="false" name="费用会计" startQuantity="1">
 63 |       <extensionElements xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 64 |         <camunda:formData>
 65 |           <camunda:formField defaultValue="userId" id="assigneeType" label="审批人类型" type="string"/>
 66 |           <camunda:formField defaultValue="用户4" id="assigneeName" label="审批人名称" type="string"/>
 67 |           <camunda:formField defaultValue="zhangsan" id="assignee" label="审批人编号" type="string"/>
 68 |           <camunda:formField defaultValue="false" id="canSign" label="允许加签" type="boolean"/>
 69 |           <camunda:formField defaultValue="false" id="canEdit" label="允许修改" type="boolean"/>
 70 |           <camunda:formField defaultValue="false" id="canRecall" label="允许撤回" type="boolean"/>
 71 |           <camunda:formField defaultValue="false" id="canCountersign" label="启用会签(默认为或签)" type="boolean"/>
 72 |         </camunda:formData>
 73 |       </extensionElements>
 74 |       <bpmn:incoming>SequenceFlow_03gqy8l</bpmn:incoming>
 75 |       <bpmn:outgoing>SequenceFlow_0ss8ypj</bpmn:outgoing>
 76 |       <multiInstanceLoopCharacteristics camunda:collection="UserTask_0hkfnx2" camunda:elementVariable="assignee" id="multiInstanceLoopCharacteristics_f0936be5-66f6-45d3-b927-1a4ede7954d2" isSequential="false" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 77 |         <completionCondition id="completionCondition_744abed5-6b83-4388-93d7-6bdb4c9407b6" xsi:type="bpmn:tFormalExpression">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</completionCondition>
 78 |       </multiInstanceLoopCharacteristics>
 79 |     </bpmn:userTask>
 80 |     <bpmn:sequenceFlow id="SequenceFlow_03gqy8l" sourceRef="UserTask_07cj5cp" targetRef="UserTask_0hkfnx2"/>
 81 |     <bpmn:userTask camunda:assignee="${assignee}" camunda:formKey="UserTask_1pvvtgn_form" completionQuantity="1" id="UserTask_1pvvtgn" implementation="##unspecified" isForCompensation="false" name="出纳" startQuantity="1">
 82 |       <extensionElements xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 83 |         <camunda:formData>
 84 |           <camunda:formField defaultValue="userId" id="assigneeType" label="审批人类型" type="string"/>
 85 |           <camunda:formField defaultValue="用户5" id="assigneeName" label="审批人名称" type="string"/>
 86 |           <camunda:formField defaultValue="lisi" id="assignee" label="审批人编号" type="string"/>
 87 |           <camunda:formField defaultValue="false" id="canSign" label="允许加签" type="boolean"/>
 88 |           <camunda:formField defaultValue="false" id="canEdit" label="允许修改" type="boolean"/>
 89 |           <camunda:formField defaultValue="false" id="canRecall" label="允许撤回" type="boolean"/>
 90 |           <camunda:formField defaultValue="false" id="canCountersign" label="启用会签(默认为或签)" type="boolean"/>
 91 |           <camunda:formField defaultValue="true" id="canPay" label="启用支付" type="boolean"/>
 92 |         </camunda:formData>
 93 |       </extensionElements>
 94 |       <bpmn:incoming>SequenceFlow_0ss8ypj</bpmn:incoming>
 95 |       <bpmn:outgoing>SequenceFlow_0jm0ers</bpmn:outgoing>
 96 |       <multiInstanceLoopCharacteristics camunda:collection="UserTask_1pvvtgn" camunda:elementVariable="assignee" id="multiInstanceLoopCharacteristics_939c95f4-31d5-4872-9848-e27a9de6841f" isSequential="false" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">
 97 |         <completionCondition id="completionCondition_5afbd373-1e87-4f21-950e-58cc1a3edc28" xsi:type="bpmn:tFormalExpression">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</completionCondition>
 98 |       </multiInstanceLoopCharacteristics>
 99 |     </bpmn:userTask>
100 |     <bpmn:sequenceFlow id="SequenceFlow_0ss8ypj" sourceRef="UserTask_0hkfnx2" targetRef="UserTask_1pvvtgn"/>
101 |     <bpmn:endEvent id="EndEvent_1xgys24" name="结束">
102 |       <bpmn:incoming>SequenceFlow_0jm0ers</bpmn:incoming>
103 |     </bpmn:endEvent>
104 |     <bpmn:sequenceFlow id="SequenceFlow_0jm0ers" sourceRef="UserTask_1pvvtgn" targetRef="EndEvent_1xgys24"/>
105 |     <bpmn:sequenceFlow id="SequenceFlow_1kpcoba" name="条件1" sourceRef="ExclusiveGateway_13yj8os" targetRef="UserTask_07cj5cp">
106 |       <conditionExpression id="conditionExpression_4e1e2984-1c67-4bac-b3e5-7440ad8d0beb" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL">${amount&gt;=100&amp;&amp;userLevel=='ZJL'}</conditionExpression>
107 |     </bpmn:sequenceFlow>
108 |   </bpmn:process>
109 |   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
110 |     <bpmndi:BPMNPlane bpmnElement="Process_dc8c70468ac840d3b9a0f5a7a6e966b7" id="BPMNPlane_1">
111 |       <bpmndi:BPMNShape bpmnElement="StartEvent_1" id="_BPMNShape_StartEvent_2">
112 |         <dc:Bounds height="36" width="36" x="173" y="102"/>
113 |         <bpmndi:BPMNLabel>
114 |           <dc:Bounds height="14" width="22" x="180" y="145"/>
115 |         </bpmndi:BPMNLabel>
116 |       </bpmndi:BPMNShape>
117 |       <bpmndi:BPMNShape bpmnElement="UserTask_06zjapk" id="UserTask_06zjapk_di">
118 |         <dc:Bounds height="80" width="100" x="260" y="80"/>
119 |       </bpmndi:BPMNShape>
120 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_0vgxp3k" id="SequenceFlow_0vgxp3k_di">
121 |         <di:waypoint x="209" y="120"/>
122 |         <di:waypoint x="260" y="120"/>
123 |       </bpmndi:BPMNEdge>
124 |       <bpmndi:BPMNShape bpmnElement="ExclusiveGateway_13yj8os" id="ExclusiveGateway_13yj8os_di" isMarkerVisible="true">
125 |         <dc:Bounds height="50" width="50" x="415" y="95"/>
126 |       </bpmndi:BPMNShape>
127 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_1l3hfbd" id="SequenceFlow_1l3hfbd_di">
128 |         <di:waypoint x="360" y="120"/>
129 |         <di:waypoint x="415" y="120"/>
130 |       </bpmndi:BPMNEdge>
131 |       <bpmndi:BPMNShape bpmnElement="UserTask_0cekja5" id="UserTask_0cekja5_di">
132 |         <dc:Bounds height="80" width="100" x="520" y="80"/>
133 |       </bpmndi:BPMNShape>
134 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_0bxrlcy" id="SequenceFlow_0bxrlcy_di">
135 |         <di:waypoint x="465" y="120"/>
136 |         <di:waypoint x="520" y="120"/>
137 |       </bpmndi:BPMNEdge>
138 |       <bpmndi:BPMNShape bpmnElement="UserTask_07cj5cp" id="UserTask_07cj5cp_di">
139 |         <dc:Bounds height="80" width="100" x="680" y="80"/>
140 |       </bpmndi:BPMNShape>
141 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_0nd69xd" id="SequenceFlow_0nd69xd_di">
142 |         <di:waypoint x="620" y="120"/>
143 |         <di:waypoint x="680" y="120"/>
144 |       </bpmndi:BPMNEdge>
145 |       <bpmndi:BPMNShape bpmnElement="UserTask_0hkfnx2" id="UserTask_0hkfnx2_di">
146 |         <dc:Bounds height="80" width="100" x="840" y="80"/>
147 |       </bpmndi:BPMNShape>
148 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_03gqy8l" id="SequenceFlow_03gqy8l_di">
149 |         <di:waypoint x="780" y="120"/>
150 |         <di:waypoint x="840" y="120"/>
151 |       </bpmndi:BPMNEdge>
152 |       <bpmndi:BPMNShape bpmnElement="UserTask_1pvvtgn" id="UserTask_1pvvtgn_di">
153 |         <dc:Bounds height="80" width="100" x="1000" y="80"/>
154 |       </bpmndi:BPMNShape>
155 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_0ss8ypj" id="SequenceFlow_0ss8ypj_di">
156 |         <di:waypoint x="940" y="120"/>
157 |         <di:waypoint x="1000" y="120"/>
158 |       </bpmndi:BPMNEdge>
159 |       <bpmndi:BPMNShape bpmnElement="EndEvent_1xgys24" id="EndEvent_1xgys24_di">
160 |         <dc:Bounds height="36" width="36" x="1162" y="102"/>
161 |         <bpmndi:BPMNLabel>
162 |           <dc:Bounds height="14" width="22" x="1169" y="145"/>
163 |         </bpmndi:BPMNLabel>
164 |       </bpmndi:BPMNShape>
165 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_0jm0ers" id="SequenceFlow_0jm0ers_di">
166 |         <di:waypoint x="1100" y="120"/>
167 |         <di:waypoint x="1162" y="120"/>
168 |       </bpmndi:BPMNEdge>
169 |       <bpmndi:BPMNEdge bpmnElement="SequenceFlow_1kpcoba" id="SequenceFlow_1kpcoba_di">
170 |         <di:waypoint x="440" y="145"/>
171 |         <di:waypoint x="440" y="200"/>
172 |         <di:waypoint x="730" y="200"/>
173 |         <di:waypoint x="730" y="160"/>
174 |       </bpmndi:BPMNEdge>
175 |     </bpmndi:BPMNPlane>
176 |   </bpmndi:BPMNDiagram>
177 | </bpmn:definitions>
178 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | import BpmnModeler from '../packages/index'
4 | Vue.use(BpmnModeler)
5 | Vue.config.productionTip = false;
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/examples/view.bpmn:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.5.0">
  3 |   <bpmn:process id="Process_dc8c70468ac840d3b9a0f5a7a6e966b7" name="报销流程AA" processType="None" isClosed="false" isExecutable="true">
  4 |     <bpmn:startEvent id="StartEvent_1" name="开始">
  5 |       <bpmn:outgoing>SequenceFlow_0vgxp3k</bpmn:outgoing>
  6 |     </bpmn:startEvent>
  7 |     <bpmn:userTask id="UserTask_06zjapk" name="提交申请" implementation="##unspecified" camunda:formKey="UserTask_06zjapk_form">
  8 |       <bpmn:extensionElements>
  9 |         <camunda:formData>
 10 |           <camunda:formField id="force" label="强制二级审批" type="boolean" defaultValue="false" />
 11 |         </camunda:formData>
 12 |       </bpmn:extensionElements>
 13 |       <bpmn:incoming>SequenceFlow_0vgxp3k</bpmn:incoming>
 14 |       <bpmn:outgoing>SequenceFlow_1l3hfbd</bpmn:outgoing>
 15 |     </bpmn:userTask>
 16 |     <bpmn:sequenceFlow id="SequenceFlow_0vgxp3k" sourceRef="StartEvent_1" targetRef="UserTask_06zjapk" />
 17 |     <bpmn:exclusiveGateway id="ExclusiveGateway_13yj8os" default="SequenceFlow_0bxrlcy">
 18 |       <bpmn:incoming>SequenceFlow_1l3hfbd</bpmn:incoming>
 19 |       <bpmn:outgoing>SequenceFlow_0bxrlcy</bpmn:outgoing>
 20 |       <bpmn:outgoing>SequenceFlow_1kpcoba</bpmn:outgoing>
 21 |       <bpmn:outgoing>SequenceFlow_0ef9fb2</bpmn:outgoing>
 22 |     </bpmn:exclusiveGateway>
 23 |     <bpmn:sequenceFlow id="SequenceFlow_1l3hfbd" sourceRef="UserTask_06zjapk" targetRef="ExclusiveGateway_13yj8os" />
 24 |     <bpmn:userTask id="UserTask_0cekja5" name="上级部门负责人" implementation="##unspecified" camunda:formKey="UserTask_0cekja5_form" camunda:assignee="${assignee}">
 25 |       <bpmn:extensionElements>
 26 |         <camunda:formData>
 27 |           <camunda:formField id="assigneeType" label="审批人类型" type="string" defaultValue="departmentLeader" />
 28 |           <camunda:formField id="assigneeName" label="审批人名称" type="string" defaultValue="" />
 29 |           <camunda:formField id="assignee" label="审批人编号" type="string" defaultValue="" />
 30 |           <camunda:formField id="canSign" label="允许加签" type="boolean" defaultValue="true" />
 31 |           <camunda:formField id="canEdit" label="允许修改" type="boolean" defaultValue="true" />
 32 |           <camunda:formField id="canRecall" label="允许撤回" type="boolean" defaultValue="true" />
 33 |           <camunda:formField id="canCountersign" label="启用会签(默认为或签)" type="boolean" defaultValue="true" />
 34 |         </camunda:formData>
 35 |       </bpmn:extensionElements>
 36 |       <bpmn:incoming>SequenceFlow_0bxrlcy</bpmn:incoming>
 37 |       <bpmn:outgoing>SequenceFlow_0nd69xd</bpmn:outgoing>
 38 |       <bpmn:multiInstanceLoopCharacteristics id="multiInstanceLoopCharacteristics_9adaf268-ecdc-4665-98ee-50995813486e" camunda:collection="UserTask_0cekja5" camunda:elementVariable="assignee">
 39 |         <bpmn:completionCondition xsi:type="bpmn:tFormalExpression" id="completionCondition_78455020-42b9-4e35-8aff-3426ed0e959d">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</bpmn:completionCondition>
 40 |       </bpmn:multiInstanceLoopCharacteristics>
 41 |     </bpmn:userTask>
 42 |     <bpmn:sequenceFlow id="SequenceFlow_0bxrlcy" name="默认" sourceRef="ExclusiveGateway_13yj8os" targetRef="UserTask_0cekja5" />
 43 |     <bpmn:userTask id="UserTask_07cj5cp" name="成本中心" implementation="##unspecified" camunda:formKey="UserTask_07cj5cp_form" camunda:assignee="${assignee}">
 44 |       <bpmn:extensionElements>
 45 |         <camunda:formData>
 46 |           <camunda:formField id="assigneeType" label="审批人类型" type="string" defaultValue="costcenterLeader" />
 47 |           <camunda:formField id="assigneeName" label="审批人名称" type="string" defaultValue="" />
 48 |           <camunda:formField id="assignee" label="审批人编号" type="string" defaultValue="" />
 49 |           <camunda:formField id="canSign" label="允许加签" type="boolean" defaultValue="true" />
 50 |           <camunda:formField id="canEdit" label="允许修改" type="boolean" defaultValue="true" />
 51 |           <camunda:formField id="canRecall" label="允许撤回" type="boolean" defaultValue="true" />
 52 |           <camunda:formField id="canCountersign" label="启用会签(默认为或签)" type="boolean" defaultValue="true" />
 53 |         </camunda:formData>
 54 |       </bpmn:extensionElements>
 55 |       <bpmn:incoming>SequenceFlow_0nd69xd</bpmn:incoming>
 56 |       <bpmn:incoming>SequenceFlow_1kpcoba</bpmn:incoming>
 57 |       <bpmn:outgoing>SequenceFlow_03gqy8l</bpmn:outgoing>
 58 |       <bpmn:multiInstanceLoopCharacteristics id="multiInstanceLoopCharacteristics_75d714ef-9d43-444d-89e0-1cde95b8043b" camunda:collection="UserTask_07cj5cp" camunda:elementVariable="assignee">
 59 |         <bpmn:completionCondition xsi:type="bpmn:tFormalExpression" id="completionCondition_57bca92d-8d04-4456-b754-58f353cf6bd6">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</bpmn:completionCondition>
 60 |       </bpmn:multiInstanceLoopCharacteristics>
 61 |     </bpmn:userTask>
 62 |     <bpmn:sequenceFlow id="SequenceFlow_0nd69xd" sourceRef="UserTask_0cekja5" targetRef="UserTask_07cj5cp" />
 63 |     <bpmn:userTask id="UserTask_0hkfnx2" name="费用会计" implementation="##unspecified" camunda:formKey="UserTask_0hkfnx2_form" camunda:assignee="${assignee}">
 64 |       <bpmn:extensionElements>
 65 |         <camunda:formData>
 66 |           <camunda:formField id="assigneeType" label="审批人类型" type="string" defaultValue="userId" />
 67 |           <camunda:formField id="assigneeName" label="审批人名称" type="string" defaultValue="用户4" />
 68 |           <camunda:formField id="assignee" label="审批人编号" type="string" defaultValue="zhangsan" />
 69 |           <camunda:formField id="canSign" label="允许加签" type="boolean" defaultValue="false" />
 70 |           <camunda:formField id="canEdit" label="允许修改" type="boolean" defaultValue="false" />
 71 |           <camunda:formField id="canRecall" label="允许撤回" type="boolean" defaultValue="false" />
 72 |           <camunda:formField id="canCountersign" label="启用会签(默认为或签)" type="boolean" defaultValue="false" />
 73 |         </camunda:formData>
 74 |       </bpmn:extensionElements>
 75 |       <bpmn:incoming>SequenceFlow_03gqy8l</bpmn:incoming>
 76 |       <bpmn:incoming>SequenceFlow_1tlw8hf</bpmn:incoming>
 77 |       <bpmn:outgoing>SequenceFlow_0ss8ypj</bpmn:outgoing>
 78 |       <bpmn:multiInstanceLoopCharacteristics id="multiInstanceLoopCharacteristics_f0936be5-66f6-45d3-b927-1a4ede7954d2" camunda:collection="UserTask_0hkfnx2" camunda:elementVariable="assignee">
 79 |         <bpmn:completionCondition xsi:type="bpmn:tFormalExpression" id="completionCondition_744abed5-6b83-4388-93d7-6bdb4c9407b6">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</bpmn:completionCondition>
 80 |       </bpmn:multiInstanceLoopCharacteristics>
 81 |     </bpmn:userTask>
 82 |     <bpmn:sequenceFlow id="SequenceFlow_03gqy8l" sourceRef="UserTask_07cj5cp" targetRef="UserTask_0hkfnx2" />
 83 |     <bpmn:userTask id="UserTask_1pvvtgn" name="出纳" implementation="##unspecified" camunda:formKey="UserTask_1pvvtgn_form" camunda:assignee="${assignee}">
 84 |       <bpmn:extensionElements>
 85 |         <camunda:formData>
 86 |           <camunda:formField id="assigneeType" label="审批人类型" type="string" defaultValue="userId" />
 87 |           <camunda:formField id="assigneeName" label="审批人名称" type="string" defaultValue="用户5" />
 88 |           <camunda:formField id="assignee" label="审批人编号" type="string" defaultValue="lisi" />
 89 |           <camunda:formField id="canSign" label="允许加签" type="boolean" defaultValue="false" />
 90 |           <camunda:formField id="canEdit" label="允许修改" type="boolean" defaultValue="false" />
 91 |           <camunda:formField id="canRecall" label="允许撤回" type="boolean" defaultValue="false" />
 92 |           <camunda:formField id="canCountersign" label="启用会签(默认为或签)" type="boolean" defaultValue="false" />
 93 |           <camunda:formField id="canPay" label="启用支付" type="boolean" defaultValue="true" />
 94 |         </camunda:formData>
 95 |       </bpmn:extensionElements>
 96 |       <bpmn:incoming>SequenceFlow_0ss8ypj</bpmn:incoming>
 97 |       <bpmn:outgoing>SequenceFlow_0jm0ers</bpmn:outgoing>
 98 |       <bpmn:outgoing>SequenceFlow_1pr08ra</bpmn:outgoing>
 99 |       <bpmn:multiInstanceLoopCharacteristics id="multiInstanceLoopCharacteristics_939c95f4-31d5-4872-9848-e27a9de6841f" camunda:collection="UserTask_1pvvtgn" camunda:elementVariable="assignee">
100 |         <bpmn:completionCondition xsi:type="bpmn:tFormalExpression" id="completionCondition_5afbd373-1e87-4f21-950e-58cc1a3edc28">${nrOfCompletedInstances/nrOfInstances &gt;= 1.0}</bpmn:completionCondition>
101 |       </bpmn:multiInstanceLoopCharacteristics>
102 |     </bpmn:userTask>
103 |     <bpmn:sequenceFlow id="SequenceFlow_0ss8ypj" sourceRef="UserTask_0hkfnx2" targetRef="UserTask_1pvvtgn"/>
104 |     <bpmn:endEvent id="EndEvent_1xgys24" name="结束">
105 |       <bpmn:incoming>SequenceFlow_0jm0ers</bpmn:incoming>
106 |     </bpmn:endEvent>
107 |     <bpmn:sequenceFlow id="SequenceFlow_0jm0ers" sourceRef="UserTask_1pvvtgn" targetRef="EndEvent_1xgys24" />
108 |     <bpmn:sequenceFlow id="SequenceFlow_1kpcoba" name="条件1" sourceRef="ExclusiveGateway_13yj8os" targetRef="UserTask_07cj5cp">
109 |       <bpmn:conditionExpression id="conditionExpression_4e1e2984-1c67-4bac-b3e5-7440ad8d0beb">${amount&gt;=100&amp;&amp;userLevel=='ZJL'}</bpmn:conditionExpression>
110 |     </bpmn:sequenceFlow>
111 |     <bpmn:sequenceFlow id="SequenceFlow_1pr08ra" sourceRef="UserTask_1pvvtgn" targetRef="Task_02tadrd" />
112 |     <bpmn:sequenceFlow id="SequenceFlow_0zcu74w" sourceRef="Task_02tadrd" targetRef="Task_0vtq55b" />
113 |     <bpmn:endEvent id="EndEvent_0zkdiel">
114 |       <bpmn:incoming>SequenceFlow_0hk2p9k</bpmn:incoming>
115 |     </bpmn:endEvent>
116 |     <bpmn:sequenceFlow id="SequenceFlow_0hk2p9k" sourceRef="Task_0vtq55b" targetRef="EndEvent_0zkdiel" />
117 |     <bpmn:userTask id="Task_02tadrd" name="测试">
118 |       <bpmn:incoming>SequenceFlow_1pr08ra</bpmn:incoming>
119 |       <bpmn:outgoing>SequenceFlow_0zcu74w</bpmn:outgoing>
120 |     </bpmn:userTask>
121 |     <bpmn:userTask id="Task_0vtq55b" name="测试">
122 |       <bpmn:incoming>SequenceFlow_0zcu74w</bpmn:incoming>
123 |       <bpmn:outgoing>SequenceFlow_0hk2p9k</bpmn:outgoing>
124 |     </bpmn:userTask>
125 |     <bpmn:sequenceFlow id="SequenceFlow_0ef9fb2" sourceRef="ExclusiveGateway_13yj8os" targetRef="Task_0y6ph79" />
126 |     <bpmn:sequenceFlow id="SequenceFlow_1tlw8hf" sourceRef="Task_0y6ph79" targetRef="UserTask_0hkfnx2" />
127 |     <bpmn:userTask id="Task_0y6ph79" name="测试二">
128 |       <bpmn:incoming>SequenceFlow_0ef9fb2</bpmn:incoming>
129 |       <bpmn:outgoing>SequenceFlow_1tlw8hf</bpmn:outgoing>
130 |     </bpmn:userTask>
131 |   </bpmn:process>
132 |   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
133 |     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_dc8c70468ac840d3b9a0f5a7a6e966b7">
134 |       <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
135 |         <dc:Bounds x="173" y="102" width="36" height="36" />
136 |         <bpmndi:BPMNLabel>
137 |           <dc:Bounds x="180" y="145" width="22" height="14" />
138 |         </bpmndi:BPMNLabel>
139 |       </bpmndi:BPMNShape>
140 |       <bpmndi:BPMNShape id="UserTask_06zjapk_di" bpmnElement="UserTask_06zjapk">
141 |         <dc:Bounds x="260" y="80" width="100" height="80" />
142 |       </bpmndi:BPMNShape>
143 |       <bpmndi:BPMNEdge id="SequenceFlow_0vgxp3k_di" bpmnElement="SequenceFlow_0vgxp3k">
144 |         <di:waypoint x="209" y="120" />
145 |         <di:waypoint x="260" y="120" />
146 |       </bpmndi:BPMNEdge>
147 |       <bpmndi:BPMNShape id="ExclusiveGateway_13yj8os_di" bpmnElement="ExclusiveGateway_13yj8os" isMarkerVisible="true">
148 |         <dc:Bounds x="415" y="95" width="50" height="50" />
149 |       </bpmndi:BPMNShape>
150 |       <bpmndi:BPMNEdge id="SequenceFlow_1l3hfbd_di" bpmnElement="SequenceFlow_1l3hfbd">
151 |         <di:waypoint x="360" y="120" />
152 |         <di:waypoint x="415" y="120" />
153 |       </bpmndi:BPMNEdge>
154 |       <bpmndi:BPMNShape id="UserTask_0cekja5_di" bpmnElement="UserTask_0cekja5">
155 |         <dc:Bounds x="520" y="80" width="100" height="80" />
156 |       </bpmndi:BPMNShape>
157 |       <bpmndi:BPMNEdge id="SequenceFlow_0bxrlcy_di" bpmnElement="SequenceFlow_0bxrlcy">
158 |         <di:waypoint x="465" y="120" />
159 |         <di:waypoint x="520" y="120" />
160 |       </bpmndi:BPMNEdge>
161 |       <bpmndi:BPMNShape id="UserTask_07cj5cp_di" bpmnElement="UserTask_07cj5cp">
162 |         <dc:Bounds x="680" y="80" width="100" height="80" />
163 |       </bpmndi:BPMNShape>
164 |       <bpmndi:BPMNEdge id="SequenceFlow_0nd69xd_di" bpmnElement="SequenceFlow_0nd69xd">
165 |         <di:waypoint x="620" y="120" />
166 |         <di:waypoint x="680" y="120" />
167 |       </bpmndi:BPMNEdge>
168 |       <bpmndi:BPMNShape id="UserTask_0hkfnx2_di" bpmnElement="UserTask_0hkfnx2">
169 |         <dc:Bounds x="840" y="80" width="100" height="80" />
170 |       </bpmndi:BPMNShape>
171 |       <bpmndi:BPMNEdge id="SequenceFlow_03gqy8l_di" bpmnElement="SequenceFlow_03gqy8l">
172 |         <di:waypoint x="780" y="120" />
173 |         <di:waypoint x="840" y="120" />
174 |       </bpmndi:BPMNEdge>
175 |       <bpmndi:BPMNShape id="UserTask_1pvvtgn_di" bpmnElement="UserTask_1pvvtgn">
176 |         <dc:Bounds x="1000" y="80" width="100" height="80" />
177 |       </bpmndi:BPMNShape>
178 |       <bpmndi:BPMNEdge id="SequenceFlow_0ss8ypj_di" bpmnElement="SequenceFlow_0ss8ypj" >
179 |         <di:waypoint x="940" y="120" />
180 |         <di:waypoint x="1000" y="120" />
181 |       </bpmndi:BPMNEdge>
182 |       <bpmndi:BPMNShape id="EndEvent_1xgys24_di" bpmnElement="EndEvent_1xgys24">
183 |         <dc:Bounds x="1162" y="102" width="36" height="36" />
184 |         <bpmndi:BPMNLabel>
185 |           <dc:Bounds x="1169" y="145" width="22" height="14" />
186 |         </bpmndi:BPMNLabel>
187 |       </bpmndi:BPMNShape>
188 |       <bpmndi:BPMNEdge id="SequenceFlow_0jm0ers_di" bpmnElement="SequenceFlow_0jm0ers">
189 |         <di:waypoint x="1100" y="120" />
190 |         <di:waypoint x="1162" y="120" />
191 |       </bpmndi:BPMNEdge>
192 |       <bpmndi:BPMNEdge id="SequenceFlow_1kpcoba_di" bpmnElement="SequenceFlow_1kpcoba">
193 |         <di:waypoint x="440" y="145" />
194 |         <di:waypoint x="440" y="200" />
195 |         <di:waypoint x="730" y="200" />
196 |         <di:waypoint x="730" y="160" />
197 |       </bpmndi:BPMNEdge>
198 |       <bpmndi:BPMNEdge id="SequenceFlow_1pr08ra_di" bpmnElement="SequenceFlow_1pr08ra">
199 |         <di:waypoint x="1050" y="160" />
200 |         <di:waypoint x="1050" y="230" />
201 |         <di:waypoint x="1170" y="230" />
202 |       </bpmndi:BPMNEdge>
203 |       <bpmndi:BPMNEdge id="SequenceFlow_0zcu74w_di" bpmnElement="SequenceFlow_0zcu74w">
204 |         <di:waypoint x="1220" y="270" />
205 |         <di:waypoint x="1220" y="390" />
206 |       </bpmndi:BPMNEdge>
207 |       <bpmndi:BPMNShape id="EndEvent_0zkdiel_di" bpmnElement="EndEvent_0zkdiel">
208 |         <dc:Bounds x="1322" y="412" width="36" height="36" />
209 |       </bpmndi:BPMNShape>
210 |       <bpmndi:BPMNEdge id="SequenceFlow_0hk2p9k_di" bpmnElement="SequenceFlow_0hk2p9k">
211 |         <di:waypoint x="1270" y="430" />
212 |         <di:waypoint x="1322" y="430" />
213 |       </bpmndi:BPMNEdge>
214 |       <bpmndi:BPMNShape id="UserTask_02i0b8i_di" bpmnElement="Task_02tadrd">
215 |         <dc:Bounds x="1170" y="190" width="100" height="80" />
216 |       </bpmndi:BPMNShape>
217 |       <bpmndi:BPMNShape id="UserTask_182szux_di" bpmnElement="Task_0vtq55b">
218 |         <dc:Bounds x="1170" y="390" width="100" height="80" />
219 |       </bpmndi:BPMNShape>
220 |       <bpmndi:BPMNEdge id="SequenceFlow_0ef9fb2_di" bpmnElement="SequenceFlow_0ef9fb2">
221 |         <di:waypoint x="440" y="145" />
222 |         <di:waypoint x="440" y="340" />
223 |         <di:waypoint x="520" y="340" />
224 |       </bpmndi:BPMNEdge>
225 |       <bpmndi:BPMNEdge id="SequenceFlow_1tlw8hf_di" bpmnElement="SequenceFlow_1tlw8hf">
226 |         <di:waypoint x="620" y="340" />
227 |         <di:waypoint x="890" y="340" />
228 |         <di:waypoint x="890" y="160" />
229 |       </bpmndi:BPMNEdge>
230 |       <bpmndi:BPMNShape id="UserTask_0sf7mpg_di" bpmnElement="Task_0y6ph79">
231 |         <dc:Bounds x="520" y="300" width="100" height="80" />
232 |       </bpmndi:BPMNShape>
233 |     </bpmndi:BPMNPlane>
234 |   </bpmndi:BPMNDiagram>
235 | </bpmn:definitions>
236 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bpmn-modeler",
 3 |   "version": "1.2.0",
 4 |   "private": false,
 5 |   "author": "evanyangg",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint",
10 |     "lib": "vue-cli-service build --target lib --name vue-bpmn-modeler --dest lib packages/index.js"
11 |   },
12 |   "main": "lib/vue-bpmn-modeler.umd.min.js",
13 |   "dependencies": {
14 |     "bpmn-js": "^7.3.1",
15 |     "bpmn-js-cli": "^2.0.0",
16 |     "bpmn-js-properties-panel": "^0.37.2",
17 |     "camunda-bpmn-moddle": "^4.4.0",
18 |     "core-js": "^3.6.5",
19 |     "diagram-js-minimap": "^2.0.3",
20 |     "inherits": "^2.0.4",
21 |     "vue": "^2.6.12"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^4.5.8",
25 |     "@vue/cli-plugin-eslint": "^4.5.8",
26 |     "@vue/cli-service": "^4.5.8",
27 |     "@vue/eslint-config-prettier": "^6.0.0",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-prettier": "^3.1.3",
31 |     "eslint-plugin-vue": "^6.2.2",
32 |     "execa": "^4.0.0",
33 |     "less": "^3.0.4",
34 |     "less-loader": "^5.0.0",
35 |     "prettier": "^1.19.1",
36 |     "raw-loader": "^3.1.0",
37 |     "vue-template-compiler": "^2.6.12"
38 |   },
39 |   "eslintConfig": {
40 |     "root": true,
41 |     "env": {
42 |       "node": true
43 |     },
44 |     "extends": [
45 |       "plugin:vue/essential",
46 |       "@vue/prettier"
47 |     ],
48 |     "rules": {
49 |       "prettier/prettier": "off",
50 |       "no-console": "off"
51 |     },
52 |     "parserOptions": {
53 |       "parser": "babel-eslint"
54 |     }
55 |   },
56 |   "postcss": {
57 |     "plugins": {
58 |       "autoprefixer": {}
59 |     }
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions"
64 |   ],
65 |   "homepage": "https://github.com/evanyangg/vue-bpmn-modeler",
66 |   "keyword": [
67 |     "camunda",
68 |     "flowable",
69 |     "activity",
70 |     "bpmn.js"
71 |   ]
72 | }
73 | 


--------------------------------------------------------------------------------
/packages/BpmnModeler/index.js:
--------------------------------------------------------------------------------
1 | import BpmnModeler from './src/BpmnModeler.vue'
2 |  
3 | // 为组件提供 install 安装方法，供按需引入
4 | BpmnModeler.install = function (Vue) {
5 |   Vue.component(BpmnModeler.name, BpmnModeler)
6 | }
7 |  
8 | // 默认导出组件
9 | export default BpmnModeler


--------------------------------------------------------------------------------
/packages/BpmnModeler/src/BpmnModeler.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="container" class="containers">
  3 |     <div ref="canvas" class="canvas"></div>
  4 |     <div id="properties-panel-parent" class="properties-panel-parent"></div>
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import BpmnModeler from "../../CustomModeler";
 10 | import CustomTranslate from "../../CustomTranslate";
 11 | import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda.json";
 12 | import propertiesPanelModule from 'bpmn-js-properties-panel';
 13 | import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
 14 | import minimapModule from "diagram-js-minimap";
 15 | import CliModule from 'bpmn-js-cli';
 16 | import { debounce } from "min-dash";
 17 | let customTranslateModule = {
 18 |   translate: ["value", CustomTranslate]
 19 | };
 20 | export default {
 21 |   name: "BpmnModeler",
 22 |   props: {
 23 |     diagramXML: String,
 24 |     propertiesPanel: null
 25 |   },
 26 |   data() {
 27 |     return {
 28 |       modeler: {},
 29 |       xmlData: "",
 30 |       svgImage: "",
 31 |       isSvg: false,
 32 |     };
 33 |   },
 34 |   watch: {
 35 |     diagramXML(val) {
 36 |       this.openDiagram(val)
 37 |     }
 38 |   },
 39 |   async mounted() {
 40 |     console.log(this.propertiesPanel === '')
 41 |     let canvas = this.$refs["canvas"];
 42 |     let additionalModules = [
 43 |       customTranslateModule,
 44 |       minimapModule,
 45 |       CliModule
 46 |     ]
 47 |     if (this.propertiesPanel === '' || this.propertiesPanel) {
 48 |       additionalModules = additionalModules.concat([
 49 |         propertiesPanelModule,
 50 |         propertiesProviderModule
 51 |       ])
 52 |     }
 53 |     this.modeler = new BpmnModeler({
 54 |       container: canvas,
 55 |       additionalModules: additionalModules,
 56 |       cli: {
 57 |         bindTo: 'cli'
 58 |       },
 59 |       moddleExtensions: {
 60 |         camunda: camundaModdleDescriptor
 61 |       },
 62 |       propertiesPanel: {
 63 |         parent: '#properties-panel-parent'
 64 |       }
 65 |     });
 66 |     await this.openDiagram(this.diagramXML).then(() => {
 67 |       // 自动保存当前模型设计
 68 |       let _self = this;
 69 |       let exportArtifacts = debounce(async () => {
 70 |         try {
 71 |           const { svg } = await _self.modeler.saveSVG();
 72 |           _self.svgImage = svg;  
 73 |         } catch (err) {
 74 |           console.log(`saveSVG error ${err}`)
 75 |         }
 76 |         try {
 77 |           const { xml } = await _self.modeler.saveXML({ format: true })
 78 |           _self.xmlData = xml;  
 79 |         } catch (error) {
 80 |           console.log(`saveXML error ${err}`)
 81 |         }
 82 |         let modelInfo = {
 83 |           xmlData: _self.xmlData,
 84 |           svgImage: _self.svgImage
 85 |         }
 86 |         _self.$emit('input', modelInfo)
 87 |       }, 10);
 88 |       this.modeler.on("commandStack.changed", exportArtifacts);
 89 |       exportArtifacts()
 90 |     });
 91 |   },
 92 |   methods: {
 93 |     async replace(data) {
 94 |       let _self = this;
 95 |       await this.openDiagram(this.diagramXML);
 96 |       let incomingTask = []
 97 |       let outgoingTask = []
 98 |       return new Promise((resolve) => {
 99 |         if (data && data.taskList.length > 0) {
100 |           let modelerCanvas = _self.modeler.get("canvas");
101 |           let rootElement = modelerCanvas.getRootElement();
102 |           let cli = window.cli;
103 |           let activityType = ''
104 |           // 删除目标task sequenceFlow
105 |           rootElement.children.forEach(n => {
106 |             if (n.id === data.replaceActivity) {
107 |               if (n.type === 'bpmn:SequenceFlow') {
108 |                 incomingTask.push(n.source.id)
109 |                 outgoingTask.push(n.target.id)
110 |               } else {
111 |                 n.incoming.forEach(nn => {
112 |                   incomingTask.push(nn.source.id)
113 |                 })
114 |                 n.outgoing.forEach(nn => {
115 |                   outgoingTask.push(nn.target.id)
116 |                 })
117 |               }
118 |               activityType = n.type
119 |             }
120 |           })
121 |           let taskActivity = activityType === 'bpmn:SequenceFlow' ? incomingTask[0] : data.replaceActivity
122 |           for (let index = 0; index < data.taskList.length; index++) {
123 |             taskActivity = cli.append(taskActivity, 'bpmn:UserTask')
124 |             data.taskList[index].taskActivity = taskActivity;
125 |             cli.setLabel(taskActivity, data.taskList[index].label);
126 |             cli.move(taskActivity, { x: -200, y: 120 });
127 |           }
128 |           activityType === 'bpmn:SequenceFlow' ? cli.removeConnection(data.replaceActivity) : cli.removeShape(data.replaceActivity)
129 |           incomingTask.forEach(n => {
130 |             cli.connect(n, data.taskList[0].taskActivity, 'bpmn:SequenceFlow') 
131 |           })
132 |           outgoingTask.forEach(n => {
133 |             cli.connect(data.taskList[data.taskList.length - 1].taskActivity, n, 'bpmn:SequenceFlow') 
134 |           })
135 |           resolve(data.taskList);
136 |         } else {
137 |           this.openDiagram(this.diagramXML);
138 |         }
139 |       })
140 |     },
141 |     openDiagram(xml) {
142 |        return new Promise(async (resolve, reject) => { 
143 |         if (xml) {
144 |           try {
145 |             const result = await this.modeler.importXML(xml);
146 |             console.log('rendered');
147 |             resolve()
148 |           } catch (err) {
149 |             reject(err);
150 |           }
151 |           this.xmlData = xml;
152 |         } else {
153 |           this.modeler.createDiagram();
154 |           setTimeout(() => {
155 |             /**
156 |              * 修改xml属性值 isExecutable = false => true
157 |              * isExecutable = false 后端部署流程时 不会创建流程定义数据
158 |              */
159 |             let modelerCanvas = this.modeler.get("canvas");
160 |             let rootElement = modelerCanvas.getRootElement();
161 |             let modeling = this.modeler.get("modeling");
162 |             // modeling.updateProperties(rootElement, {
163 |             //   // isExecutable: true
164 |             // });
165 |             // 设定开始节点名称和结束节点名称
166 |             rootElement.children.forEach(n => {
167 |               if (n.type === 'bpmn:StartEvent') {
168 |                 modeling.updateProperties(n, {
169 |                   name: '开始',
170 |                 });
171 |               } else if (n.type === 'bpmn:EndEvent') {
172 |                 modeling.updateProperties(n, {
173 |                   name: '结束',
174 |                 });
175 |               }
176 |             })
177 |             resolve();
178 |           });
179 |         }
180 |       })
181 |     },
182 |     saveSVG(done) {
183 |       this.modeler.saveSVG(done);
184 |     },
185 |     // todo 
186 |     focusOut(event) {
187 |       let layerBase = document.querySelector('.layer-base')
188 |       let zoom = layerBase.parentNode.getBoundingClientRect();
189 |       if (event.pageX < zoom.left || event.pageX > (zoom.left + zoom.width + 100) || event.pageY < zoom.top || event.pageY > (zoom.top + zoom.height + 40)) {
190 |         // 鼠标移出编辑区域 完成输入 并 失去焦点
191 |         let directEditing = this.modeler.injector.get('directEditing', false);
192 |         directEditing.complete()
193 |         let eventBus = this.modeler.injector.get('eventBus', false);
194 |         eventBus.fire('element.click', '')
195 |       }
196 |     }
197 |   }
198 | };
199 | </script>
200 | <style lang="less" scoped>
201 | // @import "../../styles/app.less";
202 | @import "~bpmn-js/dist/assets/diagram-js.css";
203 | @import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
204 | @import "~diagram-js-minimap/assets/diagram-js-minimap.css";
205 | @import '~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
206 | .containers {
207 |   position: absolute;
208 |   background-color: #ffffff;
209 |   top:0;
210 |   left: 0;
211 |   width: 100%;
212 |   height: 100%;
213 |   // position: relative;
214 |   // width: 100%;
215 |   // height: 100%;
216 | }
217 | .canvas {
218 |   // position: absolute;
219 |   // top: 0;
220 |   // left: 0;
221 |   // right: 0;
222 |   // bottom: 0;
223 |   width: 100%;
224 |   height: 100%;
225 | }
226 | .properties-panel-parent {
227 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
228 |   font-size: 12px;
229 |   position: absolute;
230 |   top: 0;
231 |   bottom: 0;
232 |   right: 0;
233 |   // width: 20%;
234 |   width: 260px;
235 |   z-index: 10;
236 |   border-left: 1px solid #ccc;
237 |   overflow: auto;
238 |   &:empty {
239 |     display: none;
240 |   }
241 |   > .djs-properties-panel {
242 |     padding-bottom: 70px;
243 |     min-height:100%;
244 |   }
245 |   /deep/ .bpp-textfield input {
246 |     padding-right: 0;
247 |   }
248 |   /deep/ .bpp-properties-panel {
249 |     .bpp-properties {
250 |       .bpp-properties-header {
251 |         .label {
252 |             word-wrap: break-word;
253 |         }
254 |       }
255 |     }
256 |   }
257 |   /deep/ .bpp-properties-panel [type=text], /deep/ .bpp-properties-panel textarea {
258 |     width: calc(100% - 6px)
259 |   }
260 |   /deep/ .bpp-properties-panel [contenteditable] {
261 |     width: calc(100% - 12px)
262 |   }
263 |   /deep/ .bpp-table-row > label.bpp-table-row-columns-2.bpp-table-row-removable, /deep/ .bpp-table-row > input.bpp-table-row-columns-2.bpp-table-row-removable {
264 |     width: calc(50% - 12px);
265 |   }
266 | }
267 | </style>


--------------------------------------------------------------------------------
/packages/BpmnViewer/index.js:
--------------------------------------------------------------------------------
1 | import BpmnViewer from './src/BpmnViewer.vue'
2 |  
3 | // 为组件提供 install 安装方法，供按需引入
4 | BpmnViewer.install = function (Vue) {
5 |   Vue.component(BpmnViewer.name, BpmnViewer)
6 | }
7 |  
8 | // 默认导出组件
9 | export default BpmnViewer


--------------------------------------------------------------------------------
/packages/BpmnViewer/src/BpmnViewer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="containers">
  3 |     <div ref="canvas" class="canvas"></div>
  4 |     <!-- <div ref="canvas1" class="canvas"></div> -->
  5 |   </div>
  6 | </template>
  7 | 
  8 | <script>
  9 | import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
 10 | export default {
 11 |   name: "BpmnViewer",
 12 |   props: {
 13 |     xmlData: {
 14 |       type: String,
 15 |       default: ''
 16 |     },
 17 |     taskData: {
 18 |       type: Array,
 19 |       default: () => []
 20 |     }
 21 |   },
 22 |   data() {
 23 |     return {
 24 |       taskList: []
 25 |     };
 26 |   },
 27 |   async mounted() {
 28 |     this.taskList = this.taskData
 29 |     let bpmnViewer = new BpmnViewer({
 30 |       container: this.$refs["canvas"],
 31 |       bpmnRenderer: {
 32 |           // defaultFillColor: "rgba(30,30,30,1)",
 33 |           // defaultStrokeColor: "red"
 34 |       }
 35 |     });
 36 |     // bpmnViewer.on('import.parse.start', (re) => {
 37 |     //   console.log(11111, re)
 38 |     // })
 39 |     // console.log('bpmnViewer', bpmnViewer)
 40 |     try {
 41 |       // let xmlData = this.xmlData.replace('xmlns:camunda', 'xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:camunda')
 42 |       // console.log('xmlData', xmlData)
 43 |       const { warning } = await bpmnViewer.importXML(this.xmlData);
 44 |       // console.log('rendered', warning);
 45 |       let canvas = bpmnViewer.get('canvas');
 46 |       // canvas.zoom('fit-viewport')
 47 |       if (this.taskList && this.taskList.length > 0) {
 48 |         // let overlays = bpmnViewer.get('overlays');
 49 |         // let overlayHtml = document.createElement('div');
 50 |         // overlays.add('StartEvent_1', {
 51 |         //   position: {
 52 |         //     top: 0,
 53 |         //     right: 0,
 54 |         //   },
 55 |         //   html: overlayHtml
 56 |         // });
 57 |         // 判断开始节点或结束节点完成
 58 |         // const modeling = bpmnViewer.get('modeling')
 59 |         // modeling.setColor({ fill: 'red', stroke: 'red' })
 60 |         // console.log('bpmnViewer', bpmnViewer)
 61 |         // console.log('canvas', canvas)
 62 |         // bpmnViewer.getDefinitions().$attrs['xmlns:bioc'] = 'http://bpmn.io/schema/bpmn/biocolor/1.0'
 63 |         // bpmnViewer.getDefinitions().rootElements[0].di.planeElement.forEach(n => {
 64 |         //   // console.log(n)
 65 |         //   n['bioc:stroke'] = 'red'
 66 |         //   n['bioc:fill'] = "#E1BEE7"
 67 |         //   // console.log(n)
 68 |         // })
 69 |         // bpmnViewer.getDefinitions().diagrams[0].plane.planeElement.forEach(n => {
 70 |         //   // console.log(n)
 71 |         //   n['bioc:stroke'] = 'red'
 72 |         //   n['bioc:fill'] = "#E1BEE7"
 73 |         //   n.di = {'bioc:stroke': 'red'}
 74 |         //   // console.log(n)
 75 |         // })
 76 |         // console.log('bpmnViewer2', bpmnViewer.getDefinitions())
 77 |         // const result = await bpmnViewer._moddle.toXML(bpmnViewer.getDefinitions(), {});
 78 |         // console.log(result)
 79 |         // result.xml = result.xml.replace(/\n/g, '');
 80 |         // result.xml = result.xml.replace('xmlns:camunda', 'xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" xmlns:camunda')
 81 |         // result.xml = result.xml.replace('bpmnElement="EndEvent_1xgys24"', 'bpmnElement="EndEvent_1xgys24" bioc:stroke="#3399aa"')
 82 |         // let bpmnViewer1 = new BpmnViewer({
 83 |         //   container: this.$refs["canvas1"],
 84 |         //   bpmnRenderer: {
 85 |         //       // defaultFillColor: "rgba(30,30,30,1)",
 86 |         //       // defaultStrokeColor: "red"
 87 |         //   }
 88 |         // });
 89 |         // const { warning } = await bpmnViewer1.importXML(result.xml);
 90 |         // console.log('bpmnViewer', bpmnViewer1)
 91 |         bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
 92 |           if (n.$type === 'bpmn:UserTask') {
 93 |               let completeTask = this.taskList.find(m => m.key === n.id)
 94 |               let todoTask = this.taskList.find(m => !m.completed)
 95 |               let endTask = this.taskList[this.taskList.length - 1]
 96 |               if (completeTask) {
 97 |                 canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');  
 98 |                 n.outgoing.forEach(nn => {
 99 |                   let targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
100 |                   if (targetTask) {
101 |                     canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');  
102 |                   } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
103 |                     // canvas.addMarker(nn.id, 'highlight');
104 |                     canvas.addMarker(nn.id, completeTask.completed ? 'highlight' : 'highlight-todo');  
105 |                     canvas.addMarker(nn.targetRef.id, completeTask.completed ? 'highlight' : 'highlight-todo');  
106 |                   } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
107 |                     if (!todoTask && endTask.key === n.id) {
108 |                       canvas.addMarker(nn.id, 'highlight');  
109 |                       canvas.addMarker(nn.targetRef.id, 'highlight');  
110 |                     }
111 |                     if (!completeTask.completed) {
112 |                       canvas.addMarker(nn.id, 'highlight-todo');  
113 |                       canvas.addMarker(nn.targetRef.id, 'highlight-todo');  
114 |                     }
115 |                   }
116 |                 });
117 |               }
118 |           } else if (n.$type === 'bpmn:ExclusiveGateway') {
119 |             n.outgoing.forEach(nn => {
120 |               let targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
121 |               if (targetTask) {
122 |                 canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
123 |               }
124 |             })
125 |           }
126 |           if (n.$type === 'bpmn:StartEvent') {
127 |             n.outgoing.forEach(nn => {
128 |               let completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
129 |               if (completeTask) {
130 |                 canvas.addMarker(nn.id, 'highlight');
131 |                 canvas.addMarker(n.id, 'highlight');
132 |                 return
133 |               }
134 |             });
135 |           }
136 |         })
137 |       }
138 |     } catch (err) {
139 |       console.log('error rendering', err);
140 |     }
141 |   },
142 |   methods: {
143 |   }
144 | };
145 | </script>
146 | <style lang="less" scoped>
147 | .containers {
148 |   position: absolute;
149 |   background-color: #ffffff;
150 |   top:0;
151 |   left: 0;
152 |   width: 100%;
153 |   height: 100%;
154 | }
155 | .canvas {
156 |   width: 100%;
157 |   height: 100%;
158 | }
159 | /deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
160 |   fill: green !important; 
161 |   stroke: green !important;
162 |   fill-opacity: 0.2 !important;
163 | }
164 | /deep/.highlight.djs-shape .djs-visual > :nth-child(2) {
165 |   fill: green !important;
166 | }
167 | /deep/.highlight.djs-shape .djs-visual > path {
168 |   fill: green !important;
169 |   fill-opacity: 0.2 !important;
170 |   stroke: green !important;
171 | }
172 | /deep/.highlight.djs-connection > .djs-visual > path {
173 |   stroke: green !important;
174 | }
175 | /deep/.highlight-todo.djs-connection > .djs-visual > path {
176 |   stroke: orange !important;
177 |   stroke-dasharray: 4px !important;
178 |   fill-opacity: 0.2 !important;
179 |   marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
180 | }
181 | /deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
182 |   fill: orange !important; 
183 |   stroke: orange !important;
184 |   stroke-dasharray: 4px !important; 
185 |   fill-opacity: 0.2 !important;
186 | }
187 | /deep/.overlays-div {
188 |   font-size: 10px;
189 |   color: red;
190 |   width: 100px;
191 |   top: -20px !important;
192 | }
193 | </style>


--------------------------------------------------------------------------------
/packages/CustomControls/CustomContextPad.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 自定义操作栏
 3 |  */
 4 | export default class CustomContextPad {
 5 |   constructor(config, contextPad, create, elementFactory, injector, translate) {
 6 |     this.create = create
 7 |     this.elementFactory = elementFactory
 8 |     this.translate = translate
 9 | 
10 |     if (config.autoPlace !== false) {
11 |       this.autoPlace = injector.get('autoPlace', false)
12 |     }
13 | 
14 |     contextPad.registerProvider(this)
15 |   }
16 | 
17 |   getContextPadEntries(element) {
18 |     const { autoPlace, create, elementFactory, translate } = this
19 | 
20 |     function appendUserTask(event, element) {
21 |       if (autoPlace) {
22 |         const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
23 | 
24 |         autoPlace.append(element, shape)
25 |       } else {
26 |         appendUserTaskStart(event, element)
27 |       }
28 |     }
29 | 
30 |     function appendUserTaskStart(event) {
31 |       const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
32 | 
33 |       create.start(event, shape, element)
34 |     }
35 | 
36 |     return {
37 |       'append.user-task': {
38 |         group: 'model',
39 |         className: 'bpmn-icon-user-task',
40 |         title: translate('Append user'),
41 |         action: {
42 |           click: appendUserTask,
43 |           dragstart: appendUserTaskStart
44 |         }
45 |       }
46 |     }
47 |   }
48 | }
49 | 
50 | CustomContextPad.$inject = [
51 |   'config',
52 |   'contextPad',
53 |   'create',
54 |   'elementFactory',
55 |   'injector',
56 |   'translate'
57 | ]
58 | 


--------------------------------------------------------------------------------
/packages/CustomControls/CustomPalette.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 自定义工具栏
 3 |  */
 4 | export default class CustomPalette {
 5 |   constructor(create, elementFactory, palette, translate, actions) {
 6 |     this.create = create
 7 |     this.elementFactory = elementFactory
 8 |     this.translate = translate
 9 |     this.actions = actions
10 |     palette.registerProvider(this)
11 |     
12 |   }
13 | 
14 |   getPaletteEntries() {
15 |     const { create, elementFactory, translate, actions } = this
16 | 
17 |     // 自定义用户任务
18 |     function createUserTask(event) {
19 |       const shape = elementFactory.createShape({ type: "bpmn:UserTask" })
20 |       create.start(event, shape)
21 |     }
22 | 
23 |     return {
24 |       "create.user-task": {
25 |         group: "activity",
26 |         className: "bpmn-icon-user-task",
27 |         title: translate("Create UserTask"),
28 |         action: {
29 |           dragstart: createUserTask,
30 |           click: createUserTask
31 |         }
32 |       }
33 |     }
34 |   }
35 | }
36 | 
37 | CustomPalette.$inject = ["create", "elementFactory", "palette", "translate"]
38 | 


--------------------------------------------------------------------------------
/packages/CustomControls/index.js:
--------------------------------------------------------------------------------
1 | import CustomContextPad from './CustomContextPad';
2 | import CustomPalette from './CustomPalette';
3 | 
4 | export default {
5 |   __init__: [ 'customContextPad', 'customPalette' ],
6 |   customContextPad: [ 'type', CustomContextPad ],
7 |   customPalette: [ 'type', CustomPalette ]
8 | };


--------------------------------------------------------------------------------
/packages/CustomModeler/Custom/CustomContextPadProvider.js:
--------------------------------------------------------------------------------
  1 | import inherits from 'inherits'
  2 | 
  3 | import ContextPadProvider from 'bpmn-js/lib/features/context-pad/ContextPadProvider'
  4 | 
  5 | import { is } from 'bpmn-js/lib/util/ModelUtil'
  6 | 
  7 | import { assign } from 'min-dash'
  8 | 
  9 | inherits(CustomContextPadProvider, ContextPadProvider)
 10 | 
 11 | CustomContextPadProvider.$inject = [
 12 |   'injector',
 13 |   'connect',
 14 |   'translate',
 15 |   'elementFactory'
 16 | ]
 17 | 
 18 | export default function CustomContextPadProvider(injector, connect, translate) {
 19 |   injector.invoke(ContextPadProvider, this)
 20 | 
 21 |   // var cached = bind(this.getContextPadEntries, this)
 22 |   // var rules = this._rules
 23 |   var elementFactory = this._elementFactory
 24 |   var create = this._create
 25 |   var autoPlace = this._autoPlace
 26 |   var modeling = this._modeling
 27 |   // var contextPad = this._contextPadt
 28 | 
 29 |   this.getContextPadEntries = function(element) {
 30 |     
 31 |     var actions = {}
 32 |     var businessObject = element.businessObject
 33 | 
 34 |     function startConnect(event, element, autoActivate) {
 35 |       connect.start(event, element, autoActivate)
 36 |     }
 37 | 
 38 |     function appendAction(type, className, title, options) {
 39 |       if (typeof title !== 'string') {
 40 |         options = title
 41 |         title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') })
 42 |       }
 43 | 
 44 |       function appendStart(event, element) {
 45 |         var shape = elementFactory.createShape(assign({ type: type }, options))
 46 |         create.start(event, shape, {
 47 |           source: element
 48 |         })
 49 |       }
 50 | 
 51 |       var append = autoPlace
 52 |         ? function(event, element) {
 53 |             var shape = elementFactory.createShape(
 54 |               assign({ type: type }, options)
 55 |             )
 56 | 
 57 |             autoPlace.append(element, shape)
 58 |           }
 59 |         : appendStart
 60 | 
 61 |       return {
 62 |         group: 'model',
 63 |         className: className,
 64 |         title: title,
 65 |         action: {
 66 |           dragstart: appendStart,
 67 |           click: append
 68 |         }
 69 |       }
 70 |     }
 71 | 
 72 |     function removeElement() {
 73 |       modeling.removeElements([element])
 74 |     }
 75 | 
 76 |     // function appendUserTask(event, element) {
 77 |     //   if (autoPlace) {
 78 |     //     const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
 79 | 
 80 |     //     autoPlace.append(element, shape)
 81 |     //   } else {
 82 |     //     appendUserTaskStart(event, element)
 83 |     //   }
 84 |     // }
 85 | 
 86 |     // function appendUserTaskStart(event) {
 87 |     //   const shape = elementFactory.createShape({ type: 'bpmn:UserTask' })
 88 | 
 89 |     //   create.start(event, shape, element)
 90 |     // }
 91 | 
 92 |     // 定义开始节点 扩展的操作
 93 |     if (is(businessObject, 'bpmn:StartEvent')) {
 94 |       assign(actions, {
 95 |         'append.gateway': appendAction(
 96 |           'bpmn:ExclusiveGateway',
 97 |           'bpmn-icon-gateway-none',
 98 |           translate('Append Gateway')
 99 |         ),
100 |         'append.user-task': appendAction(
101 |           'bpmn:UserTask',
102 |           'bpmn-icon-user-task',
103 |           translate('Append UserTask')
104 |         )
105 |       })
106 |     } else {
107 |       if (is(businessObject, 'bpmn:ExclusiveGateway')) {
108 |         assign(actions, {
109 |           'append.user-task': appendAction(
110 |             'bpmn:UserTask',
111 |             'bpmn-icon-user-task',
112 |             translate('Append UserTask')
113 |           )
114 |         })
115 |       } else if (!is(businessObject, 'bpmn:EndEvent')) {
116 |         assign(actions, {
117 |           'append.end-event': appendAction(
118 |             'bpmn:EndEvent',
119 |             'bpmn-icon-end-event-none',
120 |             translate('Append EndEvent')
121 |           ),
122 |           'append.gateway': appendAction(
123 |             'bpmn:ExclusiveGateway',
124 |             'bpmn-icon-gateway-none',
125 |             translate('Append Gateway')
126 |           ),
127 |           'append.user-task': appendAction(
128 |             'bpmn:UserTask',
129 |             'bpmn-icon-user-task',
130 |             translate('Append UserTask')
131 |           )
132 |         })
133 |       }
134 |     }
135 |     if (!is(businessObject, 'bpmn:EndEvent')) {
136 |       assign(actions, {
137 |         connect: {
138 |           group: 'connect',
139 |           className: 'bpmn-icon-connection-multi',
140 |           title: translate('Append Sequence'),
141 |           action: {
142 |             click: startConnect,
143 |             dragstart: startConnect
144 |           }
145 |         }
146 |       })
147 |     }
148 |     assign(actions, {
149 |       delete: {
150 |         group: 'edit',
151 |         className: 'bpmn-icon-trash',
152 |         title: translate('Remove'),
153 |         action: {
154 |           click: removeElement
155 |         }
156 |       }
157 |     })
158 |     return actions
159 |   }
160 | }
161 | 


--------------------------------------------------------------------------------
/packages/CustomModeler/Custom/CustomPalette.js:
--------------------------------------------------------------------------------
 1 | // import PaletteProvider from 'bpmn-js/lib/features/palette'
 2 | /**
 3 |  * A palette that allows you to create BPMN _and_ custom elements.
 4 |  */
 5 | import {
 6 |   assign
 7 | } from 'min-dash';
 8 | 
 9 | export default function PaletteProvider(palette, create, elementFactory, translate) {
10 | 
11 |   this._create = create;
12 |   this._elementFactory = elementFactory;
13 |   this._translate = translate;
14 |   palette.registerProvider(this);
15 | }
16 | 
17 | PaletteProvider.$inject = [
18 |   'palette',
19 |   'create',
20 |   'elementFactory',
21 |   'translate'
22 | ];
23 | 
24 | PaletteProvider.prototype.getPaletteEntries = function(/*element*/) {
25 | 
26 |   var actions  = {},
27 |       create = this._create,
28 |       elementFactory = this._elementFactory,
29 |       translate = this._translate
30 | 
31 | 
32 |   function createAction(type, group, className, title, options) {
33 | 
34 |     function createListener(event) {
35 |       var shape = elementFactory.createShape(assign({ type: type }, options));
36 | 
37 |       if (options) {
38 |         shape.businessObject.di.isExpanded = options.isExpanded;
39 |       }
40 | 
41 |       create.start(event, shape);
42 |     }
43 | 
44 |     var shortType = type.replace(/^bpmn:/, '');
45 | 
46 |     return {
47 |       group: group,
48 |       className: className,
49 |       title: translate(title || 'Create ' + shortType),
50 |       action: {
51 |         dragstart: createListener,
52 |         click: createListener
53 |       }
54 |     };
55 |   }
56 | 
57 |   assign(actions, {
58 |     'create.start-event': createAction(
59 |       'bpmn:StartEvent', 'event', 'bpmn-icon-start-event-none'
60 |     ),
61 |     'create.end-event': createAction(
62 |       'bpmn:EndEvent', 'event', 'bpmn-icon-end-event-none'
63 |     ),
64 |     'create.exclusive-gateway': createAction(
65 |       'bpmn:ExclusiveGateway', 'gateway', 'bpmn-icon-gateway-xor'
66 |     ),
67 |     'create.user-task': createAction(
68 |       'bpmn:UserTask', 'task', 'bpmn-icon-user-task'
69 |     )
70 |   });
71 | 
72 |   return actions;
73 | };
74 | 


--------------------------------------------------------------------------------
/packages/CustomModeler/Custom/index.js:
--------------------------------------------------------------------------------
 1 | import CustomPalette from './CustomPalette';
 2 | import CustomContextPadProvider from './CustomContextPadProvider';
 3 | export default {
 4 |   __init__: [
 5 |     'paletteProvider',
 6 |     'contextPadProvider'
 7 |   ],
 8 |   paletteProvider: [ 'type', CustomPalette ],
 9 |   contextPadProvider: ['type', CustomContextPadProvider]
10 | };
11 | 


--------------------------------------------------------------------------------
/packages/CustomModeler/index.js:
--------------------------------------------------------------------------------
 1 | import Modeler from 'bpmn-js/lib/Modeler'
 2 | 
 3 | import inherits from 'inherits'
 4 | 
 5 | import CustomModule from './Custom'
 6 | 
 7 | export default function CustomModeler(options) {
 8 |   Modeler.call(this, options)
 9 | 
10 |   this._customElements = []
11 | }
12 | 
13 | inherits(CustomModeler, Modeler)
14 | 
15 | CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules, [
16 |   CustomModule
17 | ])
18 | 


--------------------------------------------------------------------------------
/packages/CustomTranslate/index.js:
--------------------------------------------------------------------------------
 1 | import translations from './translations';
 2 | 
 3 | 
 4 | export default function customTranslate(template, replacements) {
 5 |   replacements = replacements || {};
 6 | 
 7 |   // Translate
 8 |   template = translations[template] || template;
 9 | 
10 |   // Replace
11 |   return template.replace(/{([^}]+)}/g, function(_, key) {
12 |     return replacements[key] || '{' + key + '}';
13 |   });
14 | }


--------------------------------------------------------------------------------
/packages/CustomTranslate/translations.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This is a sample file that should be replaced with the actual translation.
 3 |  *
 4 |  * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
 5 |  * translations and labels to translate.
 6 |  */
 7 | export default {
 8 |   'Create EndEvent': '结束节点',
 9 |   'Create StartEvent': '开始节点',
10 |   'Create ExclusiveGateway': '排他网关(条件)',
11 |   'Create Gateway': '创建网关',
12 |   'Create UserTask': '用户任务',
13 |   'Open minimap': '打开小地图',
14 |   'Close minimap': '关闭小地图',
15 |   'Append UserTask': '添加审批节点',
16 |   'Append Gateway': '添加网关(条件)',
17 |   'Remove': '移除',
18 |   'Append Sequence': '添加连线',
19 |   'Append EndEvent': '添加结束节点',
20 |   'Append StartEvent': '添加开始节点'
21 | };


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | import BpmnModeler from './BpmnModeler'
 2 | import BpmnViewer from './BpmnViewer'
 3 | const components = [
 4 |   BpmnModeler,
 5 |   BpmnViewer
 6 | ]
 7 | 
 8 | const install = function (Vue) {
 9 |   if (install.installed) return
10 |   components.map(component => Vue.component(component.name, component))
11 | }
12 | if (typeof window !== 'undefined' && window.Vue) {
13 |   install(window.Vue)
14 | }
15 | export default {
16 |   install,
17 |   BpmnModeler,
18 |   BpmnViewer
19 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evanyangg/vue-bpmn-modeler/5e285ccb36c06686748ee0ecd74ed462c362c4f4/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>bpmn-workflow-client</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but bpmn-workflow-client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 将 examples 目录添加为新的页面
 3 |   pages: {
 4 |     index: {
 5 |       // page 的入口
 6 |       entry: 'examples/main.js',
 7 |       // 模板来源
 8 |       template: 'public/index.html',
 9 |       // 输出文件名
10 |       filename: 'index.html'
11 |     }
12 |   },
13 |   css: {
14 |     extract: true, // 是否使用css分离插件 ExtractTextPlugin
15 |     sourceMap: false, // 开启 CSS source maps?
16 |     loaderOptions: {
17 |         less: {
18 |             javascriptEnabled: true //less 配置
19 |         }
20 |     }, // css预设器配置项
21 |     requireModuleExtension: false // 启用 CSS modules for all css / pre-processor files.
22 |   },
23 |   chainWebpack: config => {
24 |     config.module
25 |       .rule("bpmn")
26 |         .test(/\.bpmn$/)
27 |         .use("raw-loader")
28 |         .loader("raw-loader")
29 |         .end();
30 |     config.module
31 |       .rule("js")
32 |       .include
33 |         .add("/packages")
34 |         .end()
35 |       .use("babel")
36 |         .loader("babel-loader")
37 |         .tap(options => {
38 |           // 修改它的选项...
39 |           return options
40 |         });
41 |   },
42 |   //警告 webpack 的性能提示
43 |   configureWebpack : {
44 |     performance: {
45 |         hints:'warning',
46 |         //入口起点的最大体积 整数类型（以字节为单位）
47 |         maxEntrypointSize: 50000000,
48 |         //生成文件的最大体积 整数类型（以字节为单位 300k）
49 |         maxAssetSize: 30000000,
50 |         //只给出 js 文件的性能提示
51 |         assetFilter: function(assetFilename) {
52 |           return assetFilename.endsWith('.js');
53 |         }
54 |     }
55 |   }
56 | };
57 | 


--------------------------------------------------------------------------------