实现效果:

TIM截图20180705144959.png

TIM截图20180705145008.png

版本声明:Activiti 5.22.0

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

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

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()">×</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>'
}
];