bpmn-js在vue中的基本使用及操作功能
更新時(shí)間：2024年02月05日 11:10:56 作者：菲吻于雪
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧
bpmn-js在vue中的基本使用
gitee: https://gitee.com/philippines-kisses-snow/bpmn-demo
效果：
下載依賴(lài)包
npm i bpmn-js bpmn-js-properties-panel camunda-bpmn-moddle
"bpmn-js": "^10.3.0", "bpmn-js-properties-panel": "^1.11.2", "camunda-bpmn-moddle": "^7.0.1",
構(gòu)建bpmn界面
// 樣式
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js-properties-panel/dist/assets/element-templates.css';
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css';
// bpmn構(gòu)建器
import BpmnModeler from 'bpmn-js/lib/Modeler.js' // 引入 bpmn-js
// 初始化xml
import diagramXML from './bpmnXML'
// 漢化
import zh from './zh'
// 構(gòu)建模塊
import {
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
CamundaPlatformPropertiesProviderModule,
CloudElementTemplatesPropertiesProviderModule
} from 'bpmn-js-properties-panel'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'// html
<template>
<div class="app-container">
<div class="bpmn-main-box">
<!-- 內(nèi)容區(qū) -->
<div ref="bpmn" id="bpmn-container" class="bpmn-container"></div>
<!-- 右側(cè)控制區(qū) -->
<div ref="bpmnPanel" id="js-properties-panel"></div>
</div>
</div>
</template>
// js
mounted() {
this.bpmnModeler = new BpmnModeler({
container: this.$refs.bpmn,
propertiesPanel: {
parent: this.$refs.bpmnPanel
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
CamundaPlatformPropertiesProviderModule,
CloudElementTemplatesPropertiesProviderModule,
{ translate: [ 'value', this.customTranslate ] } // 漢化
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
})
this.createNewDiagram()
}
// 方法
customTranslate(template: any, replacements: any) {
replacements = replacements || {};
template = (zh as Record<string, string>)[template] || template;
return template.replace(/{([^}]+)}/g, function(_: any, key: any) {
return replacements[key] || '{' + key + '}';
});
}
createNewDiagram() {
this.openDiagram(diagramXML);
}
async openDiagram(xml: string) {
this.bpmnModeler.importXML(xml);
}css
// css
.app-container {
background-color: white;
position: relative;
height: 100vh;
}
.buttons{
position: absolute;
bottom: 30px;
display: flex;
left: 50px;
padding: 0;
margin: 0;
list-style: none;
.item {
margin-right: 10px;
}
.download button {
padding: 0;
a {
padding: 8px 15px;
}
}
}
.bpmn-main-box {
width:100%;
height:100%;
display: flex;
}
.bpmn-container {
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
repeat !important;
}
#js-properties-panel {
border: 1px solid rgba(0,0,0,0.1);
width: 250px;
}zh.ts（部分代碼）
export default {
'Id': '編號(hào)',
'Name': '名稱(chēng)',
'General': '常規(guī)',
'Details': '詳情',
'Message Name': '消息名稱(chēng)',
'Message': '消息',
'Initiator': '創(chuàng)建者',
'Asynchronous continuations': '持續(xù)異步',
'Asynchronous before': '異步前',
'Asynchronous after': '異步后',
'Job configuration': '工作配置',
'Exclusive': '排除',
'Job Priority': '工作優(yōu)先級(jí)',
'Retry Time Cycle': '重試時(shí)間周期',
'Documentation': '文檔',
'Element Documentation': '元素文檔',
'History Configuration': '歷史配置',
'History Time To Live': '歷史的生存時(shí)間',
'Forms': '表單',
}bpmnXML.ts
export default `<?xml version="1.0" encoding="UTF-8"?>
<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: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>`至此頁(yè)面搭建已經(jīng)完成，接下來(lái)實(shí)現(xiàn)操作功能
添加操作按鈕
<template>
<div class="app-container">
<div class="bpmn-main-box">
<div ref="bpmn" id="bpmn-container" class="bpmn-container"></div>
<div ref="bpmnPanel" id="js-properties-panel"></div>
</div>
<!-- 操作按鈕 -->
<ul class="buttons">
<input ref="file" type="file" style="display: none" @change="fileChange"/>
<el-button-group class="item download">
<el-button type="primary" @click="upload()">
<a title="上傳文件"><el-icon><FolderAdd /></el-icon></a>
</el-button>
<el-button type="primary" @click="newCreateDoc()">
<a title="新建"><el-icon><DocumentAdd /></el-icon></a>
</el-button>
</el-button-group>
<el-button-group class="item download">
<el-button @click="downloadLinkClick()" type="primary" >
<a ref="downloadLink" id="js-download-diagram" title="xml下載"><el-icon><Download /></el-icon></a>
</el-button>
<el-button @click="downloadSvg" type="primary" >
<a ref="downloadSvg" id="js-download-svg" title="svg下載"><el-icon><PictureFilled /></el-icon></a>
</el-button>
</el-button-group>
<el-button-group class="item download">
<el-button type="primary" @click="perviewXML">
<a title="xml預(yù)覽"><el-icon><Document /></el-icon></a>
</el-button>
<el-button type="primary" @click="perviewSVG">
<a title="svg預(yù)覽"><el-icon><View /></el-icon></a>
</el-button>
</el-button-group>
</ul>
<!-- 預(yù)覽彈出 -->
<el-dialog title="XML預(yù)覽" width="80%" v-model="perviewXMLShow">
<div style="max-height: 65vh;overflow: auto;">
<highlightjs language='html' :code="perviewXMLStr" />
</div>
</el-dialog>
<el-dialog title="SVG預(yù)覽" width="80%" v-model="perviewSVGShow">
<div style="text-align: center;" v-html="perviewSVGData" />
</el-dialog>
</div>
</template>事件方法
let bpmnModeler: any = null
let perviewXMLShow = false
let perviewSVGShow = false
let perviewXMLStr = ''
let perviewSVGData = ''
// 文件上傳
fileChange() {
const fileElement = this.$refs.file as HTMLInputElement
if (fileElement && fileElement.files) {
const file = fileElement.files[0]
const fileReader = new FileReader();
(this.$refs.file as HTMLInputElement).value = ''
fileReader.onload = (e: any) => {
this.bpmnModeler.importXML(e.target.result)
}
fileReader.readAsText(file);
}
}
// 點(diǎn)擊文件上傳
upload() {
this.getHTMLElementByRef('file').click()
}
// 新建
newCreateDoc() {
this.bpmnModeler.importXML(diagramXML)
}
// 下載XML
async downloadLinkClick() {
const downloadLink = this.$refs.downloadLink as HTMLElement
try {
const { xml } = await this.bpmnModeler.saveXML({ format: true });
this.setEncoded(downloadLink, 'diagram.bpmn', xml);
} catch (error) {
this.toast.error('下載失敗，請(qǐng)重試')
}
}
// 下載SVG
async downloadSvg() {
const downloadSvgLink = this.$refs.downloadSvg as HTMLElement
try {
const { svg } = await this.bpmnModeler.saveSVG();
this.setEncoded(downloadSvgLink, 'diagram.svg', svg);
} catch (error) {
this.toast.error('下載失敗，請(qǐng)重試')
}
}
// XML預(yù)覽
async perviewXML() {
try {
const { xml } = await this.bpmnModeler.saveXML({ format: true });
this.perviewXMLStr = xml
this.perviewXMLShow = true
} catch (error) {
this.toast.error('預(yù)覽失敗，請(qǐng)重試')
}
}
// SVG預(yù)覽
async perviewSVG() {
try {
const { svg } = await this.bpmnModeler.saveSVG();
this.perviewSVGData = svg
this.perviewSVGShow = true
} catch (error) {
this.toast.error('預(yù)覽失敗，請(qǐng)重試')
}
}
// 設(shè)置數(shù)據(jù)
setEncoded(link: HTMLElement, name: string, data: any) {
const encodedData = encodeURIComponent(data);
if (data) {
link.className += ('active')
link.setAttribute('href', 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData)
link.setAttribute('download', name)
} else {
link.className.replace('active', '')
}
}到此這篇關(guān)于bpmn-js在vue中的基本使用的文章就介紹到這了,更多相關(guān)bpmn-js vue使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3的Composition API是一個(gè)全新的API，它允許開(kāi)發(fā)人員將Vue組件中的邏輯封裝在單獨(dú)的功能性組合中，而不是依賴(lài)于Vue選項(xiàng)對(duì)象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
聊天工具的項(xiàng)目開(kāi)發(fā)到了表情功能,由于目前會(huì)話的輸入?yún)^(qū)域使用的是 textarea 而非富文本編輯器,所以表情功能也需要兼顧 textarea 進(jìn)行開(kāi)發(fā),本文給大家簡(jiǎn)單聊聊幾種表情的實(shí)現(xiàn)方,感興趣的小伙伴一起來(lái)看看吧2025-01-01
vue實(shí)現(xiàn)購(gòu)物車(chē)拋物線小球動(dòng)畫(huà)效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)拋物線小球動(dòng)畫(huà)效果的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js實(shí)現(xiàn)拋物線動(dòng)畫(huà)效果購(gòu)物車(chē)功能相關(guān)原理與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue3和vue2中mixins的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部?jī)?nèi)容，需要的朋友可以參考下2022-12-12
如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)及右鍵菜單
標(biāo)簽頁(yè)一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級(jí)菜單或者二級(jí)菜單時(shí),可以增加對(duì)應(yīng)的標(biāo)簽頁(yè),當(dāng)你點(diǎn)擊對(duì)應(yīng)的標(biāo)簽頁(yè),可以觸發(fā)對(duì)應(yīng)的一級(jí)菜單或者二級(jí)菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11
解決vue scoped scss 無(wú)效的問(wèn)題
這篇文章主要介紹了解決vue scoped scss 無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue手寫(xiě)防抖和節(jié)流函數(shù)代碼詳解
在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中防抖/節(jié)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章教大家如何分分鐘玩轉(zhuǎn)Vue.js組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10