会签：流程编辑器bpmnjs改造一下

默认会签（多实例）在对象上选择工具才会出一个小图标，现在，我们先把那个会签从隐秘角落拿到属性面板来。

在resources\properties-panel\provider\activiti\parts下添加UserTaskApproverProps.js

'use strict';

var getBusinessObject = require('bpmn-js/lib/util/ModelUtil').getBusinessObject,
    is = require('bpmn-js/lib/util/ModelUtil').is,
    entryFactory = require('../../../factory/EntryFactory');
    
var cmdHelper = require('../../../helper/CmdHelper'),
    ImplementationTypeHelper = require('../../../helper/ImplementationTypeHelper');
    
var multiInstanceLoopCharacteristics = require('./implementation/MultiInstanceLoopCharacteristics');
var ReplaceMenuProvider=require('bpmn-js/lib/features/popup-menu/ReplaceMenuProvider');

module.exports = function(group, element, translate, bpmnFactory) {
  if (is(element, 'activiti:UserTaskApprover')) {
    // 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',
        get: function(element, node) {
            var bo=getBusinessObject(element);
            return {approver:bo.approver};
        },
        set: function(element, values, node) {
            var commandList = [];
            var bo = getBusinessObject(element);
            if(bo.loopCharacteristics){
                var loopCharacteristics = bo.loopCharacteristics;
                var assignee=values.approver;
                assignee=assignee.replace("${","");
                assignee=assignee.replace("}","");
                loopCharacteristics.$attrs['activiti:elementVariable'] = assignee+"_assignee";
                commandList.push(cmdHelper.updateBusinessObject(element,bo,{loopCharacteristics:loopCharacteristics}));
            }
            commandList.push(cmdHelper.updateBusinessObject(element, bo, {'approver' : values.approver || ''}));
            return commandList;
        }
    }));
    
    // 会签设置
    group.entries.push(entryFactory.comboBox({
        id: 'sequentialType',
        label: translate('Countersign'),
        emptyParameter: false,
        addCustomOption:false,
        selectOptions: [
            {value: 'notEnabled', name: translate('Not enabled countersign')},
            {value: 'sequential', name: translate('Sequential countersign')},
            {value: 'synchronize', name: translate('Synchronize countersign')}
        ],
        modelProperty : 'sequentialType',
        get: function(element, node) {
            var bo=getBusinessObject(element);
            return {sequentialType:bo.sequentialType};
        },
        set: function(element, values, node) {
            var commandList=[];
            var bo=getBusinessObject(element);
            var loopCharacteristics =bo.loopCharacteristics;
            if(values.sequentialType=="notEnabled" && bo.loopCharacteristics){
                delete bo.loopCharacteristics;
                commandList.push(cmdHelper.updateBusinessObject(element, bo, {'countersignEndCondition' : 'normal'}));
            }else{
                if(!bo.loopCharacteristics){
                    loopCharacteristics=bpmnFactory.create("bpmn:MultiInstanceLoopCharacteristics");
                }
                var isSequential=(values.sequentialType=="sequential")?true:false;
                loopCharacteristics['isSequential'] = isSequential;
                //loopCharacteristics.$attrs['isSequential'] = isSequential;
                loopCharacteristics.$attrs['activiti:collection']='assigneeUserList';
                if(bo.approver!=undefined && bo.approver!=null && bo.approver!=""){
                    var assignee=bo.approver;
                    assignee=assignee.replace("${","");
                    assignee=assignee.replace("}","");
                    loopCharacteristics.$attrs['activiti:elementVariable'] = assignee+"_assignee";
                }else{
                    loopCharacteristics.$attrs['activiti:elementVariable'] = "assignee";
                }
                commandList.push(cmdHelper.updateBusinessObject(element,bo,{loopCharacteristics:loopCharacteristics}));
            }
            commandList.push(cmdHelper.updateBusinessObject(element, bo, {'sequentialType' : values.sequentialType || 'notEnabled'}));
            return commandList;
          }
    }));
    
    //会签结束条件
    group.entries.push(entryFactory.selectBox({
        id: 'countersignEndCondition',
        label:translate('End condition'),
        emptyParameter: false,
        addCustomOption:false,
        selectOptions: [
            {value: 'normal', name: translate('Do not count votes, just complete all')},
            {value: 'allAgree', name: translate('All agree')},
            {value: 'majority', name: translate('Majority passed')},
            {value: 'completedRate', name: translate('Based on completed rate(%)')},
            {value: 'consentRate', name: translate('Based on consent rate(%)')},
        ],
        modelProperty : 'countersignEndCondition',
        get: function(element, node) {
            var bo=getBusinessObject(element);
            return {countersignEndCondition:bo.countersignEndCondition};
        },
        set: function(element, values, node) {
            var commandList=[];
            var bo=getBusinessObject(element);
            var loopCharacteristics =bo.loopCharacteristics;
            var taskCondition="";
            switch(values.countersignEndCondition){
                case "normal":
                    taskCondition="${nrOfCompletedInstances == nrOfInstances}";
                    break;
                case "allAgree":
                    taskCondition="${nrOfCompletedInstances-nrOfAgreeInstances>0}";
                    break;
                case "majority":
                    taskCondition="${nrOfAgreeInstances/nrOfCompletedInstances>0.5}";
                    break;
                case "completedRate":
                    taskCondition="${nrOfCompletedInstances/nrOfInstances*100>taskRate}";
                    break;
                case "consentRate":
                    taskCondition="${nrOfAgreeInstances/nrOfInstances*100>taskRate}";
                    break;
            }
            var completionCondition = bpmnFactory.create("bpmn:FormalExpression",{body:taskCondition})
            completionCondition.$parent =element;
            loopCharacteristics['completionCondition'] = completionCondition;
            commandList.push(cmdHelper.updateBusinessObject(element,bo,{loopCharacteristics:loopCharacteristics}));
            commandList.push(cmdHelper.updateBusinessObject(element, bo, {'countersignEndCondition' : values.countersignEndCondition || 'normal'}));
            return commandList;
        },
        hidden:function(element, node){
            var bo=getBusinessObject(element);
            return bo.sequentialType=="notEnabled";
        }
    }));
    
    //结束比例
    group.entries.push(entryFactory.textField({
        id : 'taskRate',
        //description : translate('If the ratio is higher, the countersignature task will be ended and the countersignature result will be calculated.'),
        label : translate('task rate (%)'),
        modelProperty : 'taskRate',
        hidden:function(element, node){
            var bo=getBusinessObject(element);
            return bo.sequentialType=="notEnabled" || (bo.countersignEndCondition!="completedRate" && bo.countersignEndCondition!="consentRate");
        }
    }));

  }
};

生成审核人、会签和结束条件的对象。

在\resources\properties-panel\provider\activiti的ActivitiPropertiesProvider.js文件里加入这些代码，生成标签页。

function createApproverTabGroups(element, bpmnFactory, elementRegistry, translate) {
  var approverGroup = {
    id : 'approver',
    label : translate('Approver'),
    entries: []
  };
  userTaskApproverProps(approverGroup, element, translate, bpmnFactory);
  multiInstanceProps(approverGroup, element, bpmnFactory, translate);
  
  return [approverGroup];
}

var approverTab = {
      id: 'approver',
      label: translate('Approver'),
      groups: createApproverTabGroups(element, bpmnFactory, elementRegistry, translate)
    };

return [
      generalTab,
      approverTab,
      variablesTab,
      connectorTab,
      formsTab,      
      listenersTab,
      inputOutputTab,
      fieldInjectionsTab,
      extensionsTab
    ];