3、流程实践-集成bpmn-js

1、bpmn-js

下载：https://bpmn.io/toolkit/bpmn-js/

本文目的不是写bpmn-js ，直接拷贝一个先现成的如下：

2、业务访问地址

http://localhost:8080/bpmnjs/dist/index.html?type=lookBpmn&instanceId=180001
&deploymentFileUUID=8&deploymentName=qingjia.bpmn&AssigneeName=zhangsan

3、JavaScript展示主要逻辑代码如下：

//例子
https://blog.csdn.net/qq_35664308/article/details/110469247
//设置颜色
https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors

$.ajax({
    //获取高亮
    url: publicurl+'activitiHistory/gethighLine',
    type: 'GET',
    data: param1,
    dataType:'json',
    success: function (result) {
      //获取颜色填充到 ColorJson 
      //   [{"name": "xx usertask 名字",
      //    "stroke":"gray",
      //    "fill":"#eae9e9"}...]
      var ColorJson=tools.getByColor(result.obj)
        $.ajax({
            //获取流程定义
            url: publicurl+'processDefinition/getDefinitionXML',
            type: 'GET',
            data: param,
            dataType:'text',
            success: function (result) {
                var newXmlData = result
                tools.createDiagram(newXmlData, bpmnModeler, container);
                setTimeout(function () {
                    for (var i in ColorJson) {
                        //设置流程图颜色
                        /**
                           var modeling = bpmnModeler.get('modeling');
                            var elementRegistry = bpmnModeler.get('elementRegistry')
                            var elementToColor = elementRegistry.get(json.name);
                            if(elementToColor){
                                modeling.setColor([elementToColor], {
                                    stroke: json.stroke,
                                    fill: json.fill
                                });
                            }
                        **/
                        tools.setColor(ColorJson[i],bpmnModeler)
                    }
                }, 200)
            },
            error: function (err) {
                console.log(err)
            }
        });
    },

task 的 html 颜色 填充代码

<rect x="0" y="0" width="85" height="55" rx="10" ry="10" style="stroke: green; stroke-width: 2px; fill: yellow; fill-opacity: 0.95;"></rect>

4、java接口实现，根据业务执行路径，查询历史表act_hi_procinst，节点与节点连线、节点标记和标记节点当前传入执行人。

/**
 * index.js
 * AssigneeName 参数该处理人
 * deploymentName  act_ge_bytearray表 name字段  xml的名字
 * deploymentFileUUID  act_re_deployment 表的 ID
 * instanceId  实例ID
 *
 * http://localhost:8080/bpmnjs/dist/index.html?type=lookBpmn&instanceId=10823123-92ac-11eb-9909-dc7196b7d4a6&deploymentFileUUID=z3d6aeda-91d0-11eb-95aa-dc7196b7d4a6&deploymentName=springboot02.bpmn&AssigneeName=salaboy
 */

@RestController
@RequestMapping("/activitiHistory")
public class ActivitiHistoryController {


    @Autowired
    private RepositoryService repositoryService;

    @Autowired
    private HistoryService historyService;

    //获取流程定义XML
    @GetMapping(value = "/getDefinitionXML")
    public void getProcessDefineXML(HttpServletResponse response,
                                    @RequestParam("deploymentId") String deploymentId,
                                    @RequestParam("resourceName") String resourceName) {



        try {
            InputStream inputStream = repositoryService.getResourceAsStream(deploymentId,resourceName);
            int count = inputStream.available();
            byte[] bytes = new byte[count];
            response.setContentType("text/xml");
            OutputStream outputStream = response.getOutputStream();
            while (inputStream.read(bytes) != -1) {
                outputStream.write(bytes);
            }
            inputStream.close();
        } catch (Exception e) {
            e.toString();
        }
    }


    //任务实例历史
    @GetMapping(value = "/getInstancesByPiID")
    public AjaxResponse getInstancesByPiID(@RequestParam("piID") String piID) {
        try {

            //--------------------------------------------另一种写法-------------------------
            List<HistoricTaskInstance> historicTaskInstances = historyService.createHistoricTaskInstanceQuery()
                    .orderByHistoricTaskInstanceEndTime().asc()
                    .processInstanceId(piID)
                    .list();

            return AjaxResponse.AjaxData(GlobalConfig.ResponseCode.SUCCESS.getCode(),
                    GlobalConfig.ResponseCode.SUCCESS.getDesc(), historicTaskInstances);
        } catch (Exception e) {
            return AjaxResponse.AjaxData(GlobalConfig.ResponseCode.ERROR.getCode(),
                    "获取历史任务失败", e.toString());
        }

    }



    //流程图高亮
    @GetMapping("/gethighLine")
    public AjaxResponse gethighLine(@RequestParam("instanceId") String instanceId, String AssigneeName) {
        try {
            HistoricProcessInstance historicProcessInstance = historyService.createHistoricProcessInstanceQuery()
                    .processInstanceId(instanceId).singleResult();
            //获取bpmnModel对象
            BpmnModel bpmnModel = repositoryService.getBpmnModel(historicProcessInstance.getProcessDefinitionId());
            //因为我们这里只定义了一个Process 所以获取集合中的第一个即可
            Process process = bpmnModel.getProcesses().get(0);
            //获取所有的FlowElement信息
            Collection<FlowElement> flowElements = process.getFlowElements();

            Map<String, String> map = new HashMap<>();
            for (FlowElement flowElement : flowElements) {
                //判断是否是连线
                if (flowElement instanceof SequenceFlow) {
                    SequenceFlow sequenceFlow = (SequenceFlow) flowElement;
                    String ref = sequenceFlow.getSourceRef();
                    String targetRef = sequenceFlow.getTargetRef();
                    map.put(ref + targetRef, sequenceFlow.getId());
                }
            }

            //获取流程实例 历史节点(全部)
            List<HistoricActivityInstance> list1 = historyService.createHistoricActivityInstanceQuery()
                    .processInstanceId(instanceId)
                    .list();
            //去掉delete reason 数据 ，目前跳转没问题，执行有问题
            List<HistoricActivityInstance> list= new ArrayList<>();
            for (HistoricActivityInstance h:list1) {
                if(StringUtils.isBlank(h.getDeleteReason())){
                    list.add(h);
                }
            }


            //各个历史节点   两两组合 key
            Set<String> keyList = new HashSet<>();
            for (HistoricActivityInstance i : list) {
                for (HistoricActivityInstance j : list) {
                    if (i != j) {
                        keyList.add(i.getActivityId() + j.getActivityId());
                    }
                }
            }
            //高亮连线ID
            Set<String> highLine = new HashSet<>();
            keyList.forEach(s -> highLine.add(map.get(s)));


            //获取流程实例 历史节点（已完成）
            List<HistoricActivityInstance> listFinished = historyService.createHistoricActivityInstanceQuery()
                    .processInstanceId(instanceId)
                    .finished()
                    .list();
            //高亮节点ID
            Set<String> highPoint = new HashSet<>();
            listFinished.forEach(s -> highPoint.add(s.getActivityId()));

            //获取流程实例 历史节点（待办节点）
            List<HistoricActivityInstance> listUnFinished = historyService.createHistoricActivityInstanceQuery()
                    .processInstanceId(instanceId)
                    .unfinished()
                    .list();

            //需要移除的高亮连线
            Set<String> set = new HashSet<>();
            //待办高亮节点
            Set<String> waitingToDo = new HashSet<>();
            listUnFinished.forEach(s -> {
                waitingToDo.add(s.getActivityId());

                for (FlowElement flowElement : flowElements) {
                    //判断是否是 用户节点
                    if (flowElement instanceof UserTask) {
                        UserTask userTask = (UserTask) flowElement;

                        if (userTask.getId().equals(s.getActivityId())) {
                            List<SequenceFlow> outgoingFlows = userTask.getOutgoingFlows();
                            //因为 高亮连线查询的是所有节点  两两组合 把待办 之后  往外发出的连线 也包含进去了  所以要把高亮待办节点 之后 即出的连线去掉
                            if (outgoingFlows != null && outgoingFlows.size() > 0) {
                                outgoingFlows.forEach(a -> {
                                    if (a.getSourceRef().equals(s.getActivityId())) {
                                        set.add(a.getId());
                                    }
                                });
                            }
                        }
                    }
                }
            });

            highLine.removeAll(set);


            //获取当前用户
            //User sysUser = getSysUser();
            Set<String> iDo = new HashSet<>(); //存放 高亮 我的办理节点
            //当前用户已完成的任务
            List<HistoricTaskInstance> taskInstanceList = historyService.createHistoricTaskInstanceQuery()
                    .taskAssignee(AssigneeName)
                    .finished()
                    .processInstanceId(instanceId).list();

            taskInstanceList.forEach(a -> iDo.add(a.getTaskDefinitionKey()));

            Map<String, Object> reMap = new HashMap<>();
            reMap.put("highPoint", highPoint);
            reMap.put("highLine", highLine);
            reMap.put("waitingToDo", waitingToDo);
            reMap.put("iDo", iDo);

            return AjaxResponse.AjaxData(GlobalConfig.ResponseCode.SUCCESS.getCode(),
                    GlobalConfig.ResponseCode.SUCCESS.getDesc(), reMap);

        } catch (Exception e) {
            return AjaxResponse.AjaxData(GlobalConfig.ResponseCode.ERROR.getCode(),
                    "渲染历史流程失败", e.toString());
        }
    }


}