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

2、js改造

 

image.png

修改上述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; } 

其中，查询用户和角色列表的接口需要后端接口提供：

//异步请求表格数据 $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.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("项目列表请求失败！"); }); } 

最终实现的效果是：
1）点击办理人输入框，右侧立即加载用户列表，支持分页，点击右侧某个用户，该用户的ID自动填入办理人输入框；
2）点击候选人输入框，右侧立即加载用户列表，支持分页，点击右侧某个用户，该用户的ID自动填入候选人输入框，可多次点击用户添加多个候选人；
3）点击候选组输入框，右侧加载角色列表，支持分页，点击某个角色，该角色编号自动填入候选组输入框，可多次点击角色添加多个候选组；

 

image.png

作者：断翅绝尘
链接：https://www.jianshu.com/p/1e21e19535d7
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。