5.8 KiB
5.8 KiB
name, overview, todos
| name | overview | todos | |||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| checkbox-cell-unified-config | 将模块管理各面板中的 checkbox 列从 `customCell: createCheckboxCell(...)` 重构为声明式 `editor: { type: "checkbox" }`，由 FmsTable 在显示态与编辑态都渲染可交互的 checkbox，面板不再手动导入渲染器。按钮（删除）暂不动，用户仍在考虑。 |
|
用户需求
重构表格单元格渲染方式：对于布尔型字段（如 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 处）
将每处：
customCell: createCheckboxCell("b_canuse", (row, field, value) => { row[field] = value; emitUpdate(); }),
改为：
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 仍可直接点击。