bpmn简单使用（制作流程图）

燕京拾亿

已于 2024-08-16 09:36:43 修改

阅读量1k

点赞数 2

文章标签：前端

于 2024-08-06 09:20:05 首次发布

本文链接：https://blog.csdn.net/m0_59074147/article/details/140945239

版权

1、先下载依赖，下面是我下载的版本

"bpmn-js": "^17.9.1",
"diagram-js": "^14.8.0",

2、创建一个文件夹，里面放三个文件

index.scss

// 最外层包裹
.designer-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

// 主要内容
#container {
  width: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  height: 100%;
}

/* 隐藏右下角logo */
.bjs-powered-by {
  display: none;
}

// 按钮区域样式
.panel {
  width: 400px;
  position: absolute;
  top: 1px;
  right: 1px;
  height: 100%;
  overflow: auto;

  .el-button {
    margin: 0 10px 10px 0 !important;
  }
}

index.ts

// 初始模型（key:模型的唯一标识）
export const xmlStr = (key: string) => {
  return (`
            <?xml version="1.0" encoding="UTF-8"?>
            <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://www.flowable.org/processdef" exporter="Flowable Open Source Modeler" exporterVersion="6.7.1">
              <process id="${key}" name="${key}" isExecutable="true">
                <startEvent id="startEvent1" flowable:formFieldValidation="true"></startEvent>
              </process>
              <bpmndi:BPMNDiagram id="BPMNDiagram_${key}">
                <bpmndi:BPMNPlane bpmnElement="${key}" id="BPMNPlane_${key}">
                  <bpmndi:BPMNShape bpmnElement="startEvent1" id="BPMNShape_startEvent1">
                    <omgdc:Bounds height="30.0" width="30.0" x="100.0" y="163.0"></omgdc:Bounds>
                  </bpmndi:BPMNShape>
                </bpmndi:BPMNPlane>
              </bpmndi:BPMNDiagram>
            </definitions>
        `)
}

index.vue

<template>
  <div class="designer-container">
    <div id="container"></div>
    <div id="js-properties-panel" class="panel">
      <div class="custom-properties-panel">
        <div style="height: 400px">
          <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary" @click="downloadXml">点击下载xml</el-button>
            <el-button type="success" @click="creteXml">导入文件</el-button>
            <el-button type="info">Info</el-button>
            <el-button type="warning">Warning</el-button>
            <el-button type="danger">Danger</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'commFlowchart'
})
</script>

<script setup lang="ts">
import { markRaw, onMounted, ref } from "vue";
import { xmlStr } from "./index";
import BpmnModeler from "bpmn-js/lib/Modeler";
import translate from "@/utils/translate/translate";//引入汉化工具
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
//汉化模块
let customTranslateModule = {
  translate: ["value", translate]
};
const bpmnModeler = ref<any>({});
onMounted(() => {
  bpmnModeler.value = markRaw(
    new BpmnModeler({
      container: "#container",
      // 添加控制板
      propertiesPanel: {
        parent: "#js-properties-panel"
      },
      additionalModules: [customTranslateModule]
    })
  );
  bpmnModeler.value.importXML(xmlStr('模型的唯一标识'));

});


// 下载文件
const downloadFile = (fileName: string, data: any, type: string) => {
  const a = document.createElement('a');
  const url = window.URL.createObjectURL(new Blob([data], { type: type }));
  a.href = url;
  a.download = fileName;
  a.click();
  window.URL.revokeObjectURL(url);
};
// 下载流程图
const downloadXml = () => {
  //下载xml
  bpmnModeler.value.saveXML({ format: true }).then((res: any) => {
    console.log("画出的xml数据为", res);
    downloadFile(`测试.xml`, res.xml, 'application/xml');
  });
  // 下载SVG
  // bpmnModeler.value.saveSVG({ format: true }).then((res: any) => {
  //   console.log("画出的svg数据为", res);
  //   downloadFile(`测试.svg`, res.svg, 'image/svg+xml');
  // });
};
const creteXml = () => {
  bpmnModeler.value.importXML(``);
};
</script>

<style lang="scss" scope>
@import "./index.scss";
</style>

3、页面引用

<template>
  <div class="workflow-view">
    <commFlowchart />
  </div>
</template>

<script setup lang="ts">
import commFlowchart from "@/components/commFlowchart/index.vue";
</script>

<style lang="scss" scoped>
.workflow-view{
  height: calc(100vh - 152px);
}
</style>

4、汉化（创建一个文件夹，里面放两个文件translate.ts和zh.ts）

translate.ts

import { zh } from "./zh";
export default function customTranslate(template: string, replacements: any) {
  replacements = replacements || {};
  template = zh[template] || template;
  return template.replace(/{([^}]+)}/g, function (_, key) {
    return replacements[key] || "{" + key + "}";
  });
}

zh.ts

export const zh:any = {
    "Activate global connect tool": "激活全局连接工具",
    "Append {type}": "添加 {type}",
    "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/message flow or association": "使用顺序/消息流或者关联连接",
    "Connect using data input association": "使用数据输入关联连接",
    "Connect to other element": "连接到其他元素",
    "Add text annotation": "添加文本注释",
    "Delete": "删除",
    "Collection": "收藏",
    "Align elements": "对齐元素",
    "Change element": "修改类型",
    Remove: "移除",
    "Activate hand tool": "激活抓手工具",
    "Activate lasso tool": "激活套索工具",
    "Activate create/remove space tool": "激活创建/删除空间工具",
    "Create expanded sub-process": "创建扩展子过程",
    "Create intermediate/boundary event": "创建中间抛出事件/边界事件",
    "Create pool/participant": "创建池/参与者",
    "Parallel multi-instance": "并行多重事件",
    "Sequential multi-instance": "时序多重事件",
    "Data object reference": "数据对象参考",
    "Data store reference": "数据存储参考",
    Loop: "循环",
    "Ad-hoc": "即席",
    "Create {type}": "创建 {type}",
    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": "创建网关",
    "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 untermediate 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": "展开池",
    "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: "值",
    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": "跟踪日期",
    "Specify more than one group as a comma separated list.": "多个用户使用逗号隔开",
    Priority: "优先级",
    // eslint-disable-next-line no-template-curly-in-string
    "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",
    // eslint-disable-next-line no-template-curly-in-string
    "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 Users": "选择启动候选人",
    "Candidate Starter Configuration": "候选人启动器配置",
    "Candidate Starter Groups": "候选人启动组",
    "This maps to the process definition key.": "编号将映射到流程主键.",
  
    save: "保存",
    Tools: "工具",
    "flow gateway": "流程网关",
    "Process control": "流程节点",
    "Create start event": "开始节点",
    "Create end event": "结束节点",
    "Create exclusive gateway": "互斥网关",
    "Create parallel gateway": "并行网关",
    "Create task": "任务节点",
    "Create user task": "用户任务节点",
    "Condition Type": "条件类型",
    "Create group": "创建组",
    "Create data object reference": "创建数据对象引用",
    "Create data store reference": "创建数据存储引用",
    "Append task": "添加任务",
    "Append end event": "追加结束事件节点",
    "Append gateway": "追加网关节点",
    "Append user task": "追加用户任务节点",
    "Append intermediate/boundary event": "追加中间或边界事件",
    "Append text annotation": "追加文本批注" // 此句要有效，必须在CustomContexPadProvide给此节点增加一个translate('Append TextAnnotation')
  };

简单的例子完成啦

附：

//通过id获取节点
bpmnModeler.value.get("elementRegistry").get('id');