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

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

流程定义列表页面如下：

对应的html代码：

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代码：

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. }])

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

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

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方法，便是因为在上一节部署的时候进行了设置，否则这个方法是无法正常使用的。

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

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

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

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开始，那么如果我们原样保存到数据库，以后查询时自然就会有问题了，所以这里就根据每个流程中流程节点行号的唯一性进行了重新组合，然后把这些数据保存为流程变量。