Activiti流程编辑器中任务节点用户输入框改为弹出选择框

本文的目的是：将整合到系统中的activiti流程编辑器中任务节点的候选人和候选组输入框修改为弹出选择框，因为系统中有用户管理模块，所有的用户都要调用用户管理模块的接口，不能使用手动输入的方式。
备注：本文中所涉及的所有文件均可在文末的云盘中找到，包括修改的文件和添加的文件。

1、找到html文件：process-editor\editor-app\configuration\properties\assignment-popup.html
添加文件中红框部分的代码：

注：ng-click是此节点的点击事件，ng-value是此节点显示的值。
2、在文件夹process-editor\editor-app\configuration\properties\中添加文件：
assignment-candidateGroup.html
assignment-popup-popup.html
这两个文件一个是选择用户的模态框，一个是选择组的模态框。文件在文末的云盘中，这是我写的两个比较简单的界面，大家可根据需要自行修改或重新编写。
3、找到js文件：process-editor\editor-app\configuration\properties-assignment-controller.js
添加代码：
①在此处添加红色代码

②在上图所示ctrl中添加代码块：

//Open the dialog to select users
    $scope.choseAssignment = function(flag) {

        var opts = {
            template:  'editor-app/configuration/properties/assignment-popup-popup.html?version=' + Date.now(),
            scope: $scope
        };
        $scope.choseAssignmentFlag = flag;
        // Open the dialog
        $modal(opts);
    }

    //Open the dialog to select candidateGroups
    $scope.choseCandidateGroups = function(){
        var opts = {
            template:  'editor-app/configuration/properties/assignment-candidateGroup.html?version=' + Date.now(),
            scope: $scope
        };
        // Open the dialog
        $modal(opts);
    }
//因新打开的界面上选定的数据要传输到当前modal中，所以使用此方式，这是angular.js中子窗口向父窗口传输数据的方式
$scope.$on('choseAssigneesStr', function(event,data){
          $scope.assignment.candidateUsers[0].value = data;
    });
    $scope.$on('choseAssigneeStr', function(event,data){
          $scope.assignment.assignee = data;
    });
    $scope.$on('choseCandidateGroupsStr', function(event,data){
        $scope.assignment.candidateGroups[0].value = data;
    });

③在①的ctrl之外添加代码块：

//用户选择模态框的控制器
var KisBpmChoseAssignmentCtrl = ['$scope', '$http', function($scope, $http) {
    //初始化左边菜单栏数据，并触发第一个菜单的点击事件
    var roles = [];
    var initId;
    $scope.getAllRoles = function (successCallback) {
        $http({    
            method: 'get',
            headers: {'Accept': 'application/json',
                      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            url: '[URL]'})  //此处是获取所需角色的URL

            .success(function (data, status, headers, config) {
                //根据需要处理数据，将其封装成List<json>格式的数据，json中包含id和name（注：json中的数据可根据需要自行增删）
                var obj = data.obj.object;
                for (var i=0; i<obj.length; i++) {
                    if (i==0) {
                        initId = obj[i].id + "";
                        $scope.getAllAccountByRole(initId);
                    }
                    roles.push({id:obj[i].id,name:obj[i].name});
                }
                //将封装好的roles数据赋值给全局变量roles
                $scope.roles = roles;
            })
            .error(function (data, status, headers, config) {
            });
    };
    $scope.getAllRoles(function(){});

     $scope.getAllAccountByRole = function(value) {
        $http({    
            method: 'get',
            headers: {'Accept': 'application/json',
                      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            url: '[URL]'+value})   //根据roleId获取当前组的用户数据的URL,value为roleId

            .success(function (data, status, headers, config) {
                //封装数据
                var obj = data.obj;
                if (data != null) {
                    var accounts = [];
                    for (var i=0; i<obj.length; i++) {
                        accounts.push({id:obj[i].id, code : obj[i].employeeCode, name : obj[i].userName, index:i});
                    }
                    $scope.accounts=accounts;
                }
            })
            .error(function (data, status, headers, config) {
            });
    };

    // Close button handler
    $scope.close = function() {
        $scope.$hide();
    };
    $scope.formData = {};
    $scope.candidateUser={};

    //Save Data
    $scope.save = function() {
        if ($scope.choseAssignmentFlag == "assignee") {
            var choseAssignee = $scope.formData.assignee;
            //子窗口向父窗口传输数据
            $scope.$emit('choseAssigneeStr', choseAssignee);
        } else if ($scope.choseAssignmentFlag == "assignees") {
            var choseAssignees = $scope.accounts;
            var choseAssigneesStr = "";
            for (var i=0;i<choseAssignees.length; i++) {
                if (choseAssignees[i].selected) {
                    choseAssigneesStr += choseAssignees[i].id + ",";
                }
            }
            choseAssigneesStr = choseAssigneesStr.substring(0,choseAssigneesStr.length-1);
            //子窗口向父窗口传输数据
            $scope.$emit('choseAssigneesStr', choseAssigneesStr);
        }
        $scope.close();
    };
    $scope.selectAll = function($event) {
        var checkbox = $event.target;
        var choseAssignees = $scope.accounts;
        for (var i=0;i<choseAssignees.length; i++) {
            if (checkbox.checked) {
                choseAssignees[i].selected = true;
            } else {
                choseAssignees[i].selected = false;
            }
        }
        $scope.accounts = choseAssignees;
    }
}];

//组选择模态框的控制器
var KisBpmChoseCandidateGroupsCtrl = ['$scope', '$http', function($scope, $http) {

    var candidateGroups = [];
    $scope.getAllRoles = function (successCallback) {
        $http({    
            method: 'get',
            headers: {'Accept': 'application/json',
                      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            url: '/role/list'})

            .success(function (data, status, headers, config) {
                var obj = data.obj.object;
                for (var i=0; i<obj.length; i++) {
                    candidateGroups.push({id:obj[i].id,name:obj[i].name,description:obj[i].description});
                }
                $scope.candidateGroups = candidateGroups;
            })
            .error(function (data, status, headers, config) {
            });
    };
    $scope.getAllRoles(function() {
    });

    //关闭按钮的点击事件
    // Close button handler
    $scope.close = function() {
        $scope.$hide();
    };

    //保存按钮的点击事件
    $scope.save = function() {
        var choseCandidateGroups = $scope.candidateGroups;
        var choseCandidateGroupsStr = "";
        for (var i=0;i<choseCandidateGroups.length; i++) {
            if (choseCandidateGroups[i].selected) {
                choseCandidateGroupsStr += choseCandidateGroups[i].id + ",";
            }
        }
        choseCandidateGroupsStr = choseCandidateGroupsStr.substring(0,choseCandidateGroupsStr.length-1);
        //子窗口向父窗口传输数据
        $scope.$emit('choseCandidateGroupsStr', choseCandidateGroupsStr);
        $scope.close();
    }

    //全选框的点击事件
    $scope.selectAll = function($event) {
        var checkbox = $event.target;
        var candidateGroups = $scope.candidateGroups;
        for (var i=0;i<candidateGroups.length; i++) {
            if (checkbox.checked) {
                candidateGroups[i].selected = true;
            } else {
                candidateGroups[i].selected = false;
            }
        }
        $scope.candidateGroups = candidateGroups;
    }
}];

4、修改后点击任务派遣效果如图：

点击任务执行人或候选人的输入框效果如图：

点击候选组的输入框的效果如图：

备注：百度云盘：http://pan.baidu.com/s/1kUPPqsB