1.先安装依赖~


js
 代码解读
复制代码
npm install bpmn-js // bpmn-js
npm install bpmn-js-properties-panel  @bpmn-io/properties-panel  // 属性面板相关
npm install camunda-bpmn-moddle // Camunda平台执行相关的属性

2.创建bpmn建模器


js
 代码解读
复制代码
<template>
  <!--创建容器-->
  <div class="containers">
    <div class="canvas" ref="canvasRef"></div> 
    <div class="panel" id="js-properties-panel"></div>  <!--属性面板将通过该元素呈现到其中-->
  </div>
</template>

3.实现js部分(内含汉化以及实现属性面板)

注意：xml文件在最下面！！！


js
 代码解读
复制代码
<script lang=''ts'' setup>
import {onMounted, ref, reactive} from ''vue''
import {ElMessage} from ''element-plus''
import BpmnModeler from ''bpmn-js/lib/Modeler.js'' // 引入 bpmn-js
// 导入一下有关于bpmn-js的字体库以及样式文件
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''
// 右侧属性面包样式
import ''bpmn-js-properties-panel/dist/assets/properties-panel.css''
// 汉化包 (这里注意你们项目的路径！！！！！！！)
import customTranslate from "/@/views/workOrder/workOrderProcess/utils/customTranslate"; 
// 注意这个xml文件
import xmlStr from ''./xml.ts'' // 放在下面了
// 两个属性面板相关模块
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from ''bpmn-js-properties-panel'';
import CamundaBpmnModdle from ''camunda-bpmn-moddle/resources/camunda.json''

const state = reactive<RuleType>({
   bpmnModeler: null,
   bpmnXmlStr: xmlStr, // xml数据
})
// 注意：必须先加载一个bpmn文件，新建就是加载一个空的bpmn文件，否则不能拖拽节点
const createNewDiagram = async (bpmn: any) => {
  // 将字符串转换成图显示出来
  try {
    const result = await state.bpmnModeler.importXML(bpmn);
    // state.bpmnModeler.get(''canvas'').zoom(''fit-viewport'');
    const {warnings} = result;
    console.log(warnings);
  } catch (e) {
    ElMessage.error(''打开模型出错，数据格式有误！'')
    console.log(''error--->'', e)
  }
};
const init = () => {
  // 将汉化包装成一个模块
  const customTranslateModule = {
    translate: [''value'', customTranslate]
  }
  // 生成实例
  state.bpmnModeler = new BpmnModeler({
    container: canvasRef.value, // 获取到属性ref为“canvasRef”的dom节点
    propertiesPanel: {
      parent: ''#js-properties-panel''
    },
    additionalModules: [
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,
      //  汉化模块
      customTranslateModule
     ],
    moddleExtensions: {
      camunda: CamundaBpmnModdle
    }
  })
  createNewDiagram(state.bpmnXmlStr) // 新增流程定义
};
onMounted(() => {
  init()
})
</script>

效果图如下-----------------------------

New Image

xml文件


js
 代码解读
复制代码
`<?xml version="1.0" encoding="UTF-8"?>
   <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" 
        xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" 
        xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" 
        targetNamespace="http://bpmn.io/bpmn" 
        exporter="bpmn-js (https://demo.bpmn.io)" 
        exporterVersion="5.1.2">
    <process id="Process_1" name="" isExecutable="false" camunda:versionTag="">
      <startEvent id="StartEvent_1y45yut" name="开始" />
    </process>
    <bpmndi:BPMNDiagram id="BpmnDiagram_1">
      <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
        <bpmndi:BPMNShape id="StartEvent_1y45yut_di" bpmnElement="StartEvent_1y45yut">
          <omgdc:Bounds x="152" y="102" width="36" height="36" />
          <bpmndi:BPMNLabel>
            <omgdc:Bounds x="160" y="145" width="22" height="14" />
          </bpmndi:BPMNLabel>
        </bpmndi:BPMNShape>
      </bpmndi:BPMNPlane>
    </bpmndi:BPMNDiagram>
   </definitions>`

汉化包文件

customTranslate.ts


js
 代码解读
复制代码
import translations from ''./translationsGerman'';

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

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

  // Replace
  return template.replace(/{([^}]+)}/g, function(_, key) {
    return replacements[key] || ''{'' + key + ''}'';
  });
}

translationsGerman.ts (对应的汉化中文，有些不全的需要自己添加！)


js
 代码解读
复制代码
export default {
  ''Element documentation'': ''文档元素'',
  ''Version tag'': ''版本标签'',
  ''History cleanup'': ''历史清理记录'',
  ''Tasklist'': ''任务列表'',
  ''Candidate starter'': ''候选启动器'',
  ''External task'': ''外部任务'',
  ''Job execution'': ''作业执行情况'',
  ''Execution listeners'': ''执行侦听器'',
  ''Extension properties'': ''执行财产'',
  ''Time to live'': ''生存时间'',
  // 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'': ''完成条件''
 };