zoukankan      html  css  js  c++  java

  • activiti自己定义流程之整合（五）：启动流程时获取自己定义表单

    流程定义部署之后，自然就是流程定义列表了，但和前一节一样的是，这里也是和之前单独的activiti没什么差别。因此也不多说。我们先看看列表页面以及相应的代码，然后在一步步说明点击启动button时怎样调用自己定义的form表单。


    流程定义列表页面例如以下：



    相应的html代码：

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div id="logdiv1" ng-init="init();">    
    2.    <p style="font-size:24px;margin:3px">流程列表</p>  
    3.    <center>  
    4.    <table border="1px" style="margin-top:1px;87%;font-size:14px;text-align:center;margin-top:1px;margin-left:2px;position:relative;float:left;" cellSpacing="0px" cellPadding="0px">  
    5.       <tr style="background-color:#ccc">  
    6.          <td>ID</td>  
    7.          <td>NAME</td>  
    8.          <td>DeploymentID</td>  
    9.          <td>KEY</td>  
    10.          <td>版本号</td>  
    11.          <td>resourceName</td>  
    12.          <td>DiagramResourceName</td>  
    13.          <td>操 作</td>  
    14.       </tr>  
    15.       <tr ng-repeat="process in processList | orderBy:'id'" >  
    16.          <td>{{process.id}}</td>  
    17.          <td>{{process.name}}</td>  
    18.          <td>{{process.deploymentId}}</td>  
    19.          <td>{{process.key}}</td>  
    20.          <td>{{process.version}}</td>  
    21.          <td>{{process.resourceName}}</td>  
    22.          <td>{{process.diagramResourceName}}</td>  
    23.          <td><a href="script:;" ng-click="toProcess(process)">启动</a>   
    24.          <a href="script:;" ng-click="deleteProcess(process)">删除</a>   
    25.          </td>  
    26.       </tr>  
    27.    </table>    
    28.    <div id="handleTemplate" ></div>  
    29.    </center>    
    30. </div>    


    相应的angularjs代码：
    [javascript] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. angular.module('activitiApp')    
    2. .controller('processCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){    
    3. $scope.init=function(){  
    4.         $http.post("./processList.do").success(function(result) {  
    5.             if(result.isLogin==="yes"){  
    6.             $rootScope.userName=result.userName;  
    7.             $scope.processList=result.data;  
    8.             }else{  
    9.                 $location.path("/login");  
    10.             }  
    11.         });  
    12. }       
    13.      
    14.         //開始流程  
    15.         $scope.toProcess= function(process){  
    16.             $rootScope.process=process;  
    17.             $('#handleTemplate').html('').dialog({  
    18.                 title:'流程名称[' + process.name + ']',  
    19.                 modal: true,  
    20.                  $.common.window.getClientWidth() * 0.6,  
    21.                 height: $.common.window.getClientHeight() * 0.9,      
    22.                 open: function() {  
    23.                     // 获取json格式的表单数据。就是流程定义中的全部field  
    24.                     readForm.call(this, process.deploymentId);  
    25.                 },  
    26.                 buttons: [{  
    27.                     text: '启动流程',  
    28.                     click: function() {  
    29.                         $("#handleTemplate").dialog("close");  
    30.                         sendStartupRequest();  
    31.                         setTimeout(function(){  
    32.                             window.location.href =("#/findFirstTask");  
    33.                         },1500);  
    34.                           
    35.                     }  
    36.                 }]  
    37.             }).position({  
    38.                    //my: "center",  
    39.                    //at: "center",  
    40.                 offset:'300 300',  
    41.                    of: window,  
    42.                    collision:"fit"  
    43.                 });  
    44. ;  
    45.         };  
    46.         //读取流程启动表单  
    47.         function readForm(deploymentId) {  
    48.             var dialog = this;  
    49.             // 读取启动时的表单  
    50.             $.post('./getStartForm.do',deploymentId, function(result) {  
    51.                 // 获取的form是字符行，html格式直接显示在对话框内就能够了。然后用form包裹起来  
    52.                   
    53.                 $(dialog).append("<div class='formContent' />");  
    54.                 $('.formContent').html('').wrap("<form id='startform' class='formkey-form' method='post' />");  
    55.                   
    56.                 var $form = $('.formkey-form');  
    57.   
    58.   
    59.                 // 设置表单action    getStartFormAndStartProcess  
    60.                 $form.attr('action', './getStartFormAndStartProcess');  
    61.                 //设置部署的Id  
    62.                 $form.append("<input type='hidden' name='deploymentId' value="+deploymentId+">");  
    63.                 $form.append(result.form);  
    64.                 // 初始化日期组件  
    65.                 $form.find('.datetime').datetimepicker({  
    66.                        stepMinute: 5  
    67.                  });  
    68.                 $form.find('.date').datepicker();  
    69.                   
    70.                 // 表单验证  
    71.                 $form.validate($.extend({}, $.common.plugin.validator));  
    72.             });  
    73.         }  
    74.           
    75.         /** 
    76.          * 提交表单 
    77.          * @return {[type]} [description] 
    78.          */  
    79.         function sendStartupRequest() {  
    80.             if ($(".formkey-form").valid()) {  
    81.                 var url = './getStartFormAndStartProcess.do';  
    82.                 var args = $('#startform').serialize();  
    83.                 $.post(url, args, function(data){  
    84.                     $("#handleTemplate").dialog("close");  
    85.                     $location.path("/findFirstTask");  
    86.                 });  
    87.             }  
    88.         }  
    89.         
    90.     
    91. }])    


    在上边的代码中就有须要注意的地方了，从代码中能够看到。当我们点击页面的启动button时，会触发toProcess方法。而这种方法就使用到了dialog对话框。对话框中显示的内容便是之前自己定义的表单，从后台数据库中请求过来。




    那么读取的时候发送了getStartForm.do的请求，后台相应的代码例如以下：

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. @RequestMapping(value = "/getStartForm.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")  
    2.     @ResponseBody  
    3.     public Object getStartForm(@RequestBody String deploymentId) {  
    4.         Map<String, String> map = new HashMap<String, String>();  
    5.         String deString = null;  
    6.         deString = deploymentId.replaceAll("=", "");  
    7.         String form = this.getStartForm1(deString);  
    8.         map.put("form", form);  
    9.         return map;  
    10.     }  
    11.   
    12.   
    13.     public String getStartForm1(String deploymentId) {  
    14.         String deString = null;  
    15.         deString = deploymentId.replaceAll("=", "");  
    16.         ProcessDefinition pd = repositoryService.createProcessDefinitionQuery()  
    17.                 .deploymentId(deString).singleResult();  
    18.         String form = (String) formService.getRenderedStartForm(pd.getId());  
    19.         return form;  
    20.     }  




    要说明的是这里之所以能使用formService.getRenderedStartForm方法，便是由于在上一节部署的时候进行了设置，否则这种方法是无法正常使用的。


    那么这个对话框弹出界面视图例如以下：


    须要注意的是dialog的css样式在jquery-ui.css中，不要忘了导入进来。当然了，也能够按自己的喜好改动。


    那么填写好相关的数据点击提交，同过上边的js能够知道就走到了后台getStartFormAndStartProcess这里，启动流程实例：

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. /** 
    2.      * @throws XMLStreamException 
    3.      *             启动流程 
    4.      *  
    5.      * @author：tuzongxun 
    6.      * @Title: startProcess 
    7.      * @param @return 
    8.      * @return Object 
    9.      * @date Mar 17, 2016 2:06:34 PM 
    10.      * @throws 
    11.      */  
    12.     @RequestMapping(value = "/getStartFormAndStartProcess.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")  
    13.     @ResponseBody  
    14.     public Object startProcess1(HttpServletRequest req)  
    15.             throws XMLStreamException {  
    16.         Map<String, String[]> formMap = req.getParameterMap();  
    17.         String deploymentId = formMap.get("deploymentId")[0];  
    18.         // 拿到第一个data_1设置申请人  
    19.         String person1 = (String) formMap.get("data_1")[0];  
    20.         Map<String, String> map = new HashMap<String, String>();  
    21.         boolean isLogin = this.isLogin(req);  
    22.         if (isLogin) {  
    23.             if (deploymentId != null) {  
    24.                 HttpSession session = req.getSession();  
    25.                 String assginee = (String) session.getAttribute("userName");  
    26.                 ProcessDefinition pd = repositoryService  
    27.                         .createProcessDefinitionQuery()  
    28.                         .deploymentId(deploymentId).singleResult();  
    29.                 String processDefinitionId = pd.getId();  
    30.                 Map<String, String> formProperties = new HashMap<String, String>();  
    31.                 Iterator<FlowElement> iterator1 = this  
    32.                         .findFlow(processDefinitionId);  
    33.                 // 取第一个节点，開始节点的行号  
    34.                 String row = null;  
    35.                 while (iterator1.hasNext()) {  
    36.                     FlowElement flowElement = iterator1.next();  
    37.                     row = flowElement.getXmlRowNumber() + "";  
    38.                     break;  
    39.                 }  
    40.   
    41.                 // 从request中读取參数然后转换  
    42.                 Set<Entry<String, String[]>> entrySet = formMap.entrySet();  
    43.                 for (Entry<String, String[]> entry : entrySet) {  
    44.                     String key = entry.getKey();  
    45.                     String value = entry.getValue()[0];  
    46.                     if (!key.equals("deploymentId")) {  
    47.                         String keyString = key + row;  
    48.                         formProperties.put(keyString, value);  
    49.                     }  
    50.                 }  
    51.                 formProperties.put("deploymentId", deploymentId);  
    52.                 Iterator<FlowElement> iterator = this.findFlow(pd.getId());  
    53.                 int i = 1;  
    54.                 while (iterator.hasNext()) {  
    55.                     FlowElement flowElement = iterator.next(); // 申请人  
    56.                     if (flowElement.getClass().getSimpleName()  
    57.                             .equals("UserTask")  
    58.                             && i == 1) {  
    59.                         UserTask userTask = (UserTask) flowElement;  
    60.                         String assignee = userTask.getAssignee();  
    61.                         int index1 = assignee.indexOf("{");  
    62.                         int index2 = assignee.indexOf("}");  
    63.                         formProperties  
    64.                                 .put(assignee.substring(index1 + 1, index2),  
    65.                                         person1);  
    66.                         break;  
    67.                     }  
    68.                 }  
    69.                 identityService.setAuthenticatedUserId(assginee);  
    70.                 ProcessInstance processInstance = formService  
    71.                         .submitStartFormData(processDefinitionId,  
    72.                                 formProperties);  
    73.                 map.put("userName",  
    74.                         (String) req.getSession().getAttribute("userName"));  
    75.                 map.put("isLogin", "yes");  
    76.                 map.put("result", "success");  
    77.             } else {  
    78.                 map.put("result", "fail");  
    79.             }  
    80.         } else {  
    81.             map.put("isLogin", "no");  
    82.         }  
    83.         return map;  
    84.     }  

    而这里最重要的是对前台数据的处理，假设大家使用了ueditor插件，会发现他传递到后台的数据是存放在request中的一个map中。而map的key都是data_1、data_2、data_3的形式。


    这样问题就来了。到后边对任务进行操作的时候，这些数据还是这样从data_1開始。那么假设我们原样保存到数据库，以后查询时自然就会有问题了。所以这里就依据每一个流程中流程节点行号的唯一性进行了又一次组合，然后把这些数据保存为流程变量。
  • 相关阅读:
    分支与合并@基础
    创业者那些鲜为人知的事情
    centos7.5+nginx+php急速配置
    通过webhost扩展方式初始化EFCore数据库
    AspNetCore架构图
    Linux就该这样学--之常用linux命令及bash基础
    使用gitlab构建基于docker的持续集成（三）
    使用gitlab构建基于docker的持续集成（二）
    使用gitlab构建基于docker的持续集成（一）
    使用docker-compose配置mysql数据库并且初始化用户
  • 原文地址：https://www.cnblogs.com/zhchoutai/p/7241945.html
Copyright © 2011-2022 走看看