diff --git a/src/components/rx-paper-drawer/rx-paper-drawer.vue b/src/components/rx-paper-drawer/rx-paper-drawer.vue index d0026b7..d679fc9 100644 --- a/src/components/rx-paper-drawer/rx-paper-drawer.vue +++ b/src/components/rx-paper-drawer/rx-paper-drawer.vue @@ -20,7 +20,7 @@
姓名:{{ data.name }}
性别:{{ info.sex }}
-
费别:
+
费别:{{ data.feeType === 'YB' ? '医保' : '自费' }}
年龄:{{ info.age }}
@@ -158,15 +158,38 @@ function close() { emits('close', false) } +function waitForPrintImages(root) { + const pendingImages = Array.from(root.querySelectorAll('img')).filter((image) => !image.complete); + if (pendingImages.length === 0) return Promise.resolve(); + const loaded = Promise.all(pendingImages.map((image) => new Promise((resolve) => { + image.addEventListener('load', resolve, { once: true }); + image.addEventListener('error', resolve, { once: true }); + }))); + return Promise.race([loaded, new Promise((resolve) => setTimeout(resolve, 3000))]); +} + async function print() { if (!paperRef.value) return; await nextTick(); - document.body.classList.add('printing-rx'); + + // Element Plus 抽屉带有定位、变换和裁剪样式,直接打印抽屉内节点会得到空白页。 + // 克隆到 body 的直接子节点后再打印,使处方脱离抽屉的布局上下文。 + const printRoot = document.createElement('div'); + printRoot.className = 'rx-print-root'; + printRoot.setAttribute('aria-hidden', 'true'); + printRoot.appendChild(paperRef.value.cloneNode(true)); + document.body.appendChild(printRoot); + try { + await waitForPrintImages(printRoot); + if (document.fonts && document.fonts.ready) await document.fonts.ready; + await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))); + document.body.classList.add('printing-rx'); window.print(); emits('printed'); } finally { document.body.classList.remove('printing-rx'); + printRoot.remove(); } } @@ -350,25 +373,27 @@ defineExpose({ print }); }