96 lines
5.8 KiB
Markdown
96 lines
5.8 KiB
Markdown
---
|
||
name: checkbox-cell-unified-config
|
||
overview: "将模块管理各面板中的 checkbox 列从 `customCell: createCheckboxCell(...)` 重构为声明式 `editor: { type: \"checkbox\" }`，由 FmsTable 在显示态与编辑态都渲染可交互的 checkbox，面板不再手动导入渲染器。按钮（删除）暂不动，用户仍在考虑。"
|
||
todos:
|
||
- id: make-checkbox-always-interactive
|
||
content: 在 createEditableCellRenderer.js 中将 checkbox 分支独立为始终可交互，复用 update 回调
|
||
status: completed
|
||
- id: update-panels-checkbox
|
||
content: 将 4 个面板 5 处 checkbox 列改为 editor:{type:'checkbox',onChange}，并删除 createCheckboxCell 导入
|
||
status: completed
|
||
dependencies:
|
||
- make-checkbox-always-interactive
|
||
- id: remove-dead-renderers
|
||
content: 从 createCellRenderers.js 删除 createCheckboxCell 与 createSelectCell 死代码
|
||
status: completed
|
||
dependencies:
|
||
- update-panels-checkbox
|
||
- id: verify-no-residual
|
||
content: 全局搜索确认无 createCheckboxCell/createSelectCell 残留引用，并运行 read_lints
|
||
status: completed
|
||
dependencies:
|
||
- remove-dead-renderers
|
||
---
|
||
|
||
## 用户需求
|
||
|
||
重构表格单元格渲染方式：对于布尔型字段（如 `b_visible`、`b_canuse`、`b_sortable`），在列配置里直接声明 `editor: { type: "checkbox" }` 即可，显示态与编辑态均为可直接点击的 checkbox，无需面板自己 import 并调用 `createCheckboxCell`。
|
||
|
||
## 核心要点
|
||
|
||
- checkbox 类列（共 5 处，跨越 4 个面板）从 `customCell: createCheckboxCell(...)` 改为声明式 `editor: { type: "checkbox", onChange: () => emitUpdate() }`。
|
||
- 表格组件内部让 `checkbox` 类型始终可交互（显示态也是可点击 checkbox），不再区分编辑/非编辑态；值按 `col.dataIndex` 自动读写，默认 `checkedValue=1 / uncheckedValue=0`，与现有 1/0 布尔存储一致。
|
||
- 删除按钮等 `createDeleteCell` 本次不重构，保持 `customCell` 现状（用户仍在考虑按钮方案）。
|
||
- 重构后 `createCheckboxCell` 不再被任何面板引用，从 `createCellRenderers.js` 中移除；`createSelectCell` 已是死代码一并移除。
|
||
|
||
## 技术栈与既有模式
|
||
|
||
- 前端：Vue 3 `<script setup>` + Ant Design Vue（antdv-next）+ StkTable（`stk-table-vue`）。
|
||
- 列渲染统一由 `FmsTable.vue` 封装：`column.editor && !column.customCell` 的列会被自动包成 `EditableCell`（`createEditableCellRenderer` 产物），业务面板只声明 `editor`，不直接写 `customCell`。
|
||
- `EditableCell` 当前已支持 `editor.type === "checkbox"`，但非编辑态渲染为只读静态 checkbox（`pointer-events: none`），编辑态才渲染可交互 checkbox。
|
||
|
||
## 实现方案
|
||
|
||
### 1. 让 `EditableCell` 的 checkbox 始终可交互（核心改动）
|
||
|
||
文件：`fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js`
|
||
|
||
- 将 checkbox 分支从 `if (!isEditing)` 中抽出，放在最前面独立处理，忽略 `isEditing`：
|
||
- 读取 `checkedValue = editor.checkedValue ?? 1`、`uncheckedValue = editor.uncheckedValue ?? 0`。
|
||
- 渲染 `h(Checkbox, { checked: cellValue === checkedValue, disabled: resolveOption(editor.disabled, row), onClick: e => e.stopPropagation(), "onUpdate:checked": (checked) => { const v = checked ? checkedValue : uncheckedValue; row[col.dataIndex] = v; editor.onChange?.(v, row, col); } })`。
|
||
- 复用现有 `update` 逻辑（已做 `row[col.dataIndex] = value; editor.onChange?.(value, row, col)`），保持与 select/number 一致的行为。
|
||
- `if (!isEditing)` 分支内移除 checkbox 的静态处理，仅保留 select 文本展示与默认文本展示。
|
||
|
||
理由：最少量改动实现"显示=编辑=可交互 checkbox"，且复用同一套 `update`/脏数据回调，不改 `FmsTable.vue` 包裹逻辑。
|
||
|
||
### 2. 面板列配置改造（4 个文件，5 处）
|
||
|
||
将每处：
|
||
|
||
```js
|
||
customCell: createCheckboxCell("b_canuse", (row, field, value) => { row[field] = value; emitUpdate(); }),
|
||
```
|
||
|
||
改为：
|
||
|
||
```js
|
||
editor: { type: "checkbox", onChange: () => emitUpdate() },
|
||
```
|
||
|
||
涉及：
|
||
|
||
- `ModuleListConfigPanel.vue`：`b_visible`、`b_sortable` 两列（删除 `import { createCheckboxCell } ...`）。
|
||
- `ModuleFieldsPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||
- `ModulePowersPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||
- `ModuleQueryConfigPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||
说明：表格按 `col.dataIndex`（如 `b_canuse`）自动读写，面板无需再传字段名；`emitUpdate` 维持现有脏数据/向上通知机制不变。
|
||
|
||
### 3. 清理死代码
|
||
|
||
文件：`fms-vue/src/components/fms-table/utils/createCellRenderers.js`
|
||
|
||
- 删除 `createCheckboxCell`（重构后无引用）。
|
||
- 删除 `createSelectCell`（已无人引用，表格内置 `editor.type==="select"` 已取代）。
|
||
- 保留 `createCellRenderer` 基础工厂、`createButtonCell`、`createDeleteCell`、`selectValue`（如有引用）。
|
||
|
||
## 设计要点 / 性能
|
||
|
||
- checkbox 复用 `EditableCell` 单实例渲染函数，每次渲染仅 `h(Checkbox, ...)` 纯函数调用，无额外组件层级，无 row 引用常驻。
|
||
- 不引入新列属性，沿用 `editor.type` 枚举，与 `select`/`number` 一致，架构可扩展（后续按钮类可类似声明式接入）。
|
||
- 不修改 `FmsTable.vue` 的包裹与 `update:columns` 往返逻辑，避免回归。
|
||
|
||
## 验证
|
||
|
||
- `read_lints` 检查上述文件 0 报错（除既有未使用变量提示外）。
|
||
- 全局搜索 `createCheckboxCell`、`createSelectCell` 引用应仅剩定义处（随后被删除），无面板残留 import。
|
||
- 功能：模块管理下"字段定义/列表配置/编辑配置/查询配置/权限配置"面板中布尔列显示并可点击切换，切换后脏标记与保存行为不变；非编辑态下 checkbox 仍可直接点击。 |