本文的目的是：将整合到系统中的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
