vue+bpmnjs流程图的使用-安装

vue+bpmnjs流程图-安装

本文采用vue-cli5创建vue2的项目进行集成，开始前先创建好vue项目，并安装了sass

安装依赖

本文采用的是bpmn-js11.4.1的版本

pnpm i bpmn-js@11.4.1

修改vue.config.js

增加资源加载的配置,用于加载bpmn文件

configureWebpack: {
		module: {
			rules: [{
				test: /\.bpmn/,
				type: 'asset/source'
			}]
		}
	}

完整配置

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	configureWebpack: {
		module: {
			rules: [{
				test: /\.bpmn/,
				type: 'asset/source'
			}]
		}
	}
})

使用

引入样式文件

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'

在vue文件中引入使用

//引入
import BpmnModeler from 'bpmn-js/lib/Modeler'

//创建 #bpmn-container为容器id
this.bpmnModeler = new BpmnModeler({
					container: '#bpmn-container'
				});

加载xml流程图

导入流程图文件

import testXML from './test.bpmn';

文件内容如下：

<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn2:process id="Process_1" isExecutable="false">
    <bpmn2:startEvent id="StartEvent_1"/>
  bpmn2:process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
      bpmndi:BPMNShape>
    bpmndi:BPMNPlane>
  bpmndi:BPMNDiagram>
bpmn2:definitions>

导入展示

this.bpmnModeler.importXML(testXML).then(()=>{
					console.log("加载成功")
				}).catch(err=>{
					console.log("加载失败",err)
				});

汉化

• 此处使用的是官方例子中的代码，复制此链接中customTranslate的文件夹，包含customTranslate.js和translations.js两个文件
• 找到官方提供的汉化文件,将其中内容复制到translations.js文件

代码中引入文件

import customTranslate from './customTranslate/customTranslate';
let customTranslateModule = {
		translate: ['value', customTranslate]
	};

修改构建时的代码如下

this.bpmnModeler = new BpmnModeler({
					keyboard: {
						bindTo: window
					},
					container: '#bpmn-container',
					additionalModules: [
						customTranslateModule
					]
				});

以下代码可以在流程图上使用键盘操作

keyboard: {
			bindTo: window
	},

属性面板

安装

pnpm install --save bpmn-js-properties-panel @bpmn-io/properties-panel

引入样式

//右侧面板样式
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'

页面中引入组件

import {
		BpmnPropertiesPanelModule,
		BpmnPropertiesProviderModule
	} from 'bpmn-js-properties-panel';

修改创建代码

this.bpmnModeler = new BpmnModeler({
					keyboard: {
						bindTo: window
					},
					propertiesPanel: {//指定面板容器
						parent: '#js-properties-panel'
					},
					container: '#bpmn-container',
					additionalModules: [//加入模块
						customTranslateModule,
						BpmnPropertiesPanelModule,
						BpmnPropertiesProviderModule
					]
				});

最终项目效果

完整代码

<template>
	<div class="container">
		<div class="bpmn" id="bpmn-container"></div>
		<div class="properties-panel-parent" id="js-properties-panel"></div>
	</div>
</template>

<script>
	import BpmnModeler from 'bpmn-js/lib/Modeler'
	import testXML from './test.bpmn';
	import customTranslate from './customTranslate/customTranslate';
	let customTranslateModule = {
		translate: ['value', customTranslate]
	};
	import {
		BpmnPropertiesPanelModule,
		BpmnPropertiesProviderModule
	} from 'bpmn-js-properties-panel';
	export default {
		mounted() {
			this.init()
		},
		data() {
			return {
				// bpmn建模器
				bpmnModeler: null
			}
		},
		methods: {
			init() {
				// 建模
				this.bpmnModeler = new BpmnModeler({
					keyboard: {
						bindTo: window
					},
					propertiesPanel: { //指定面板容器
						parent: '#js-properties-panel'
					},
					container: '#bpmn-container',
					additionalModules: [ //加载模块
						customTranslateModule,
						BpmnPropertiesPanelModule,
						BpmnPropertiesProviderModule
					]
				});
				this.createNewDiagram()
			},
			createNewDiagram() {
				// 将字符串转换成图显示出来
				this.bpmnModeler.importXML(testXML).then(() => {
					console.log("加载成功")
				}).catch(err => {
					console.log("加载失败", err)
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		position: relative;

		.bpmn {
			width: 100%;
			height: 100%;
		}

		.properties-panel-parent {
			width: 400px;
			border-left: 1px solid #ccc;
			border-top: 1px solid #ccc;
			overflow: auto;
			position: absolute;
			right:0px;
			top:0px;
		}
	}
</style>