qqflowengine-frontend

qqflowengine-frontend

通用型流程审批设计与管理系统 — 前端应用

技术栈

• Vue 3.4 + Vite 4.5 + TypeScript 5
• Element Plus 2.7
• Pinia + Vue Router 4
• LogicFlow 1.2（流程设计器，v1.x 无 destroy 方法）
• ECharts 6 + vue-echarts（分析看板）
• Axios

快速启动

cd qqflowengine-frontend
npm install
npm run dev

开发服务器：http://localhost:3000，自动代理 /api 到 http://localhost:8080。

构建部署

npm run build     # 输出到 dist/
npm run preview   # 预览构建产物

Docker 构建时如遇缓存问题，修改 Dockerfile 中的 ARG BUILD_BUSTER 值破缓存。

默认账号

密码均为 123456a：

账号	可见菜单
admin	全部（首页、审批中心、流程管理、系统管理、统计分析）
zhangsan	首页、审批中心
lisi	首页、审批中心、系统管理
wangwu	首页、审批中心、流程管理、统计分析

菜单可见性由 employeeType 控制（super_admin / flow_manager / dept_manager / common_user）。

页面说明

路由	页面	说明
/dashboard	首页	统计卡片 + 快捷入口
/approval/todo	待办任务	审批通过/拒绝/转办/加签、分支选择
/approval/mine	我的发起	已发起流程列表、筛选
/flow/definition	流程管理	流程 CRUD、发布/停用、编辑表单和导入配置
/flow/designer	流程设计器	拖拽设计审批流程（管理员可见）
/flow/execute	流程执行	发起流程（选择已发布流程）
/flow/instance/mine	我的发起	流程实例列表 + 批量导入
/flow/instance/all	流程明细	全部实例（管理员）
/analysis	分析看板	KPI、趋势、效率、节点统计、流程明细
/system/user	用户管理	系统用户 CRUD + 分配角色
/system/role	审批角色	角色 CRUD + 企微配置

项目结构

src/
├── api/                # API 接口层
│   └── flow/           # 流程相关（task、definition、instance、import）
├── components/         # 公共组件（Layout、Sidebar、FlowFormFields、FilePreview）
├── router/             # 路由 + 权限守卫
├── stores/             # Pinia（user-store）
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数（auth、file、flow、format）
├── views/
│   ├── dashboard/      # 首页
│   ├── login/          # 登录
│   ├── workbench/      # 审批中心（待办/已办/抄送/我的发起）
│   ├── flow/           # 流程设计器、定义、执行、实例
│   ├── system/         # 用户管理、审批角色
│   └── analysis/       # 数据分析看板
└── main.ts