利用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)