目标：开发一个查询流程列表的功能，体验一下activiti

因为上一篇中已经部署了一个流程，所以咱们可以站在使用者的视角，开发一个流程展示页面。
再贴一下模块的包结构，与上一篇有点变动，因为activiti作为一个模块，是对外提供api的，主要是供admin模块调用，所以把之前的controller包改成api语义上更为合适。如图

image.png

一、创建查询流程定义api

package com.ruoyi.act.api;

import com.ruoyi.act.domain.VO.DefinitionVO;
import org.activiti.engine.RepositoryService;
import org.activiti.engine.repository.ProcessDefinition;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * @author badcat
 * Date 2021/8/23
 * Time 11:13
 */
@Service
public class ProcessDefinitionService {

    @Autowired
    private RepositoryService repositoryService;

    /**
     * 获取所有最新版本的流程定义，按部署id排序
     * @return
     */
    public List<DefinitionVO> getDefinitions(){
        List<DefinitionVO> voList = new ArrayList<>();
        List<ProcessDefinition> list = this.repositoryService.createProcessDefinitionQuery()
                .latestVersion()
                .orderByDeploymentId().asc()
                .list();
        for (ProcessDefinition e : list){
            DefinitionVO vo = new DefinitionVO();
            vo.setId(e.getId());
            vo.setDeploymentId(e.getDeploymentId());
            vo.setName(e.getName());
            vo.setKey(e.getKey());
            vo.setVersion(e.getVersion());
            vo.setResourceName(e.getResourceName());
            vo.setDiagramResourceName(e.getDiagramResourceName());
            voList.add(vo);
        }
        return voList;
    }

    /**
     * 读取流程资源
     * 可以用于获取流程的图片和xml
     * @param processDefinitionId 流程定义ID
     * @param resourceName        资源名称
     */
    public InputStream readResource(String processDefinitionId, String resourceName){
        //通过流程定义id获取流程定义对象
        ProcessDefinition processDefinition = this.repositoryService.createProcessDefinitionQuery()
                .processDefinitionId(processDefinitionId)
                .singleResult();

        //通过流程部署id和资源名称获取流
        InputStream resourceAsStream = repositoryService.getResourceAsStream(processDefinition.getDeploymentId(), resourceName);
        return resourceAsStream;
    }
}

二、在admin模块创建controller

package com.ruoyi.act.controller;

import com.ruoyi.act.api.ProcessDefinitionService;
import com.ruoyi.act.domain.VO.DefinitionVO;
import com.ruoyi.common.core.domain.AjaxResult;
import org.activiti.engine.repository.ProcessDefinitionQuery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;
import java.util.List;

/**
 * @author badcat
 * Date 2021/8/23
 * Time 12:05
 */
@Controller
@RequestMapping("/act/processDefinition")
public class ProcessDefinitionController {

    @Autowired
    private ProcessDefinitionService processDefinitionService;

    private String prefix = "act/definition";
    /**
     * 获取所有最新版本的流程定义，按部署id排序
     * @return
     */
    @RequestMapping("/getDefinitions")
    public String getDefinitions(Model model){
        List<DefinitionVO> list = this.processDefinitionService.getDefinitions();
        model.addAttribute("definitionList", list);
        return prefix + "/definitionList";
    }

    /**
     * 读取流程资源
     *
     * @param processDefinitionId 流程定义ID
     * @param resourceName        资源名称
     */
    @RequestMapping(value = "/readResource")
    public void readResource(@RequestParam("pdid") String processDefinitionId, @RequestParam("resourceName") String resourceName, HttpServletResponse response)
            throws Exception {

        InputStream inputStream = this.processDefinitionService.readResource(processDefinitionId, resourceName);

        // 输出资源内容到相应对象
        byte[] b = new byte[1024];
        int len = -1;
        while ((len = inputStream.read(b, 0, 1024)) != -1) {
            response.getOutputStream().write(b, 0, len);
        }
    }
}

三、创建html

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全部流程')" />
</head>
<body class="gray-bg">
<div class="container-div" style="padding: 20px 28px;">
    <div class="row">
        <div class="col-sm-4" th:each="df : ${definitionList}" th:onclick="$.modal.openTab([[${df.getName()}]],[['/act/instanceList?key='+${df.getKey()}]])">
            <div class="ibox">
                <div class="ibox-title">
                    <h5 th:text="${df.getName()}"></h5>
                </div>
                <div class="ibox-content" style="height: 200px;display: flex;align-items: center;justify-content: center;">
                    <img class="act_png" src="" th:data-pdid="${df.getId()}" th:data-png="${df.getDiagramResourceName()}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    $(function(){
        var arr = $(".act_png");
        for(var i=0 ; i<arr.length ; i++){
            var current = arr[i];
            var pdid = $(current).data("pdid");
            var png = $(current).data("png");
            $(current).attr("src", "/act/processDefinition/readResource?pdid="+pdid+"&resourceName="+png);
        }
    })
</script>
</body>
</html>

四、启动项目，在菜单栏里创建这个流程列表页面，最终效果是这样的，我多部署了几个流程

image.png

这部分代码放到了码云https://gitee.com/study_badcat/ry_mp_activiti，v2.1分支。