Activiti流程编辑器中任务节点用户输入框改为弹出选择框

桃扇骨 2022-06-11 00:47 46阅读 0赞

本文的目的是：将整合到系统中的activiti流程编辑器中任务节点的候选人和候选组输入框修改为弹出选择框，因为系统中有用户管理模块，所有的用户都要调用用户管理模块的接口，不能使用手动输入的方式。  
备注：本文中所涉及的所有文件均可在文末的云盘中找到，包括修改的文件和添加的文件。

1、找到html文件：process-editor\\editor-app\\configuration\\properties\\assignment-popup.html  
添加文件中红框部分的代码：  
![图片文件][SouthEast]  
注：ng-click是此节点的点击事件，ng-value是此节点显示的值。  
2、在文件夹process-editor\\editor-app\\configuration\\properties\\中添加文件：  
assignment-candidateGroup.html  
assignment-popup-popup.html  
这两个文件一个是选择用户的模态框，一个是选择组的模态框。文件在文末的云盘中，这是我写的两个比较简单的界面，大家可根据需要自行修改或重新编写。  
3、找到js文件：process-editor\\editor-app\\configuration\\properties-assignment-controller.js  
添加代码：  
①在此处添加红色代码  
![这里写图片描述][SouthEast 1]  
②在上图所示ctrl中添加代码块：

//Open the dialog to select users
        $scope.choseAssignment = function(flag) { 
    
            var opts = {
                template:  'editor-app/configuration/properties/assignment-popup-popup.html?version=' + Date.now(),
                scope: $scope
            };
            $scope.choseAssignmentFlag = flag;
            // Open the dialog
            $modal(opts);
        }
    
        //Open the dialog to select candidateGroups
        $scope.choseCandidateGroups = function(){ 
            var opts = {
                template:  'editor-app/configuration/properties/assignment-candidateGroup.html?version=' + Date.now(),
                scope: $scope
            };
            // Open the dialog
            $modal(opts);
        }
    //因新打开的界面上选定的数据要传输到当前modal中，所以使用此方式，这是angular.js中子窗口向父窗口传输数据的方式
    $scope.$on('choseAssigneesStr', function(event,data){ 
              $scope.assignment.candidateUsers[0].value = data;
        });
        $scope.$on('choseAssigneeStr', function(event,data){ 
              $scope.assignment.assignee = data;
        });
        $scope.$on('choseCandidateGroupsStr', function(event,data){ 
            $scope.assignment.candidateGroups[0].value = data;
        });

③在①的ctrl之外添加代码块：

