npm install bpmn-js
npm install bpmn-js-properties-panel
npm install camunda-bpmn-moddle

"bpmn-js": "^7.3.1",
"bpmn-js-properties-panel": "^0.37.2",
"bpmn-moddle": "^6.0.0",
"camunda-bpmn-moddle": "^4.5.0",
"diagram-js-minimap": "2.0.4",

import { onMounted, markRaw } from 'vue';
// bpmn-js相關(guān)
import 'bpmn-js/dist/assets/diagram-js.css'; // 左邊工具欄以及編輯節(jié)點(diǎn)的樣式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import BpmnModeler from 'bpmn-js/lib/Modeler';
// bpmn-js-properties-panel相關(guān)
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

<div class="containerBox" style="position: relative;">
     <div id="container" style="width: calc(100vw - 750px); height: calc(100vh - 150px)">
        </div>
     <div id="js-properties-panel" class="panel"></div>
</div>

<style>
.containerBox {
    height: calc(100vh - 160px);
    margin-top: 30px;
}

.containerBox #container {
    height: calc(100vh - 160px);
    border: 1px solid rgb(121, 121, 121);
}

.bpp-properties-panel [type=text] {
    box-sizing: border-box;
}

.panel {
    width: 400px;
    position: absolute;
    top: 1px;
    right: 1px;
    height: 100%;
    overflow: auto;
}

/* 右下角logo */
.bjs-powered-by {
    display: none;
}
</style>

