Fix Bug #492: 【门诊手术安排】关闭"手术计费"主弹窗后,项目字典选择列表依然残留悬浮在界面上
根因: el-popover 通过 teleport 渲染在 document.body 上,closeChargeDialog() 调用 closeAllPopovers() 后立即设置 showChargeDialog=false,dialog 在 Vue 完成 popover DOM 清 理前就开始卸载,导致 teleported popover 残留。 修复: 1. closeChargeDialog 改为 async,closeAllPopovers 后 await nextTick() 确保 popover 可 见性变更的 DOM 更新完成后再关闭 dialog 2. el-dialog 添加 destroy-on-close 属性,确保关闭时完整销毁内容区及所有子组件的 teleport
This commit is contained in:
@@ -803,7 +803,7 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 手术计费弹窗 -->
|
||||
<el-dialog :title="chargeDialogTitle" v-model="showChargeDialog" width="1400px" @close="closeChargeDialog" append-to-body>
|
||||
<el-dialog :title="chargeDialogTitle" v-model="showChargeDialog" width="1400px" @close="closeChargeDialog" append-to-body destroy-on-close>
|
||||
<div style="display: flex; justify-content: space-between; height: 80vh">
|
||||
<div style="width: 100%; border: 1px solid #eee; position: relative">
|
||||
<div style="padding: 10px; border: 1px solid #eee; height: 50px; border-left: 0">
|
||||
@@ -1456,11 +1456,14 @@ async function handleChargeCharge(row) {
|
||||
}
|
||||
|
||||
// 关闭计费弹窗
|
||||
function closeChargeDialog() {
|
||||
async function closeChargeDialog() {
|
||||
// 先关闭 prescriptionlist 内所有已打开的项目字典 popover
|
||||
if (prescriptionRef.value && prescriptionRef.value.closeAllPopovers) {
|
||||
prescriptionRef.value.closeAllPopovers()
|
||||
}
|
||||
// 等待 Vue 完成 popover 可见性更新的 DOM 操作,
|
||||
// 因为 el-popover 通过 teleport 渲染在 body 上,需要在 dialog 卸载前完成清理
|
||||
await nextTick()
|
||||
// 清空数据,避免下次打开时使用缓存
|
||||
showChargeDialog.value = false
|
||||
chargePatientInfo.value = {}
|
||||
|
||||
Reference in New Issue
Block a user