Vue BPMN Modeler流程图

1、参考地址

复制代码
git clone https://github.com/evanyangg/vue-bpmn-modeler.git

2、安装bpmn.js

复制代码
npm install bpmn-js --save

3、使用bpmn.js

复制代码
<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler' // 引入 bpmn-js
export default {
  data () {
    return {
      bpmnModeler: null
    }
  },
  methods: {
    createNewDiagram () {
      const bpmnXmlStr = `
      <?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
          <bpmn2:process id="process1567044459787" name="流程1567044459787">
            <bpmn2:documentation>描述</bpmn2:documentation>
            <bpmn2:startEvent id="StartEvent_1" name="开始"/>
          </bpmn2:process>
          <bpmndi:BPMNDiagram id="BPMNDiagram_1">
            <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
              <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
                <dc:Bounds x="184" y="64" width="36" height="36"/>
                <bpmndi:BPMNLabel>
                  <dc:Bounds x="191" y="40" width="22" height="14"/>
                </bpmndi:BPMNLabel>
              </bpmndi:BPMNShape>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        <processType id="test"/></bpmn2:definitions>
      `
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, (err) => {
        if (err) {
          console.error(err)
        }
      })
    }
  mounted () {
    const canvas = this.$refs.canvas
    // 生成实例
    this.bpmnModeler = new BpmnModeler({
      container: canvas
    })
    this.createNewDiagram() // 新增流程定义
  }
}
</script>

<style lang="scss">
  /*左边工具栏以及编辑节点的样式*/
  @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';
  .containers{
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    .canvas{
      width: 100%;
      height: 100%;
    }
    .bjs-powered-by {
      display: none;
    }
  }
</style>

4、监听方法

复制代码
// 监听节点选择变化
this.modeler.on('selection.changed', (e) => {
    const element = e.newSelection[0]
    console.log(element) 
})

//  监听节点属性变化
this.modeler.on('element.changed', (e) => {
    const { element } = e
    console.log(element) 
})

5、展示效果

相关推荐
jdyzzy1 天前
如何开发CRM系统中的财务管理板块(附架构图+流程图+代码参考)
流程图
Designseek满血版3 天前
流程图生成新体验,PicDoc 入门篇
流程图
shenyan~5 天前
关于 栈帧变化完整流程图(函数嵌套)
流程图
<花开花落>18 天前
AI 辅助生成 Mermaid 流程图
ai·流程图·mermaid·tool
晓华-warm19 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
邪恶马铃薯21 天前
Deepseek+墨刀,1min快速生成流程图!
流程图·墨刀
lgldl21 天前
AI自动生成复杂架构图,流程图,思维导图
人工智能·ai·流程图
蓝爱人21 天前
Vue3中使用 Vue Flow 流程图方法
javascript·vue.js·流程图
打码人的日常分享24 天前
智慧园区建设资料合集(Wordppt原件)
大数据·物联网·流程图·智慧城市·制造
小马爱打代码1 个月前
计算机系统设计:E-R图、类图、时序图、功能结构图、流程图、用例图、架构图
流程图