vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼
更新時間：2024年03月19日 10:59:51 作者：小破孩呦
這篇文章主要介紹了vue+bpmn.js實現(xiàn)自定義流程圖的完整代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借價值,需要的朋友參考下吧
效果圖：
使用插件版本：
| 插件名稱 | 版本 | 安裝命令 |
bpmn-js | 7.3.1 | npm install bpmn-js@^7.3.1 --save-D |
bpmn-js-properties-panel | 0.37.2 | npm install bpmn-js-properties-panel@^0.37.2 --save-D |
| camunda-bpmn-moddle | 4.5.0 | npm install camunda-bpmn-moddle@^4.5.0 --save-D |
didi | 5.0.0 | npm install didi@^5.0.0 |
組件封裝完整代碼：
<template>
<div>
<!-- 流程圖容器 -->
<div class="container">
<!-- 創(chuàng)建一個canvas畫布 npmn-js是通過canvas實現(xiàn)繪圖的，并設(shè)置ref讓vue獲取到element -->
<div class="bpmn-canvas" ref="canvas"></div>
<!-- 工具欄顯示的地方 -->
<div class="bpmn-js-properties-panel" id="js-properties-panel"></div>
<panel v-if="bpmnModeler" :modeler="bpmnModeler" />
<!-- 把操作按鈕寫在這里面 -->
<div class="toolbar">
<el-button type="primary" size="mini" @click="handleSave()">保存</el-button>
</div>
</div>
</div>
</template>
<script>
// bpmn 相關(guān)依賴
import BpmnModeler from "bpmn-js/lib/Modeler";
// 左側(cè)自定義工具欄
import BpmData from "./BpmData";
// 右側(cè)自定義屬性面板
import panel from "./PropertyPanel-right.vue";
// BPMN國際化
import customTranslate from '@/util/bpmn/customTranslate';
// 自定義漢化模塊
var customTranslateModule = {
translate: ['value', customTranslate]
}
import CustomPaletteProvider from './bpmn2'
export default {
name: "basic",
components: {
panel
},
data(){
return{
bpmnModeler: null,
element: null,
bpmData: new BpmData(),
}
},
created(){
},
mounted() {
const canvas = this.$refs.canvas;
// 生成實例
this.bpmnModeler = new BpmnModeler({
container: canvas,
// 加入工具欄支持
propertiesPanel: {
parent: "#js-properties-panel"
},
additionalModules: [
customTranslateModule,
{
// labelEditingProvider: ["value", ''], //禁用節(jié)點編輯
// contextPadProvider: ["value", ''], //禁用圖形菜單
// bendpoints: ["value", {}], //禁用連線拖動
zoomScroll: ["value", ''], //禁用滾動
// moveCanvas: ['value', ''], //禁用拖動整個流程圖
// move: ['value', ''], //禁用單個圖形拖動
paletteProvider: ['type', CustomPaletteProvider], // 左側(cè)工具欄
}
],
// moddleExtensions: {
// camunda: camundaModdleDescriptor
// }
});
// 新增流程定義
this.createNewDiagram();
},
methods:{
createNewDiagram() {
const bpmnXmlStr = `
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="process1567044459787" name="流程1567044459787">
<bpmn2:documentation>描述</bpmn2:documentation>
<bpmn2:startEvent id="StartEvent_01ydzqe" name="開始">
<bpmn2:outgoing>SequenceFlow_1qw929z</bpmn2:outgoing>
</bpmn2:startEvent>
<bpmn2:sequenceFlow id="SequenceFlow_1qw929z" sourceRef="StartEvent_01ydzqe" targetRef="Task_1piqdk6" />
<bpmn2:userTask id="Task_1piqdk6" name="請假申請">
<bpmn2:incoming>SequenceFlow_1qw929z</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_11h4o22</bpmn2:outgoing>
</bpmn2:userTask>
<bpmn2:exclusiveGateway id="ExclusiveGateway_0k39v3u">
<bpmn2:incoming>SequenceFlow_11h4o22</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_1iu7pfe</bpmn2:outgoing>
<bpmn2:outgoing>SequenceFlow_04uqww2</bpmn2:outgoing>
</bpmn2:exclusiveGateway>
<bpmn2:sequenceFlow id="SequenceFlow_11h4o22" sourceRef="Task_1piqdk6" targetRef="ExclusiveGateway_0k39v3u" />
<bpmn2:sequenceFlow id="SequenceFlow_1iu7pfe" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_10fqcwp" />
<bpmn2:userTask id="Task_10fqcwp" name="經(jīng)理審批">
<bpmn2:incoming>SequenceFlow_1iu7pfe</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_1xod8nh</bpmn2:outgoing>
</bpmn2:userTask>
<bpmn2:sequenceFlow id="SequenceFlow_04uqww2" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_15n23yh" />
<bpmn2:userTask id="Task_15n23yh" name="總部審批">
<bpmn2:incoming>SequenceFlow_04uqww2</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_0c8wrs4</bpmn2:outgoing>
</bpmn2:userTask>
<bpmn2:exclusiveGateway id="ExclusiveGateway_1sq33g6">
<bpmn2:incoming>SequenceFlow_0c8wrs4</bpmn2:incoming>
<bpmn2:incoming>SequenceFlow_1xod8nh</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_0h8za82</bpmn2:outgoing>
</bpmn2:exclusiveGateway>
<bpmn2:sequenceFlow id="SequenceFlow_0c8wrs4" sourceRef="Task_15n23yh" targetRef="ExclusiveGateway_1sq33g6" />
<bpmn2:sequenceFlow id="SequenceFlow_1xod8nh" sourceRef="Task_10fqcwp" targetRef="ExclusiveGateway_1sq33g6" />
<bpmn2:endEvent id="EndEvent_0pnmjd3">
<bpmn2:incoming>SequenceFlow_0h8za82</bpmn2:incoming>
</bpmn2:endEvent>
<bpmn2:sequenceFlow id="SequenceFlow_0h8za82" sourceRef="ExclusiveGateway_1sq33g6" targetRef="EndEvent_0pnmjd3" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
<bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe">
<dc:Bounds x="532" y="72" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="539" y="53" width="22" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1qw929z_di" bpmnElement="SequenceFlow_1qw929z">
<di:waypoint x="550" y="108" />
<di:waypoint x="550" y="150" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="UserTask_1qxjy46_di" bpmnElement="Task_1piqdk6">
<dc:Bounds x="500" y="150" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="ExclusiveGateway_0k39v3u_di" bpmnElement="ExclusiveGateway_0k39v3u" isMarkerVisible="true">
<dc:Bounds x="525" y="275" width="50" height="50" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_11h4o22_di" bpmnElement="SequenceFlow_11h4o22">
<di:waypoint x="550" y="230" />
<di:waypoint x="550" y="275" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="SequenceFlow_1iu7pfe_di" bpmnElement="SequenceFlow_1iu7pfe">
<di:waypoint x="575" y="300" />
<di:waypoint x="680" y="300" />
<di:waypoint x="680" y="380" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="UserTask_18pwui1_di" bpmnElement="Task_10fqcwp">
<dc:Bounds x="630" y="380" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_04uqww2_di" bpmnElement="SequenceFlow_04uqww2">
<di:waypoint x="525" y="300" />
<di:waypoint x="430" y="300" />
<di:waypoint x="430" y="380" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="UserTask_1j0us24_di" bpmnElement="Task_15n23yh">
<dc:Bounds x="380" y="380" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="ExclusiveGateway_1sq33g6_di" bpmnElement="ExclusiveGateway_1sq33g6" isMarkerVisible="true">
<dc:Bounds x="525" y="515" width="50" height="50" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_0c8wrs4_di" bpmnElement="SequenceFlow_0c8wrs4">
<di:waypoint x="430" y="460" />
<di:waypoint x="430" y="540" />
<di:waypoint x="525" y="540" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="SequenceFlow_1xod8nh_di" bpmnElement="SequenceFlow_1xod8nh">
<di:waypoint x="680" y="460" />
<di:waypoint x="680" y="540" />
<di:waypoint x="575" y="540" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="EndEvent_0pnmjd3_di" bpmnElement="EndEvent_0pnmjd3">
<dc:Bounds x="532" y="602" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_0h8za82_di" bpmnElement="SequenceFlow_0h8za82">
<di:waypoint x="550" y="565" />
<di:waypoint x="550" y="602" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>
`;
// 將字符串轉(zhuǎn)換成圖顯示出來
this.bpmnModeler.importXML(bpmnXmlStr, err => {
if (err) {
console.error(err);
} else {
this.adjustPalette();
}
});
},
// 調(diào)整左側(cè)工具欄排版
adjustPalette() {
try {
// 獲取 bpmn 設(shè)計器實例
const canvas = this.$refs.canvas;
const djsPalette = canvas.children[0].children[1].children[4];
const djsPalStyle = {
width: "130px",
padding: "5px",
background: "white",
left: "20px",
borderRadius: 0
};
for (var key in djsPalStyle) {
djsPalette.style[key] = djsPalStyle[key];
}
const palette = djsPalette.children[0];
const allGroups = palette.children;
allGroups[0].style["display"] = "none";
// 修改控件樣式
for (var gKey in allGroups) {
const group = allGroups[gKey];
for (var cKey in group.children) {
const control = group.children[cKey];
const controlStyle = {
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
width: "100%",
padding: "5px"
};
if (control.className && control.dataset && control.className.indexOf("entry") !== -1) {
const controlProps = this.bpmData.getControl(control.dataset.action);
control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${
controlProps["title"]
}</div>`;
for (var csKey in controlStyle) {
control.style[csKey] = controlStyle[csKey];
}
}
}
}
} catch (e) {
console.log(e);
}
},
// 保存流程圖
handleSave(){
// console.log(this.bpmnTemplate, "模板");
this.bpmnModeler.saveXML({ format: true }, (err, xml) => {
if (!err) {
console.log(xml);
}
});
},
},
}
</script>
<style lang="scss" scoped>
/*左邊工具欄以及編輯節(jié)點的樣式*/
@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";
.container {
position: absolute;
background-color: #ffffff;
width: 97%;
height: 570px;
.bpmn-canvas {
width: 100%;
height: 570px;
}
.panel {
position: absolute;
right: 0;
top: 50px;
width: 300px;
}
.bjs-powered-by {
display: none;
}
.toolbar {
position: absolute;
top: 20px;
right: 350px;
a {
text-decoration: none;
margin: 5px;
color: #409eff;
}
}
}
</style>新建 bpmnData.js 文件設(shè)置左側(cè)圖形工具：
/**PaletteProvider
* 存儲流程設(shè)計相關(guān)參數(shù)
*/
export default class BpmData {
constructor () {
this.controls = [] // 設(shè)計器控件
this.init()
}
init () {
this.controls = [
{ action: 'create.start-event', title: '開始' },
{ action: 'create.intermediate-event', title: '中間' },
{ action: 'create.end-event', title: '結(jié)束' },
{ action: 'create.exclusive-gateway', title: '條件' },
{ action: 'create.task', title: '任務(wù)' },
{ action: 'create.user-task', title: '用戶任務(wù)' },
{ action: 'create.user-sign-task', title: '會簽任務(wù)' },
{ action: 'create.subprocess-expanded', title: '子流程' },
{ action: 'create.data-object', title: '數(shù)據(jù)對象' },
{ action: 'create.data-store', title: '數(shù)據(jù)存儲' },
{ action: 'create.participant-expanded', title: '擴(kuò)展流程' },
{ action: 'create.group', title: '分組' }
]
}
// 獲取控件配置信息
getControl (action) {
const result = this.controls.filter(item => item.action === action)
return result[0] || {}
}
}
新建 bpmn2.js 隱藏部分左側(cè)不需要的工具圖形：
import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
// 隱藏左側(cè)工具欄部分的圖形
export default class CustomPaletteProvider extends PaletteProvider {
constructor(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
super(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate);
}
getPaletteEntries(element) {
const entries = super.getPaletteEntries(element);
// 隱藏指定類型的元素
delete entries['create.intermediate-event']; // 中間
delete entries['create.user-task']; // 用戶任務(wù)
delete entries['create.user-sign-task']; // 會簽任務(wù)
delete entries['create.subprocess-expanded'];// 子流程
delete entries['create.data-object'];// 數(shù)據(jù)對象
delete entries['create.data-store'];// 數(shù)據(jù)存儲
delete entries['create.participant-expanded'];// 擴(kuò)展流程
delete entries['create.group'];// 分組
return entries;
}
}新建 PropertyPanel-right.vue 文件自定義右側(cè)節(jié)點表單：
<template>
<div class="property-panel" ref="propertyPanel">
<el-form :inline="true" :model="form" label-width="100px" size="small">
<!-- <el-form-item label="節(jié)點ID">
<el-input v-model="form.id" disabled></el-input>
</el-form-item> -->
<el-form-item label="節(jié)點名稱">
<el-input v-model="form.name" @input="nameChange" disabled style="width: 180px;"></el-input>
</el-form-item>
<el-form-item label="節(jié)點顏色">
<el-color-picker v-model="form.color" @active-change="colorChange"></el-color-picker>
</el-form-item>
<!-- 任務(wù)節(jié)點允許選擇人員 -->
<el-form-item label="節(jié)點人員" v-if="userTask">
<el-select v-model="form.userType" placeholder="請選擇" @change="typeChange" style="width: 180px;">
<el-option value="assignee" label="指定人員"></el-option>
<el-option value="candidateUsers" label="候選人員"></el-option>
<el-option value="candidateGroups" label="角色/崗位"></el-option>
</el-select>
</el-form-item>
<!-- 指定人員 -->
<el-form-item label="指定人員" v-if="userTask && form.userType === 'assignee'">
<el-select v-model="form.assignee" placeholder="請選擇" key="1" @change="(value) => addUser({assignee: value})">
<el-option
v-for="item in users"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 候選人員 -->
<el-form-item label="候選人員" v-else-if="userTask && form.userType === 'candidateUsers'">
<el-select v-model="form.candidateUsers" placeholder="請選擇" key="2" multiple
@change="(value) => addUser({candidateUsers: value.join(',') || value})">
<el-option
v-for="item in users"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 角色/崗位 -->
<el-form-item label="角色/崗位" v-else-if="userTask && form.userType === 'candidateGroups'">
<el-select v-model="form.candidateGroups" placeholder="請選擇"
@change="(value) => addUser({candidateGroups: value})">
<el-option
v-for="item in roles"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 分支允許添加條件 -->
<el-form-item label="分支條件" v-if="sequenceFlow">
<el-select v-model="form.user" placeholder="請選擇">
<el-option
v-for="item in users"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "PropertyPanel",
props: {
modeler: {
type: Object,
required: true
}
},
computed: {
userTask() {
if (!this.element) {
return;
}
return this.element.type === "bpmn:UserTask";
},
sequenceFlow() {
if (!this.element) {
return;
}
return this.element.type === "bpmn:SequenceFlow";
}
},
data() {
return {
form: {
id: "",
name: "",
color: null
},
element: {},
users: [
{ value: "zhangsan", label: "張三" },
{ value: "lisi", label: "李四" },
{ value: "wangwu", label: "王五" }
],
roles: [
{ value: "manager", label: "經(jīng)理" },
{ value: "personnel", label: "人事" },
{ value: "charge", label: "主管" }
]
};
},
mounted() {
this.handleModeler();
},
methods: {
handleModeler() {
// 監(jiān)聽節(jié)點選擇變化
this.modeler.on("selection.changed", e => {
const element = e.newSelection[0];
this.element = element;
console.log(this.element,'節(jié)點選擇變化');
if (!element) return;
this.form = {
...element.businessObject,
...element.businessObject.$attrs
};
if (this.form.userType === "candidateUsers") {
this.form["candidateUsers"] =
this.form["candidateUsers"].split(",") || [];
}
});
// 監(jiān)聽節(jié)點屬性變化
this.modeler.on("element.changed", e => {
const { element } = e;
if (!element) return;
// 新增節(jié)點需要更新回屬性面板
if (element.id === this.form.id) {
this.form.name = element.businessObject.name;
this.form = { ...this.form };
}
});
},
// 屬性面板名稱，更新回流程節(jié)點
nameChange(name) {
const modeling = this.modeler.get("modeling");
modeling.updateLabel(this.element, name);
},
// 屬性面板顏色，更新回流程節(jié)點
colorChange(color) {
const modeling = this.modeler.get("modeling");
modeling.setColor(this.element, {
fill: null,
stroke: color
});
modeling.updateProperties(this.element, { color: color });
},
// 任務(wù)節(jié)點配置人員
addUser(properties) {
this.updateProperties(
Object.assign(properties, {
userType: Object.keys(properties)[0]
})
);
},
// 切換人員類型
typeChange() {
const types = ["assignee", "candidateUsers", "candidateGroups"];
types.forEach(type => {
delete this.element.businessObject.$attrs[type];
delete this.form[type];
});
},
// 在這里我們封裝一個通用的更新節(jié)點屬性的方法
updateProperties(properties) {
const modeling = this.modeler.get("modeling");
modeling.updateProperties(this.element, properties);
}
}
};
</script>
<style lang="scss" scoped>
.property-panel {
position: absolute;
right: 0px;
top: 0px;
border-left: 1px solid #cccccc;
padding: 20px 0;
width: 300px;
height: 100%;
}
</style>在 util 文件夾下新建 customTranslate.js 文件，進(jìn)行流程圖語言漢化：
import translations from './language-zh';
export default function customTranslate(template, replacements) {
replacements = replacements || {};
// Translate
template = translations[template] || template;
// Replace
return template.replace(/{([^}]+)}/g, function(_, key) {
return replacements[key] || '{' + key + '}';
});
}在 util 文件夾下新建 language-zh.js 文件，存放漢化語言包：
export default {
// Labels
'Activate the global connect tool' : '激活全局連接工具',
'Append {type}': '追加 {type}',
'Append EndEvent': '追加 結(jié)束事件 ',
'Append Task':'追加 任務(wù)',
'Append Gateway':'追加 網(wǎng)關(guān)',
'Append Intermediate/Boundary Event':'追加 中間/邊界 事件',
'Add Lane above': '在上面添加道',
'Divide into two Lanes': '分割成兩個道',
'Divide into three Lanes': '分割成三個道',
'Add Lane below': '在下面添加道',
'Append compensation activity': '追加補(bǔ)償活動',
'Change type': '修改類型',
'Connect using Association': '使用關(guān)聯(lián)連接',
'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關(guān)聯(lián)連接',
'Connect using DataInputAssociation': '使用數(shù)據(jù)輸入關(guān)聯(lián)連接',
'Remove': '移除',
'Activate the hand tool': '激活抓手工具',
'Activate the lasso tool': '激活套索工具',
'Activate the create/remove space tool': '激活創(chuàng)建/刪除空間工具',
'Create expanded SubProcess': '創(chuàng)建擴(kuò)展子過程',
'Create IntermediateThrowEvent/BoundaryEvent' : '創(chuàng)建中間拋出事件/邊界事件',
'Create Pool/Participant': '創(chuàng)建池/參與者',
'Parallel Multi Instance': '并行多重事件',
'Sequential Multi Instance': '時序多重事件',
'DataObjectReference':'數(shù)據(jù)對象參考',
'DataStoreReference':'數(shù)據(jù)存儲參考',
'Loop': '循環(huán)',
'Ad-hoc': '即席',
'Create {type}': '創(chuàng)建 {type}',
'Create Task':'創(chuàng)建任務(wù)',
'Create StartEvent':'創(chuàng)建開始事件',
'Create EndEvent':'創(chuàng)建結(jié)束事件',
'Create Group':'創(chuàng)建組',
'Task': '任務(wù)',
'Send Task': '發(fā)送任務(wù)',
'Receive Task': '接收任務(wù)',
'User Task': '用戶任務(wù)',
'Manual Task': '手工任務(wù)',
'Business Rule Task': '業(yè)務(wù)規(guī)則任務(wù)',
'Service Task': '服務(wù)任務(wù)',
'Script Task': '腳本任務(wù)',
'Call Activity': '調(diào)用活動',
'Sub Process (collapsed)': '子流程（折疊的）',
'Sub Process (expanded)': '子流程（展開的）',
'Start Event': '開始事件',
'StartEvent': '開始事件',
'Intermediate Throw Event': '中間事件',
'End Event': '結(jié)束事件',
'EndEvent': '結(jié)束事件',
'Create Gateway': '創(chuàng)建網(wǎng)關(guān)',
'GateWay':'網(wǎng)關(guān)',
'Create Intermediate/Boundary Event': '創(chuàng)建中間/邊界事件',
'Message Start Event': '消息開始事件',
'Timer Start Event': '定時開始事件',
'Conditional Start Event': '條件開始事件',
'Signal Start Event': '信號開始事件',
'Error Start Event': '錯誤開始事件',
'Escalation Start Event': '升級開始事件',
'Compensation Start Event': '補(bǔ)償開始事件',
'Message Start Event (non-interrupting)': '消息開始事件（非中斷）',
'Timer Start Event (non-interrupting)': '定時開始事件（非中斷）',
'Conditional Start Event (non-interrupting)': '條件開始事件（非中斷）',
'Signal Start Event (non-interrupting)': '信號開始事件（非中斷）',
'Escalation Start Event (non-interrupting)': '升級開始事件（非中斷）',
'Message Intermediate Catch Event': '消息中間捕獲事件',
'Message Intermediate Throw Event': '消息中間拋出事件',
'Timer Intermediate Catch Event': '定時中間捕獲事件',
'Escalation Intermediate Throw Event': '升級中間拋出事件',
'Conditional Intermediate Catch Event': '條件中間捕獲事件',
'Link Intermediate Catch Event': '鏈接中間捕獲事件',
'Link Intermediate Throw Event': '鏈接中間拋出事件',
'Compensation Intermediate Throw Event': '補(bǔ)償中間拋出事件',
'Signal Intermediate Catch Event': '信號中間捕獲事件',
'Signal Intermediate Throw Event': '信號中間拋出事件',
'Message End Event': '消息結(jié)束事件',
'Escalation End Event': '定時結(jié)束事件',
'Error End Event': '錯誤結(jié)束事件',
'Cancel End Event': '取消結(jié)束事件',
'Compensation End Event': '補(bǔ)償結(jié)束事件',
'Signal End Event': '信號結(jié)束事件',
'Terminate End Event': '終止結(jié)束事件',
'Message Boundary Event': '消息邊界事件',
'Message Boundary Event (non-interrupting)': '消息邊界事件（非中斷）',
'Timer Boundary Event': '定時邊界事件',
'Timer Boundary Event (non-interrupting)': '定時邊界事件（非中斷）',
'Escalation Boundary Event': '升級邊界事件',
'Escalation Boundary Event (non-interrupting)': '升級邊界事件（非中斷）',
'Conditional Boundary Event': '條件邊界事件',
'Conditional Boundary Event (non-interrupting)': '條件邊界事件（非中斷）',
'Error Boundary Event': '錯誤邊界事件',
'Cancel Boundary Event': '取消邊界事件',
'Signal Boundary Event': '信號邊界事件',
'Signal Boundary Event (non-interrupting)': '信號邊界事件（非中斷）',
'Compensation Boundary Event': '補(bǔ)償邊界事件',
'Exclusive Gateway': '互斥網(wǎng)關(guān)',
'Parallel Gateway': '并行網(wǎng)關(guān)',
'Inclusive Gateway': '相容網(wǎng)關(guān)',
'Complex Gateway': '復(fù)雜網(wǎng)關(guān)',
'Event based Gateway': '事件網(wǎng)關(guān)',
'Transaction': '轉(zhuǎn)運',
'Sub Process': '子流程',
'Event Sub Process': '事件子流程',
'Collapsed Pool': '折疊池',
'Expanded Pool': '展開池',
// Errors
'no parent for {element} in {parent}': '在{parent}里，{element}沒有父類',
'no shape type specified': '沒有指定的形狀類型',
'flow elements must be children of pools/participants': '流元素必須是池/參與者的子類',
'out of bounds release': 'out of bounds release',
'more than {count} child lanes': '子道大于{count} ',
'element required': '元素不能為空',
'diagram not part of bpmn:Definitions': '流程圖不符合bpmn規(guī)范',
'no diagram to display': '沒有可展示的流程圖',
'no process or collaboration to display': '沒有可展示的流程/協(xié)作',
'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制',
'already rendered {element}': '{element} 已被渲染',
'failed to import {element}': '導(dǎo)入{element}失敗',
//屬性面板的參數(shù)
'Id':'編號',
'Name':'名稱',
'General':'常規(guī)',
'Details':'詳情',
'Message Name':'消息名稱',
'Message':'消息',
'Initiator':'創(chuàng)建者',
'Asynchronous Continuations':'持續(xù)異步',
'Asynchronous Before':'異步前',
'Asynchronous After':'異步后',
'Job Configuration':'工作配置',
'Exclusive':'排除',
'Job Priority':'工作優(yōu)先級',
'Retry Time Cycle':'重試時間周期',
'Documentation':'文檔',
'Element Documentation':'元素文檔',
'History Configuration':'歷史配置',
'History Time To Live':'歷史的生存時間',
'Forms':'表單',
'Form Key':'表單key',
'Form Fields':'表單字段',
'Business Key':'業(yè)務(wù)key',
'Form Field':'表單字段',
'ID':'編號',
'Type':'類型',
'Label':'名稱',
'Default Value':'默認(rèn)值',
'Validation':'校驗',
'Add Constraint':'添加約束',
'Config':'配置',
'Properties':'屬性',
'Add Property':'添加屬性',
'Value':'值',
'Add':'添加',
'Values':'值',
'Add Value':'添加值',
'Listeners':'監(jiān)聽器',
'Execution Listener':'執(zhí)行監(jiān)聽',
'Event Type':'事件類型',
'Listener Type':'監(jiān)聽器類型',
'Java Class':'Java類',
'Expression':'表達(dá)式',
'Must provide a value':'必須提供一個值',
'Delegate Expression':'代理表達(dá)式',
'Script':'腳本',
'Script Format':'腳本格式',
'Script Type':'腳本類型',
'Inline Script':'內(nèi)聯(lián)腳本',
'External Script':'外部腳本',
'Resource':'資源',
'Field Injection':'字段注入',
'Extensions':'擴(kuò)展',
'Input/Output':'輸入/輸出',
'Input Parameters':'輸入?yún)?shù)',
'Output Parameters':'輸出參數(shù)',
'Parameters':'參數(shù)',
'Output Parameter':'輸出參數(shù)',
'Timer Definition Type':'定時器定義類型',
'Timer Definition':'定時器定義',
'Date':'日期',
'Duration':'持續(xù)',
'Cycle':'循環(huán)',
'Signal':'信號',
'Signal Name':'信號名稱',
'Escalation':'升級',
'Error':'錯誤',
'Link Name':'鏈接名稱',
'Condition':'條件名稱',
'Variable Name':'變量名稱',
'Variable Event':'變量事件',
'Specify more than one variable change event as a comma separated list.':'多個變量事件以逗號隔開',
'Wait for Completion':'等待完成',
'Activity Ref':'活動參考',
'Version Tag':'版本標(biāo)簽',
'Executable':'可執(zhí)行文件',
'External Task Configuration':'擴(kuò)展任務(wù)配置',
'Task Priority':'任務(wù)優(yōu)先級',
'External':'外部',
'Connector':'連接器',
'Must configure Connector':'必須配置連接器',
'Connector Id':'連接器編號',
'Implementation':'實現(xiàn)方式',
'Field Injections':'字段注入',
'Fields':'字段',
'Result Variable':'結(jié)果變量',
'Topic':'主題',
'Configure Connector':'配置連接器',
'Input Parameter':'輸入?yún)?shù)',
'Assignee':'代理人',
'Candidate Users':'候選用戶',
'Candidate Groups':'候選組',
'Due Date':'到期時間',
'Follow Up Date':'跟蹤日期',
'Priority':'優(yōu)先級',
'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':'跟蹤日期必須符合EL表達(dá)式，如： ${someDate} ,或者一個ISO標(biāo)準(zhǔn)日期，如：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表達(dá)式，如： ${someDate} ,或者一個ISO標(biāo)準(zhǔn)日期，如：2015-06-26T09:54:00',
'Variables':'變量',
'Candidate Starter Configuration':'候選開始配置',
'Task Listener':'任務(wù)監(jiān)聽器',
'Candidate Starter Groups':'候選開始組',
'Candidate Starter Users':'候選開始用戶',
'Tasklist Configuration':'任務(wù)列表配置',
'Startable':'啟動',
'Specify more than one group as a comma separated list.':'指定多個組,用逗號分隔',
'Specify more than one user as a comma separated list.':'指定多個用戶,用逗號分隔',
'This maps to the process definition key.':'這會映射為流程定義的鍵',
'CallActivity Type':'調(diào)用活動類型',
'Condition Type':'條件類型',
'Create UserTask':'創(chuàng)建用戶任務(wù)',
'Create CallActivity':'創(chuàng)建調(diào)用活動',
'Called Element':'調(diào)用元素',
'Create DataObjectReference':'創(chuàng)建數(shù)據(jù)對象引用',
'Create DataStoreReference':'創(chuàng)建數(shù)據(jù)存儲引用',
'Multi Instance':'多實例',
'Loop Cardinality':'實例數(shù)量',
'Collection':'任務(wù)參與人列表',
'Element Variable':'元素變量',
'Completion Condition':'完成條件'
};最后頁面引入即可使用：
<template>
<div>
<Bpmn></Bpmn>
</div>
</template>
import Bpmn from './components/bpmn.vue'
export default {
components: {
Bpmn
},
}至此完成！??！
測試有效?。。「兄x支持?。?！
到此這篇關(guān)于vue+bpmn.js實現(xiàn)自定義流程圖的文章就介紹到這了,更多相關(guān)vue bpmn.js 流程圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
面試官常問的題之說一下Vue中setup的props和context
setup是一個組件選項,在組件被創(chuàng)建之前,props被解析之后執(zhí)行,這篇文章主要介紹了Vue中setup的props和context的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-04-04
這篇文章主要介紹了基于vue的tab-list類目切換商品列表組件的示例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06
vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑功能
在使用 Vue.js 開發(fā)后臺管理系統(tǒng)時，經(jīng)常會遇到需要使用路由標(biāo)簽頁的場景，這篇文章主要介紹了vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑,需要的朋友可以參考下2023-05-05
xss的攻擊方式是發(fā)生在用戶使用瀏覽器時候運行,通過嵌入腳本竊取用戶信息,本文主要介紹了vue如何防范XSS攻擊的一些方法,感興趣的可以了解一下2024-04-04
Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue項目如何實現(xiàn)Echarts在label中獲取點擊事件
這篇文章主要介紹了vue項目如何實現(xiàn)Echarts在label中獲取點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
從零開始在vue-cli4配置自適應(yīng)vw布局的實現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應(yīng)vw布局，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
el-select即選擇器用于從若干個候選項中選擇其中一個(或者多個),在傳統(tǒng)網(wǎng)頁開發(fā)中選擇器經(jīng)常被稱作下拉框、下拉列表是最常用的表單元素之一,這篇文章主要給大家介紹了關(guān)于element?el-select下拉框選擇失效解決辦法,需要的朋友可以參考下2023-08-08