Activiti工作流管理系统（五）完结篇

前言

本系列在之前的章节中介绍了Activiti工作流管理系统的所有基本操作，包括发布、启动、执行、查看实例等操作。这一篇将是系列的完结篇，介绍最后一个主要功能：流程图的查看。该功能旨在能够实时查看当前流程图所在环节，使得用户能够更加清楚的掌握当前工作流的流转进度，也可以说是本系统的一个必不可少的功能点。闲话少说，进入正题。

系列五内容

流程图的查看

界面展示

活动实例列表.png

活动实例中查看流程图.png

流程定义列表.png

流程定义列表查看流程图.png

说明：以上两处截图，功能模块分别位于流程定义列表和运行实例中的查看流程功能，二者功能主体完全一样，只是传参不同，以下贴出代码并对于不同的部分进行区分，完全相同的部分不再重复贴出代码。

正在运行中实例查看流程图

前端代码

API：activityManagement.js

/**查看流程图（流程运行中）**/
export const showImageActive = params => {
  return axios.request({
    url:'workflow/showImageActive',
    params:params,
    method:'get',
    headers: {
      'Content-Type': 'application/json'
    },
    responseType: 'arraybuffer'
  })
}

/**查看流程图（流程定义列表）**/
export const showImage = params => {
  return axios.request({
    url:'workflow/showImage',
    params:params,
    method:'get',
    headers: {
      'Content-Type': 'application/json'
    },
    responseType: 'arraybuffer'
  })
}

ActiveProcess.vue

查看流程图

      
        

          
        
      
      

        确定
      

后端代码

WorkflowController

/**
     * 在页面获取流程图图片
     * 适用于运行时查看
     * @param processInstanceId
     * @return
     */
    @RequestMapping("/showImageActive")
    public String showImageActive(String processInstanceId, HttpServletResponse response) throws IOException {
        ProcessInstance processInstance = runtimeService.createProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
        if(processInstance == null){
            return null ;
        }
        ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().processDefinitionId(processInstance.getProcessDefinitionId()).singleResult();
        //如果为空，则未找到指定的流程定义对象
        if(processDefinition == null){
            return null ;
        }
        List highLightedActivities = runtimeService.getActiveActivityIds(processInstanceId);
        BpmnModel model = repositoryService.getBpmnModel(processDefinition.getId()) ;
        ProcessDiagramGenerator processDiagramGenerator = new DefaultProcessDiagramGenerator();
        //这里需要获取到model
        InputStream inputStream = processDiagramGenerator
                .generateDiagram(
                        model,
                        Globals.ACTIVITY_SUFFIX,
                        highLightedActivities,
                        Collections.emptyList(),
                        Globals.ACTIVITY_FONT, Globals.ACTIVITY_FONT, Globals.ACTIVITY_FONT,
                        null, Globals.ACTIVITY_SCALE_FACTOR
                );
        BufferedInputStream bins = new BufferedInputStream(inputStream);    //放到缓冲流里面
        OutputStream outs = null;               //获取文件输出IO流
        BufferedOutputStream bouts = null ;
        try {
            outs = response.getOutputStream();
            bouts = new BufferedOutputStream(outs);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            //开始向网络传输文件流
            while ((bytesRead = bins.read(buffer, 0, 8192)) != -1) {
                bouts.write(buffer, 0, bytesRead);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            inputStream.close();
            bouts.flush();//这里一定要调用flush()方法
            bins.close();
            outs.close();
            bouts.close();
        }
        return null;
    }

流程定义列表中查看流程图

前端代码

TableData.vue

查看流程图

      
        

          
        
      
      

        确定
      
    

后端代码

WorkflowController

/**
     * 在页面获取流程图图片
     * @param defId
     * @return
     */
    @RequestMapping("/showImage")
    public String showImage(String defId, HttpServletResponse response) throws IOException {
        ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery().processDefinitionId(defId).singleResult();
        //如果为空，则未找到指定的流程定义对象
        if(processDefinition == null){
            return null ;
        }
        BpmnModel model = repositoryService.getBpmnModel(processDefinition.getId()) ;
        ProcessDiagramGenerator processDiagramGenerator = new DefaultProcessDiagramGenerator();
        //这里需要获取到model
        InputStream inputStream = processDiagramGenerator.generateDiagram(model, Globals.ACTIVITY_SUFFIX,Globals.ACTIVITY_FONT, Globals.ACTIVITY_FONT, Globals.ACTIVITY_FONT, null, Globals.ACTIVITY_SCALE_FACTOR);
        BufferedInputStream bins = new BufferedInputStream(inputStream);    //放到缓冲流里面
        OutputStream outs = null;               //获取文件输出IO流
        BufferedOutputStream bouts = null ;
        try {
            outs = response.getOutputStream();
            bouts = new BufferedOutputStream(outs);
            int bytesRead = 0;
            byte[] buffer = new byte[8192];
            //开始向网络传输文件流
            while ((bytesRead = bins.read(buffer, 0, 8192)) != -1) {
                bouts.write(buffer, 0, bytesRead);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            inputStream.close();
            bouts.flush();//这里一定要调用flush()方法
            bins.close();
            outs.close();
            bouts.close();
        }
        return null;
    }

总结

至此，整个系列的内容全部展示说明完毕，关于Activiti工作流管理系统的开发也告一段落。总体而言，Activiti工作流引擎是十分好用的，其操作的便捷性，功能完善性都十分出色。并且结合Activiti在线作图应用，使得工作流作图功能在线化和可视化，方便在实际项目中能够更加方便的使用。
感谢各位大佬对本系列内容的支持，希望各位对此有什么意见或建议都可以在下方留言共同讨论，谢谢大家！