流程编辑器bpmnjs的改造3：加一个审批人的设置

默认的设计器有代理人、候选用户和候选组，但是并不能满足实际的业务需求，我们需要对它进行改造，使得我们能够按照自定义的规则来生成用户任务节点的审批人。

1、在bpmnjs里面加一个审批人的输入部件

打开resources/properties-panel/provider/activiti/parts/UserTaskProps.js，加入

module.exports = function(group, element, translate) {

if (is(element, 'activiti:Assignable')) {

// Approver

group.entries.push(entryFactory.textField({

id : 'approver',

description : translate('Specify approvers. If there are multiple approvers, enter the candidate user list.'),

label : translate('Approver'),

modelProperty : 'approver'

}));

红字是我加入的内容，一个输入框。

打开resources/activiti.json，搜索”assignee“，然后照着它抄一个在上面：

{

"name": "approver",

"isAttr": true,

"type": "String"

},

接着打开resources/factory/TextInputEntryFactory.js，加入：

if(resource.id == 'approver'){ //如果为审批人

resource.html =

'<label for="camunda-' + escapeHTML(resource.id) + '" ' +

(canBeDisabled ? 'data-disable="isDisabled" ' : '') +

(canBeHidden ? 'data-show="isHidden" ' : '') +

(dataValueLabel ? 'data-value="' + escapeHTML(dataValueLabel) + '"' : '') + '>'+ escapeHTML(label) +'</label>' +

'<div class="bpp-field-wrapper" ' +

(canBeDisabled ? 'data-disable="isDisabled"' : '') +

(canBeHidden ? 'data-show="isHidden"' : '') +

'>' +

'<div class="left-input-disabled">' +

'<input id="camunda-' + escapeHTML(resource.id) + '" type="text" name="' + escapeHTML(options.modelProperty) + '" ' +

(canBeDisabled ? 'data-disable="isDisabled"' : '') +

(canBeHidden ? 'data-show="isHidden"' : '') +

' style="width:80%;float:left"/>' +

'</div>'+

'<input type="button" class="candidate-select" value="选择" οnclick="taskApproverSelect(this)" style="width:18%;float:right"/>' + //点击方法

'</div>';

}

判断当生成审批人的对象时候，在后面给它加一个按钮。打开translationsGerman.js，把英文对应着转换一下。

在打开bpmnjs目录下打开cmd，输入grunt，等待编译完成，然后在浏览器打开设计器，弄一个用户节点过去，可以看到一个新的属性在里面了，大概长这样。