activiti自己定義流程之整合（五）：啟動流程時獲取自己定義表單

流程定義部署之后，自然就是流程定義列表了，但和前一節一樣的是，這里也是和之前單獨的activiti沒什么差別。因此也不多說。我們先看看列表頁面以及相應的代碼，然后在一步步說明點擊啟動button時怎樣調用自己定義的form表單。


流程定義列表頁面例如以下：

相應的html代碼：

 <div id="logdiv1" ng-init="init();">
    <p style="font-size:24px;margin:3px">流程列表</p>
    <center>
    <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">
       <tr style="background-color:#ccc">
          <td>ID</td>
          <td>NAME</td>
          <td>DeploymentID</td>
          <td>KEY</td>
          <td>版本號</td>
          <td>resourceName</td>
          <td>DiagramResourceName</td>
          <td>操 作</td>
       </tr>
       <tr ng-repeat="process in processList | orderBy:'id'" >
          <td>{{process.id}}</td>
          <td>{{process.name}}</td>
          <td>{{process.deploymentId}}</td>
          <td>{{process.key}}</td>
          <td>{{process.version}}</td>
          <td>{{process.resourceName}}</td>
          <td>{{process.diagramResourceName}}</td>
          <td><a href="script:;" ng-click="toProcess(process)">啟動</a>
          <a href="script:;" ng-click="deleteProcess(process)">刪除</a>
          </td>
       </tr>
    </table>
    <div id="handleTemplate" ></div>
    </center>
 </div>

相應的angularjs代碼：

 angular.module('activitiApp')
 .controller('processCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){
 $scope.init=function(){
         $http.post("./processList.do").success(function(result) {
             if(result.isLogin==="yes"){
             $rootScope.userName=result.userName;
             $scope.processList=result.data;
             }else{
                 $location.path("/login");
             }
         });
 }

         //開始流程
         $scope.toProcess= function(process){
             $rootScope.process=process;
             $('#handleTemplate').html('').dialog({
                 title:'流程名稱[' + process.name + ']',
                 modal: true,
                 width: $.common.window.getClientWidth() * 0.6,
                 height: $.common.window.getClientHeight() * 0.9,
                 open: function() {
                     // 獲取json格式的表單數據。就是流程定義中的全部field
                     readForm.call(this, process.deploymentId);
                 },
                 buttons: [{
                     text: '啟動流程',
                     click: function() {
                         $("#handleTemplate").dialog("close");
                         sendStartupRequest();
                         setTimeout(function(){
                             window.location.href =("#/findFirstTask");
                         },1500);

                     }
                 }]
             }).position({
                    //my: "center",
                    //at: "center",
                 offset:'300 300',
                    of: window,
                    collision:"fit"
                 });
 ;
         };
         //讀取流程啟動表單
         function readForm(deploymentId) {
             var dialog = this;
             // 讀取啟動時的表單
             $.post('./getStartForm.do',deploymentId, function(result) {
                 // 獲取的form是字符行，html格式直接顯示在對話框內就能夠了。然后用form包裹起來

                 $(dialog).append("<div class='formContent' />");
                 $('.formContent').html('').wrap("<form id='startform' class='formkey-form' method='post' />");

                 var $form = $('.formkey-form');


                 // 設置表單action    getStartFormAndStartProcess
                 $form.attr('action', './getStartFormAndStartProcess');
                 //設置部署的Id
                 $form.append("<input type='hidden' name='deploymentId' value="+deploymentId+">");
                 $form.append(result.form);
                 // 初始化日期組件
                 $form.find('.datetime').datetimepicker({
                        stepMinute: 5
                  });
                 $form.find('.date').datepicker();

                 // 表單驗證
                 $form.validate($.extend({}, $.common.plugin.validator));
             });
         }

         /**
          * 提交表單
          * @return {[type]} [description]
          */
         function sendStartupRequest() {
             if ($(".formkey-form").valid()) {
                 var url = './getStartFormAndStartProcess.do';
                 var args = $('#startform').serialize();
                 $.post(url, args, function(data){
                     $("#handleTemplate").dialog("close");
                     $location.path("/findFirstTask");
                 });
             }
         }


 }])

在上邊的代碼中就有須要注意的地方了，從代碼中能夠看到。當我們點擊頁面的啟動button時，會觸發toProcess方法。而這種方法就使用到了dialog對話框。對話框中顯示的內容便是之前自己定義的表單，從后台數據庫中請求過來。

