bpmn+vue 中文文档

1.初始化项目

<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { xmlStr } from '@/mock/xmlStr'
export default {
    mounted () {
        this.init()
    },
    methods: {
        init () {
            // 获取到属性ref为“canvas”的dom节点
            const canvas = this.$refs.canvas
            // 建模
            const customTranslateModule = {
              translate: ['value', customTranslate]
            }
            this.bpmnModeler = new BpmnModeler({
              container: canvas,
              // 添加控制板
              propertiesPanel: {
                parent: '#js-properties-panel'
              },
              additionalModules: [
               // 左边工具栏以及节点
               propertiesProviderModule,
               customTranslateModule
             ]
           })
            this.createNewDiagram(xmlStr)
        },
        async createNewDiagram(xmlStr) {
          // 将字符串转换成图显示出来
          await this.bpmnModeler.importXML(xmlStr, (err) => {
            if (err) {
            } else {
              // 这里是成功之后的回调, 可以在这里做一系列事情
              this.addEventBusListener();
            }
          })
        }
    }
}
</script>

2. 节点的事件或方法:

// 监听 element

const eventBus = this.bpmnModeler.get('eventBus');

//  获取流程的所有元素

const elements = this..bpmnModeler.get('elementRegistry')._elements

//  监听流程节点内容发生改变的事件

this.bpmnModeler.on('commandStack.changed', async function() {})

//  格式化保存流程图为xml文件

this..bpmnModeler.saveXML({ format: true }, async function(err, xml) {})

// 得到流程xml的name的集合
getXmlName(xmlString) {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
   const nodes = xmlDoc.querySelectorAll('*[name]');
   const names = Array.from(nodes).map(node => node.getAttribute('name'))
   return names
}

addEventBusListener() {
      // 监听 element
      const eventBus = this.bpmnModeler.get('eventBus');
      const eventTypes = ['element.click', 'element.changed', 'element.updateLabel'];

      let that = this;
      eventTypes.forEach(function(eventType) {
        eventBus.on(eventType, async function(e) {
          if (!e) return;
          const type = e.element.type  // 选中元素的类型
          that.selected = typeof e.element.parent !== 'undefined' // 判断是否选中元素

          if (eventType === 'element.changed') {
          } else if (eventType === 'element.click') {
          }
        })
      })

      // 修改节点内容事件
      this.bpmnModeler.on('commandStack.changed', async function() {
        await that.bpmnModeler.saveXML({ format: true }, async function(err, xml) {
          let allElementId = []
          for (let i in that.bpmnModeler.get('elementRegistry')._elements) {
            if (i === 'StartEvent_1y45yut' || i.indexOf('Task_') > -1 || i.indexOf('Activity_') > -1 || (i.indexOf('Gateway_') > -1 && i.indexOf('label') === -1)) {
              allElementId.push(i)
            }
          }
          if (that.getXmlName(xml).length < allElementId.length) {
            // name为空,给name赋值id
            let newxml = xml.replace(('id="' + allElementId[allElementId.length - 1] + '"'), ('id="' + allElementId[allElementId.length - 1] + '" name="' + allElementId[allElementId.length - 1] + '"'))
            that.bpmnModeler.clear();
            await that.bpmnModeler.importXML(newxml);
          }
          that.camunda.process.processXml = xml
          that.updateNodes(that.bpmnModeler.get('elementRegistry')._elements, that.getXmlName(xml))
        })
      })
}

3.bpmn官网:BPMN Editor | bpmn-js modeler Demo | demo.bpmn.io

4.流程设定可参考简道云的设计,简道云的网址:简道云登录_简道云系统入口_零代码平台登录_无代码平台登录-简道云

相关推荐

  1. Apache 开源项目文档中心 (英文 + 中文)

    2024-06-09 12:56:03       10 阅读
  2. primefaces 中文文档

    2024-06-09 12:56:03       10 阅读
  3. async-validator --- 中文文档

    2024-06-09 12:56:03       33 阅读
  4. bpmn+vue 中文文档

    2024-06-09 12:56:03       9 阅读
  5. Spring Boot SSL中文文档

    2024-06-09 12:56:03       37 阅读
  6. Spring Boot Web中文文档

    2024-06-09 12:56:03       34 阅读
  7. Spring Boot Data中文文档

    2024-06-09 12:56:03       32 阅读
  8. Spring Boot Messaging中文文档

    2024-06-09 12:56:03       29 阅读
  9. Spring Boot CLI 中文文档

    2024-06-09 12:56:03       31 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-09 12:56:03       8 阅读
  2. 【Python教程】压缩PDF文件大小

    2024-06-09 12:56:03       9 阅读
  3. 通过文章id递归查询所有评论(xml)

    2024-06-09 12:56:03       10 阅读

热门阅读

  1. 大语言模型原理基础与前沿 为什么ICL有效

    2024-06-09 12:56:03       7 阅读
  2. React——组件通信方式

    2024-06-09 12:56:03       8 阅读
  3. 我对Chat-GPT4o的使用感受

    2024-06-09 12:56:03       6 阅读
  4. 【C#】延时关闭电脑、取消关闭电脑

    2024-06-09 12:56:03       8 阅读
  5. 方法调研:DDOS检测有哪些方法?

    2024-06-09 12:56:03       6 阅读
  6. Rust 编程——prost-build 使用

    2024-06-09 12:56:03       8 阅读
  7. 速盾:ddos防护与高防ip区别?

    2024-06-09 12:56:03       6 阅读
  8. 贪心算法详解

    2024-06-09 12:56:03       5 阅读
  9. 自然语言处理(NLP)—— rasa的测试

    2024-06-09 12:56:03       6 阅读
  10. 支持向量机(SVM): 从理论到实践的指南(1)

    2024-06-09 12:56:03       4 阅读
  11. Web前端Text:深入解析与实践应用

    2024-06-09 12:56:03       9 阅读
  12. 多关键字排序

    2024-06-09 12:56:03       6 阅读