activiti5.22代理人、候选人改造--前端

本文借鉴断翅绝尘Activiti流程编辑器针对自定义用户角色表优化改造一文

针对自定义的用户、角色表，对Activiti的在线流程设计器进行优化改造，使之能直接在图形界面上完成对节点办理人、候选人、候选组的配置，不需要先去查数据库中的用户ID、角色ID等信息再填入。
先上一张实现效果图：

1、页面改造

修改上图中的页面，主要是修改页面布局，以及将输入框添加一些事件，代码如下：

<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改造

修改上述js文件，代码如下：

/*
 * Activiti Modeler component part of the Activiti project
 * Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.
 * 
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this library; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 */

/*
 * Assignment
 */
var KisBpmAssignmentCtrl = [
  "$scope",
  "$modal",
  function ($scope, $modal) {
    // Config for the modal window
    var opts = {
      template:
        "editor-app/configuration/properties/assignment-popup.html?version=" +
        Date.now(),
      scope: $scope,
    };

    // Open the dialog
    $modal(opts);
  },
];

var KisBpmAssignmentPopupCtrl = [
  "$scope",
  "$http",
  function ($scope, $http) {
    // Put json representing assignment on scope
    if (
      $scope.property.value !== undefined &&
      $scope.property.value !== null &&
      $scope.property.value.assignment !== undefined &&
      $scope.property.value.assignment !== null
    ) {
      $scope.assignment = $scope.property.value.assignment;
    } else {
      $scope.assignment = {};
    }

    if (
      $scope.assignment.candidateUsers == undefined ||
      $scope.assignment.candidateUsers.length == 0
    ) {
      $scope.assignment.candidateUsers = [{ value: "" }];
    }

    // Click handler for + button after enum value
    var userValueIndex = 1;
    $scope.addCandidateUserValue = function (index) {
      $scope.assignment.candidateUsers.splice(index + 1, 0, {
        value: "value " + userValueIndex++,
      });
    };

    // Click handler for - button after enum value
    $scope.removeCandidateUserValue = function (index) {
      $scope.assignment.candidateUsers.splice(index, 1);
    };

    if (
      $scope.assignment.candidateGroups == undefined ||
      $scope.assignment.candidateGroups.length == 0
    ) {
      $scope.assignment.candidateGroups = [{ value: "" }];
    }

    var groupValueIndex = 1;
    $scope.addCandidateGroupValue = function (index) {
      $scope.assignment.candidateGroups.splice(index + 1, 0, {
        value: "value " + groupValueIndex++,
      });
    };

    // Click handler for - button after enum value
    $scope.removeCandidateGroupValue = function (index) {
      $scope.assignment.candidateGroups.splice(index, 1);
    };

    $scope.save = function () {
      $scope.property.value = {};
      handleAssignmentInput($scope);
      $scope.property.value.assignment = $scope.assignment;

      $scope.updatePropertyInModel($scope.property);
      $scope.close();
    };

    // Close button handler
    $scope.close = function () {
      handleAssignmentInput($scope);
      $scope.property.mode = "read";
      $scope.$hide();
    };

    var handleAssignmentInput = function ($scope) {
      if ($scope.assignment.candidateUsers) {
        var emptyUsers = true;
        var toRemoveIndexes = [];
        for (var i = 0; i < $scope.assignment.candidateUsers.length; i++) {
          if ($scope.assignment.candidateUsers[i].value != "") {
            emptyUsers = false;
          } else {
            toRemoveIndexes[toRemoveIndexes.length] = i;
          }
        }

        for (var i = 0; i < toRemoveIndexes.length; i++) {
          $scope.assignment.candidateUsers.splice(toRemoveIndexes[i], 1);
        }

        if (emptyUsers) {
          $scope.assignment.candidateUsers = undefined;
        }
      }

      if ($scope.assignment.candidateGroups) {
        var emptyGroups = true;
        var toRemoveIndexes = [];
        for (var i = 0; i < $scope.assignment.candidateGroups.length; i++) {
          if ($scope.assignment.candidateGroups[i].value != "") {
            emptyGroups = false;
          } else {
            toRemoveIndexes[toRemoveIndexes.length] = i;
          }
        }

        for (var i = 0; i < toRemoveIndexes.length; i++) {
          $scope.assignment.candidateGroups.splice(toRemoveIndexes[i], 1);
        }

        if (emptyGroups) {
          $scope.assignment.candidateGroups = undefined;
        }
      }
    };
   
    /*---------------------流程设计器扩展用户与用户组--------------------*/
       
    //参数初始化
    $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）点击候选组输入框，右侧加载角色列表，支持分页，点击某个角色，该角色编号自动填入候选组输入框，可多次点击角色添加多个候选组；

3、token获取对接后台

集成模型设计，例如：

<template>
  <div style="position:relative;height: 100%;">
    <iframe
      id="iframe"
      :src="modelerUrl"
      frameborder="0"
      width="100%"
      height="720px"
      scrolling="auto"
    />
    <Spin v-if="modelerLoading" fix size="large" />
  </div>
</template>
 
<script>
//获取token的方式可能不一样，视情况而定
import { getToken } from '@/utils/auth'
export default {
  name: 'ModelDefine',
  components: {},
 
  data() {
    return {
      modelerLoading: true,
      modelerUrl: '/static/modeler.html?modelId=' + this.$route.query.id + '&time=' + new Date().getTime()
    }
  },
  computed: {
    token() {
      return 'Bearer ' + getToken()
    }
  },
  created() {},
  mounted() {
    window.getMyVue = this
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.iframe {
  width: 100%;
  height: calc(100vh - 154px);
}
</style>

打开static/modeler.html添加一下代码

  <script>
    (
      function (open) {
        XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
          open.call(this, method, url, async, user, pass);  //this指XMLHttpRequest
          this.setRequestHeader("Authorization", window.parent.getMyVue.token); //mounted时传入的token
        };
      }
    )(XMLHttpRequest.prototype.open);
  </script>

修改接口配置static/editor-app/app-cfg.js

 

完成上述几步，前端集成基本结束。