那么讀取的時候發送了getStartForm.do的請求，后台相應的代碼例如以下：

 @RequestMapping(value = "/getStartForm.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
     @ResponseBody
     public Object getStartForm(@RequestBody String deploymentId) {
         Map<String, String> map = new HashMap<String, String>();
         String deString = null;
         deString = deploymentId.replaceAll("=", "");
         String form = this.getStartForm1(deString);
         map.put("form", form);
         return map;
     }


     public String getStartForm1(String deploymentId) {
         String deString = null;
         deString = deploymentId.replaceAll("=", "");
         ProcessDefinition pd = repositoryService.createProcessDefinitionQuery()
                 .deploymentId(deString).singleResult();
         String form = (String) formService.getRenderedStartForm(pd.getId());
         return form;
     }

要說明的是這里之所以能使用formService.getRenderedStartForm方法，便是由於在上一節部署的時候進行了設置，否則這種方法是無法正常使用的。


那么這個對話框彈出界面視圖例如以下：

須要注意的是dialog的css樣式在jquery-ui.css中，不要忘了導入進來。當然了，也能夠按自己的喜好改動。

那么填寫好相關的數據點擊提交，同過上邊的js能夠知道就走到了后台getStartFormAndStartProcess這里，啟動流程實例：

 /**
      * @throws XMLStreamException
      *             啟動流程
      *
      * @author：tuzongxun
      * @Title: startProcess
      * @param @return
      * @return Object
      * @date Mar 17, 2016 2:06:34 PM
      * @throws
      */
     @RequestMapping(value = "/getStartFormAndStartProcess.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
     @ResponseBody
     public Object startProcess1(HttpServletRequest req)
             throws XMLStreamException {
         Map<String, String[]> formMap = req.getParameterMap();
         String deploymentId = formMap.get("deploymentId")[0];
         // 拿到第一個data_1設置申請人
         String person1 = (String) formMap.get("data_1")[0];
         Map<String, String> map = new HashMap<String, String>();
         boolean isLogin = this.isLogin(req);
         if (isLogin) {
             if (deploymentId != null) {
                 HttpSession session = req.getSession();
                 String assginee = (String) session.getAttribute("userName");
                 ProcessDefinition pd = repositoryService
                         .createProcessDefinitionQuery()
                         .deploymentId(deploymentId).singleResult();
                 String processDefinitionId = pd.getId();
                 Map<String, String> formProperties = new HashMap<String, String>();
                 Iterator<FlowElement> iterator1 = this
                         .findFlow(processDefinitionId);
                 // 取第一個節點，開始節點的行號
                 String row = null;
                 while (iterator1.hasNext()) {
                     FlowElement flowElement = iterator1.next();
                     row = flowElement.getXmlRowNumber() + "";
                     break;
                 }

                 // 從request中讀取參數然后轉換
                 Set<Entry<String, String[]>> entrySet = formMap.entrySet();
                 for (Entry<String, String[]> entry : entrySet) {
                     String key = entry.getKey();
                     String value = entry.getValue()[0];
                     if (!key.equals("deploymentId")) {
                         String keyString = key + row;
                         formProperties.put(keyString, value);
                     }
                 }
                 formProperties.put("deploymentId", deploymentId);
                 Iterator<FlowElement> iterator = this.findFlow(pd.getId());
                 int i = 1;
                 while (iterator.hasNext()) {
                     FlowElement flowElement = iterator.next(); // 申請人
                     if (flowElement.getClass().getSimpleName()
                             .equals("UserTask")
                             && i == 1) {
                         UserTask userTask = (UserTask) flowElement;
                         String assignee = userTask.getAssignee();
                         int index1 = assignee.indexOf("{");
                         int index2 = assignee.indexOf("}");
                         formProperties
                                 .put(assignee.substring(index1 + 1, index2),
                                         person1);
                         break;
                     }
                 }
                 identityService.setAuthenticatedUserId(assginee);
                 ProcessInstance processInstance = formService
                         .submitStartFormData(processDefinitionId,
                                 formProperties);
                 map.put("userName",
                         (String) req.getSession().getAttribute("userName"));
                 map.put("isLogin", "yes");
                 map.put("result", "success");
             } else {
                 map.put("result", "fail");
             }
         } else {
             map.put("isLogin", "no");
         }
         return map;
     }

而這里最重要的是對前台數據的處理，假設大家使用了ueditor插件，會發現他傳遞到后台的數據是存放在request中的一個map中。而map的key都是data_1、data_2、data_3的形式。

這樣問題就來了。到后邊對任務進行操作的時候，這些數據還是這樣從data_1開始。那么假設我們原樣保存到數據庫，以后查詢時自然就會有問題了。所以這里就依據每一個流程中流程節點行號的唯一性進行了又一次組合，然后把這些數據保存為流程變量。