feat: 完成系统管理模块功能迭代
新增用户、菜单、日志、问题帮助等业务模块,优化角色权限分配功能,新增依赖包与全局组件
This commit is contained in:
@@ -15,6 +15,56 @@
|
||||
- 参考文档:[表格组件使用说明.md](file:///d:/code/mes/mes-ui/docs/表格组件使用说明.md)
|
||||
- 参考示例:`src/views/production-master-data/factory-model/factory-area/index.vue`
|
||||
|
||||
#### 1.1 特殊弹出框组件迁移(重要)
|
||||
|
||||
当旧页面中存在**超出 `page-dialog-form` 能力的弹出框**时(权限分配树、批量导入、关联选择器、详情查看、多步骤向导等),必须遵循以下流程:
|
||||
|
||||
##### 第一步:分析旧代码
|
||||
- **仔细阅读旧项目的弹出框代码**,理解其数据结构、交互逻辑、API 调用
|
||||
- 关注旧代码的数据来源路径(如 `row.menu_admin` 直接从列表获取、还是额外调 API)
|
||||
- 记录旧的参数名、method 名,确保迁移时不遗漏
|
||||
|
||||
##### 第二步:提出优化方案
|
||||
迁移时**不能简单照搬旧代码**,必须结合新版能力提出优化:
|
||||
|
||||
| 旧写法 | 优化方向 |
|
||||
|--------|---------|
|
||||
| `el-dialog` 内联在页面中 | 抽离为独立组件 → `components/` |
|
||||
| `sct-base-dialog` + 内联表单 | 独立组件 + `el-drawer`(抽屉式体验更佳) |
|
||||
| 额外调 API 获取数据(如行数据已包含) | 直接从 `row.xxx` 取值,减少请求 |
|
||||
| `setTimeout` 硬编码延迟 | 提出来讨论,结合 `v-if` + `$nextTick` 优化 |
|
||||
| `$parent` / `$refs` 跨组件通信 | 改为 `props` + `$emit` |
|
||||
|
||||
示例:角色权限分配迁移优化方案
|
||||
|
||||
```
|
||||
旧方案 优化方案
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
el-dialog 内联 42 行代码 → 独立 PermDrawer 组件(components/PermDrawer/index.vue)
|
||||
getRoleMenu API 额外请求 → 直接从 row.menu_admin JSON.parse 获取(列表自带)
|
||||
setTimeout 1000ms 关闭 → 保留(树渲染需要等待),但抽取到子组件内部
|
||||
索引页 data 6 个 perm 字段 → 仅 2 个(permVisible + permRole)
|
||||
```
|
||||
|
||||
##### 第三步:按标准实现
|
||||
参考 [表格组件使用说明.md 第 13 节](file:///d:/code/mes/mes-ui/docs/表格组件使用说明.md#13-特殊弹出框组件规范),严格遵循:
|
||||
|
||||
| 规则 | 说明 |
|
||||
|------|------|
|
||||
| 目录位置 | `src/views/{模块}/{功能}/components/{英文PascalCase}/index.vue` |
|
||||
| 文件夹命名 | 英文 PascalCase,描述功能(如 `PermDrawer`、`ImportDialog`) |
|
||||
| 组件通信 | 父→子 `props`(含 `.sync`),子→父 `$emit('saved')`,禁止 `$parent` / `$refs` |
|
||||
| 主页面数据 | 只存 `visible` Boolean + 业务对象,其余状态在子组件内部 |
|
||||
|
||||
##### 第四步:完整案例
|
||||
|
||||
参考角色权限分配抽屉的完整迁移:
|
||||
- 旧代码:`D:\code\company\SCTMES_MES_V5\vue-app\src\views\system_settings\user_management\role\components\PageMain\index.vue`(`dialogVisibleGive` + `el-tree`)
|
||||
- 新代码:[`src/views/system-administration/user-management/role/components/PermDrawer/index.vue`](file:///d:/code/mes/mes-ui/src/views/system-administration/user-management/role/components/PermDrawer/index.vue)
|
||||
- 主页面引用:[`src/views/system-administration/user-management/role/index.vue`](file:///d:/code/mes/mes-ui/src/views/system-administration/user-management/role/index.vue#L79-L87)
|
||||
|
||||
---
|
||||
|
||||
#### 2. i18n 国际化(重要)
|
||||
- 使用 `mixins: [i18nMixin('完整i18n前缀')]`,不要在每个页面手动定义 `T` 常量和 `tkey()` 方法
|
||||
- `data()` 中用 `this.key('xxx')` 传完整 i18n key,**不要用 `k()` 提前翻译**(翻译由 page-table / page-dialog-form 内部处理,切换语言自动响应)
|
||||
@@ -64,6 +114,7 @@
|
||||
| `page.system_settings.menu_configuration.menu` | `page.system_administration.menu_management.menu_configuration` |
|
||||
| `page.system_settings.system_assistant.operate_log` | `page.system_administration.system_utilities.operation_logs` |
|
||||
| `page.system_settings.system_assistant.api_log` | `page.system_administration.system_utilities.api_logs` |
|
||||
| `page.system_settings.system_assistant.problem_help` | `page.system_administration.system_utilities.problem_help` |
|
||||
| `page.system_settings.system_monitoring.system.login` | `page.system_administration.system_monitoring.login` |
|
||||
| `page.production_configuration.matetial_model.*` | `page.production_master_data.material_model.*` |
|
||||
| `page.planning_production.production_batch_management.batch` | `page.planning_production.batch_management.batch_list` |
|
||||
@@ -90,6 +141,16 @@
|
||||
- **Columns**:`useTableColumns([...])`
|
||||
- **Methods**:`fetchData / onSearch / onReset / onPageChange / openAdd / openEdit / onDialogSubmit / handleDelete`
|
||||
- **i18n key 模板**(每个页面至少要有这些):`search / reset / add / edit / delete / operation / add_title / edit_title / code / name / remark / enter_code / enter_name / remark_length / operation_success / confirm / cancel / tip / confirm_delete`
|
||||
- **搜索条件过多时**参考 [表格组件使用说明.md - 场景 8](file:///d:/code/mes/mes-ui/docs/表格组件使用说明.md#场景-8折叠式搜索区搜索条件过多时),使用 `searchExpanded` + `v-show` 实现折叠式搜索区,需额外添加 i18n key:`expand`(展开更多/Expand)、`collapse`(收起/Collapse)
|
||||
|
||||
#### 6.1 依赖安装
|
||||
|
||||
当迁移涉及新的第三方库时:
|
||||
|
||||
1. **包管理器**:本项目使用 **pnpm**,安装命令为 `pnpm add <package-name>`
|
||||
2. **安装前检查**:先在 `package.json` 中确认依赖是否已存在,避免重复安装
|
||||
3. **版本兼容**:确保安装的包支持 Vue 2.x(本项目为 Vue 2.7)
|
||||
4. **参考标准**:[表格组件使用说明.md - 第 11 节](file:///d:/code/mes/mes-ui/docs/表格组件使用说明.md#11-依赖安装规范)
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user