Design BPMN 2.0 modeler in a [Vue.js](https://vuejs.org) application based on [bpmn-js](https://github.com/bpmn-io/bpmn-js).
Design BPMN 2.0 modeler in a Vue.js application based on bpmn-js.
bash
yarn add vue-bpmn-modeler
`
js
main.js
import VueBpmnModeler from "vue-bpmn-modeler";
import "vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
Vue.use(VueBpmnModeler);
`
!viewer组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。
html
`
#### 当流程启动时，流程会默认走到第一个节点 提交申请，此时的待办任务会显示橙色。
#### When the process starts, the process will complete first task by default, and the TODO tasks will be orange.
!viewer
#### 当流程完成 提交申请 且满足 条件1 时，流程会走到 成本中心 节点，此时已经完成的待办任务会显示绿色。
#### when the first task completed and met condition 1, the process coming to 'costcenter' task, Completed tasks displayed in green.
!viewer参数介绍：
xmlData: 表示流程图的xml数据
taskList: 表示流程的历史记录 可以通过服务的接口 historyService 获得
html
`
#### 动态添加/替换任务节点
#### dynamically add/replace task
!viewer
javascript
addTask () {
let addOrReplace = {
// task || sequenceFlow || gateway
replaceActivity: 'UserTask_0hkfnx2',
taskList: [
{
label: 'test task'
}
]
}
this.$refs.modeler.replace(addOrReplace).then((taskList) => {
// new task list, incluce taskId
console.log(taskList);
});
}
`Examples
bash
clone the project
git clone https://github.com/evanyangg/vue-bpmn-modeler.gitenter the project directory
cd vue-bpmn-modelerinstall dependencies
yarnserve with hot reload at localhost:8080
yarn serve
``MIT