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>
|
||||||
|
|
||||||
<!-- 手术计费弹窗 -->
|
<!-- 手术计费弹窗 -->
|
||||||
<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="display: flex; justify-content: space-between; height: 80vh">
|
||||||
<div style="width: 100%; border: 1px solid #eee; position: relative">
|
<div style="width: 100%; border: 1px solid #eee; position: relative">
|
||||||
<div style="padding: 10px; border: 1px solid #eee; height: 50px; border-left: 0">
|
<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
|
// 先关闭 prescriptionlist 内所有已打开的项目字典 popover
|
||||||
if (prescriptionRef.value && prescriptionRef.value.closeAllPopovers) {
|
if (prescriptionRef.value && prescriptionRef.value.closeAllPopovers) {
|
||||||
prescriptionRef.value.closeAllPopovers()
|
prescriptionRef.value.closeAllPopovers()
|
||||||
}
|
}
|
||||||
|
// 等待 Vue 完成 popover 可见性更新的 DOM 操作,
|
||||||
|
// 因为 el-popover 通过 teleport 渲染在 body 上,需要在 dialog 卸载前完成清理
|
||||||
|
await nextTick()
|
||||||
// 清空数据,避免下次打开时使用缓存
|
// 清空数据,避免下次打开时使用缓存
|
||||||
showChargeDialog.value = false
|
showChargeDialog.value = false
|
||||||
chargePatientInfo.value = {}
|
chargePatientInfo.value = {}
|
||||||
|
|||||||
Reference in New Issue
Block a user