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