bpmnjs在vue中的使用

bpmnjs主要是前端用于画工作流的一种技术
搭建基本环境
补充添加的依赖

  "bpmn-js": "^5.0.5",
  "bpmn-js-properties-panel": "^0.32.1",
  "camunda-bpmn-moddle": "^4.3.0",

达到原生效果基本没什么问题，然而可能你还需要自定义你的属性面板（控件面板可能差不多没什么问题）

所以如何自定义属性面板呢？
参考这位兄弟的

然而还有一些问题，这种自定义的属性模板对于任何一个控件都是一样的，无法对单个控件做出针对性的属性。你总不能让一个开始控件和判断控件所存在的属性一样吧。

接下来就研究代码发现在这个方法加入监听判断,这样就做到了真正的自定义组件了。

function MagicPropertiesProvider(eventBus, bpmnFactory, elementRegistry, translate) {
    PropertiesActivator.call(this, eventBus);
    this.getTabs = function(element) {
        const baseInfoTab = {
            id: 'baseInfo',
            label: '基本信息',
            groups: createBaseInfoTab(element, bpmnFactory, elementRegistry, translate),
        };
        const propertiesTab = {
            id: 'properties',
            label: '自定义属性',
            groups:  createPropertiesTab(element, bpmnFactory, elementRegistry, translate),
        }
        //判断控件种类
        if(element.type=='bpmn:StartEvent'){
            return [baseInfoTab];
        }else if(element.type=='bpmn:IntermediateThrowEvent'){
            return [];
        }else{
            return [baseInfoTab,propertiesTab];
        }
       
    };
}

开发遇到的问题：
1.原生的面板在弹出层点击按钮会触发链接跳转，我的做法是更改了源码将button改为了div，自定义了样式，如果你没有恭喜,下面的我需要更改的一个地址，你的不一定在这，所以自己找吧。

将node_modules/bpmn-js-properties-panel/lib/factory/TableEntryFactory.js中的

 '<button class="add" data-action="addElement"><span>+</span></button>' +
 
 修改为
 
 '<div class="add getdata" data-action="addElement"><span>添加属性</span></div>' +