Activiti流程編輯器針對自定義用戶角色表優化改造

本文目的：
針對自定義的用戶、角色表，對Activiti的在線流程設計器進行優化改造，使之能直接在圖形界面上完成對節點辦理人、候選人、候選組的配置，不須要先去查數據庫中的用戶ID、角色ID等信息再填入。
先上一張實現效果圖：

 

image.png

一、頁面改造

 

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> 

二、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 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。