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

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





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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="border:none; max-width:100%; font-family:Arial; font-size:14px; line-height:26px">

相应的html代码：

[html] view
plain copy

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

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. $scope.toProcess= function(process){
15. $rootScope.process=process;
16. $('#handleTemplate').html('').dialog({
17. title:'流程名称[' + process.name + ']',
18. modal: true,
19. width: $.common.window.getClientWidth() * 0.6,
20. height: $.common.window.getClientHeight() * 0.9,
21. open: function() {
22. // 获取json格式的表单数据。就是流程定义中的全部field
23. readForm.call(this, process.deploymentId);
24. },
25. buttons: [{
26. text: '启动流程',
27. click: function() {
28. $("#handleTemplate").dialog("close");
29. sendStartupRequest();
30. setTimeout(function(){
31. window.location.href =("#/findFirstTask");
32. },1500);
33. }
34. }]
35. }).position({
36. //my: "center",
37. //at: "center",
38. offset:'300 300',
39. of: window,
40. collision:"fit"
41. });
42. ;
43. };
44. //读取流程启动表单
45. function readForm(deploymentId) {
46. var dialog = this;
47. // 读取启动时的表单
48. $.post('./getStartForm.do',deploymentId, function(result) {
49. // 获取的form是字符行，html格式直接显示在对话框内就能够了。然后用form包裹起来
50. $(dialog).append("<div class='formContent' />");
51. $('.formContent').html('').wrap("<form id='startform' class='formkey-form' method='post' />");
52. var $form = $('.formkey-form');
53. // 设置表单action    getStartFormAndStartProcess
54. $form.attr('action', './getStartFormAndStartProcess');
55. //设置部署的Id
56. $form.append("<input type='hidden' name='deploymentId' value="+deploymentId+">");
57. $form.append(result.form);
58. // 初始化日期组件
59. $form.find('.datetime').datetimepicker({
60. stepMinute: 5
61. });
62. $form.find('.date').datepicker();
63. // 表单验证
64. $form.validate($.extend({}, $.common.plugin.validator));
65. });
66. }
67. /**
68. * 提交表单
69. * @return {[type]} [description]
70. */
71. function sendStartupRequest() {
72. if ($(".formkey-form").valid()) {
73. var url = './getStartFormAndStartProcess.do';
74. var args = $('#startform').serialize();
75. $.post(url, args, function(data){
76. $("#handleTemplate").dialog("close");
77. $location.path("/findFirstTask");
78. });
79. }
80. }
81. }])

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

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

[java] view
plain copy

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. public String getStartForm1(String deploymentId) {
12. String deString = null;
13. deString = deploymentId.replaceAll("=", "");
14. ProcessDefinition pd = repositoryService.createProcessDefinitionQuery()
15. .deploymentId(deString).singleResult();
16. String form = (String) formService.getRenderedStartForm(pd.getId());
17. return form;
18. }

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





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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="border:none; max-width:100%; font-family:Arial; font-size:14px; line-height:26px">

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

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

[java] view
plain copy

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. // 从request中读取參数然后转换
41. Set<Entry<String, String[]>> entrySet = formMap.entrySet();
42. for (Entry<String, String[]> entry : entrySet) {
43. String key = entry.getKey();
44. String value = entry.getValue()[0];
45. if (!key.equals("deploymentId")) {
46. String keyString = key + row;
47. formProperties.put(keyString, value);
48. }
49. }
50. formProperties.put("deploymentId", deploymentId);
51. Iterator<FlowElement> iterator = this.findFlow(pd.getId());
52. int i = 1;
53. while (iterator.hasNext()) {
54. FlowElement flowElement = iterator.next(); // 申请人
55. if (flowElement.getClass().getSimpleName()
56. .equals("UserTask")
57. && i == 1) {
58. UserTask userTask = (UserTask) flowElement;
59. String assignee = userTask.getAssignee();
60. int index1 = assignee.indexOf("{");
61. int index2 = assignee.indexOf("}");
62. formProperties
63. .put(assignee.substring(index1 + 1, index2),
64. person1);
65. break;
66. }
67. }
68. identityService.setAuthenticatedUserId(assginee);
69. ProcessInstance processInstance = formService
70. .submitStartFormData(processDefinitionId,
71. formProperties);
72. map.put("userName",
73. (String) req.getSession().getAttribute("userName"));
74. map.put("isLogin", "yes");
75. map.put("result", "success");
76. } else {
77. map.put("result", "fail");
78. }
79. } else {
80. map.put("isLogin", "no");
81. }
82. return map;
83. }

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

这样问题就来了。到后边对任务进行操作的时候，这些数据还是这样从data_1開始。那么假设我们原样保存到数据库，以后查询时自然就会有问题了。所以这里就依据每一个流程中流程节点行号的唯一性进行了又一次组合，然后把这些数据保存为流程变量。