上个小节我们让折叠面板显示了审批任务的详情信息的文字部分，现在只差BPMN实时进度图了，这幅图是通过调用工作流项目获得的。但是禁止前端VUE页面直接调用工作流项目的Web方法，而是由emos-api充当中介，来调用工作流项目。
说到这里，我得跟你讲讲分布式项目的设计原则，不应该把所有的子项目都直接暴露给外网。如果我们要在每个子项目的Web方法都要写权限验证和判断，系统也不太好维护，所以最好的办法就是有专门对接外网的Web方法，其他子项目的Web方法只提供内网调用。
为什么不在Service层发出HTTP请求调用工作流的Web方法？原因很简单，我不想让emos-api项目在服务器上保存BPMN图片。如果是在Service层发出HTTP请求，我们势必要在Service层提取响应中的BPMN图片文件，然后把文件对象返回给Web层；如果直接在Web层发出HTTP请求，我们可以不用从工作流返回的响应里面提取出图片文件，直接通过IO流对拷，把工作流响应中的图片用IO流拷贝到Web方法的响应对象中。有的人可能觉得，通过IO流把数据读取到Byte数组里面，把Byte数组返回给Web层也没有在本地保存文件啊。你这种做法在Service层写代码操作了IO流，然后到Web层又写代码操作了一遍IO流，你不觉得很麻烦吗？一会儿你看看IO流对拷有多方便。
一、编写Web层代码
在ApprovalController.java类中定义Web方法，获取BPMN图片。
public class ApprovalController {
……
@GetMapping("/searchApprovalBpmn")
@Operation(summary = "获取BPMN图形")
@SaCheckPermission(value = {"WORKFLOW:APPROVAL", "FILE:ARCHIVE"}, mode = SaMode.OR)
public void searchApprovalBpmn(String instanceId, HttpServletResponse response) {
if (StrUtil.isBlankIfStr(instanceId)) {
throw new EmosException("instanceId不能为空");
}
HashMap param = new HashMap() {{
put("code", code);
put("tcode", tcode);
put("instanceId", instanceId);
}};
String url = workflow + "/workflow/searchApprovalBpmn";
HttpResponse resp = HttpRequest.post(url).header("content-type", "application/json")
.body(JSONUtil.toJsonStr(param)).execute();
if (resp.getStatus() == 200) {
try (InputStream in = resp.bodyStream();
BufferedInputStream bin = new BufferedInputStream(in);
OutputStream out = response.getOutputStream();
BufferedOutputStream bout = new BufferedOutputStream(out)) {
IOUtils.copy(bin, bout);
} catch (Exception e) {
log.error("执行异常", e);
}
} else {
log.error("获取工作流BPMN失败");
throw new EmosException("获取工作流BPMN失败");
}
}
}
很多同学注意到了，Web方法接受GET请求，为什么不用POST呢？这是因为前端页面的<img>标签调用Web方法加载图片的时候，它只能发出GET请求，所以Web方法我们要配合前端<img>标签。
二、编写前端代码
因为有些工作流比较复杂，页面上又没有太大的空间放置BPMN图片，所以我们要引入ElementUI-PLUS的预览图功能。用户点击BPMN图片，将以幻灯片的形式观看图片，而且还可以放大缩小和旋转。默认情况下，预览图功能要求你不管显示多少张图片，都要用数组传入图片的地址。
<el-image class="bpmn" :src="bpmnUrl" :preview-src-list="bpmnList"></el-image>
在expand函数里面添加一段JavaScript代码，为了避免浏览器缓存图片，我们还要给URL路径上面添加一个的毫秒值。
expand: function(row, expandedRows) {
……
if (expandedRows.length>0) {
that.bpmnUrl = this.$baseUrl +'approval/searchApprovalBpmn' +
'?instanceId='+row.processId + "&token="+ localStorage.getItem("token")+
'&time=' + new Date().getTime();
that.bpmnList = [that.bpmnUrl];
}