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>';
    }

效果如圖

 

 

    openUserDlg(e){
      //找打輸入框
      var input = $(e).prev().children().eq(0);
      let inputValue = "user1";
      //修改輸入框文字
      $(input).val(inputValue);
      //上面只是單純修改當前輸入框文本，但是重新加載后會發現輸入框還是恢復成原來的文本
      //因為只是單純的修改了，並沒有修改綁定的業務數據信息，當重新加載的時候讀到的還是原來的文本信息

      //創建輸入框修改事件
      var changeEvent = document.createEvent ("HTMLEvents"); 
      changeEvent.initEvent ("change", true, true);
      //觸發修改事件，觸發綁定的事件，更新數據
      $(input)[0].dispatchEvent (changeEvent);       
    }