vue3中使用事件流bpmn

前言

最近项目规划中有使用事件流引擎,就进行了简单的调研,参考若依 RuoYi-Flowable-Plus 做了一个vue3版本的事件流引擎demo。

"bpmn-js": "^7.3.1"

js 复制代码
<template>
    <div id="container" style="width: calc(100vw - 750px); height: calc(100vh - 150px)"></div>
</template>
<script setup lang="ts">
    import { onMounted, markRaw ,ref} from 'vue';
     // bpmn-js相关
 import BpmnModeler  from 'bpmn-js/lib/Modeler' ;
 import 'bpmn-js/dist/assets/diagram-js.css'; // 左边工具栏以及编辑节点的样式
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

let bpmnModeler:any=null
onMounted(() => {
    const containerEl = document.getElementById('container');
    bpmnModeler = new BpmnModeler({
        container: containerEl,
    })
})
</script>
<style>
.containerBox {
    height: calc(100vh - 160px);
    margin-top: 30px;
    display: flex;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
      repeat !important;
}
</style>

初始化完成,页面已经显示 常用的几个配置项

js 复制代码
bpmnModeler = new BpmnModeler(options: Options);
interface Options {
	container: DomElement; // 渲染容器
	width:string | number;// 容器宽度
	height: string | number; // 容器高度
	moddleExtensions: object;// 需要用的扩展包
	modules:<didi.Module>[]; // 自定义且需要覆盖默认扩展包的模块列表
	additionalModules: <didi.Module>[]; // 自定义且与默认扩展包一起使用的模块列表
}

目前默认的语言是英文,需要我们在扩展里面增加语言包配置 translate.ts

js 复制代码
import translations from "./zh";
 
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 + "}";
  });
}

const customTranslateModule = {
  translate: ['value', customTranslate]
}

export default customTranslateModule

语言包json

js 复制代码
export default {
    // 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": "完成条件",
    "Open minimap": "打开小地图",
    "Close minimap": "关闭小地图",
  };

更新初始化配置

js 复制代码
 import defaultXml from "./defaultEmpty"
 const defaultXmlStr=defaultXml()
    bpmnModeler = new BpmnModeler({
        container: containerEl,
        additionalModules: [
            customTranslateModule //翻译模块 translate.ts
        ]
    })
    bpmnModeler.importXML(defaultXmlStr) // 默认导入的xml文件,否则无法拖拽

生成默认的xmlStr defaultEmpty.ts

js 复制代码
const key=`Process_${new Date().getTime()}`
const name=`业务流程_${new Date().getTime()}`
const type='xmlStr'
export default (key, name, type) => {
  if (!type) type = "camunda";
  const TYPE_TARGET = {
    activiti: "http://activiti.org/bpmn",
    camunda: "http://bpmn.io/schema/bpmn",
    flowable: "http://flowable.org/bpmn"
  };
  return `
    <?xml version="1.0" encoding="UTF-8"?>
    <bpmn2:definitions 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
      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"
      xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
      id="diagram_${key}"
      targetNamespace="${TYPE_TARGET[type]}">
      <bpmn2:process id="${key}" name="${name}" isExecutable="true">
      </bpmn2:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn2:definitions>
  `;
};

此时鼠标悬浮左侧的流程框,就可以显示对应的中文翻译,可以完成正常的拖拽添加功能。

获取流程图数据

js 复制代码
bpmnModeler.saveXML({ format: true }).then((res: any) => {
        console.log(res.xml)
    })

导入xml文件

通过 input file 来进行文件读取,获取文件内容,进行流程图渲染

js 复制代码
<template>
    <button @click="refFile.click()">导入</button>
    <!-- 用于打开本地文件-->
    <input id="files" ref="refFile" type="file" style="display: none" accept=".xml, .bpmn" @change="importXml">
</template>
<script setup lang="ts">
const refFile:any=ref(null)
const importXml=()=>{
      const file = refFile.value.files[0]
      const reader = new FileReader()
      reader.readAsText(file)
      reader.onload = function(res:any) {
        bpmnModeler.importXML(res.currentTarget.result) // bpmnModeler 为实例化的bpmn
      }
}
</script>

下载 XML,SVG

这些是从若依代码里面直接粘贴过来的

js 复制代码
<template>
 <@click="downloadProcess('xml')" >下载XML</button>
 <@click="downloadProcess('svg')" >下载SVG</button>
 <@click="downloadProcess('bpmn')" >保存BPMN</button>
</template>
// 根据所需类型进行转码并返回下载地址
const setEncoded=(type: string, filename = 'diagram', data: string | number | boolean)=> {
      const encodedData = encodeURIComponent(data)
      return {
        filename: `${filename}.${type}`,
        href: `data:application/${type === 'svg' ? 'text/xml' : 'bpmn20-xml'};charset=UTF-8,${encodedData}`,
        data: data
      }
    }
// 下载流程图到本地
const downloadProcess=async(type: string)=> {
      try {
        // 按需要类型创建文件并下载
        if (type === 'xml' || type === 'bpmn') {
          const { err, xml } = await bpmnModeler.saveXML()
          // 读取异常时抛出异常
          if (err) {
            console.error(`[Process Designer Warn ]: ${err.message || err}`)
          }
          const { href, filename } = setEncoded(type.toUpperCase(), 'bpmn', xml)
          downloadFunc(href, filename)
        } else {
          const { err, svg } = await bpmnModeler.saveSVG()
          // 读取异常时抛出异常
          if (err) {
            return console.error(err)
          }
          const { href, filename } = setEncoded('SVG', 'bpmn', svg)
          downloadFunc(href, filename)
        }
      } catch (e) {
        console.error(`[Process Designer Warn ]: ${e.message || e}`)
      }
      // 文件下载方法
      function downloadFunc(href: string, filename: string) {
        if (href && filename) {
          const a = document.createElement('a')
          a.download = filename // 指定下载的文件名
          a.href = href //  URL对象
          a.click() // 模拟点击
          URL.revokeObjectURL(a.href) // 释放URL 对象
        }
      }
}

预览

使用 highlight.js进行预览

"highlight.js": "10.5.0";"@highlightjs/vue-plugin": "^2.1.0"

在main.ts中进行注册

js 复制代码
import 'highlight.js/styles/atom-one-dark.css'
import 'highlight.js/lib'
import hljsVuePlugin from '@highlightjs/vue-plugin'
...
app.use(hljsVuePlugin)

在弹窗中使用,还是使用 saveXML 获取 xml 文件进行数据填充,highlightjs 中 language 可以换成 json 等配置,等后面再深入去学习

js 复制代码
    <el-dialog v-model="dialogVisible" title="事件流预览">
      <highlightjs language='xml' :code="showHtml" style="height: 60vh;overflow-y: auto" />
    </el-dialog>
    ...
    const dialogVisible=ref(false)
    const saveXml=()=>{
    bpmnModeler.saveXML({ format: true }).then((res: any) => {
        // const json = xmlJs.xml2json(res.xml, { compact: true, spaces: 4 });
        // // console.log(json);
        // showHtml.value=json
        dialogVisible.value=true
        showHtml.value=res.xml
    })
}
...
:deep(.hljs) {
      word-break: break-word;
      white-space: pre-wrap;
    }
    :deep(.hljs *) {
      font-family: Consolas, Monaco, monospace;
    }

预览效果,改下样式,字体看着更舒服一点

最后

这样基本实现了最基的事件流引擎 demo。具体还没有具体的项目需求,只能根据文档去学习。下一篇会对一些 api进行了解学习

相关推荐
树上有只程序猿几秒前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼35 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下42 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