activiti自定义流程之整合(五):启动流程时获取自定义表单
activiti自定义流程之整合(五):启动流程时获取自定义表单
涂宗勋 发表于2年前
activiti自定义流程之整合(五):启动流程时获取自定义表单
  • 发表于 2年前
  • 阅读 1010
  • 收藏 0
  • 点赞 2
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么区别,因此也不多说。我们先看看列表页面以及对应的代码,然后在一步步说明点击启动按钮时如何调用自定义的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;width: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.                 width: $.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. }])    



在上边的代码中就有需要注意的地方了,从代码中可以看到,当我们点击页面的启动按钮时,会触发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开始,那么如果我们原样保存到数据库,以后查询时自然就会有问题了,所以这里就根据每个流程中流程节点行号的唯一性进行了重新组合,然后把这些数据保存为流程变量。


共有 人打赏支持
粉丝 12
博文 137
码字总数 121453
×
涂宗勋
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: