文章目录
springboot 集成 activiti7 可以参考springboot + activiti7简单使用
一、bpmn-js
本文主要介绍bpmn-js实现activiti的流程设计器，主要参考全网最详bpmn.js教材目录
二、基本使用
1.准备vue项目
使用vue-cli初始化了一个简单的项目
2.安装依赖
主要用到三个依赖
bpmn-js 是主要核心 npm install -- save bpmn-js
bpmn-js-properties-panel 是工具栏面板 bpmn-js-properties-panel
bpmn-js-properties-panel-activiti 是用于 activiti 的面板（bpmn-js官方是适配camunda的） bpmn-js-properties-panel-activiti
需要注意的是 bpmn-js-properties-panel 的版本，从1.0.0版本开始使用方法就不一样了，目前不做研究，本文使用的是0.46.0。
还有个问题是在node版本高于6时安装会报错，大致意思是一些强校验的关系。
使用--legacy-peer-deps命令即可，完整命令npm install --save --legacy-peer-deps bpmn-js-properties-panel@0.46.0
3.编写代码
新建一个文件 BpmnjsDemo.vue，在App.vue中引入
<template>
<div id="app">
<BpmnjsDemo />
</div>
</template>
<script>
import BpmnjsDemo from "./components/BpmnjsDemo.vue";
export default {
name: "App",
components: {
BpmnjsDemo,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.1 基本使用
创建一个div当作容器
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
</div>
</template>
script 中需要引入建模器，Modeler 是可编辑的建模器，还有只读的 Viewer。
import BpmnModeler from "bpmn-js/lib/Modeler";
data 中定义变量方便后续操作。initialDiagram 是流程图对应的 xml 格式。
data() {
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null,
initialDiagram: `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="5.1.2">
<process id="Process_1" isExecutable="false">
<startEvent id="StartEvent_1y45yut" name="开始">
<outgoing>SequenceFlow_0h21x7r</outgoing>
</startEvent>
<task id="Task_1hcentk">
<incoming>SequenceFlow_0h21x7r</incoming>
</task>
<sequenceFlow id="SequenceFlow_0h21x7r" sourceRef="StartEvent_1y45yut" targetRef="Task_1hcentk" />
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
<bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
<omgdc:Bounds x="152" y="102" width="36" height="36" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="160" y="145" width="22" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_1hcentk_di" bpmnElement="Task_1hcentk">
<omgdc:Bounds x="240" y="80" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_0h21x7r_di" bpmnElement="SequenceFlow_0h21x7r">
<omgdi:waypoint x="188" y="120" />
<omgdi:waypoint x="240" y="120" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>`,
};
},
初始化操作
mounted() {
this.init();
},
methods: {
init() {
// 获取到属性ref为"content"的dom节点
this.container = this.$refs.content;
// 获取到属性ref为"canvas"的dom节点
const canvas = this.$refs.canvas;
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 使用快捷键
keyboard: {
bindTo: window,
},
});
this.createNewDiagram();
},
// 使用导入 xml 的方式创建流程图
createNewDiagram() {
this.bpmnModeler
.importXML(this.initialDiagram)
.then(() => {
console.log("success");
})
.catch((error) => {
console.log(error);
});
},
},
样式
<style scoped>
.containers {
/* 使用网格作为背景 */
background: white;
overflow: auto;
background-image: linear-gradient(
90deg,
rgba(220, 220, 220, 0.5) 6%,
transparent 0
),
linear-gradient(rgba(192, 192, 192, 0.5) 6%, transparent 0);
background-size: 12px 12px;
width: 100%;
height: calc(100vh - 125px);
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.canvas {
width: 100%;
height: 95%;
}
</style>
运行后效果
三、使用工具栏
1.左侧工具栏
左侧工具栏只需引入样式
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
2.右侧工具栏
2.1 导入模块
定义一个容器
<div ref="panel" id="js-properties-panel" class="panel"></div>
导入模块和样式
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel-activiti/lib/provider/activiti";
// 样式
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
还需导入
import activitiModdleDescriptor from "./activiti";
因为我们需要适配 activiti，所以要用 activiti 的格式，activiti 是一个 json 文件。大致长这样
{
"name": "Activiti",
"uri": "http://activiti.org/bpmn",
"prefix": "activiti",
"xml": {
"tagAlias": "lowerCase"
},
"associations": [],
"types": [
{
"name": "InOutBinding",
"superClass": [
"Element"
],
"isAbstract": true,
"properties": [
{
"name": "source",
"isAttr": true,
"type": "String"
},
{
"name": "sourceExpression",
"isAttr": true,
"type": "String"
},
{
"name": "target",
"isAttr": true,
"type": "String"
},
{
"name": "businessKey",
"isAttr": true,
"type": "String"
},
{
"name": "local",
"isAttr": true,
"type": "Boolean",
"default": false
},
{
"name": "variables",
"isAttr": true,
"type": "String"
}
]
}
],
"emumerations": []
}
详细说明可以看自定义元模型示例
2.2 使用模块
在构建的时候
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 使用快捷键
keyboard: {
bindTo: window,
},
// 添加控制板
propertiesPanel: {
parent: "#js-properties-panel",
},
additionalModules: [propertiesPanelModule, propertiesProviderModule],
moddleExtensions: {
activiti: activitiModdleDescriptor,
},
});
样式也调整一下
.panel {
position: absolute;
right: 0;
margin-top: -687px;
width: 320px;
height: 720px;
overflow: auto;
}
四、汉化
1.准备
新建 customTranslate.js
import translations from './translations';
export default function customTranslate(template, replacements) {
replacements = replacements || {};
// Translate
template = translations[template] || template;
// Replace
return template.replace(/{([^}]+)}/g, function (_, key) {
return replacements[key] || '{' + key + '}';
});
}
创建 translations.js，如有漏的地方还可以自己加
export default {
"Activate the create/remove space tool": "启动创建/删除空间工具",
"Activate the global connect tool": "启动全局连接工具",
"Activate the hand tool": "启动手动工具",
"Activate the lasso tool": "启动 Lasso 工具",
"Ad-hoc": "Ad-hoc子流程",
"Add Lane above": "添加到通道之上",
"Add Lane below": "添加到通道之下",
"Append compensation activity": "追加补偿活动",
"Append {type}": "追加 {type}",
"Append Task": "追加任务",
"Append Gateway": "追加网关",
"Append EndEvent": "追加结束事件",
"Business Rule Task": "规则任务",
'Append Intermediate/Boundary Event': '追加 中间/边界 事件',
"Call Activity": "引用流程",
"Cancel Boundary Event": "取消边界事件",
"Cancel End Event": "结束取消事件",
"Change type": "更改类型",
"Collapsed Pool": "折叠池",
"Compensation Boundary Event": "补偿边界事件",
"Compensation End Event": "结束补偿事件",
"Compensation Intermediate Throw Event": "中间补偿抛出事件",
"Compensation Start Event": "补偿启动事件",
"Complex Gateway": "复杂网关",
"Conditional Boundary Event (non-interrupting)": "条件边界事件 (非中断)",
"Conditional Boundary Event": "条件边界事件",
"Conditional Intermediate Catch Event": "中间条件捕获事件",
"Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
"Conditional Start Event": "条件启动事件",
"Connect using Association": "文本关联",
"Connect using DataInputAssociation": "数据关联",
"Connect using Sequence/MessageFlow or Association": "消息关联",
"Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出/边界事件",
"Create Intermediate/Boundary Event": "创建中间/边界事件",
"Create Pool/Participant": "创建池/参与者",
"Create expanded SubProcess": "创建可折叠子流程",
"Create {type}": "创建 {type}",
"Create StartEvent": "创建开始事件",
"Create EndEvent": "创建结束事件",
'Create Task': '创建任务',
"Divide into three Lanes": "分成三条通道",
"Divide into two Lanes": "分成两条通道",
"End Event": "结束事件",
'Create Group': '创建组',
'Create Gateway': '创建网关',
"Error Boundary Event": "错误边界事件",
'Create DataObjectReference': '创建数据对象引用',
'Create DataStoreReference': '创建数据存储引用',
"Error End Event": "结束错误事件",
"Error Start Event": "错误启动事件",
"Escalation Boundary Event (non-interrupting)": "升级边界事件 (非中断)",
"Escalation Boundary Event": "升级边界事件",
"Escalation End Event": "结束升级事件",
"Escalation Intermediate Throw Event": "中间升级抛出事件",
"Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)",
"Escalation Start Event": "升级启动事件",
"Event Sub Process": "事件子流程",
"Event based Gateway": "事件网关",
"Exclusive Gateway": "独占网关",
"Expanded Pool": "展开池",
"Inclusive Gateway": "包容网关",
"Intermediate Throw Event": "中间抛出事件",
"Link Intermediate Catch Event": "中间链接捕获事件",
"Link Intermediate Throw Event": "中间链接抛出事件",
"Loop": "循环",
"Manual Task": "手动任务",
"Message Boundary Event (non-interrupting)": "消息边界事件 (非中断)",
"Message Boundary Event": "消息边界事件",
"Message End Event": "结束消息事件",
"Message Intermediate Catch Event": "中间消息捕获事件",
"Message Intermediate Throw Event": "中间消息抛出事件",
"Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
"Message Start Event": "消息启动事件",
"Parallel Gateway": "并行网关",
"Parallel Multi Instance": "并行多实例",
"Receive Task": "接受任务",
"Remove": "移除",
"Script Task": "脚本任务",
"Send Task": "发送任务",
"Sequential Multi Instance": "串行多实例",
"Service Task": "服务任务",
"Signal Boundary Event (non-interrupting)": "信号边界事件 (非中断)",
"Signal Boundary Event": "信号边界事件",
"Signal End Event": "结束信号事件",
"Signal Intermediate Catch Event": "中间信号捕获事件",
"Signal Intermediate Throw Event": "中间信号抛出事件",
"Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
"Signal Start Event": "信号启动事件",
"Start Event": "开始事件",
"Sub Process (collapsed)": "可折叠子流程",
"Sub Process (expanded)": "可展开子流程",
"Sub Process": "子流程",
"Task": "任务",
"Terminate End Event": "终止边界事件",
"Timer Boundary Event (non-interrupting)": "定时边界事件 (非中断)",
"Timer Boundary Event": "定时边界事件",
"Timer Intermediate Catch Event": "中间定时捕获事件",
"Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
"Timer Start Event": "定时启动事件",
"Transaction": "事务",
"User Task": "用户任务",
"already rendered {element}": "{element} 已呈现",
"diagram not part of bpmn:Definitions": "图表不是 bpmn:Definitions 的一部分",
"element required": "需要元素",
"element {element} referenced by {referenced}#{property} not yet drawn": "元素 {element} 的引用 {referenced}#{property} 尚未绘制",
"failed to import {element}": "{element} 导入失败",
"flow elements must be children of pools/participants": "元素必须是池/参与者的子级",
"more than {count} child lanes": "超过 {count} 条通道",
"no diagram to display": "没有要显示的图表",
"no parent for {element} in {parent}": "在 {element} 中没有父元素 {parent}",
"no process or collaboration to display": "没有可显示的流程或协作",
"no shape type specified": "未指定形状类型",
"out of bounds release": "越界释放",
//---------属性面板--------
'General': '通用',
'Details': '详情',
'Documentation': '文档',
'Version Tag': '版本标签',
'Category Value': '类别值',
'Process Id': '进程 Id',
'Process Name': '进程名称',
'Link Name': '链接名称',
'Element Documentation': '元素文档',
'Process Documentation': '进程文档',
'Task Priority': '任务优先级',
'Variables': "变量",
'Listeners': '监听器',
'Extensions': '扩展',
'Forms': '表单',
'Id': '标识',
'Name': '名称',
'Message Name': '消息名称',
'Message': '消息',
'Initiator': '创建者',
'Asynchronous Continuations': '持续异步',
'Asynchronous Before': '异步前',
'Asynchronous After': '异步后',
'Job Configuration': '工作配置',
'Exclusive': '排除',
'Job Priority': '工作优先级',
'Retry Time Cycle': '重试时间周期',
'History Configuration': '历史配置',
'History Time To Live': '历史的生存时间',
'Form Key': '表单key',
'Form Fields': '表单字段',
'Business Key': '业务key',
'Form Field': '表单字段',
'ID': '编号',
'Type': '类型',
'Label': '名称',
'Default Value': '默认值',
'Validation': '校验',
'Add Constraint': '添加约束',
'Config': '配置',
'Properties': '属性',
'Add Property': '添加属性',
'Value': '值',
'Execution Listener': '执行监听',
'Task Listener': '任务监听器',
'Event Type': '事件类型',
'Listener Type': '监听器类型',
'Java Class': 'Java类',
'Expression': '表达式',
'Must provide a value': '必须提供一个值',
'Delegate Expression': '代理表达式',
'Script': '脚本',
'Script Format': '脚本格式',
'Script Type': '脚本类型',
'Inline Script': '内联脚本',
'External Script': '外部脚本',
'Resource': '资源',
'Field Injection': '字段注入',
'Input/Output': '输入/输出',
'Input Parameters': '输入参数',
'Output Parameters': '输出参数',
'Parameters': '参数',
'Output Parameter': '输出参数',
'Timer Definition Type': '定时器定义类型',
'Timer Definition': '定时器定义',
'Date': '日期',
'Duration': '持续',
'Cycle': '循环',
'Signal': '信号',
'Signal Name': '信号名称',
'Escalation': '升级',
'Error': '错误',
'Condition': '条件名称',
'Variable Name': '变量名称',
'Variable Event': '变量事件',
'Specify more than one variable change event as a comma separated list.': '多个变量事件以逗号隔开',
'Wait for Completion': '等待完成',
'Activity Ref': '活动参考',
'Executable': '可执行文件',
'External Task Configuration': '扩展任务配置',
'External': '外部',
'Connector': '连接器',
'Must configure Connector': '必须配置连接器',
'Connector Id': '连接器编号',
'Implementation': '实现方式',
'Field Injections': '字段注入',
'Fields': '字段',
'Result Variable': '结果变量',
'Topic': '主题',
'Configure Connector': '配置连接器',
'Input Parameter': '输入参数',
'Assignee': '代理人',
'Candidate Users': '候选用户',
'Candidate Groups': '候选组',
'Due Date': '到期时间',
'Follow Up Date': '跟踪日期',
'Priority': '优先级',
'This maps to the process definition key.': '映射到流程定义键',
"This maps to the task definition key.": "映射到任务定义键",
'Candidate Starter Configuration': '候选启动器配置',
'Candidate Starter Groups': '候选启动器组',
'Specify more than one group as a comma separated list.': '指定多个组用逗号分隔',
'Candidate Starter Users': '候选开始用户',
'Specify more than one user as a comma separated list.': '指定多个用户用逗号分隔',
'Tasklist Configuration': '任务列表配置',
'Startable': '启动',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)': '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
// Errors
"No variables defined.": "没有定义变量"
};
2.使用
导入汉化组件，在初始化的时候添加进去
import customTranslate from "./customTranslate";
init() {
// 获取到属性ref为"content"的dom节点
this.container = this.$refs.content;
// 获取到属性ref为"canvas"的dom节点
const canvas = this.$refs.canvas;
var customTranslateModule = {
translate: ["value", customTranslate],
};
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 使用快捷键
keyboard: {
bindTo: window,
},
//添加控制板
propertiesPanel: {
parent: "#js-properties-panel",
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
customTranslateModule,
],
moddleExtensions: {
activiti: activitiModdleDescriptor,
},
});
this.createNewDiagram();
},
至此，基本的使用方式已结束。
6525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
