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