Activiti流程编辑器针对自定义用户角色表优化改造

本文目的：
针对自定义的用户、角色表，对Activiti的在线流程设计器进行优化改造，使之能直接在图形界面上完成对节点办理人、候选人、候选组的配置，不需要先去查数据库中的用户ID、角色ID等信息再填入。
先上一张实现效果图：

 

image.png

1、页面改造

 

image.png

修改上图中的页面，主要是修改页面布局，以及将输入框添加一些事件，代码如下：

<div style="width:100%;height:100%;" class="modal" ng-controller="KisBpmAssignmentPopupCtrl">
    <div style="width:80%;height:100%;" class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true" ng-click="close()">&times;</button>
                <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2>
            </div>
            <div class="modal-body">
                <div class="row row-no-gutter">
                    <div class="col-xs-4">
                        <div class="row row-no-gutter">
                            <div class="form-group">
                                <label for="assigneeField">{{'PROPERTY.ASSIGNMENT.ASSIGNEE'
                                    | translate}}</label> <input type="text" id="assigneeField"
                                    class="form-control" ng-model="assignment.assignee"
                                    ng-click="selectAssignee()" 
                                    placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}" />
                            </div>
                        </div>
        
                        <div class="row row-no-gutter">
                            <div class="form-group">
                                <label for="userField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS'
                                    | translate}}</label>
                                <div ng-repeat="candidateUser in assignment.candidateUsers">
                                    <input id="userField" class="form-control" type="text"
                                        ng-model="candidateUser.value"
                                        ng-click="selectCandidate()" /> <i
                                        class="glyphicon glyphicon-minus clickable-property"
                                        ng-click="removeCandidateUserValue($index)"></i> <i
                                        ng-if="$index == (assignment.candidateUsers.length - 1)"
                                        class="glyphicon glyphicon-plus clickable-property"
                                        ng-click="addCandidateUserValue($index)"></i>
                                </div>
                            </div>
        
                            <div class="form-group">
                                <label for="groupField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS'
                                    | translate}}</label>
                                <div ng-repeat="candidateGroup in assignment.candidateGroups">
                                    <input id="groupField" class="form-control" type="text"
                                        ng-model="candidateGroup.value" 
                                        ng-click="selectGroup()" />
                                    <i class="glyphicon glyphicon-minus clickable-property"
                                        ng-click="removeCandidateGroupValue($index)"></i> 
                                    <i ng-if="$index == (assignment.candidateGroups.length - 1)"
                                        class="glyphicon glyphicon-plus clickable-property"
                                        ng-click="addCandidateGroupValue($index)"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-8">
                        <span class="mb10">
                            <strong>{{selectTitle}}</strong>
                            <select class="pull-right" ng-change="change(selectedProject)"
                                 id="project" ng-if="projects.length>0" ng-model="selectedProject" ng-options="project.pkid as project.projectName for project in projects">
                            </select>
                        </span>
                        <div style="min-height:350px;" class="default-grid ng-scope ngGrid ng1521010657341 unselectable" ng-grid="gridOptions"></div>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <!--  <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>-->