Camunda工作流引擎之bpmn设计器定制

在 Vue.js应用中，基于 bpmn-js. 定制 vue-bpmn-modeler

前段时间，由于公司业务需要工作流引擎，但是由于之前的工作流引擎是第三方付费的，又遇到客户需要本地地方部署，所以需要再次购买，加上原来的工作流引擎并不是很好用（CS架构设计器，跟业务系统不能很好的集成），所以决定重新定制开发，在activity、flowable、camunda的纠结选择中还是选择了camunda。

为什么？

我挠了挠脑袋，头发越来越少了，已经有点想不起来了。 可能是因为刚开始接触的时候没看懂activity的源码，也可能没看懂flowable的源码，但是flowable好像是中文文档支持最好的，最后发现activity、flowable、camunda的业务实现代码很类似，camunda渐渐看懂了。所以就入了camunda的坑。

怎么做？

加了几个关于camunda的群，观看相关camunda的视频，硬啃官方英文文档，蹩脚的英文在官网论坛留言。终于完成了符合当前业务的工作流引擎（当前只做了UserTask）。官方文档应该有你想要的内容

关于：VUE-BPMN-MODELER

今天就来介绍一下vue-bpmn-modeler，这个定制的设计器。
我个人觉得，设计器只用完成画图的任务就ok了，至于图中各个节点及条件的参数应该是业务系统里面需要做的事情。这样画图就和参数设置的耦合性就不是很强了。

如果您也使用Vue 那么接下来的代码，您可以试一试。

# 在vue项目中安装最新版本 npm/yarn 随意。
yarn add vue-bpmn-modeler

# 在 main.js 引入插件
import VueBpmnModeler from "vue-bpmn-modeler";
import "vue-bpmn-modeler/lib/vue-bpmn-modeler.css";
Vue.use(VueBpmnModeler);

下面是定制后的模型面板，所有的元素就进行了汉化，没有多余的元素渲染。（来规避测试和业务人员的高(wu)端(nao)的操作）
主要元素有：开始节点、结束节点、网关、用户任务。

模型设计组件：
组件会显示设计器，参数 v-model="modeler"，会通过画图操作实时返回对应的xml数据和svg数据，用于保存初始化的模板。

<template>
  <BpmnModeler v-model="modeler">BpmnModeler>
template>

<script>
  export default {
    data() {
      modeler: {
        // 模型xml数据
        xmlData: "",
        // svg图片数据
        svgImage: ""
      }
    }
  };
script>

模型预览组件：
当流程启动时，流程会默认走到第一个节点 提交申请，此时的待办任务会显示橙色。

当流程完成 提交申请 且满足 条件1 时，流程会走到 成本中心 节点，此时已经完成的待办任务会显示绿色。

参数介绍：
xmlData: 表示流程图的xml数据
taskList: 表示流程的历史记录 可以通过服务的接口 historyService 获得

<template>
  <BpmnViewer :xmlData="xmlData" :taskData="taskList">BpmnViewer>
template>

<script>
  export default {
    data() {
      modeler: {
        // 模型xml数据
        xmlData: "",
        // 任务列表
        taskList: [
	        {
	          // 任务定义的key
	          key: "UserTask_06zjapk",
	          // 任务是否完成
	          completed: true
	        }，
	        {
	          key: 'UserTask_07cj5cp',
	          completed: false
	        }
        ]
      }
    }
  };
script>

本次内容到此结束，欢迎大家star 和 反馈。
vue-bpmn-modeler 项目地址献出。
下次给大家介绍 springboot + camunda 服务器端实现。