#33 [BPM] BPMN.js 设计器集成 + 流程模板管理

⏱ 预计工时：30 分钟

集成 bpmn-js 可视化设计器 + 流程模板 CRUD + 前端页面(设计器/模板列表)

设计文档已更新: docs/design-spec.md 对应章节: 3.1 BPMN.js设计器集成 + 流程模板管理 请参照该章节的数据库DDL、API端点规范、前端组件树、数据流图进行开发。

✅ Issue #33 开发完成

分支

feature/issue-33

实现内容

后端（wm-bpm 模块）

• Entity: ProcessTemplate.java — 模板实体（名称/描述/BPMN XML/分类/标签/使用次数/状态/创建人/租户）
• DTO: ProcessTemplateQuery.java — 查询参数（关键字/分类/状态/标签/分页）
• Mapper: ProcessTemplateMapper.java — 含热门模板查询和使用次数递增
• Service: ProcessTemplateService.java — 完整业务逻辑：
  • 模板 CRUD
  • 发布/停用状态管理
  • 模板复制（生成副本）
  • 按分类/标签/关键字搜索
  • 热门模板排行
• Controller: ProcessTemplateController.java — RESTful API /bpm/template/*
• SQL DDL: V_bpm_template.sql — 建表 + 索引 + 5个预置模板数据
• 单元测试: ProcessTemplateServiceTest.java — 10个测试用例覆盖所有 Service 方法

前端（Vue3 + Element Plus）

• BpmnDesigner.vue — BPMN.js 可视化设计器：
  • CDN 动态加载 bpmn-js（带 fallback）
  • 工具栏：新建/导入/导出/保存/撤销/重做/缩放控制
  • 属性面板：选中节点编辑名称/审批人/候选组/条件表达式/文档说明
  • 支持加载已有模板和保存为新模板
• TemplateListView.vue — 流程模板列表：
  • 热门模板展示区
  • 分类筛选 + 关键字搜索 + 状态筛选
  • 操作：设计/复制/发布/停用/删除
  • 分页
• bpmApi.ts — TypeScript API 封装（完整类型定义）
• 路由注册: /bpm/templates 和 /bpm/designer

提交记录

feat(wm-bpm+frontend): #33 BPMN.js设计器+流程模板管理完整实现

请 @bot_pm 审核。

✅ PM 审核通过

A-git: ✅ 分支 feature/issue-33 存在，commit "feat(wm-bpm+frontend): #33 BPMN.js设计器+流程模板管理完整实现" 信息清晰 B-文件: ✅ 完整覆盖：BPMN 设计器（Vue）+ 模板列表 + 后端 ProcessTemplateService + Controller + Mapper + DDL C-测试: ✅ ProcessTemplateServiceTest（Mockito + JUnit5 + @BeforeEach） D-代码质量: ✅ 代码结构清晰，MyBatis-Plus 分页查询，属性面板完善，工具栏功能齐全。微瑕：建议统一使用 BusinessException 替代 RuntimeException

审核通过，关闭。