activiti自定义流程之Spring整合activiti-modeler实例（三）：流程模型列表展示

1.maven导包及spring的一些基本配置与创建流程模型时候的没有什么变化，依旧沿用就好;前端的首页也不用有太大变化，只需要把之后新创建的js引入进来即可。


2.acitivit流程定义有必要的24张表。
  创建模型时相关的有act_re_model和act_ge_bytearray两个。
  成功创建模型后可以看到model表中会有一条数据，同时在bytearray表中也会同时生成两条对应的数据。而model表中会存入这两条数据的id，从而产生关联。
  因此流程模型列表查询时就需要在这两张表中进行操作。


3.模型属于资源文件，因此操作的时候用到repositoryService来调用相关的方法，activiti也提供了相关的方法createModelQuery以及ActivitiModel实体类。


4.结合上述，后台业务代码如下，为了便于前台获取数据，我自己也定义了model实体类，只取自己想要展示的数据：

[java]  view plain  copy

 

1. /** 
2.      * 模型列表 
3.      *  
4.      * @author：tuzongxun 
5.      * @Title: modelList 
6.      * @param @return 
7.      * @return Object 
8.      * @date Mar 17, 2016 12:29:52 PM 
9.      * @throws 
10.      */  
11.     @RequestMapping(value = "/modelList.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")  
12.     @ResponseBody  
13.     public Object modelList(HttpServletRequest req) {  
14.         Map<String, Object> map = new HashMap<String, Object>();  
15.         boolean isLogin = this.isLogin(req);  
16.         if (isLogin) {  
17.             List<ActivitiModel> modelList = new ArrayList<ActivitiModel>();  
18.             try {  
19.                 List<Model> modelList1 = repositoryService.createModelQuery()  
20.                         .list();  
21.                 if (modelList1 != null && modelList1.size() > 0) {  
22.                     for (Model model : modelList1) {  
23.                         ActivitiModel activitiModel = new ActivitiModel();  
24.                         activitiModel.setId(model.getId());  
25.                         activitiModel.setCreateTime(model.getCreateTime());  
26.                         activitiModel.setDescription(model.getMetaInfo());  
27.                         activitiModel.setKey(model.getKey());  
28.                         activitiModel.setLastUpdateTime(model  
29.                                 .getLastUpdateTime());  
30.                         activitiModel.setName(model.getName());  
31.                         activitiModel.setVersion(model.getVersion());  
32.                         modelList.add(activitiModel);  
33.                     }  
34.                 }  
35.                 map.put("isLogin", "yes");  
36.                 map.put("userName",  
37.                         (String) req.getSession().getAttribute("userName"));  
38.                 map.put("result", "success");  
39.                 map.put("data", modelList);  
40.   
41.   
42.             } catch (Exception e) {  
43.                 e.getStackTrace();  
44.             }  
45.         } else {  
46.             map.put("isLogin", "no");  
47.         }  
48.         return map;  
49.     }  

 5.前台app.js加入代码:

[javascript]  view plain  copy

 

1. $stateProvider    
2.     .state('modelList', {    
3.     url: "/modelList",    
4.     views: {    
5.        'view': {    
6.         templateUrl: 'activi_views/modelList.html',    
7.         controller: 'modelCtr'    
8.        }    
9.     }    
10.    });    

6.前台创建新的控制层js(注意在首页index.html中导入这个js，我的首页是activiti.html)，modelCtr.js：

[javascript]  view plain  copy

 

1. angular.module('activitiApp')    
2. .controller('modelCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){    
3. $scope.init=function(){  
4.         $http.post("./modelList.do").success(function(result) {  
5.             if(result.isLogin==="yes"){  
6.                 $rootScope.userName=result.userName;  
7.                 console.log(result.data);   
8.                 $scope.modelList=result.data;  
9.             }else{  
10.                 $location.path("/login");  
11.             }  
12.         });  
13. }    
14.         $scope.deploye=function(model){  
15.             console.log(model);  
16.             $http.post("./deploye.do",model).success(function(deployResult){  
17.                 $location.path("/processList");  
18.             });  
19.         }  
20.           
21.         $scope.update=function(modelId){  
22.             window.open("http://localhost:8080/activitiTest1/service/editor?id="+modelId);  
23.         }  
24.         
25.     
26. }])    

7.modelList页面，modelList.html:

[html]  view plain  copy

 

1. <div id="logdiv1" ng-init="init();">   
2.     <p style="font-size:24px;margin-top:10px">模型列表</p>   
3.     <center>   
4.    <table border="1px" style="width:87%;font-size:18px;text-align:center;margin-left:2px;margin-top:auto;position:relative;float:left;" cellSpacing="0px" cellPadding="0px">  
5.       <tr style="background-color:#ccc">  
6.          <td>ID</td>  
7.          <td>NAME</td>  
8.          <td>KEY</td>  
9.          <td>描 述</td>  
10.          <td>版本</td>  
11.          <td>创建时间</td>  
12.          <td>修改时间</td>  
13.          <td>操 作</td>  
14.       </tr>  
15.       <tr ng-repeat="model in modelList | orderBy:'id'" >  
16.          <td>{{model.id}}</td>  
17.          <td>{{model.name}}</td>  
18.          <td>{{model.key}}</td>  
19.          <td>{{model.metaInfo}}</td>  
20.          <td>{{model.version}}</td>  
21.          <td>{{model.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>  
22.          <td>{{model.lastUpdateTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>  
23.          <td><a href="script:;" ng-click="deploye(model)">部署</a>   
24.          <a href="script:;" ng-click="delete(model)">删除</a>   
25.          <a href="script:;" ng-click="update(model.id)">修改</a>  
26.          </td>  
27.       </tr>  
28.    </table>    
29.    </center>   
30. </div>    

8.页面展示效果如下：