利用bpmnjs可以在web端绘制流程图，比起activiti那个恶心的编辑器，这个高大上多了

而利用bpmn-js-properties-panel，则可以和camunda完美结合。 项目地址 https://github.com/bpmn-io/bpmn-js-properties-panel

安装 & 启动

git clone https://github.com/bpmn-io/bpmn-js-examples
cd bpmn-js-examples/properties-panel
npm install
npm run dev

增加对i18n的支持

import translate from '@/views/camunda/translate'
const customTranslate = {
  translate: [ 'value', translate ]
}
const bpmnJS = new BpmnJS({
    additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
        customTranslate
    ],
    container: '#canvas',
    propertiesPanel: {
        parent: '#properties'
    },
    moddleExtensions: {
        camunda: camundaModdleDescriptor
    }
})

translate.js文件长这样：

const translations = {
    'General':'普通',
    'Name':'名称',
    'Executable':'是否可执行',
    'Candidate Starter Configuration':'任务发起人配置',
    'Candidate Starter Groups': '发起用户组',
    'Candidate Starter Users': '发起用户',
    'Forms': '表单',
    'Form Key': '点击输入框选择表单',
    "Candidate Users":'候选人',
    "Candidate Groups":'候选人组',
    "Assignee":'任务执行人',
    "Condition Type":'条件类型',
    'Expression':'表达式',
    'Script':'脚本',
    "Listeners":"监听器",
    "Event Type":'事件类型',
    'Listener Type':'监听器类型',
    'Java Class':'Java类',
    'Task':'任务',
    'User Task':'用户任务'
}

export default function customTranslate(template, replacements) {
  replacements = replacements || {};

  // Translate
  template = translations[template] || template;

  // Replace
  return template.replace(/{([^}]+)}/g, function(_, key) {
    return replacements[key] || '{' + key + '}';
  });
}

暂时未找到国际化的key文件，但国际化仍然很简单，复制面板显示的英文到语言文件即可：

删除不需要的面板组件

如果采用了 camunda 属性面板，那么面板组件提供器在 bpmn-js-properties-panel\lib\provider\camunda\CamundaPropertiesProvider.js 这个文件中， 例如你需要删除 version tag面板，只需要 注释掉 versionTag(generalGroup, element, translate); 这行即可

为面板内输入框绑定点击或其他事件

一般来说，任务的候选人、候选人组或者直接指定任务执行人，我们都需要从我们自己的应用中选择，而不是让用户手动输入，这个时候，我们就需要监听 这些输入框的点击事件，找了一圈没有找到符合条件的方法，看了源码之后，发现它默认的事件是 通过min-dom来绑定的，可以看源码中(bpmn-js-properties-panel\lib\PropertiesPanel.js)，的PropertiesPanel.prototype._bindListeners方法，这样的话我们只需要依葫芦画瓢，同样利用min-dom来绑定即可：

const minDom = require('min-dom')
const container = this.bpmnJS.get('propertiesPanel')._container
minDom.delegate.bind(container, 'input', 'click', function(e){})

上述代码为我们面板内的input输入框绑定了点击事件

修改值

我们不能通过点击或其他事件来为dom直接赋值，这样的话只是改变了dom的值，面板切换后会发现赋值丢失，正确的赋值仍然可以参考PropertiesPanel.prototype._bindListeners的源码，为了方面，直接为PropertiesPanle增加一个赋值方法：

PropertiesPanel.prototype.handleChange = function(inputNode) {
    var self = this
    // see if we handle a change inside a [data-entry] element.
    // if not, drop out
    var entryNode = domClosest(inputNode, '[data-entry]'),
        entryId, entry;

    // change from outside a [data-entry] element, simply ignore
    if (!entryNode) {
      return;
    }

    entryId = domAttr(entryNode, 'data-entry');
    entry = self.getEntry(entryId);

    var values = getFormControlValues(entryNode);

  var onChangeAction = domAttr(inputNode, 'data-on-change');

  if (onChangeAction) {
    var isEntryDirty = self.executeAction(entry, entryNode, onChangeAction, event);

    if (!isEntryDirty) {
      return self.update(self._current.element);
    }
  }
    self.applyChanges(entry, values, entryNode);
    self.updateState(entry, entryNode);
}

如果需要赋值，这么做即可：

 this.evt.delegateTarget.value = 'new value'
 this.bpmnJS.get('propertiesPanel').handleChange(this.evt.delegateTarget,true)