refactor(module-management): 参与勾选改用 FmsTable 内置 checkbox，删除自制 ParticipationCell

- 参与状态物化为字段行的 __form/__list/__query 虚拟字段（watch 就地 patch，不替换数组引用，不触发整表重建），参与列用内置 editor: checkbox 渲染—— 居中/事件隔离/Enter 切换与「启用」列同款，自制 cell 与配套 scss 删除 - FmsTable change 按列路由：参与列 → toggle 写对应配置草稿；普通列照旧走字段 i18n 同步。emitUpdate 剥离 __ 虚拟字段，不进草稿与保存请求 - 新 spec module-fields-panel-participation：物化勾选态、勾选路由生成默认查询行、普通编辑剥离虚拟字段（jsdom 无布局，patch clientWidth 关闭虚拟列裁剪）
2026-08-30 21:47:40 +08:00
1 parent 59b91e9a7b
commit 47c0bf08aa
@@ -2,16 +2,17 @@
 /**
 * 字段定义面板（s_field）：可编辑表格维护模块字段。
 * i18n 键按 field.{moduleCode}.{fieldName} 自动同步。
- * 表单/列表/查询三列为「参与开关」：在一行内表达该字段参与了哪些界面，
- * 开关即改即生效（生成/隐藏默认配置行）；布局细节仍在对应设计器调整。
- * 语义见 fieldParticipation.js（沿用 fieldAreaDefaults 的行内开关约定）。
+ * 表单/列表/查询三列为「参与勾选」：在一行内表达该字段参与了哪些界面，
+ * 勾选即改即生效（生成/隐藏默认配置行）；布局细节仍在对应设计器调整。
+ * 参与是派生态（配置行存在且行内开关为 1），物化为字段行的 __form/__list/__query
+ * 虚拟字段交给 FmsTable 内置 checkbox 渲染（与「启用」列同款），change 按列路由
+ * 回 toggle 写配置草稿。语义见 fieldParticipation.js。
 */
 import { ref, shallowRef, watch } from 'vue'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
 import { buildModuleItemI18nKey, syncModuleItemI18nKeys } from '@/utils/i18n'
 import I18nQuickSetModal from './I18nQuickSetModal.vue'
 import { createI18nKeyCell } from './I18nKeyCell'
