AtModal 复杂用法

夏源庆

最后更新于 2026-10-30 11:40:07

完整实现见 弹窗表单。AtModal 管显示与底部动作展示，业务组件负责初始化、校验、保存和刷新父页面。

打开与实例访问

useModal() 返回 [modalRef, open, close]。实例 open 打开后 await nextTick，因此需要访问内部表单/表格实例时先 await open()。实例 close 是同步方法，hook close 是 async 包装；不要把关闭当作表单重置。

新增、编辑、复制共用一个业务弹窗，入口明确传 mode 与 id。新增重置空表单；编辑请求详情并保存原 id；复制读取详情，但提交创建接口，不沿用原 id。异步初始化必须处理失败，并避免迟到响应覆盖下一次打开的记录。样板用 opening 序号隔离初始化。

display-directive="show" 保留内部组件，重开时不会重新 mounted；所以每次打开都要 reset、清校验、清错误和重新设置当前记录。不要依赖组件销毁完成清理。

提交与各关闭入口

确认按钮只 emit confirm，不自动关闭。调用方校验成功并确认接口成功后，通知父级，再 close；loading 用 finally 清理。confirmLoading 只控制默认确认按钮的 loading，不是所有关闭入口的禁用开关。

当前实现的关闭入口不同：

• Naive Modal 触发 update:show(false) 的入口，会调用同步 onBeforeClose(): boolean，返回 false 阻止该次关闭；允许关闭时发出 cancel。
• 默认底部取消按钮直接调用 close 并 emit cancel，不经过 onBeforeClose。
• 实例 close / hook close 直接关闭，不经过 onBeforeClose，也不 emit cancel。
• confirm 不代表保存成功，也不代表关闭。

因此需要“提交期间禁止关闭”的场景，使用 right-action 自定义取消/保存按钮，busy 时禁用，调用方统一判断 busy；同时设置 onBeforeClose 约束 update:show 的入口。onBeforeClose 不支持 Promise，不能直接写异步确认函数并期待组件 await。

自定义操作区

left-action 用于附加操作；right-action 替换默认取消/确认按钮。样板将右侧按钮放入 NFlex justify="end"。确认成功后由 saved 事件让父级刷新列表，避免弹窗持有父表格实例。

场景来源与核验

• dt-g-mpas-pc/src/views/Contacts/UserDetailModal/RemarkModal.vue:41：await open 后 setValue；54 行校验并提交。
• dt-gov-develop-pc/src/views/GeneralData/Production/components/OrchestrationFromModal.vue:199：create/copy/edit 入口分流。
• dt-lion-center-pc/src/views/CollectionStandardManagement/TimeFormModal.vue:128：异步初始化后的打开流程。
• 当前实现：components/src/modal/src/AtModal.vue 的 open、close、negativeClick、handleUpdateShow 和 use-modal.ts。关闭入口的差异以当前源码为准，历史业务里的统一拦截假设不能直接采用。