Activiti流程設計器實現自定義勾選辦理人、候選人、候選組

時間  2019-11-19
標籤 activiti 流程 設計 實現 自定義 辦理 候選人 候選 简体版
原文   原文鏈接

實現效果：數據庫

TIM截圖20180705144959.png

TIM截圖20180705145008.png

版本聲明：Activiti 5.22.0異步

需求：Activiti對接業務數據庫後，使用自定義的用戶和角色表代替Activiti原生用戶、角色組等功能（實現詳情見這篇文章：https://www.jianshu.com/p/45341b440316） 後，其在線流程設計器在設置任務節點的辦理人時，若是能作到直接勾選自定義庫的辦理人、候選人、候選組，其體驗相信會上升一個臺接。下面將介紹下實現思路：url

一、重寫設定辦理人界面：spa

TIM截圖20180705143751.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>

二、重寫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;
}

核心： 一、設定辦理人界面須要渲染一個數據表格：代理

//表格屬性配置
    $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;
        }
    };

二、須要請求用戶列表和角色列表的接口，而後辦理人界面進行加載：code

//異步請求表格數據
    $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;
        });
    }

三、監聽左側切換選擇辦理人、候選人、候選組時表格從新加載數據：當選擇辦理人和候選人時，右側加載用戶列表，當選擇候選組時右側加載角色列表，並注意動態變換表格表頭；orm

//代理人(審批人)
    $scope.selectAssignee = function () {
    	$scope.selectType = 0;
    	$scope.selectTitle = '選擇代理人';
    };
    
    //候選人
    $scope.selectCandidate = function () {
    	$scope.selectType = 1;
    	$scope.selectTitle = '選擇候選人';   
    };
    
    //候選組
    $scope.selectGroup = function () {
    	$scope.selectType = 2;
    	$scope.selectTitle = '選擇候選組';
    };

表頭：blog

//選擇用戶時表頭
    $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>'
        }  
    ];
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程