onMounted(() => {
    const containerEl = document.getElementById('container');
    const bpmnModeler = markRaw(new BpmnModeler({
        container: containerEl,
        // 添加控制板
        propertiesPanel: {
            parent: '#js-properties-panel'
        },
        // 右側(cè)屬性面板
        additionalModules: [
            propertiesPanelModule,
            propertiesProviderModule
        ],
        moddleExtensions: {
            camunda: camundaModdleDescriptor
        }
    }));
    bpmnModeler.createDiagram(() => {
        bpmnModeler.get('canvas').zoom('fit-viewport');
    });
})

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": "分割成兩個(gè)道",
  "Divide into three Lanes": "分割成三個(gè)道",
  "Add Lane below": "在下面添加道",
  "Append compensation activity": "追加補(bǔ)償活動(dòng)",
  "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ò)展子過(guò)程",
  "Create IntermediateThrowEvent/BoundaryEvent": "創(chuàng)建中間拋出事件/邊界事件",
  "Create Pool/Participant": "創(chuàng)建池/參與者",
  "Parallel Multi Instance": "并行多重事件",
  "Sequential Multi Instance": "時(shí)序多重事件",
  "DataObjectReference": "數(shù)據(jù)對(duì)象參考",
  "DataStoreReference": "數(shù)據(jù)存儲(chǔ)參考",
  "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)用活動(dòng)",
  "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": "定時(shí)開始事件",
  "Conditional Start Event": "條件開始事件",
  "Signal Start Event": "信號(hào)開始事件",
  "Error Start Event": "錯(cuò)誤開始事件",
  "Escalation Start Event": "升級(jí)開始事件",
  "Compensation Start Event": "補(bǔ)償開始事件",
  "Message Start Event (non-interrupting)": "消息開始事件（非中斷）",
  "Timer Start Event (non-interrupting)": "定時(shí)開始事件（非中斷）",
  "Conditional Start Event (non-interrupting)": "條件開始事件（非中斷）",
  "Signal Start Event (non-interrupting)": "信號(hào)開始事件（非中斷）",
  "Escalation Start Event (non-interrupting)": "升級(jí)開始事件（非中斷）",
  "Message Intermediate Catch Event": "消息中間捕獲事件",
  "Message Intermediate Throw Event": "消息中間拋出事件",
  "Timer Intermediate Catch Event": "定時(shí)中間捕獲事件",
  "Escalation Intermediate Throw Event": "升級(jí)中間拋出事件",
  "Conditional Intermediate Catch Event": "條件中間捕獲事件",
  "Link Intermediate Catch Event": "鏈接中間捕獲事件",
  "Link Intermediate Throw Event": "鏈接中間拋出事件",
  "Compensation Intermediate Throw Event": "補(bǔ)償中間拋出事件",
  "Signal Intermediate Catch Event": "信號(hào)中間捕獲事件",
  "Signal Intermediate Throw Event": "信號(hào)中間拋出事件",
  "Message End Event": "消息結(jié)束事件",
  "Escalation End Event": "定時(shí)結(jié)束事件",
  "Error End Event": "錯(cuò)誤結(jié)束事件",
  "Cancel End Event": "取消結(jié)束事件",
  "Compensation End Event": "補(bǔ)償結(jié)束事件",
  "Signal End Event": "信號(hào)結(jié)束事件",
  "Terminate End Event": "終止結(jié)束事件",
  "Message Boundary Event": "消息邊界事件",
  "Message Boundary Event (non-interrupting)": "消息邊界事件（非中斷）",
  "Timer Boundary Event": "定時(shí)邊界事件",
  "Timer Boundary Event (non-interrupting)": "定時(shí)邊界事件（非中斷）",
  "Escalation Boundary Event": "升級(jí)邊界事件",
  "Escalation Boundary Event (non-interrupting)": "升級(jí)邊界事件（非中斷）",
  "Conditional Boundary Event": "條件邊界事件",
  "Conditional Boundary Event (non-interrupting)": "條件邊界事件（非中斷）",
  "Error Boundary Event": "錯(cuò)誤邊界事件",
  "Cancel Boundary Event": "取消邊界事件",
  "Signal Boundary Event": "信號(hào)邊界事件",
  "Signal Boundary Event (non-interrupting)": "信號(hào)邊界事件（非中斷）",
  "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)運(yùn)",
  "Sub Process": "子流程",
  "Event Sub Process": "事件子流程",
  "Collapsed Pool": "折疊池",
  "Expanded Pool": "展開池",
  // Errors
  "no parent for {element} in {parent}": "在{parent}里，{element}沒(méi)有父類",
  "no shape type specified": "沒(méi)有指定的形狀類型",
  "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": "沒(méi)有可展示的流程圖",
  "no process or collaboration to display": "沒(méi)有可展示的流程/協(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": "編號(hào)",
  "Name": "名稱",
  "General": "常規(guī)",
  "Details": "詳情",
  "Message Name": "消息名稱",
  "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": "表單",
  "Form Key": "表單key",
  "Form Fields": "表單字段",
  "Business Key": "業(yè)務(wù)key",
  "Form Field": "表單字段",
  "ID": "編號(hào)",
  "Type": "類型",
  "Label": "名稱",
  "Default Value": "默認(rèn)值",
  "Validation": "校驗(yàn)",
  "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": "必須提供一個(gè)值",
  "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": "定時(shí)器定義類型",
  "Timer Definition": "定時(shí)器定義",
  "Date": "日期",
  "Duration": "持續(xù)",
  "Cycle": "循環(huán)",
  "Signal": "信號(hào)",
  "Signal Name": "信號(hào)名稱",
  "Escalation": "升級(jí)",
  "Error": "錯(cuò)誤",
  "Link Name": "鏈接名稱",
  "Condition": "條件名稱",
  "Variable Name": "變量名稱",
  "Variable Event": "變量事件",
  "Specify more than one variable change event as a comma separated list.":
    "多個(gè)變量事件以逗號(hào)隔開",
  "Wait for Completion": "等待完成",
  "Activity Ref": "活動(dòng)參考",
  "Version Tag": "版本標(biāo)簽",
  "Executable": "可執(zhí)行文件",
  "External Task Configuration": "擴(kuò)展任務(wù)配置",
  "Task Priority": "任務(wù)優(yōu)先級(jí)",
  "External": "外部",
  "Connector": "連接器",
  "Must configure Connector": "必須配置連接器",
  "Connector Id": "連接器編號(hào)",
  "Implementation": "實(shí)現(xiàn)方式",
  "Field Injections": "字段注入",
  "Fields": "字段",
  "Result Variable": "結(jié)果變量",
  "Topic": "主題",
  "Configure Connector": "配置連接器",
  "Input Parameter": "輸入?yún)?shù)",
  "Assignee": "代理人",
  "Candidate Users": "候選用戶",
  "Candidate Groups": "候選組",
  "Due Date": "到期時(shí)間",
  "Follow Up Date": "跟蹤日期",
  "Priority": "優(yōu)先級(jí)",
  "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} ,或者一個(gè)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} ,或者一個(gè)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": "啟動(dòng)",
  "Specify more than one group as a comma separated list.":
    "指定多個(gè)組,用逗號(hào)分隔",
  "Specify more than one user as a comma separated list.":
    "指定多個(gè)用戶,用逗號(hào)分隔",
  "This maps to the process definition key.": "這會(huì)映射為流程定義的鍵",
  "CallActivity Type": "調(diào)用活動(dòng)類型",
  "Condition Type": "條件類型",
  "Create UserTask": "創(chuàng)建用戶任務(wù)",
  "Create CallActivity": "創(chuàng)建調(diào)用活動(dòng)",
  "Called Element": "調(diào)用元素",
  "Create DataObjectReference": "創(chuàng)建數(shù)據(jù)對(duì)象引用",
  "Create DataStoreReference": "創(chuàng)建數(shù)據(jù)存儲(chǔ)引用",
  "Multi Instance": "多實(shí)例",
  "Loop Cardinality": "實(shí)例數(shù)量",
  "Collection": "任務(wù)參與人列表",
  "Element Variable": "元素變量",
  "Completion Condition": "完成條件",
  "Open minimap": "打開小地圖",
  "Close minimap": "關(guān)閉小地圖",
};

import translations from "./zh";

export default function customTranslate(template, replacements) {
  replacements = replacements || {};

  // Translate
  template = translations[template] || template;

  // Replace
  return template.replace(/{([^}]+)}/g, function(_, key) {
    let str = replacements[key];
    if (
      translations[replacements[key]] !== null &&
      translations[replacements[key]] !== "undefined"
    ) {
      // eslint-disable-next-line no-mixed-spaces-and-tabs
      str = translations[replacements[key]];
      // eslint-disable-next-line no-mixed-spaces-and-tabs
    }
    return str || "{" + key + "}";
  });
}

// 引入漢化js
import translate from '@/assets/bpmn/translate.js'
var customTranslateModule = {
    translate: ['value', translate]
}
const bpmnModeler = markRaw(new BpmnModeler({
        additionalModules: [
            customTranslateModule
        ],
}));