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 关闭虚拟列裁剪)
This commit is contained in:
oneao committed 2026-08-30 21:47:40 +08:00
1 parent 59b91e9a7b
commit 47c0bf08aa
4 files changed
+178 -81

No files matched your search

@@ -0,0 +1,127 @@
/**
* 字段定义面板参与勾选接线测试:
* - 虚拟字段 __form/__list/__query 由配置草稿物化(内置 checkbox 的勾选态)
* - change 事件按列路由:参与列 → updateXxxConfig(携带 toggle 后的配置),普通列 → update(字段)
* - update 事件剥离 __ 虚拟字段,不污染字段草稿
*/
import { mount } from '@vue/test-utils'
import { beforeAll, describe, expect, it, vi } from 'vitest'
import { createPinia, setActivePinia } from 'pinia'
import { nextTick } from 'vue'
import { registerFeature, useAreaSelection } from 'stk-table-vue'
import ModuleFieldsPanel from '@/views/system/module-management/components/ModuleFieldsPanel.vue'
// 与 main.js 一致:注册 stk-table 的按需 feature
registerFeature(useAreaSelection)
// jsdom 无布局,容器 clientWidth 为 0 时 StkTable 走默认宽度并启用虚拟列裁剪,
// 只渲染首列——patch 成宽容器让全部列(含参与勾选列)真实渲染
beforeAll(() => {
Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
configurable: true,
get() {
return 5000
},
})
})
vi.mock('@/services/api', () => ({
loadDataApi: vi.fn(),
saveObjectApi: vi.fn(),
nextIdApi: vi.fn(),
describeApi: vi.fn(),
}))
const fields = [
{ b_id: '10', b_field: 'amount', b_name: '金额', b_type: 'money', b_canuse: 1, b_i18n: null },
{ b_id: '11', b_field: 'remark', b_name: '备注', b_type: 'textarea', b_canuse: 1, b_i18n: null },
]
const listConfig = [
{ b_id: 'v1', b_field_id: '10', b_visible: 1 },
{ b_id: 'v2', b_field_id: '11', b_visible: 0 }, // 大文本默认隐藏
]
const editConfig = [{ b_id: 'e1', b_field_id: '10', b_visible: 1 }]
const queryConfig = [] // 均未生成查询行
// 行内 checkbox 顺序 = 参与三列 + 启用列(普通编辑列不渲染 checkbox)
const FORM = 0
const LIST = 1
const QUERY = 2
function mountPanel(props = {}) {
return mount(ModuleFieldsPanel, {
props: {
moduleId: 'm1',
moduleCode: 'demo',
fields: fields.map((f) => ({ ...f })),
editConfig: editConfig.map((r) => ({ ...r })),
listConfig: listConfig.map((r) => ({ ...r })),
queryConfig: queryConfig.map((r) => ({ ...r })),
moduleType: 'data',
loading: false,
...props,
},
attachTo: document.body,
})
}
async function settle() {
await nextTick()
await new Promise((r) => setTimeout(r, 100))
}
function rowCheckboxes(wrapper, rowIndex) {
return wrapper.findAll('.stk-tbody-main tr')[rowIndex].findAll('input[type="checkbox"]')
}
describe('ModuleFieldsPanel 参与勾选', () => {
it('虚拟字段按配置草稿物化:amount 表单/列表参与、查询未配置', async () => {
setActivePinia(createPinia())
const wrapper = mountPanel()
await settle()
const boxes = rowCheckboxes(wrapper, 0)
expect(boxes.length).toBe(4) // __form / __list / __query / b_canuse
expect(boxes[FORM].element.checked).toBe(true)
expect(boxes[LIST].element.checked).toBe(true)
expect(boxes[QUERY].element.checked).toBe(false)
wrapper.unmount()
})
it('勾选查询列 → emit updateQueryConfig,生成默认查询行(b_canuse=1)', async () => {
setActivePinia(createPinia())
const wrapper = mountPanel()
await settle()
await rowCheckboxes(wrapper, 0)[QUERY].setValue(true)
const events = wrapper.emitted('updateQueryConfig')
expect(events).toHaveLength(1)
const rows = events[0][0]
expect(rows).toHaveLength(1)
expect(rows[0].b_field_id).toBe('10')
expect(rows[0].b_canuse).toBe(1)
expect(rows[0].b_component).toBe('number')
wrapper.unmount()
})
it('普通列 change → emit update,且剥离 __ 虚拟字段', async () => {
setActivePinia(createPinia())
const wrapper = mountPanel()
await settle()
const table = wrapper.findComponent({ name: 'FmsTable' })
table.vm.$emit(
'change',
{ ...fields[0], __form: 1, __list: 1, __query: 0 },
{ dataIndex: 'b_name' },
'新名称',
)
await nextTick()
const events = wrapper.emitted('update')
expect(events).toBeTruthy()
const emitted = events.at(-1)[0]
expect(emitted[0].b_id).toBe('10')
expect('__form' in emitted[0]).toBe(false)
expect('__list' in emitted[0]).toBe(false)
expect('__query' in emitted[0]).toBe(false)
wrapper.unmount()
})
})