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

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

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

    1、页面改造

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

    1. <div style="width:100%;height:100%;" class="modal" ng-controller="KisBpmAssignmentPopupCtrl">
    2.     <div style="width:80%;height:100%;" class="modal-dialog">
    3.         <div class="modal-content">
    4.             <div class="modal-header">
    5.                 <button type="button" class="close" data-dismiss="modal"
    6.                     aria-hidden="true" ng-click="close()">&times;</button>
    7.                 <h2 translate>PROPERTY.ASSIGNMENT.TITLE</h2>
    8.             </div>
    9.             <div class="modal-body">
    10.                 <div class="row row-no-gutter">
    11.                     <div class="col-xs-4">
    12.                         <div class="row row-no-gutter">
    13.                             <div class="form-group">
    14.                                 <label for="assigneeField">{{'PROPERTY.ASSIGNMENT.ASSIGNEE'
    15.                                     | translate}}</label> <input type="text" id="assigneeField"
    16.                                     class="form-control" ng-model="assignment.assignee"
    17.                                     ng-click="selectAssignee()" 
    18.                                     placeholder="{{'PROPERTY.ASSIGNMENT.ASSIGNEE_PLACEHOLDER' | translate}}" />
    19.                             </div>
    20.                         </div>
    21.         
    22.                         <div class="row row-no-gutter">
    23.                             <div class="form-group">
    24.                                 <label for="userField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_USERS'
    25.                                     | translate}}</label>
    26.                                 <div ng-repeat="candidateUser in assignment.candidateUsers">
    27.                                     <input id="userField" class="form-control" type="text"
    28.                                         ng-model="candidateUser.value"
    29.                                         ng-click="selectCandidate()" /> <i
    30.                                         class="glyphicon glyphicon-minus clickable-property"
    31.                                         ng-click="removeCandidateUserValue($index)"></i> <i
    32.                                         ng-if="$index == (assignment.candidateUsers.length - 1)"
    33.                                         class="glyphicon glyphicon-plus clickable-property"
    34.                                         ng-click="addCandidateUserValue($index)"></i>
    35.                                 </div>
    36.                             </div>
    37.         
    38.                             <div class="form-group">
    39.                                 <label for="groupField">{{'PROPERTY.ASSIGNMENT.CANDIDATE_GROUPS'
    40.                                     | translate}}</label>
    41.                                 <div ng-repeat="candidateGroup in assignment.candidateGroups">
    42.                                     <input id="groupField" class="form-control" type="text"
    43.                                         ng-model="candidateGroup.value" 
    44.                                         ng-click="selectGroup()" />
    45.                                     <i class="glyphicon glyphicon-minus clickable-property"
    46.                                         ng-click="removeCandidateGroupValue($index)"></i> 
    47.                                     <i ng-if="$index == (assignment.candidateGroups.length - 1)"
    48.                                         class="glyphicon glyphicon-plus clickable-property"
    49.                                         ng-click="addCandidateGroupValue($index)"></i>
    50.                                 </div>
    51.                             </div>
    52.                         </div>
    53.                     </div>
    54.                     <div class="col-xs-8">
    55.                         <span class="mb10">
    56.                             <strong>{{selectTitle}}</strong>
    57.                             <select class="pull-right" ng-change="change(selectedProject)"
    58.                                  id="project" ng-if="projects.length>0" ng-model="selectedProject" ng-options="project.pkid as project.projectName for project in projects">
    59.                             </select>
    60.                         </span>
    61.                         <div style="min-height:350px;" class="default-grid ng-scope ngGrid ng1521010657341 unselectable" ng-grid="gridOptions"></div>
    62.                     </div>
    63.                 </div>
    64.             </div>
    65.             
    66.             <div class="modal-footer">
    67.                 <!--  <button ng-click="close()" class="btn btn-primary" translate>ACTION.CANCEL</button>-->
    68.                 <button ng-click="save()" class="btn btn-primary" translate>ACTION.SAVE</button>
    69.             </div>
    70.         </div>
    71.     </div>
    72. </div>

    2、js改造

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

    1. /*
    2.  * Activiti Modeler component part of the Activiti project
    3.  * Copyright 2005-2014 Alfresco Software, Ltd. All rights reserved.
    4.  * 
    5.  * This library is free software; you can redistribute it and/or
    6.  * modify it under the terms of the GNU Lesser General Public
    7.  * License as published by the Free Software Foundation; either
    8.  * version 2.1 of the License, or (at your option) any later version.
    9.  *
    10.  * This library is distributed in the hope that it will be useful,
    11.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
    12.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    13.  * Lesser General Public License for more details.
    15.  * You should have received a copy of the GNU Lesser General Public
    16.  * License along with this library; if not, write to the Free Software
    17.  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
    18.  */
    20. /*
    21.  * Assignment
    22.  */
    23. var KisBpmAssignmentCtrl = [
    24.   "$scope",
    25.   "$modal",
    26.   function ($scope, $modal) {
    27.     // Config for the modal window
    28.     var opts = {
    29.       template:
    30.         "editor-app/configuration/properties/assignment-popup.html?version=" +
    31.         Date.now(),
    32.       scope: $scope,
    33.     };
    34.  
    35.     // Open the dialog
    36.     $modal(opts);
    37.   },
    38. ];
    39.  
    40. var KisBpmAssignmentPopupCtrl = [
    41.   "$scope",
    42.   "$http",
    43.   function ($scope, $http) {
    44.     // Put json representing assignment on scope
    45.     if (
    46.       $scope.property.value !== undefined &&
    47.       $scope.property.value !== null &&
    48.       $scope.property.value.assignment !== undefined &&
    49.       $scope.property.value.assignment !== null
    50.     ) {
    51.       $scope.assignment = $scope.property.value.assignment;
    52.     } else {
    53.       $scope.assignment = {};
    54.     }
    55.  
    56.     if (
    57.       $scope.assignment.candidateUsers == undefined ||
    58.       $scope.assignment.candidateUsers.length == 0
    59.     ) {
    60.       $scope.assignment.candidateUsers = [{ value: "" }];
    61.     }
    62.  
    63.     // Click handler for + button after enum value
    64.     var userValueIndex = 1;
    65.     $scope.addCandidateUserValue = function (index) {
    66.       $scope.assignment.candidateUsers.splice(index + 1, 0, {
    67.         value: "value " + userValueIndex++,
    68.       });
    69.     };
    70.  
    71.     // Click handler for - button after enum value
    72.     $scope.removeCandidateUserValue = function (index) {
    73.       $scope.assignment.candidateUsers.splice(index, 1);
    74.     };
    75.  
    76.     if (
    77.       $scope.assignment.candidateGroups == undefined ||
    78.       $scope.assignment.candidateGroups.length == 0
    79.     ) {
    80.       $scope.assignment.candidateGroups = [{ value: "" }];
    81.     }
    82.  
    83.     var groupValueIndex = 1;
    84.     $scope.addCandidateGroupValue = function (index) {
    85.       $scope.assignment.candidateGroups.splice(index + 1, 0, {
    86.         value: "value " + groupValueIndex++,
    87.       });
    88.     };
    89.  
    90.     // Click handler for - button after enum value
    91.     $scope.removeCandidateGroupValue = function (index) {
    92.       $scope.assignment.candidateGroups.splice(index, 1);
    93.     };
    94.  
    95.     $scope.save = function () {
    96.       $scope.property.value = {};
    97.       handleAssignmentInput($scope);
    98.       $scope.property.value.assignment = $scope.assignment;
    99.  
    100.       $scope.updatePropertyInModel($scope.property);
    101.       $scope.close();
    102.     };
    103.  
    104.     // Close button handler
    105.     $scope.close = function () {
    106.       handleAssignmentInput($scope);
    107.       $scope.property.mode = "read";
    108.       $scope.$hide();
    109.     };
    110.  
    111.     var handleAssignmentInput = function ($scope) {
    112.       if ($scope.assignment.candidateUsers) {
    113.         var emptyUsers = true;
    114.         var toRemoveIndexes = [];
    115.         for (var i = 0; i < $scope.assignment.candidateUsers.length; i++) {
    116.           if ($scope.assignment.candidateUsers[i].value != "") {
    117.             emptyUsers = false;
    118.           } else {
    119.             toRemoveIndexes[toRemoveIndexes.length] = i;
    120.           }
    121.         }
    122.  
    123.         for (var i = 0; i < toRemoveIndexes.length; i++) {
    124.           $scope.assignment.candidateUsers.splice(toRemoveIndexes[i], 1);
    125.         }
    126.  
    127.         if (emptyUsers) {
    128.           $scope.assignment.candidateUsers = undefined;
    129.         }
    130.       }
    131.  
    132.       if ($scope.assignment.candidateGroups) {
    133.         var emptyGroups = true;
    134.         var toRemoveIndexes = [];
    135.         for (var i = 0; i < $scope.assignment.candidateGroups.length; i++) {
    136.           if ($scope.assignment.candidateGroups[i].value != "") {
    137.             emptyGroups = false;
    138.           } else {
    139.             toRemoveIndexes[toRemoveIndexes.length] = i;
    140.           }
    141.         }
    142.  
    143.         for (var i = 0; i < toRemoveIndexes.length; i++) {
    144.           $scope.assignment.candidateGroups.splice(toRemoveIndexes[i], 1);
    145.         }
    146.  
    147.         if (emptyGroups) {
    148.           $scope.assignment.candidateGroups = undefined;
    149.         }
    150.       }
    151.     };
    152.    
    153.     /*---------------------流程设计器扩展用户与用户组--------------------*/
    154.        
    155.     //参数初始化
    156.     $scope.gridData = [];//表格数据
    157.     $scope.gridDataName = 'gridData';
    158.     $scope.selectTitle = '选择代理人';
    159.     $scope.columnData = [];//表格列数据
    160.     $scope.columnDataName = 'columnData';
    161.     $scope.selectType = 0;//0-代理人，1-候选人，2-候选组
    162.     $scope.totalServerItems = 0;//表格总条数
    163.     //分页初始化
    164.     $scope.pagingOptions = {
    165.         pageSizes: [10, 20, 30],//page 行数可选值  
    166.         pageSize: 10, //每页行数  
    167.         currentPage: 1, //当前显示页数 
    168.     };
    169.     //Grid 筛选  
    170.     $scope.projects = [];
    171.     $scope.selectedProject = -1; 
    172.     
    173.     //异步请求项目列表数据
    174.     $scope.getProjectDataAsync = function(){        
    175.         $http({
    176.             method: 'POST',
    177.             url: ACTIVITI.CONFIG.contextRoot+'/model/getProjectList'
    178.         }).then(function successCallback(response) {            
    179.             $scope.projects = response.data;
    180.             if($scope.projects.length > 0){
    181.                 $scope.selectedProject = $scope.projects[0].pkid;
    182.             } 
    183.             $scope.dataWatch();
    184.         }, function errorCallback(response) {
    185.             // 请求失败执行代码
    186.             console.log("项目列表请求失败！");
    187.         });
    188.     }
    189.     $scope.getProjectDataAsync();
    190.     //数据监视
    191.     $scope.dataWatch = function (){
    192.         //分页数据监视
    193.         $scope.$watch('pagingOptions', function (newValue, oldValue) {
    194.             $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);    
    195.         },true); 
    196.         
    197.         //当切换类型时，初始化当前页
    198.         $scope.$watch('selectType', function (newValue, oldValue) {
    199.             if(newValue != oldValue){
    200.                 $scope.pagingOptions.currentPage = 1; 
    201.                 $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);
    202.             }
    203.         },true);
    204.         
    205.         //切换平台
    206.         $scope.change = function(x){
    207.             $scope.selectedProject = x;
    208.             $scope.getPagedDataAsync($scope.pagingOptions.currentPage, $scope.pagingOptions.pageSize, $scope.selectedProject);
    209.         };
    210.     };
    211.     
    212.     //异步请求表格数据
    213.     $scope.getPagedDataAsync = function(pageNum, pageSize, projectId){      
    214.         var url;
    215.         if($scope.selectType == 2){
    216.             url = '/model/getGroupList';
    217.             $scope.columnData = $scope.groupColumns;
    218.         }else{
    219.             url = '/model/getUserList';
    220.             $scope.columnData = $scope.userColumns;
    221.         }
    222.         $http({
    223.             method: 'POST',
    224.             url: ACTIVITI.CONFIG.contextRoot+url,
    225.             params:{
    226.                 'pageNum': pageNum,
    227.                 'pageSize': pageSize,
    228.                 'projectId': projectId
    229.             },
    230.         }).then(function successCallback(response) {
    231.                 $scope.gridData = response.data.rows;               
    232.                 $scope.totalServerItems = response.data.total;
    233.             }, function errorCallback(response) {
    234.                 // 请求失败执行代码
    235.                 $scope.gridData = [];
    236.                 $scope.totalServerItems = 0;
    237.         });
    238.     }
    239.     //表格属性配置
    240.     $scope.gridOptions = {  
    241.         data: $scope.gridDataName,
    242.         multiSelect: false,//不可多选
    243.         enablePaging: true,
    244.         pagingOptions: $scope.pagingOptions,
    245.         totalServerItems: 'totalServerItems',
    246.         i18n:'zh-cn',  
    247.         showFooter: true,
    248.         showSelectionCheckbox: false, 
    249.         columnDefs : $scope.columnDataName,
    250.         beforeSelectionChange: function (event) {
    251.             var data = event.entity.pkid;
    252.             
    253.             if($scope.selectType == 0){//选代理人
    254.                 event.entity.checked = !event.selected;
    255.                 $scope.assignment.assignee = data;
    256.             }else if($scope.selectType == 1){//候选人
    257.                 var obj = {value: data};
    258.                 if(!array_contain($scope.assignment.candidateUsers, obj.value)){
    259.                     $scope.assignment.candidateUsers.push(obj);
    260.                 }                                   
    261.             }else if($scope.selectType == 2){//候选组
    262.                 var obj = {value: $scope.getGroupData(event.entity)};
    263.                 if(!array_contain($scope.assignment.candidateGroups, obj.value)){
    264.                     $scope.assignment.candidateGroups.push(obj);
    265.                 } 
    266.             }
    267.             return true;
    268.         }
    269.     };
    270.     
    271.     $scope.getGroupData = function(data){
    272.         var prefix = ['${projectId}_','${bankEnterpriseId}_','${coreEnterpriseId}_','${chainEnterpriseId}_'];
    273.         var result = prefix[data.enterpriseType] + data.roleCode;
    274.         return result;
    275.     };
    276.  
    277.     //选择用户时表头
    278.     $scope.userColumns = [          
    279.         {  
    280.             field : 'pkid',  
    281.             type:'number',    
    282.             displayName : '用户Id',  
    283.             minWidth: 100,  
    284.             width : '18%'  
    285.         },            
    286.         {  
    287.             field : 'nickName',  
    288.             displayName : '昵称',  
    289.             minWidth: 100,  
    290.             width : '25%'  
    291.         },  
    292.         {  
    293.             field : 'loginName',  
    294.             displayName : '登录名',  
    295.             minWidth: 100,  
    296.             width : '25%'  
    297.         },  
    298.         {  
    299.             field : 'realName',   
    300.             displayName : '姓名',  
    301.             minWidth: 100,  
    302.             width : '25%'  
    303.         }       
    304.     ];
    305.     $scope.displayText = function(enterpriseType){
    306.         var tmp = '';
    307.         switch(enterpriseType){
    308.         case 0:
    309.             tmp = '运营';
    310.             break;
    311.         case 1:
    312.             tmp = '银行';
    313.             break;
    314.         case 2:
    315.             tmp = '核心';
    316.             break;
    317.         case 3:
    318.             tmp = '链属';
    319.             break;
    320.         default:
    321.             tmp = 'N/A';
    322.             break;
    323.         }
    324.         return tmp;
    325.     }
    326.     //选择用户组时表头
    327.     $scope.groupColumns = [          
    328.         {  
    329.             field : 'pkid',  
    330.             type:'number',  
    331.             displayName : '角色Id',  
    332.             minWidth: 100,  
    333.             width : '16%'  
    334.         }, 
    335.         {  
    336.             field : 'roleCode',   
    337.             displayName : '角色code',  
    338.             minWidth: 100,  
    339.             width : '16%'  
    340.         }, 
    341.         {  
    342.             field : 'name',   
    343.             displayName : '角色名称',  
    344.             minWidth: 100,  
    345.             width : '25%'  
    346.         },  
    347.         {  
    348.             field : 'type',
    349.             type:'number',  
    350.             displayName : '角色类型',  
    351.             minWidth: 100,  
    352.             width : '18%',
    353.             cellTemplate : '{{row.entity.type==1?"公有":"私有"}}'
    354.         },  
    355.         {  
    356.             field : 'enterpriseType',    
    357.             displayName : '业务类型',  
    358.             minWidth: 100,  
    359.             width : '18%'
    360.             ,cellTemplate : '{{displayText(row.entity.enterpriseType);}}'
    361.         }  
    362.     ];
    363.     
    364.     //代理人(审批人)
    365.     $scope.selectAssignee = function () {
    366.         $scope.selectType = 0;
    367.         $scope.selectTitle = '选择代理人';
    368.     };
    369.     
    370.     //候选人
    371.     $scope.selectCandidate = function () {
    372.         $scope.selectType = 1;
    373.         $scope.selectTitle = '选择候选人';   
    374.     };
    375.     
    376.     //候选组
    377.     $scope.selectGroup = function () {
    378.         $scope.selectType = 2;
    379.         $scope.selectTitle = '选择候选组';
    380.     };
    381.  
    382. }];
    383. //声明----如果有此 contains 直接用最好
    384. function array_contain(array, obj){
    385.     for (var i = 0; i < array.length; i++){
    386.         if (array[i].value == obj)//如果要求数据类型也一致，这里可使用恒等号===
    387.             return true;
    388.     }
    389.     return false;
    390. }

    其中，查询用户和角色列表的接口需要后端接口提供：

    1. //异步请求表格数据
    2.     $scope.getPagedDataAsync = function(pageNum, pageSize, projectId){      
    3.         var url;
    4.         if($scope.selectType == 2){
    5.             url = '/model/getGroupList';
    6.             $scope.columnData = $scope.groupColumns;
    7.         }else{
    8.             url = '/model/getUserList';
    9.             $scope.columnData = $scope.userColumns;
    10.         }
    11.         $http({
    12.             method: 'POST',
    13.             url: ACTIVITI.CONFIG.contextRoot+url,
    14.             params:{
    15.                 'pageNum': pageNum,
    16.                 'pageSize': pageSize,
    17.                 'projectId': projectId
    18.             },
    19.         }).then(function successCallback(response) {
    20.                 $scope.gridData = response.data.rows;               
    21.                 $scope.totalServerItems = response.data.total;
    22.             }, function errorCallback(response) {
    23.                 // 请求失败执行代码
    24.                 $scope.gridData = [];
    25.                 $scope.totalServerItems = 0;
    26.         });
    27.     }

    本文实现了先选项目，然后再加载用户和角色列表，因此代码中多出了这一部分，读者可根据需要决定是否去除：

    1. //异步请求项目列表数据
    2.     $scope.getProjectDataAsync = function(){        
    3.         $http({
    4.             method: 'POST',
    5.             url: ACTIVITI.CONFIG.contextRoot+'/model/getProjectList'
    6.         }).then(function successCallback(response) {            
    7.             $scope.projects = response.data;
    8.             if($scope.projects.length > 0){
    9.                 $scope.selectedProject = $scope.projects[0].pkid;
    10.             } 
    11.             $scope.dataWatch();
    12.         }, function errorCallback(response) {
    13.             // 请求失败执行代码
    14.             console.log("项目列表请求失败！");
    15.         });
    16.     }

    最终实现的效果是：
    1）点击办理人输入框，右侧立即加载用户列表，支持分页，点击右侧某个用户，该用户的ID自动填入办理人输入框；
    2）点击候选人输入框，右侧立即加载用户列表，支持分页，点击右侧某个用户，该用户的ID自动填入候选人输入框，可多次点击用户添加多个候选人；
    3）点击候选组输入框，右侧加载角色列表，支持分页，点击某个角色，该角色编号自动填入候选组输入框，可多次点击角色添加多个候选组；


    3、token获取对接后台

    集成模型设计，例如：

    1. <template>
    2.   <div style="position:relative;height: 100%;">
    3.     <iframe
    4.       id="iframe"
    5.       :src="modelerUrl"
    6.       frameborder="0"
    7.       width="100%"
    8.       height="720px"
    9.       scrolling="auto"
    10.     />
    11.     <Spin v-if="modelerLoading" fix size="large" />
    12.   </div>
    13. </template>
    14.  
    15. <script>
    16. //获取token的方式可能不一样，视情况而定
    17. import { getToken } from '@/utils/auth'
    18. export default {
    19.   name: 'ModelDefine',
    20.   components: {},
    21.  
    22.   data() {
    23.     return {
    24.       modelerLoading: true,
    25.       modelerUrl: '/static/modeler.html?modelId=' + this.$route.query.id + '&time=' + new Date().getTime()
    26.     }
    27.   },
    28.   computed: {
    29.     token() {
    30.       return 'Bearer ' + getToken()
    31.     }
    32.   },
    33.   created() {},
    34.   mounted() {
    35.     window.getMyVue = this
    36.   },
    37.   methods: {}
    38. }
    39. </script>
    40. <style lang="scss" scoped>
    41. .iframe {
    42.   width: 100%;
    43.   height: calc(100vh - 154px);
    44. }
    45. </style>

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

    1.   <script>
    2.     (
    3.       function (open) {
    4.         XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
    5.           open.call(this, method, url, async, user, pass);  //this指XMLHttpRequest
    6.           this.setRequestHeader("Authorization", window.parent.getMyVue.token); //mounted时传入的token
    7.         };
    8.       }
    9.     )(XMLHttpRequest.prototype.open);
    10.   </script>


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

     

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

  • 相关阅读:
    揭开MyBatis的神秘面纱：掌握动态代理在底层实现中的精髓
    [《南国雪下》闲笔记事集]2010年12月15日 记雪
    硅芯思见：【145】问芯吾跬（IC设计验证常见问题汇总三）
    订水商城实战教程10-宫格导航
    振南技术干货集：C语言的一些“骚操作”及其深层理解（3）
    (六)admin-boot项目之全局处理预防xss攻击
    Shopify独立站如何做好邮件营销
    所有 WCF 超时说明
    JVM运行时数据区域详解
    JS逆向——建筑市场监管公共服务平台
  • 原文地址：https://blog.csdn.net/fanghe1995/article/details/127673845