20260723173317

2026-07-23 17:33:18 +08:00
1 parent 59b3ccfb1c
commit 5f73b54802
@@ -0,0 +1,183 @@
+---
+name: module-management-full-implementation
+overview: 基于新数据库结构.md和开发规范.md完整实现模块管理页面。左侧模块树+右侧7个子Tab，子Tab操作按钮靠左。不创建独立的service文件，数据加载/保存逻辑直接写在index.vue中。
+todos:
+  - id: create-main-page
+    content: 重写 index.vue 主页面：左侧 a-tree 模块树 + 右侧 a-tabs 布局，编写全部数据加载/保存逻辑（loadDataApi、saveObjectApi、diff、typeFromSqlType）
+    status: completed
+  - id: create-basic-panel
+    content: 使用 [skill:antdv-next] 创建 ModuleBasicPanel.vue 基本信息表单，根据模块类型控制字段可见性，支持新增和编辑
+    status: completed
+    dependencies:
+      - create-main-page
+  - id: create-fields-panel
+    content: 创建 ModuleFieldsPanel.vue 字段定义面板，FmsTable 展示字段列表，实现「同步字段」功能，操作按钮靠左
+    status: completed
+    dependencies:
+      - create-main-page
+  - id: create-list-edit-query-panels
+    content: 创建 ModuleListConfigPanel.vue、ModuleEditConfigPanel.vue、ModuleQueryConfigPanel.vue 三个配置面板，FmsTable 展示数据，操作按钮靠左
+    status: completed
+    dependencies:
+      - create-main-page
+  - id: create-group-manager
+    content: 创建 FieldGroupManager.vue 共用分组管理弹窗，a-modal + a-tree 管理分组树增删改
+    status: completed
+    dependencies:
+      - create-list-edit-query-panels
+  - id: create-powers-i18n-panels
+    content: 创建 ModulePowersPanel.vue 权限配置面板和 ModuleI18nPanel.vue 多语言面板，FmsTable 管理数据，操作按钮靠左
+    status: completed
+    dependencies:
+      - create-main-page
+---
+
+## 用户需求
+
+根据新数据库结构.md和开发规范.md，完整实现模块管理页面。当前页面是空占位，需要构建左侧模块树+右侧子Tab布局。
+
+## 核心功能
+
+### 主页面布局
+
+- 左侧：使用 `a-tree` 展示模块树（directory/page/data 三级），选中节点加载详情
+- 右侧：使用 `a-tabs` 展示子Tab，根据选中模块的 `b_module_type` 动态显示对应Tab
+
+### 模块类型与Tab对应
+
+| 模块类型 | 可见Tab |
+| --- | --- |
+| directory | 基本信息、权限配置、多语言 |
+| page | 基本信息、权限配置、多语言 |
+| data | 基本信息、字段定义、列表配置、编辑配置、查询配置、权限配置、多语言 |
+
+
+### 各子Tab功能
+
+1. **基本信息**：`a-form` 编辑 `b_module` 核心字段（b_code、b_name、b_module_type、b_parent_id、b_route、b_viewtable、b_savetable、b_keyfield、b_orderfield、b_canmenu、b_canuse、b_xh），根据模块类型控制字段可见性。新增模块先调 `nextIdApi`
+2. **字段定义**：`FmsTable` 展示 `b_module_field`，不可手工增删行。提供「同步字段」按钮调用 `describeApi` 获取 `b_viewtable` 列结构并与已有字段合并（保留已有配置、追加新列、标记已删列为不可用）。可编辑 `b_name`、`b_type`、`b_default_value`、`b_options`、`b_canuse`
+3. **列表配置**：`FmsTable` 展示 `b_module_field_list`，支持新增/删除行。可选字段来自 `b_module_field`（b_canuse=1）。`FieldGroupManager` 弹窗管理 `b_module_field_group` 分组树
+4. **编辑配置**：`FmsTable` 展示 `b_module_field_edit`，支持新增/删除行。同样通过 `FieldGroupManager` 管理分组
+5. **查询配置**：`FmsTable` 展示 `b_module_field_query`（b_component、b_operator 下拉选择），支持新增/删除行
+6. **权限配置**：`FmsTable` 展示 `b_module_power`（b_code、b_name），支持新增/删除行
+7. **多语言**：`FmsTable` 展示 `b_i18n`（b_key、b_locale、b_value），支持新增/删除行
+
+### 操作按钮排列
+
+所有子Tab面板内，新增、删除、保存等操作按钮**靠左对齐**（`justify-content: flex-start`）
+
+### 数据架构（不创建独立 service 文件）
+
+- `index.vue` 承担全部数据职责：加载模块树、加载完整配置、维护草稿、对比diff、调用 `saveObjectApi`
+- 子组件只通过 `props` 接收数据，通过 `emit('update', newRows)` 上报变更
+- `index.vue` 保存流程：`diffRows(draft, original)` → `allocateTemporaryIds` → `saveObjectApi`
+
+## 技术方案
+
+### 实现策略
+
+**数据流集中管理**：`index.vue` 作为数据中枢，直接调用 `loadDataApi`、`saveObjectApi`、`nextIdApi`、`describeApi` 等通用接口。所有子组件是无状态的展示/编辑组件，仅通过 props/emit 与父组件通信。
+
+### 数据流
+
+```
+index.vue 选中模块
+  → loadDataApi 加载 b_module + 各子表（Promise.all）
+  → cloneData 生成 originals（原始快照）和 drafts（编辑草稿）
+  → 各子组件接收 drafts 对应部分，用户编辑后 emit('update', newRows)
+  → index.vue 更新对应 draft
+  → 用户点击「保存」
+  → 遍历各子表 diffRows(draft, original)
+  → allocateTemporaryIds 分配临时ID
+  → 构建 saveObjectApi 请求数组
+  → 提交保存 → 重新加载刷新 originals
+```
+
+### 关键设计决策
+
+1. **无独立 service 文件**：所有 `loadDataApi`/`saveObjectApi` 调用直接写在 `index.vue` 的 `<script setup>` 中
+2. **组件纯展示**：所有子组件只负责展示和编辑，不调用 API
+3. **SQL 类型映射**（字段同步用）：`typeFromSqlType()` 作为 `index.vue` 内的普通函数
+4. **分组管理复用**：`FieldGroupManager.vue` 接收 groups 数组并通过 emit 返回变更，不直接操作 API
+5. **b_module_field 不手工增删**：同步通过 `describeApi`，字段定义面板中只有编辑功能无新增/删除按钮
+
+### 实现要点
+
+- b_id 全部使用 `String()` 包裹进行比对
+- 布尔字段为 int 0/1（b_canuse、b_visible、b_sortable、b_required、b_readonly、b_disabled、b_canmenu）
+- 子表新增行用 `createTempId()`，保存前 `allocateTemporaryIds()` 换真实ID
+- 主表新增模块用 `nextIdApi`
+- 操作按钮在子Tab面板内靠左（`a-space` 或 flex 布局 `justify-content: flex-start`）
+- 样式使用 SCSS scoped，遵循 `--fms-*` CSS 变量主题
+
+## 目录结构
+
+```
+fms-vue/src/views/module-management/
+├── index.vue                              # [MODIFY] 主页面
+│   - 左侧 a-tree 模块树，右侧 a-tabs
+│   - 全部数据加载/保存逻辑（loadDataApi、saveObjectApi、nextIdApi、describeApi）
+│   - 维护 drafts 和 originals，构建 diff 和 saveObjectApi 请求
+│   - typeFromSqlType() 字段类型映射函数
+│   - 选中节点变更、Tab切换、保存按钮事件处理
+└── components/
+    ├── ModuleBasicPanel.vue               # [NEW] 基本信息表单
+    │   - a-form 编辑 b_module 字段
+    │   - props: moduleId, data(object), loading
+    │   - emit: update(modifiedData)
+    │   - 根据 b_module_type 控制字段可见性
+    ├── ModuleFieldsPanel.vue              # [NEW] 字段定义表格
+    │   - FmsTable 展示 b_module_field 列表
+    │   - 工具栏「同步字段」+「保存」按钮靠左
+    │   - props: moduleId, fields(array), viewTable, loading
+    │   - emit: update(newFields), sync(viewTable)
+    │   - 不可新增/删除行，可编辑 b_name/b_type/b_default_value/b_options/b_canuse
+    ├── ModuleListConfigPanel.vue          # [NEW] 列表配置表格
+    │   - FmsTable 展示 b_module_field_list
+    │   - 工具栏新增/删除/保存按钮靠左
+    │   - props: moduleId, listConfig(array), fields(array), groups(array), loading
+    │   - emit: update(newListConfig), openGroupManager
+    │   - 字段选择器展示可用字段，分组列可点击打开分组管理
+    ├── ModuleEditConfigPanel.vue          # [NEW] 编辑配置表格
+    │   - FmsTable 展示 b_module_field_edit
+    │   - 工具栏新增/删除/保存按钮靠左
+    │   - props: moduleId, editConfig(array), fields(array), groups(array), loading
+    │   - emit: update(newEditConfig), openGroupManager
+    ├── ModuleQueryConfigPanel.vue         # [NEW] 查询配置表格
+    │   - FmsTable 展示 b_module_field_query
+    │   - 工具栏新增/删除/保存按钮靠左
+    │   - props: moduleId, queryConfig(array), fields(array), loading
+    │   - emit: update(newQueryConfig)
+    │   - b_component、b_operator 使用下拉选择
+    ├── ModulePowersPanel.vue              # [NEW] 权限配置表格
+    │   - FmsTable 展示 b_module_power
+    │   - 工具栏新增/删除/保存按钮靠左
+    │   - props: moduleId, powers(array), loading
+    │   - emit: update(newPowers)
+    ├── ModuleI18nPanel.vue                # [NEW] 多语言表格
+    │   - FmsTable 展示 b_i18n
+    │   - 工具栏新增/删除/保存按钮靠左
+    │   - props: moduleId, i18n(array), loading
+    │   - emit: update(newI18n)
+    │   - 支持按 b_locale 筛选
+    └── FieldGroupManager.vue              # [NEW] 共用分组管理弹窗
+        - a-modal 内含 a-tree 展示分组树
+        - 支持新增/编辑/删除分组节点
+        - props: visible, groups(array), moduleId
+        - emit: update:visible, update(newGroups)
+        - 被 ModuleListConfigPanel 和 ModuleEditConfigPanel 引用
+```
+
+## 使用的扩展
+
+### Skill
+
+- **antdv-next**
+- 目的：查询 a-tree、a-tabs、a-form、a-form-item、a-modal、a-select、a-input、a-input-number、a-switch、a-button、a-space、a-empty 等组件的 API 文档
+- 预期结果：获取准确的 props/events/slots 用法，确保模板中 API 使用正确
+
+### SubAgent
+
+- **code-explorer**
+- 目的：在实现过程中快速查找项目中 FmsTable 的 columns 配置模式、dataChanges.js 的 diffRows 调用方式、现有表单校验示例等
+- 预期结果：获得准确的现有代码引用，确保新代码风格与项目一致