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

注：（1）环境搭建：activiti自定义流程之Spring整合activiti-modeler5.16实例（一）：环境搭建
        （2）创建流程模型：activiti自定义流程之Spring整合activiti-modeler5.16实例（二）：创建流程模型 

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


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


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


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

/**
	 * 模型列表
	 * 
	 * @author：tuzongxun
	 * @Title: modelList
	 * @param @return
	 * @return Object
	 * @date Mar 17, 2016 12:29:52 PM
	 * @throws
	 */
	@RequestMapping(value = "/modelList.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
	@ResponseBody
	public Object modelList(HttpServletRequest req) {
		Map<String, Object> map = new HashMap<String, Object>();
		boolean isLogin = this.isLogin(req);
		if (isLogin) {
			List<ActivitiModel> modelList = new ArrayList<ActivitiModel>();
			try {
				List<Model> modelList1 = repositoryService.createModelQuery()
						.list();
				if (modelList1 != null && modelList1.size() > 0) {
					for (Model model : modelList1) {
						ActivitiModel activitiModel = new ActivitiModel();
						activitiModel.setId(model.getId());
						activitiModel.setCreateTime(model.getCreateTime());
						activitiModel.setDescription(model.getMetaInfo());
						activitiModel.setKey(model.getKey());
						activitiModel.setLastUpdateTime(model
								.getLastUpdateTime());
						activitiModel.setName(model.getName());
						activitiModel.setVersion(model.getVersion());
						modelList.add(activitiModel);
					}
				}
				map.put("isLogin", "yes");
				map.put("userName",
						(String) req.getSession().getAttribute("userName"));
				map.put("result", "success");
				map.put("data", modelList);


			} catch (Exception e) {
				e.getStackTrace();
			}
		} else {
			map.put("isLogin", "no");
		}
		return map;
	}

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

$stateProvider  
    .state('modelList', {  
    url: "/modelList",  
    views: {  
       'view': {  
        templateUrl: 'activi_views/modelList.html',  
        controller: 'modelCtr'  
       }  
    }  
   });  

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

angular.module('activitiApp')  
.controller('modelCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){  
$scope.init=function(){
        $http.post("./modelList.do").success(function(result) {
        	if(result.isLogin==="yes"){
        		$rootScope.userName=result.userName;
        	    console.log(result.data); 
    	        $scope.modelList=result.data;
        	}else{
        		$location.path("/login");
        	}
        });
}  
        $scope.deploye=function(model){
        	console.log(model);
        	$http.post("./deploye.do",model).success(function(deployResult){
        		$location.path("/processList");
        	});
        }
        
        $scope.update=function(modelId){
        	window.open("http://localhost:8080/activitiTest1/service/editor?id="+modelId);
        }
      
  
}])  

7.modelList页面，modelList.html:

<div id="logdiv1" ng-init="init();"> 
    <p style="font-size:24px;margin-top:10px">模型列表</p> 
    <center> 
   <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">
      <tr style="background-color:#ccc">
         <td>ID</td>
         <td>NAME</td>
         <td>KEY</td>
         <td>描 述</td>
         <td>版本</td>
         <td>创建时间</td>
         <td>修改时间</td>
         <td>操 作</td>
      </tr>
      <tr ng-repeat="model in modelList | orderBy:'id'" >
         <td>{{model.id}}</td>
         <td>{{model.name}}</td>
         <td>{{model.key}}</td>
         <td>{{model.metaInfo}}</td>
         <td>{{model.version}}</td>
         <td>{{model.createTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
         <td>{{model.lastUpdateTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
         <td><a href="script:;" ng-click="deploye(model)">部署</a> 
         <a href="script:;" ng-click="delete(model)">删除</a> 
         <a href="script:;" ng-click="update(model.id)">修改</a>
         </td>
      </tr>
   </table>  
   </center> 
</div>  

8.页面展示效果如下：