useDialogOut

useDialogOut 是 CRUD 弹窗状态 Hook，统一管理弹窗显示、当前模式、当前行数据、查看态禁用以及关闭 / 确认回调。

它通常与 useModalForm 配对使用：useDialogOut 用在弹窗外部（列表页）控制打开新增 / 编辑 / 查看，useModalForm 用在弹窗内部封装表单逻辑。

引入

import useDialogOut from '@sud-web/vue-hooks/useDialogOut'

@sud-web/vue-hooks 通过子路径导出 Hook，需使用 /useDialogOut 引入。

基础用法

列表页用 reactive(useDialogOut()) 控制弹窗：「新增」调用 add()，操作列调用 edit(row) / check(row)。把 visible / row / mode / disabled 透传给弹窗子组件，子组件内部用 useModalForm 处理表单（见 UserModal.vue 标签页）。查看模式会自动把 disabled 置为 true，表单只读。

loading

如果不使用 reactive，返回的字段是 Ref，需通过 .value 访问：

const dialog = useDialogOut<User>()

dialog.visible.value
dialog.row.value
dialog.mode.value

API

入参

useDialogOut<T>({ closed, confirmed })

参数	类型	说明
closed	(data?: T) => void	调用 onClose 后触发
confirmed	(data?: T) => void	调用 onConfirm 后触发

两个回调均可选；不传时 onClose / onConfirm 仍会正常关闭弹窗。

返回值

字段	类型	初始值	说明
visible	Ref<boolean>	false	弹窗显示状态
row	Ref<T>	{}	当前操作行数据
disabled	Ref<boolean>	false	查看态禁用状态
mode	Ref<"add" | "edit" | "check">	"add"	当前模式
open	() => void	—	打开弹窗
hide	() => void	—	关闭弹窗，不触发回调
add	() => void	—	进入新增模式（重置 row）并打开
edit	(data: T) => void	—	进入编辑模式，设置 row 并打开
check	(data: T) => void	—	进入查看模式，设置 row 并打开
onClose	(data?: T) => void	—	关闭弹窗并触发 closed
onConfirm	(data?: T) => void	—	关闭弹窗并触发 confirmed

模式行为

方法	mode	row	visible	disabled
add()	add	重置为 {}	true	false
edit(data)	edit	设置为 data	true	false
check(data)	check	设置为 data	true	true

disabled 通过 watch 同步 mode：mode === 'check' 时为 true，其余为 false。

注意事项

事项	说明
row 默认是空对象	表单组件应对缺省字段做默认值处理
hide() 不触发回调	需要通知外部时使用 onClose 或 onConfirm
edit / check 保存的是传入对象引用	不希望污染原表格行时，请传入拷贝（如 edit({ ...row })）

测试

cd packages/vue/hooks
pnpm test