-import { createParticipationCell } from './ParticipationCell'
 import {
  isFormOn,
  isListOn,
@@ -25,7 +26,7 @@ const props = defineProps({
  moduleId: { type: String, required: true },
  moduleCode: { type: String, default: '' },
  fields: { type: Array, default: () => [] },
-  /** 参与开关所需的三个配置草稿（由 index.vue 传入，切换后事件回写） */
+  /** 参与勾选所需的三个配置草稿（由 index.vue 传入，切换后事件回写） */
  editConfig: { type: Array, default: () => [] },
  listConfig: { type: Array, default: () => [] },
  queryConfig: { type: Array, default: () => [] },
@@ -81,11 +82,49 @@ watch(
  { immediate: true },
 )

+// 参与状态物化到字段行上的 __ 虚拟字段（就地 patch，不替换数组引用，避免整表重建），
+// 供 FmsTable 内置 checkbox 渲染；虚拟字段不进草稿/保存请求（emitUpdate 时剥离）。
+// 勾选变化经 onCellChange 路由到 toggle 写配置草稿，随后本 watch 重算虚拟字段
+const PARTICIPATION_KEYS = ['__form', '__list', '__query']
+
+watch(
+  () => [localFields.value, props.editConfig, props.listConfig, props.queryConfig],
+  () => {
+    for (const row of localFields.value) {
+      row.__form = isFormOn(props.editConfig, row) ? 1 : 0
+      row.__list = isListOn(props.listConfig, row) ? 1 : 0
+      row.__query = isQueryOn(props.queryConfig, row) ? 1 : 0
+    }
+  },
+  { immediate: true },
+)
+
 function emitUpdate() {
-  emit('update', localFields.value.map((row) => ({ ...row })))
+  // 剥离参与虚拟字段：__ 前缀仅供表格渲染，不进字段草稿与保存请求
+  emit(
+    'update',
+    localFields.value.map((row) => {
+      const { __form, __list, __query, ...field } = row
+      return field
+    }),
+  )
 }

-function onCellChange() {
+function onCellChange(row, col) {
+  // 参与勾选：内置 checkbox 已把值写在字段行虚拟字段上（展示用途），
+  // 真实状态经 toggle 写回对应配置草稿，不走字段 i18n 同步
+  if (PARTICIPATION_KEYS.includes(col?.dataIndex)) {
+    if (!props.loading) {
+      if (col.dataIndex === '__form') {
+        emit('updateEditConfig', toggleForm(props.editConfig, row, props.moduleId))
+      } else if (col.dataIndex === '__list') {
+        emit('updateListConfig', toggleList(props.listConfig, row, props.moduleId))
+      } else {
+        emit('updateQueryConfig', toggleQuery(props.queryConfig, row, props.moduleId))
+      }
+    }
+    return
+  }
  syncModuleItemI18nKeys(localFields.value, 'field', props.moduleCode, 'b_field')
  emitUpdate()
 }
@@ -98,29 +137,6 @@ function openI18n(row) {

 const I18nKeyCell = createI18nKeyCell({ onOpen: openI18n })

-/* ---------- 参与开关（表单/列表/查询） ---------- */
-/* 字段行 → 配置行：字段定义行的 b_id 与配置行的 b_field_id 对应；
-   字段本身未启用时开关禁用（停用字段运行时不显示，参与无意义） */
-
-function onToggleForm(field) {
-  if (props.loading) return
-  emit('updateEditConfig', toggleForm(props.editConfig, field, props.moduleId))
-}
-
-function onToggleList(field) {
-  if (props.loading) return
-  emit('updateListConfig', toggleList(props.listConfig, field, props.moduleId))
-}
-
-function onToggleQuery(field) {
-  if (props.loading) return
-  emit('updateQueryConfig', toggleQuery(props.queryConfig, field, props.moduleId))
-}
-
-const FormCell = createParticipationCell({ isOn: (f) => isFormOn(props.editConfig, f), onToggle: onToggleForm, title: '参与表单' })
-const ListCell = createParticipationCell({ isOn: (f) => isListOn(props.listConfig, f), onToggle: onToggleList, title: '参与列表显示' })
-const QueryCell = createParticipationCell({ isOn: (f) => isQueryOn(props.queryConfig, f), onToggle: onToggleQuery, title: '作为查询条件' })
-
 const columns = shallowRef(buildColumns())

 // 列宽拖拽结果随 v-model 写回 columns，仅在模块类型变化时重建
@@ -156,23 +172,14 @@ function buildColumns() {
    { dataIndex: 'b_default_value', title: '默认值', width: 120, editor: { type: 'input' } },
    { dataIndex: 'b_i18n', title: '多语言键', width: 220, customCell: I18nKeyCell },
  ]
-  // 表单参与列仅数据模块展示（查询模块无表单设计）。
-  // align 管内容 td、headerAlign 管表头 th（stk-table 分开处理，见 FmsTable.getHeaderAlign）
+  // 参与勾选列：内置 checkbox editor（居中与交互隔离随「启用」列同款），
+  // 表单列仅数据模块展示（查询模块无表单设计）
  const participationColumns = [
    ...(props.moduleType === 'data'
-      ? [
-          {
-            dataIndex: '__form',
-            title: '表单',
-            width: 64,
-            align: 'center',
-            headerAlign: 'center',
-            customCell: FormCell,
-          },
-        ]
+      ? [{ dataIndex: '__form', title: '表单', width: 70, align: 'center', editor: { type: 'checkbox' } }]
      : []),
-    { dataIndex: '__list', title: '列表', width: 64, align: 'center', headerAlign: 'center', customCell: ListCell },
-    { dataIndex: '__query', title: '查询', width: 64, align: 'center', headerAlign: 'center', customCell: QueryCell },
+    { dataIndex: '__list', title: '列表', width: 70, align: 'center', editor: { type: 'checkbox' } },
+    { dataIndex: '__query', title: '查询', width: 70, align: 'center', editor: { type: 'checkbox' } },
  ]
  const tailColumns = [
    {
@@ -1,26 +0,0 @@
-/**
- * 字段参与勾选单元格（h 渲染函数）：ui Checkbox 居中渲染，勾选切换参与状态。
- * 供字段定义面板 FmsTable 的 表单/列表/查询 三列 customCell 使用。
- * 表格 cell 由 h() 动态渲染、不受 scoped 样式约束，样式放独立 scss 随本模块全局引入。
- */
-import { h } from 'vue'
-import { Checkbox } from '@/components/ui'
-import './participation-cell.scss'
-
-/**
- * @param {object} opts
- * @param {(row: object) => boolean} opts.isOn 该行当前是否参与
- * @param {(row: object) => void} opts.onToggle 勾选切换
- * @param {string} opts.title 提示文案（如「参与列表显示」）
- */
-export function createParticipationCell({ isOn, onToggle, title }) {
-  return ({ row }) =>
-    h('div', { class: 'mm-part-cell' }, [
-      h(Checkbox, {
-        modelValue: isOn(row),
-        title,
-        'aria-label': title,
-        onChange: () => onToggle(row),
-      }),
-    ])
-}
@@ -1,11 +0,0 @@
-/* 字段参与勾选单元格（ParticipationCell）：随 JS 模块全局引入。
- * 与 FmsTable 内置勾选列（.fms-checkbox）同构：铺满单元格后 flex 居中，
- * 垂直方向由 height:100% 与行高对齐。 */
-.mm-part-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  line-height: 1;
-}