扩展BPMN 2.0 建模器,使您可以通过属性面板编辑与执行相关的属性

2、使用指导

添加 bpmn-js-properties-panel 到你的项目:

npm install --save bpmn-js-properties-panel

此外,如果您想使用Camunda BPM执行相关的属性,请包括camunda-bpmn-moddle依赖项,该依赖项会告诉建模者 camunda:XXX扩展属性:

npm install --save bpmn-moddle camunda-bpmn-moddle

在Vue文件添加如下代码:

<template>
  <div class="containers" ref="content">
    <div id="js-canvas" class="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

通过bpmn-js对象加载模块:

import propertiesPanelModule from 'bpmn-js-properties-panel'
 // providing camunda executable properties, too
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

var bpmnModeler = new BpmnModeler({
  container: '#js-canvas',
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  // needed if you'd like to maintain camunda:XXX properties in the properties panel
  moddleExtensions: {
    camunda: camundaModdleDescriptor
  }
});
作者:Jeebiz  创建时间:2020-03-22 12:48
 更新时间:2024-08-05 18:41