bpmn-js画流程图 （四）右侧属性面板中执行人，候选人与候选组可以通过 用户、机构（角色）选择

bpmn-js-properties-panel 的执行人和候选人与候选组输入框生成的代码生成文件 node_modules/bpmn-js-properties-panel/lib/factory/TextInputEntryFactory.js

在图示后面添加针对执行人,候选人与候选组可以通过 用户、机构（角色）选择的部分代码

    if( resource.id == ‘assignee‘ ){  //如果为执行人
      resource.html =
        ‘<label for="camunda-‘ + resource.id + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled" ‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden" ‘ : ‘‘) +
        (dataValueLabel ? ‘data-value="‘ + dataValueLabel + ‘"‘ : ‘‘) + ‘>‘+ label +‘</label>‘ +
        ‘<div class="bpp-field-wrapper" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘>‘ +
        ‘<div class="left-input-disabled">‘ +
        ‘<input id="camunda-‘ + resource.id + ‘" type="text" name="‘ + options.modelProperty+‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘ />‘ +

        ‘<button class="‘ + actionName + ‘" data-action="‘ + actionName + ‘" data-show="‘ + showName + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘ data-show="isHidden"‘ : ‘‘) + ‘>‘ +
        ‘<span>‘ + buttonLabel + ‘</span>‘ +
        ‘</button>‘ +
        ‘</div>‘ +
        ‘<input type="button" class="btn-select" value="选择" onclick="openSingleUserDlg(this)"/>‘ +  //点击方法
        ‘</div>‘;
    } else if(resource.id == ‘candidateUsers‘){ //如果为候选人
      resource.html =
        ‘<label for="camunda-‘ + resource.id + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled" ‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden" ‘ : ‘‘) +
        (dataValueLabel ? ‘data-value="‘ + dataValueLabel + ‘"‘ : ‘‘) + ‘>‘+ label +‘</label>‘ +
        ‘<div class="bpp-field-wrapper" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘>‘ +
        ‘<div class="left-input-disabled">‘ +
        ‘<input id="camunda-‘ + resource.id + ‘" type="text" name="‘ + options.modelProperty+‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘ />‘ +

        ‘<button class="‘ + actionName + ‘" data-action="‘ + actionName + ‘" data-show="‘ + showName + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘ data-show="isHidden"‘ : ‘‘) + ‘>‘ +
        ‘<span>‘ + buttonLabel + ‘</span>‘ +
        ‘</button>‘ +
        ‘</div>‘ +
        ‘<input type="button" class="btn-select" value="选择" onclick="openUserDlg(this)"/>‘ +  //点击方法
        ‘</div>‘;
    }else if(resource.id == ‘candidateGroups‘){ //如果为候选人组
      resource.html =
        ‘<label for="camunda-‘ + resource.id + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled" ‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden" ‘ : ‘‘) +
        (dataValueLabel ? ‘data-value="‘ + dataValueLabel + ‘"‘ : ‘‘) + ‘>‘+ label +‘</label>‘ +
        ‘<div class="bpp-field-wrapper" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘>‘ +
        ‘<div class="left-input-disabled">‘ +
        ‘<input id="camunda-‘ + resource.id + ‘" type="text" name="‘ + options.modelProperty+‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘data-show="isHidden"‘ : ‘‘) +
        ‘ />‘ +

        ‘<button class="‘ + actionName + ‘" data-action="‘ + actionName + ‘" data-show="‘ + showName + ‘" ‘ +
        (canBeDisabled ? ‘data-disable="isDisabled"‘ : ‘‘) +
        (canBeHidden ? ‘ data-show="isHidden"‘ : ‘‘) + ‘>‘ +
        ‘<span>‘ + buttonLabel + ‘</span>‘ +
        ‘</button>‘ +
        ‘</div>‘ +
        ‘<input type="button" class="btn-select" value="选择" onclick="openGroupsDlg(this)"/>‘ + //点击方法
        ‘</div>‘;
    }

效果如图

原文地址：https://www.cnblogs.com/zsg88/p/12552378.html