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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。