赵忠林
addd4bbe01
- 修改菜单搜索组件，添加备份与恢复按钮 - 调整主页面组件属性绑定 - 实现 Excel 格式菜单数据的导出与导入 - 添加文件类型与大小验证 - 支持拖拽上传与点击上传两种方式 - 提供操作成功/失败的消息反馈 -限制功能仅超级管理员可用 - 更新相关 API 接口调用 (importSystemMenu)- 优化用户体验与界面交互
3.4 KiB
3.4 KiB
菜单模块备份与恢复功能实现说明
功能概述
参考 cmsWebsiteField 模块的备份与恢复功能，为系统菜单模块实现了完整的数据备份与恢复功能。
修改内容
1. 新增组件
1.1 Import.vue (导入组件)
- 位置: /src/views/system/menu/components/Import.vue
- 功能: 提供 Excel 文件导入功能，用于恢复菜单数据
- 特点:
- 支持 .xls 和 .xlsx 文件格式
- 文件大小限制为 10MB
- 使用拖拽上传或点击上传方式
- 调用
importSystemMenuAPI 接口进行数据恢复
1.2 menu-search.vue (搜索组件)
- 位置: /src/views/system/menu/components/menu-search.vue
- 功能: 提供菜单搜索、新建、备份、恢复功能
- 特点:
- 备份功能: 将当前菜单数据导出为 Excel 文件
- 恢复功能: 通过导入 Excel 文件恢复菜单数据
- 支持关键词搜索
- 保留原有新建功能
2. 修改的文件
2.1 主页面 index.vue
- 位置: /src/views/system/menu/index.vue
- 修改内容:
- 更新了 Delete 和 Clone 组件的属性绑定，确保传递所有必需的参数
- 保留了原有功能不变
3. API 接口
3.1 已存在的接口
系统已提供以下相关 API 接口:
listMenus: 获取菜单列表（用于备份）importSystemMenu: 导入菜单数据（用于恢复）
功能详情
1. 备份功能
- 点击"备份"按钮触发
- 导出当前所有菜单数据为 Excel 文件
- 导出字段包括:
- 菜单ID
- 父级ID
- 菜单名称
- 路由地址
- 组件路径
- 权限标识
- 菜单类型
- 图标
- 排序号
- 是否隐藏
- 创建时间
- 文件名格式: 菜单备份_YYYYMMDD.xlsx
2. 恢复功能
- 点击"恢复"按钮触发
- 弹出导入对话框
- 支持拖拽上传或点击上传 Excel 文件
- 文件验证:
- 格式限制: 仅支持 .xls 和 .xlsx
- 大小限制: 不超过 10MB
- 导入成功后自动刷新菜单列表
使用方法
1. 数据备份
- 进入系统管理 -> 菜单管理页面
- 点击"备份"按钮
- 等待系统生成 Excel 文件并自动下载
2. 数据恢复
- 进入系统管理 -> 菜单管理页面
- 点击"恢复"按钮
- 在弹出的对话框中:
- 拖拽 Excel 文件到指定区域，或
- 点击上传区域选择文件
- 等待系统处理完成，成功后会自动刷新页面
技术实现
1. 前端技术
- Vue 3 Composition API
- TypeScript 类型安全
- xlsx 库处理 Excel 文件
- Ant Design Vue 组件库
- 响应式设计适配不同屏幕尺寸
2. 数据处理
- 备份时调用
listMenus获取完整菜单数据 - 恢复时调用
importSystemMenu上传并处理 Excel 文件 - 数据格式验证和错误处理
3. 用户体验
- 加载状态提示
- 成功/失败消息反馈
- 文件格式和大小限制提示
- 操作按钮直观易用
注意事项
- 备份文件包含所有菜单信息，请妥善保管
- 恢复操作会覆盖现有数据，请谨慎操作
- 建议在执行恢复操作前先进行备份
- 恢复功能仅限超级管理员使用（根据实际权限设置）
该功能现已完整实现，用户可以方便地对菜单数据进行备份和恢复操作。