Files
ar-inspection/AR-INSPECTION-SETUP.md
2025-11-28 18:10:29 +08:00

179 lines
5.1 KiB
Markdown

# AR巡检模块前端对接和路由配置
## 完成内容
### 1. 前端API接口对接 ✅
所有8个模块的前端API已完整定义并对接后端:
- `plus-ui/src/api/inspection/device/` - 设备管理API
- `plus-ui/src/api/inspection/region/` - 区域管理API
- `plus-ui/src/api/inspection/point/` - 点位管理API
- `plus-ui/src/api/inspection/task/` - 任务模板API
- `plus-ui/src/api/inspection/step/` - 巡检步骤API (含树形接口)
- `plus-ui/src/api/inspection/stepMedia/` - 步骤媒体API
- `plus-ui/src/api/inspection/execution/` - 执行记录API
- `plus-ui/src/api/inspection/stepRecord/` - 步骤记录API
每个模块包含:
- `index.ts` - API函数定义
- `types.ts` - TypeScript类型定义(VO/Form/Query)
### 2. 前端路由配置 ✅
`plus-ui/src/router/index.ts` 中已配置完整路由:
- 一级路由: `/inspection` - AR巡检模块
- 8个子路由对应8个管理页面
- 所有路由支持懒加载和权限控制
### 3. 菜单和权限SQL ✅
生成文件:
- `script/sql/ar-inspection-menu.sql` - 菜单和权限初始化SQL
- `script/sql/ar-inspection-menu-rollback.sql` - 回滚SQL
SQL包含:
- 1个一级菜单 (menu_id: 2000)
- 8个二级菜单 (menu_id: 2001-2008)
- 40个按钮权限 (menu_id: 2101-2175)
- 合计49条权限配置
## 使用说明
### 步骤1: 执行数据库SQL
```bash
# 进入MySQL数据库
mysql -u root -p
# 选择数据库
use ry-vue;
# 执行菜单初始化SQL
source /path/to/script/sql/ar-inspection-menu.sql;
# 验证
SELECT * FROM sys_menu WHERE menu_id >= 2000 AND menu_id < 2200;
```
### 步骤2: 给角色分配权限
1. 登录系统管理后台
2. 进入 **系统管理 > 角色管理**
3. 选择需要授权的角色,点击"修改"
4. 在菜单权限中勾选"AR巡检"及其子菜单
5. 保存设置
### 步骤3: 启动前端项目
```bash
cd plus-ui
npm run dev
```
访问 `http://localhost:80` 即可看到"AR巡检"菜单。
### 步骤4: 测试功能
1. 点击"AR巡检"菜单,展开子菜单
2. 依次测试8个子模块的CRUD功能:
- 设备管理
- 区域管理
- 点位管理
- 任务模板
- 巡检步骤
- 步骤媒体
- 执行记录
- 步骤记录
## 权限标识说明
所有权限标识遵循格式: `inspection:模块:操作`
### 菜单权限
- `inspection:device:list` - 设备管理菜单
- `inspection:region:list` - 区域管理菜单
- `inspection:point:list` - 点位管理菜单
- `inspection:task:list` - 任务模板菜单
- `inspection:step:list` - 巡检步骤菜单
- `inspection:stepMedia:list` - 步骤媒体菜单
- `inspection:execution:list` - 执行记录菜单
- `inspection:stepRecord:list` - 步骤记录菜单
### 按钮权限 (每个模块5个)
- `inspection:模块:query` - 查询权限
- `inspection:模块:add` - 新增权限
- `inspection:模块:edit` - 修改权限
- `inspection:模块:remove` - 删除权限
- `inspection:模块:export` - 导出权限
## 后端接口说明
所有后端接口路径格式: `/inspection/模块/操作`
### 标准CRUD接口
```
GET /inspection/{模块}/list - 分页查询列表
GET /inspection/{模块}/{id} - 查询详情
POST /inspection/{模块} - 新增
PUT /inspection/{模块} - 修改
DELETE /inspection/{模块}/{ids} - 删除(支持批量)
POST /inspection/{模块}/export - 导出Excel
```
### 特殊接口
```
GET /inspection/step/tree/{taskId} - 查询任务的步骤树形结构
```
## 菜单ID分配规则
```
2000 - AR巡检(一级菜单)
2001-2008 - 8个二级菜单(设备/区域/点位/任务/步骤/媒体/执行/记录)
2101-2105 - 设备管理按钮权限
2111-2115 - 区域管理按钮权限
2121-2125 - 点位管理按钮权限
2131-2135 - 任务模板按钮权限
2141-2145 - 巡检步骤按钮权限
2151-2155 - 步骤媒体按钮权限
2161-2165 - 执行记录按钮权限
2171-2175 - 步骤记录按钮权限
```
## 回滚操作
如需清理测试数据:
```bash
mysql -u root -p
use ry-vue;
source /path/to/script/sql/ar-inspection-menu-rollback.sql;
```
## 注意事项
1. **菜单ID冲突**: 本模块使用2000-2199的ID段,请勿在此范围内创建其他菜单
2. **权限标识**: 前端组件中使用 `v-hasPermi` 指令控制按钮显示,需确保权限标识一致
3. **路由懒加载**: 所有页面组件使用懒加载,提高首屏加载速度
4. **多租户支持**: 菜单表自动支持多租户,无需额外配置
5. **图标**: 使用Element Plus内置图标,可在Element Plus官网查看完整图标列表
## 下一步工作
1. **完善前端视图页面**: 参照 `device/index.vue` 完善其他7个页面的功能
2. **添加数据字典**: 在系统管理中添加任务类型、执行状态等字典项
3. **优化步骤管理**: 实现树形结构的拖拽排序功能
4. **媒体文件上传**: 集成OSS文件上传功能
5. **执行记录详情**: 添加执行记录的详情页面,展示完整执行过程
## 技术栈
- **后端**: Spring Boot 3.5.7 + MyBatis-Plus + Sa-Token
- **前端**: Vue 3 + TypeScript + Element Plus + Vite
- **数据库**: MySQL 5.7+
- **权限控制**: 基于RBAC的菜单权限模型
## 联系方式
如有问题,请提交Issue或联系开发团队。