9.7 KiB
9.7 KiB
name, overview, todos
| name | overview | todos | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| module-management-full-implementation | 基于新数据库结构.md和开发规范.md完整实现模块管理页面。左侧模块树+右侧7个子Tab，子Tab操作按钮靠左。不创建独立的service文件，数据加载/保存逻辑直接写在index.vue中。 |
|
用户需求
根据新数据库结构.md和开发规范.md，完整实现模块管理页面。当前页面是空占位，需要构建左侧模块树+右侧子Tab布局。
核心功能
主页面布局
- 左侧：使用
a-tree展示模块树（directory/page/data 三级），选中节点加载详情 - 右侧：使用
a-tabs展示子Tab，根据选中模块的b_module_type动态显示对应Tab
模块类型与Tab对应
| 模块类型 | 可见Tab |
|---|---|
| directory | 基本信息、权限配置、多语言 |
| page | 基本信息、权限配置、多语言 |
| data | 基本信息、字段定义、列表配置、编辑配置、查询配置、权限配置、多语言 |
各子Tab功能
- 基本信息：
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 - 字段定义：
FmsTable展示b_module_field，不可手工增删行。提供「同步字段」按钮调用describeApi获取b_viewtable列结构并与已有字段合并（保留已有配置、追加新列、标记已删列为不可用）。可编辑b_name、b_type、b_default_value、b_options、b_canuse - 列表配置：
FmsTable展示b_module_field_list，支持新增/删除行。可选字段来自b_module_field（b_canuse=1）。FieldGroupManager弹窗管理b_module_field_group分组树 - 编辑配置：
FmsTable展示b_module_field_edit，支持新增/删除行。同样通过FieldGroupManager管理分组 - 查询配置：
FmsTable展示b_module_field_query（b_component、b_operator 下拉选择），支持新增/删除行 - 权限配置：
FmsTable展示b_module_power（b_code、b_name），支持新增/删除行 - 多语言：
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
关键设计决策
- 无独立 service 文件：所有
loadDataApi/saveObjectApi调用直接写在index.vue的<script setup>中 - 组件纯展示：所有子组件只负责展示和编辑，不调用 API
- SQL 类型映射（字段同步用）：
typeFromSqlType()作为index.vue内的普通函数 - 分组管理复用：
FieldGroupManager.vue接收 groups 数组并通过 emit 返回变更，不直接操作 API - 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 调用方式、现有表单校验示例等
- 预期结果：获得准确的现有代码引用，确保新代码风格与项目一致