//用户选择模态框的控制器
    var KisBpmChoseAssignmentCtrl = ['$scope', '$http', function($scope, $http) { 
        //初始化左边菜单栏数据，并触发第一个菜单的点击事件
        var roles = [];
        var initId;
        $scope.getAllRoles = function (successCallback) { 
            $http({    
                method: 'get',
                headers: {
       'Accept': 'application/json',
                          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                url: '[URL]'})  //此处是获取所需角色的URL
    
                .success(function (data, status, headers, config) { 
                    //根据需要处理数据，将其封装成List<json>格式的数据，json中包含id和name（注：json中的数据可根据需要自行增删）
                    var obj = data.obj.object;
                    for (var i=0; i<obj.length; i++) {
                        if (i==0) {
                            initId = obj[i].id + "";
                            $scope.getAllAccountByRole(initId);
                        }
                        roles.push({id:obj[i].id,name:obj[i].name});
                    }
                    //将封装好的roles数据赋值给全局变量roles
                    $scope.roles = roles;
                })
                .error(function (data, status, headers, config) { 
                });
        };
        $scope.getAllRoles(function(){ });
    
         $scope.getAllAccountByRole = function(value) { 
            $http({    
                method: 'get',
                headers: {
       'Accept': 'application/json',
                          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                url: '[URL]'+value})   //根据roleId获取当前组的用户数据的URL,value为roleId
    
                .success(function (data, status, headers, config) { 
                    //封装数据
                    var obj = data.obj;
                    if (data != null) {
                        var accounts = [];
                        for (var i=0; i<obj.length; i++) {
                            accounts.push({id:obj[i].id, code : obj[i].employeeCode, name : obj[i].userName, index:i});
                        }
                        $scope.accounts=accounts;
                    }
                })
                .error(function (data, status, headers, config) { 
                });
        };
    
        // Close button handler
        $scope.close = function() { 
            $scope.$hide();
        };
        $scope.formData = {};
        $scope.candidateUser={};
    
        //Save Data
        $scope.save = function() { 
            if ($scope.choseAssignmentFlag == "assignee") {
                var choseAssignee = $scope.formData.assignee;
                //子窗口向父窗口传输数据
                $scope.$emit('choseAssigneeStr', choseAssignee);
            } else if ($scope.choseAssignmentFlag == "assignees") {
                var choseAssignees = $scope.accounts;
                var choseAssigneesStr = "";
                for (var i=0;i<choseAssignees.length; i++) {
                    if (choseAssignees[i].selected) {
                        choseAssigneesStr += choseAssignees[i].id + ",";
                    }
                }
                choseAssigneesStr = choseAssigneesStr.substring(0,choseAssigneesStr.length-1);
                //子窗口向父窗口传输数据
                $scope.$emit('choseAssigneesStr', choseAssigneesStr);
            }
            $scope.close();
        };
        $scope.selectAll = function($event) { 
            var checkbox = $event.target;
            var choseAssignees = $scope.accounts;
            for (var i=0;i<choseAssignees.length; i++) {
                if (checkbox.checked) {
                    choseAssignees[i].selected = true;
                } else {
                    choseAssignees[i].selected = false;
                }
            }
            $scope.accounts = choseAssignees;
        }
    }];
    
    //组选择模态框的控制器
    var KisBpmChoseCandidateGroupsCtrl = ['$scope', '$http', function($scope, $http) { 
    
        var candidateGroups = [];
        $scope.getAllRoles = function (successCallback) { 
            $http({    
                method: 'get',
                headers: {
       'Accept': 'application/json',
                          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                url: '/role/list'})
    
                .success(function (data, status, headers, config) { 
                    var obj = data.obj.object;
                    for (var i=0; i<obj.length; i++) {
                        candidateGroups.push({id:obj[i].id,name:obj[i].name,description:obj[i].description});
                    }
                    $scope.candidateGroups = candidateGroups;
                })
                .error(function (data, status, headers, config) { 
                });
        };
        $scope.getAllRoles(function() { 
        });
    
        //关闭按钮的点击事件
        // Close button handler
        $scope.close = function() { 
            $scope.$hide();
        };
    
        //保存按钮的点击事件
        $scope.save = function() { 
            var choseCandidateGroups = $scope.candidateGroups;
            var choseCandidateGroupsStr = "";
            for (var i=0;i<choseCandidateGroups.length; i++) {
                if (choseCandidateGroups[i].selected) {
                    choseCandidateGroupsStr += choseCandidateGroups[i].id + ",";
                }
            }
            choseCandidateGroupsStr = choseCandidateGroupsStr.substring(0,choseCandidateGroupsStr.length-1);
            //子窗口向父窗口传输数据
            $scope.$emit('choseCandidateGroupsStr', choseCandidateGroupsStr);
            $scope.close();
        }
    
        //全选框的点击事件
        $scope.selectAll = function($event) { 
            var checkbox = $event.target;
            var candidateGroups = $scope.candidateGroups;
            for (var i=0;i<candidateGroups.length; i++) {
                if (checkbox.checked) {
                    candidateGroups[i].selected = true;
                } else {
                    candidateGroups[i].selected = false;
                }
            }
            $scope.candidateGroups = candidateGroups;
        }
    }];

4、修改后点击任务派遣效果如图：  
![这里写图片描述][SouthEast 2]

点击任务执行人或候选人的输入框效果如图：  
![这里写图片描述][SouthEast 3]

点击候选组的输入框的效果如图：  
![这里写图片描述][SouthEast 4]

备注：百度云盘：[http://pan.baidu.com/s/1kUPPqsB][http_pan.baidu.com_s_1kUPPqsB]

[SouthEast]: /images/20220611/0cf8dd379b884161bb4bf7dffd2c2af2.png
[SouthEast 1]: /images/20220611/5ddae5f286b04e2f92d4b7a512c31b72.png
[SouthEast 2]: /images/20220611/62da807a0ed4418e8a9583fb9fc96c35.png
[SouthEast 3]: /images/20220611/5561c98159fa43ff87b7b811cefafd09.png
[SouthEast 4]: /images/20220611/c3f007bf5568451c8c66d6419650960d.png
[http_pan.baidu.com_s_1kUPPqsB]: http://pan.baidu.com/s/1kUPPqsB