Activiti流程设计器实现自定义勾选办理人、候选人、候选组

实现效果：

版本声明：Activiti 5.22.0

需求：Activiti对接业务数据库后，使用自定义的用户和角色表代替Activiti原生用户、角色组等功能（实现详情见这篇文章：https://www.jianshu.com/p/45341b440316） 后，其在线流程设计器在设置任务节点的办理人时，如果能做到直接勾选自定义库的办理人、候选人、候选组，其体验相信会上升一个台接。下面将介绍下实现思路：

1、重写设定办理人界面：

<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>--> <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button> </div> </div> </div> </div> 

2、重写properties-assignment-controller.js，废话不多说，先上代码：

/*---------------------流程设计器扩展用户与用户组--------------------*/ //参数初始化 $scope.gridData = [];//表格数据 $scope.gridDataName = 'gridData'; $scope.selectTitle = '选择代理人'; $scope.columnData = [];//表格列数据 $scope.columnDataName = 'columnData'; $scope.selectType = 0;//0-代理人，1-候选人，2-候选组 $scope.totalServerItems = 0;//表格总条数 //分页初始化 $scope.pagingOptions = { pageSizes: [10, 20, 30],//page 行数可选值 pageSize: 10, //每页行数 currentPage: 1, //当前显示页数 }; //Grid 筛选 $scope.projects = []; $scope.selectedProject = -1; //异步请求项目列表数据 $scope.getProjectDataAsync = function(){ $http({ method: 'POST', url: ACTIVITI.CONFIG.contextRoot+'/model/getProjectList' }).then(function successCallback(response) { $scope.projects = response.data; if($scope.projects.length > 0){ $scope.selectedProject = $scope.projects[0].pkid; } $scope.dataWatch(); }, function errorCallback(response) { // 请求失败执行代码 console.log("项目列表请求失败！"); }); } $scope.getProjectDataAsync(); //数据监视 $scope.dataWatch = function (){ //分页数据监视 $scope.$watch('pagingOptions', function (newValue, oldValue) { $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject); },true); //当切换类型时，初始化当前页 $scope.$watch('selectType', function (newValue, oldValue) { if(newValue != oldValue){ $scope.pagingOptions.currentPage = 1; $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject); } },true); //切换平台 $scope.change = function(x){ $scope.selectedProject = x; $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject); }; }; //异步请求表格数据 $scope.getPagedDataAsync = function(pageNum, pageSize, projectId){ var url; if($scope.selectType == 2){ url = '/model/getGroupList'; $scope.columnData = $scope.groupColumns; }else{ url = '/model/getUserList'; $scope.columnData = $scope.userColumns; } $http({ method: 'POST', url: ACTIVITI.CONFIG.contextRoot+url, params:{ 'pageNum': pageNum, 'pageSize': pageSize, 'projectId': projectId }, }).then(function successCallback(response) { $scope.gridData = response.data.rows; $scope.totalServerItems = response.data.total; }, function errorCallback(response) { // 请求失败执行代码 $scope.gridData = []; $scope.totalServerItems = 0; }); } //表格属性配置 $scope.gridOptions = { data: $scope.gridDataName, multiSelect: false,//不可多选 enablePaging: true, pagingOptions: $scope.pagingOptions, totalServerItems: 'totalServerItems', i18n:'zh-cn', showFooter: true, showSelectionCheckbox: false, columnDefs : $scope.columnDataName, beforeSelectionChange: function (event) { var data = event.entity.pkid; if($scope.selectType == 0){//选代理人 event.entity.checked = !event.selected; $scope.assignment.assignee = data; }else if($scope.selectType == 1){//候选人 var obj = {value: data}; if(!array_contain($scope.assignment.candidateUsers, obj.value)){ $scope.assignment.candidateUsers.push(obj); } }else if($scope.selectType == 2){//候选组 var obj = {value: $scope.getGroupData(event.entity)}; if(!array_contain($scope.assignment.candidateGroups, obj.value)){ $scope.assignment.candidateGroups.push(obj); } } return true; } }; $scope.getGroupData = function(data){ var prefix = ['${projectId}_','${bankEnterpriseId}_','${coreEnterpriseId}_','${chainEnterpriseId}_']; var result = prefix[data.enterpriseType] + data.roleCode; return result; }; //选择用户时表头 $scope.userColumns = [ { field : 'pkid', type:'number', displayName : '用户Id', minWidth: 100, width : '18%' }, { field : 'nickName', displayName : '昵称', minWidth: 100, width : '25%' }, { field : 'loginName', displayName : '登录名', minWidth: 100, width : '25%' }, { field : 'realName', displayName : '姓名', minWidth: 100, width : '25%' } ]; $scope.displayText = function(enterpriseType){ var tmp = ''; switch(enterpriseType){ case 0: tmp = '运营'; break; case 1: tmp = '银行'; break; case 2: tmp = '核心'; break; case 3: tmp = '链属'; break; default: tmp = 'N/A'; break; } return tmp; } //选择用户组时表头 $scope.groupColumns = [ { field : 'pkid', type:'number', displayName : '角色Id', minWidth: 100, width : '16%' }, { field : 'roleCode', displayName : '角色code', minWidth: 100, width : '16%' }, { field : 'name', displayName : '角色名称', minWidth: 100, width : '25%' }, { field : 'type', type:'number', displayName : '角色类型', minWidth: 100, width : '18%', cellTemplate : '<span>{{row.entity.type==1?"公有":"私有"}}</span>' }, { field : 'enterpriseType', displayName : '业务类型', minWidth: 100, width : '18%' ,cellTemplate : '<span>{{displayText(row.entity.enterpriseType);}}</span>' } ]; //代理人(审批人) $scope.selectAssignee = function () { $scope.selectType = 0; $scope.selectTitle = '选择代理人'; }; //候选人 $scope.selectCandidate = function () { $scope.selectType = 1; $scope.selectTitle = '选择候选人'; }; //候选组 $scope.selectGroup = function () { $scope.selectType = 2; $scope.selectTitle = '选择候选组'; }; }]; //声明----如果有此 contains 直接用最好 function array_contain(array, obj){ for (var i = 0; i < array.length; i++){ if (array[i].value == obj)//如果要求数据类型也一致，这里可使用恒等号=== return true; } return false; } 

