camunda bpmn-js-properties-panel简单使用

利用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文件,但国际化仍然很简单,复制面板显示的英文到语言文件即可:

12.gif

删除不需要的面板组件

如果采用了 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)
Android 利用IPP协议静默打印
camunda 利用 Parallel Gateway实现会签