eric/ar-inspection

Fork 0

Files

YANGJIANKUAN 9ed58de1ce feat: admin web dev

2025-12-02 13:31:25 +08:00

5.1 KiB

Raw Permalink Blame History

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

# 进入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: 给角色分配权限

登录系统管理后台
进入 系统管理 > 角色管理
选择需要授权的角色,点击"修改"
在菜单权限中勾选"AR巡检"及其子菜单
保存设置

步骤3: 启动前端项目

cd plus-ui
npm run dev

访问 http://localhost:80 即可看到"AR巡检"菜单。

步骤4: 测试功能

点击"AR巡检"菜单,展开子菜单
依次测试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 - 步骤记录按钮权限

回滚操作

如需清理测试数据:

mysql -u root -p
use ry-vue;
source /path/to/script/sql/ar-inspection-menu-rollback.sql;

注意事项

菜单ID冲突: 本模块使用2000-2199的ID段,请勿在此范围内创建其他菜单
权限标识: 前端组件中使用 v-hasPermi 指令控制按钮显示,需确保权限标识一致
路由懒加载: 所有页面组件使用懒加载,提高首屏加载速度
多租户支持: 菜单表自动支持多租户,无需额外配置
图标: 使用Element Plus内置图标,可在Element Plus官网查看完整图标列表

下一步工作

完善前端视图页面: 参照 device/index.vue 完善其他7个页面的功能
添加数据字典: 在系统管理中添加任务类型、执行状态等字典项
优化步骤管理: 实现树形结构的拖拽排序功能
媒体文件上传: 集成OSS文件上传功能
执行记录详情: 添加执行记录的详情页面,展示完整执行过程

技术栈

后端: Spring Boot 3.5.7 + MyBatis-Plus + Sa-Token
前端: Vue 3 + TypeScript + Element Plus + Vite
数据库: MySQL 5.7+
权限控制: 基于RBAC的菜单权限模型

联系方式

如有问题,请提交Issue或联系开发团队。

5.1 KiB Raw Permalink Blame History