核心： 1、设定办理人界面需要渲染一个数据表格：

 //表格属性配置 $scope.gridOptions = { data: $scope.gridDataName, multiSelect: false,//不可多选 enablePaging: true, pagingOptions: $scope.pagingOptions, totalServerItems: 'totalServerItems', i18n:'zh-cn', showFooter: true, showSelectionCheckbox: false, columnDefs : $scope.columnDataName, beforeSelectionChange: function (event) { var data = event.entity.pkid; if($scope.selectType == 0){//选代理人 event.entity.checked = !event.selected; $scope.assignment.assignee = data; }else if($scope.selectType == 1){//候选人 var obj = {value: data}; if(!array_contain($scope.assignment.candidateUsers, obj.value)){ $scope.assignment.candidateUsers.push(obj); } }else if($scope.selectType == 2){//候选组 var obj = {value: $scope.getGroupData(event.entity)}; if(!array_contain($scope.assignment.candidateGroups, obj.value)){ $scope.assignment.candidateGroups.push(obj); } } return true; } }; 

2、需要请求用户列表和角色列表的接口，然后办理人界面进行加载：

 //异步请求表格数据 $scope.getPagedDataAsync = function(pageNum, pageSize, projectId){ var url; if($scope.selectType == 2){ url = '/model/getGroupList'; $scope.columnData = $scope.groupColumns; }else{ url = '/model/getUserList'; $scope.columnData = $scope.userColumns; } $http({ method: 'POST', url: ACTIVITI.CONFIG.contextRoot+url, params:{ 'pageNum': pageNum, 'pageSize': pageSize, 'projectId': projectId }, }).then(function successCallback(response) { $scope.gridData = response.data.rows; $scope.totalServerItems = response.data.total; }, function errorCallback(response) { // 请求失败执行代码 $scope.gridData = []; $scope.totalServerItems = 0; }); } 

3、监听左侧切换选择办理人、候选人、候选组时表格重新加载数据：当选择办理人和候选人时，右侧加载用户列表，当选择候选组时右侧加载角色列表，并注意动态变换表格表头；

 //代理人(审批人) $scope.selectAssignee = function () { $scope.selectType = 0; $scope.selectTitle = '选择代理人'; }; //候选人 $scope.selectCandidate = function () { $scope.selectType = 1; $scope.selectTitle = '选择候选人'; }; //候选组 $scope.selectGroup = function () { $scope.selectType = 2; $scope.selectTitle = '选择候选组'; }; 

表头：

 //选择用户时表头 $scope.userColumns = [ { field : 'pkid', type:'number', displayName : '用户Id', minWidth: 100, width : '18%' }, { field : 'nickName', displayName : '昵称', minWidth: 100, width : '25%' }, { field : 'loginName', displayName : '登录名', minWidth: 100, width : '25%' }, { field : 'realName', displayName : '姓名', minWidth: 100, width : '25%' } ]; $scope.displayText = function(enterpriseType){ var tmp = ''; switch(enterpriseType){ case 0: tmp = '运营'; break; case 1: tmp = '银行'; break; case 2: tmp = '核心'; break; case 3: tmp = '链属'; break; default: tmp = 'N/A'; break; } return tmp; } //选择用户组时表头 $scope.groupColumns = [ { field : 'pkid', type:'number', displayName : '角色Id', minWidth: 100, width : '16%' }, { field : 'roleCode', displayName : '角色code', minWidth: 100, width : '16%' }, { field : 'name', displayName : '角色名称', minWidth: 100, width : '25%' }, { field : 'type', type:'number', displayName : '角色类型', minWidth: 100, width : '18%', cellTemplate : '<span>{{row.entity.type==1?"公有":"私有"}}</span>' }, { field : 'enterpriseType', displayName : '业务类型', minWidth: 100, width : '18%' ,cellTemplate : '<span>{{displayText(row.entity.enterpriseType);}}</span>' } ];