bpmn.js項目漢化；bpmn漢化；bpmn.js中文；bpmn.js漢化；

眾所周知 bpmn.js 是一個BPMN2.0渲染工具包和web建模器， 使得畫流程圖的功能在前端來完成。

但是由於bpmn.js的開發者是國外友人，所以展示出來的也都是英文

 

 若咱們想讓他變成中文的，讓使用者感覺友好的話，可以用如下漢化方法：

首先創建一個名為： customTranalate  的文件夾

隨后在里面創建兩個 .js的文件，分別名為：customTranslate 和 translations

 

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 { // hong // Labels 'Activate the global connect tool' : '激活全局連接工具', 'Append {type}': '追加 {type}', 'Append EndEvent': '追加 結束事件 ', 'Append Task':'追加 任務', 'Append Gateway':'追加 網關', 'Append Intermediate/Boundary Event':'追加 中間/邊界 事件', 'Add Lane above': '在上面添加道', 'Divide into two Lanes': '分割成兩個道', 'Divide into three Lanes': '分割成三個道', 'Add Lane below': '在下面添加道', 'Append compensation activity': '追加補償活動', 'Change type': '修改類型', 'Connect using Association': '使用關聯連接', 'Connect using Sequence/MessageFlow or Association': '使用順序/消息流或者關聯連接', 'Connect using DataInputAssociation': '使用數據輸入關聯連接', 'Remove': '移除', 'Activate the hand tool': '激活抓手工具', 'Activate the lasso tool': '激活套索工具', 'Activate the create/remove space tool': '激活創建/刪除空間工具', 'Create expanded SubProcess': '創建擴展子過程', 'Create IntermediateThrowEvent/BoundaryEvent' : '創建中間拋出事件/邊界事件', 'Create Pool/Participant': '創建池/參與者', 'Parallel Multi Instance': '並行多重事件', 'Sequential Multi Instance': '時序多重事件', 'DataObjectReference':'數據對象參考', 'DataStoreReference':'數據存儲參考', 'Loop': '循環', 'Ad-hoc': '即席', 'Create {type}': '創建 {type}', 'Create Task':'創建任務', 'Create StartEvent':'創建開始事件', 'Create EndEvent':'創建結束事件', 'Create Group':'創建組', 'Task': '任務', 'Send Task': '發送任務', 'Receive Task': '接收任務', 'User Task': '用戶任務', 'Manual Task': '手工任務', 'Business Rule Task': '業務規則任務', 'Service Task': '服務任務', 'Script Task': '腳本任務', 'Call Activity': '調用活動', 'Sub Process (collapsed)': '子流程（折疊的）', 'Sub Process (expanded)': '子流程（展開的）', 'Start Event': '開始事件', 'StartEvent': '開始事件', 'Intermediate Throw Event': '中間事件', 'End Event': '結束事件', 'EndEvent': '結束事件', 'Create Gateway': '創建網關', 'GateWay':'網關', 'Create Intermediate/Boundary Event': '創建中間/邊界事件', 'Message Start Event': '消息開始事件', 'Timer Start Event': '定時開始事件', 'Conditional Start Event': '條件開始事件', 'Signal Start Event': '信號開始事件', 'Error Start Event': '錯誤開始事件', 'Escalation Start Event': '升級開始事件', 'Compensation Start Event': '補償開始事件', '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': '補償中間拋出事件', 'Signal Intermediate Catch Event': '信號中間捕獲事件', 'Signal Intermediate Throw Event': '信號中間拋出事件', 'Message End Event': '消息結束事件', 'Escalation End Event': '定時結束事件', 'Error End Event': '錯誤結束事件', 'Cancel End Event': '取消結束事件', 'Compensation End Event': '補償結束事件', 'Signal End Event': '信號結束事件', 'Terminate End Event': '終止結束事件', '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': '補償邊界事件', 'Exclusive Gateway': '互斥網關', 'Parallel Gateway': '並行網關', 'Inclusive Gateway': '相容網關', 'Complex Gateway': '復雜網關', 'Event based Gateway': '事件網關', 'Transaction': '轉運', '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規范', 'no diagram to display': '沒有可展示的流程圖', 'no process or collaboration to display': '沒有可展示的流程/協作', 'element {element} referenced by {referenced}#{property} not yet drawn': '由{referenced}#{property}引用的{element}元素仍未繪制', 'already rendered {element}': '{element} 已被渲染', 'failed to import {element}': '導入{element}失敗', //屬性面板的參數 'Id':'編號', 'Name':'名稱', 'General':'常規', 'Details':'詳情', 'Message Name':'消息名稱', 'Message':'消息', 'Initiator':'創建者', 'Asynchronous Continuations':'持續異步', 'Asynchronous Before':'異步前', 'Asynchronous After':'異步后', 'Job Configuration':'工作配置', 'Exclusive':'排除', 'Job Priority':'工作優先級', 'Retry Time Cycle':'重試時間周期', 'Documentation':'文檔', 'Element Documentation':'元素文檔', 'History Configuration':'歷史配置', 'History Time To Live':'歷史的生存時間', 'Forms':'表單', 'Form Key':'表單key', 'Form Fields':'表單字段', 'Business Key':'業務key', 'Form Field':'表單字段', 'ID':'編號', 'Type':'類型', 'Label':'名稱', 'Default Value':'默認值', 'Validation':'校驗', 'Add Constraint':'添加約束', 'Config':'配置', 'Properties':'屬性', 'Add Property':'添加屬性', 'Value':'值', 'Add':'添加', 'Values':'值', 'Add Value':'添加值', 'Listeners':'監聽器', 'Execution 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':'字段注入', 'Extensions':'擴展', 'Input/Output':'輸入/輸出', 'Input Parameters':'輸入參數', 'Output Parameters':'輸出參數', 'Parameters':'參數', 'Output Parameter':'輸出參數', 'Timer Definition Type':'定時器定義類型', 'Timer Definition':'定時器定義', 'Date':'日期', 'Duration':'持續', 'Cycle':'循環', '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':'版本標簽', 'Executable':'可執行文件', 'External Task Configuration':'擴展任務配置', 'Task Priority':'任務優先級', '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':'優先級', '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', 'Variables':'變量', 'Candidate Starter Configuration':'候選開始配置', 'Task Listener':'任務監聽器', 'Candidate Starter Groups':'候選開始組', 'Candidate Starter Users':'候選開始用戶', 'Tasklist Configuration':'任務列表配置', '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':'調用活動類型', 'Condition Type':'條件類型', 'Create UserTask':'創建用戶任務', 'Create CallActivity':'創建調用活動', 'Called Element':'調用元素', 'Create DataObjectReference':'創建數據對象引用', 'Create DataStoreReference':'創建數據存儲引用', 'Multi Instance':'多實例', 'Loop Cardinality':'實例數量', 'Collection':'任務參與人列表', 'Element Variable':'元素變量', 'Completion Condition':'完成條件' }; 

 

配置好漢化所需的文件后，隨即對其進行使用，如下：

 

首先在使用bpmn的文件下先引入

// 漢化文件夾
import customTranslate from "./customTranalate/customTranslate"; 

 

隨后在代碼中使用

init() {
      // 獲取到屬性ref為“content”的dom節點
      this.container = this.$refs.content;
      // 獲取到屬性ref為“canvas”的dom節點
      const canvas = this.$refs.canvas;
      // 漢化配置
      let customTranslateModule = { translate: ["value", customTranslate], };

      // 建模
      this.bpmnModeler = new BpmnModeler({
        container: canvas,
        //添加控制板-右邊的工作欄
        propertiesPanel: {
          parent: "#js-properties-panel",
        },
        additionalModules: [
          // 漢化
          customTranslateModule,
          // 左邊工具欄以及節點
          propertiesProviderModule,
          // 右邊的工具欄
          propertiesPanelModule,
        ],
      });

      this.createNewDiagram();
    },

 

 即可變成漢化版的bpmn項目了

 

 

 

 

 

 

注意：translations.js 文件 下實際就是寫英文對應的中文，所以自己可以視情況去自行添加