做网站可以申请专利吗,互联网运营模式有哪几种,深圳做网站的公司,印刷报价网站源码下载前言 Flowable 的流程图是 Flowable Modeler 或 Process Editor 中#xff0c;使用拖拽和属性面板基于 BPMN 2.0 元素#xff08;如任务、网关、事件、序列流等#xff09;渲染出的业务流程图形界面。
一、将图形导出可查看的作用
① 可视化建模 帮助业务分析师和开发者…前言 Flowable 的流程图是 Flowable Modeler 或 Process Editor 中使用拖拽和属性面板基于 BPMN 2.0 元素如任务、网关、事件、序列流等渲染出的业务流程图形界面。
一、将图形导出可查看的作用
① 可视化建模 帮助业务分析师和开发者共同设计复杂流程免去了理解纯 XML 定义的障碍。
② 流程部署与运行 确保流程结构符合预期再由 Flowable 引擎解析 XML 并生成执行计划。
③ 增强透明度与协作 可视化流程图让技术、业务和管理层共同站在“同一页面”审视流程逻辑减少沟通歧义并加快决策速度。
④ 标准化与合规审计 BPMN 强制流程设计者将隐含或未文档化的业务规则以图形化符号和属性形式显式化有助于流程审计与合规检查。
⑤ 培训与知识沉淀 流程图与文字说明协同构成易于理解的知识库新成员可通过图示快速上手减少培训成本并提升团队整体效率。
二、后端创建请求对象
这里的请求是表明需要查看具体哪一个部署流程定义
package com.ceair.entity.request;import lombok.Data;import java.io.Serial;
import java.io.Serializable;/*** author wangbaohai* ClassName QueryImageOrXmlReq* description: 查询部署流程定义的图片或xml文件请求对象* date 2025年04月22日* version: 1.0.0*/
Data
public class QueryImageOrXmlReq implements Serializable {Serialprivate static final long serialVersionUID 1L;/*** 流程定义ID*/private String processDefinitionId;}三、后端创建服务接口
/*** 查询图片信息的函数。* p* 根据传入的查询请求对象返回对应的图片信息字符串。** param queryImageOrXmlReq 查询请求对象包含查询图片所需的相关参数。* 该对象的具体结构和内容需符合业务逻辑要求。* return 返回一个字符串表示查询到的图片信息。* 如果查询失败或无结果返回值的具体含义需根据业务逻辑定义。*/
String queryImage(QueryImageOrXmlReq queryImageOrXmlReq);
四、后端实现服务接口
此实现是本文重点部分 该方法 queryImage(QueryImageOrXmlReq queryImageOrXmlReq) 的主要功能是根据前端传入的流程定义 ID调用流程引擎如 Activiti 或 Flowable持久化服务获取对应的流程图资源并将其以 Base64 编码的字符串形式返回给调用方。核心流程如下
参数校验保证输入对象和流程定义 ID 有效
查询流程定义通过 getById 方法确认流程定义是否存在
读取流程图资源流调用 repositoryService.getResourceAsStream 获取流程图文件的字节流
转换并编码将字节流读入内存通过 Base64 编码输出
异常处理对空流、IO 异常及其他未知异常分别捕获并封装业务异常。
/*** 查询流程图的Base64编码字符串。** param queryImageOrXmlReq 请求对象包含查询流程图所需的参数。* - 不能为空。* - 必须包含有效的流程定义IDprocessDefinitionId。* return 返回流程图的Base64编码字符串。* - 如果流程定义不存在或资源流为空则抛出异常。* throws IllegalArgumentException 如果请求对象为空或流程定义ID无效。* throws BusinessException 如果流程定义不存在、资源流为空或发生IO异常。*/
Override
public String queryImage(QueryImageOrXmlReq queryImageOrXmlReq) {// 参数校验确保请求对象不为空if (queryImageOrXmlReq null) {log.error(获取流程图失败原因请求对象不能为空);throw new IllegalArgumentException(获取流程图失败原因请求对象不能为空);}String processDefinitionId queryImageOrXmlReq.getProcessDefinitionId();// 参数校验确保流程定义ID不为空或空字符串if (processDefinitionId null || processDefinitionId.trim().isEmpty()) {log.error(获取流程图失败原因流程定义ID不能为空或空字符串);throw new IllegalArgumentException(获取流程图失败原因流程定义ID不能为空或空字符串);}// 根据流程定义ID查询流程定义ActReProcdef actReProcdef getById(processDefinitionId);if (actReProcdef null) {log.error(获取流程图失败原因流程定义不存在流程定义ID{}, processDefinitionId);throw new BusinessException(获取流程图失败原因流程定义不存在流程定义ID processDefinitionId);}// 获取流程图资源流try (InputStream imageStream repositoryService.getResourceAsStream(actReProcdef.getDeploymentId(),actReProcdef.getDgrmResourceName())) {if (imageStream null) {log.error(获取流程图失败原因资源流为空流程定义ID{}, processDefinitionId);throw new BusinessException(获取流程图失败原因资源流为空流程定义ID processDefinitionId);}// 将资源流内容读取为字节数组并进行Base64编码ByteArrayOutputStream outputStream new ByteArrayOutputStream();byte[] buffer new byte[4096];int bytesRead;while ((bytesRead imageStream.read(buffer)) ! -1) {outputStream.write(buffer, 0, bytesRead);}return Base64.getEncoder().encodeToString(outputStream.toByteArray());} catch (IOException e) {// 捕获IO异常并记录日志log.error(获取流程图失败原因IO异常流程定义ID{}, processDefinitionId, e);throw new BusinessException(获取流程图失败原因IO异常, e);} catch (Exception e) {// 捕获其他未知异常并记录日志log.error(获取流程图失败原因未知异常流程定义ID{}, processDefinitionId, e);throw new BusinessException(获取流程图失败原因未知异常, e);}
}
五、后端创建功能接口
提供接口以供前端调用
// 使用Spring Security的注解进行权限控制确保只有拥有特定权限的用户才能访问此方法
PreAuthorize(hasAnyAuthority(/api/v1/actReProcdef/queryImage))
// 定义参数对象的元数据用于API文档生成
Parameter(name queryImageOrXmlReq, description 查询流程定义图片请求对象, required true)
// 定义操作的元数据用于API文档生成
Operation(summary 查询流程定义图片)
// 声明这是一个POST请求的处理方法
PostMapping(/queryImage)
public ResultString queryImage(RequestBody QueryImageOrXmlReq queryImageOrXmlReq) {try {// 调用服务层方法执行流程定义操作传入请求对象并获取操作结果String image actReProcdefService.queryImage(queryImageOrXmlReq);// 返回操作成功的响应结果return Result.success(image);} catch (Exception e) {// 捕获异常记录详细的错误日志并返回包含失败原因的响应结果log.error(查询流程定义图片失败 具体原因为 : {}, e.getMessage());return Result.error(查询流程定义图片失败,失败原因 e.getMessage());}
}
六、前端创建请求参数
与后台接口保持一致 // 查询流程图或者流程XML请求对象 export interface QueryImageOrXmlReq { processDefinitionId: string // 流程定义ID } 七、前端封装请求接口
调用后台提供的接口
// 查询流程图
export function queryImage(data: QueryImageOrXmlReq) {return request.postany({url: /pm-process/api/v1/actReProcdef/queryImage,data,})
}
八、前端增加功能方法
// 定义响应式数据 showImage 表示是否显示流程定义的图片对话框
const showImage ref(false)// 定义响应式数据 imageData 表示流程定义的图片数据
const imageData ref()/*** 异步函数用于显示流程定义的图片* param data ActReProcdefVO 类型的对象包含流程定义的相关信息*/
async function onShowImage(data: ActReProcdefVO) {try {// 组装查询参数包括流程定义 IDconst param: QueryImageOrXmlReq {processDefinitionId: data.id,}// 调用后端接口获取流程定义的图片数据const result: any await queryImage(param)// 判断查询结果是否成功if (result.success result.code 200) {// 如果成功则更新流程定义的图片数据imageData.value result.data// 打开图片对话框showImage.value true}else {// 提示操作失败的错误提示信息ElMessage({message: 查询失败原因${result.message},type: error,})}}catch (error) {// 捕获异常并提取错误信息let errorMessage 未知错误if (error instanceof Error) {errorMessage error.message}// 显示操作失败的错误提示信息ElMessage({message: 查询失败: ${errorMessage || 未知错误},type: error,})}
}
九、前端增加界面 el-button v-hasButtonbtn.actReProcdef.queryImage typeprimary clickonShowImage(scope.row) 查看流程图 /el-button 此处需注意直接使用img标签的base64解码将图片文件的字符串转码成图片 !-- 流程图展示弹出框 -- el-dialog v-modelshowImage title流程图展示 width80% div classimage-container img :srcdata:image/jpeg;base64,${imageData} alt流程图 /div /el-dialog .image-container { display: flex; justify-content: center; align-items: center; height: 100%; } .image-container img { max-width: 100%; max-height: 100%; } 十、添加按钮分配权限
这一步是添加按钮 这一步是把按钮权限给到当前操作员的角色【超级管理员】 十一、结果查询 十二、后记
本篇文章的前后端仓库地址请查询专栏第一篇文章后续打算把xml和流程图片展示出来
本文的后端分支是 process-7
本文的前端分支是 process-9
