refactor(module-management): 参与开关由 Switch 改为 Checkbox
与「启用」列的表格勾选交互保持一致,视觉更轻。
This commit is contained in:
1 parent
f019a1c1ac
commit
ac346f929c
1 file changed
+6
-9
@@ -1,29 +1,26 @@
|
|||||||
/**
|
/**
|
||||||
* 字段参与开关单元格(h 渲染函数):ui Switch 居中渲染,点击切换参与状态。
|
* 字段参与勾选单元格(h 渲染函数):ui Checkbox 居中渲染,勾选切换参与状态。
|
||||||
* 供字段定义面板 FmsTable 的 表单/列表/查询 三列 customCell 使用。
|
* 供字段定义面板 FmsTable 的 表单/列表/查询 三列 customCell 使用。
|
||||||
* 表格 cell 由 h() 动态渲染、不受 scoped 样式约束,样式放独立 scss 随本模块全局引入。
|
* 表格 cell 由 h() 动态渲染、不受 scoped 样式约束,样式放独立 scss 随本模块全局引入。
|
||||||
*/
|
*/
|
||||||
import { h } from 'vue'
|
import { h } from 'vue'
|
||||||
import { Switch } from '@/components/ui'
|
import { Checkbox } from '@/components/ui'
|
||||||
import './participation-cell.scss'
|
import './participation-cell.scss'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {object} opts
|
* @param {object} opts
|
||||||
* @param {(row: object) => boolean} opts.isOn 该行当前是否参与
|
* @param {(row: object) => boolean} opts.isOn 该行当前是否参与
|
||||||
* @param {(row: object) => void} opts.onToggle 点击开关
|
* @param {(row: object) => void} opts.onToggle 勾选切换
|
||||||
* @param {string} opts.title 开关提示文案(如「参与列表显示」)
|
* @param {string} opts.title 提示文案(如「参与列表显示」)
|
||||||
*/
|
*/
|
||||||
export function createParticipationCell({ isOn, onToggle, title }) {
|
export function createParticipationCell({ isOn, onToggle, title }) {
|
||||||
return ({ row }) =>
|
return ({ row }) =>
|
||||||
h('div', { class: 'mm-part-cell' }, [
|
h('div', { class: 'mm-part-cell' }, [
|
||||||
h(Switch, {
|
h(Checkbox, {
|
||||||
modelValue: isOn(row),
|
modelValue: isOn(row),
|
||||||
title,
|
title,
|
||||||
'aria-label': title,
|
'aria-label': title,
|
||||||
onClick: (event) => {
|
onChange: () => onToggle(row),
|
||||||
event.stopPropagation()
|
|
||||||
onToggle(row)
|
|
||||||
},
|
|
||||||
}),
|
}),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user