huxuejian/hn-hlw-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update rx-paper-drawer.vue

Browse Source
This commit is contained in:
huxuejian 2026-08-03 16:38:30 +08:00
parent deb4b441da
commit c7f7ec4ea7
1 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/rx-paper-drawer/rx-paper-drawer.vue
View File

@ -20,7 +20,7 @@
<div class="info-row"> <div class="info-row">
<div class="info-item" style="width: 28%">姓名：{{ data.name }}</div> <div class="info-item" style="width: 28%">姓名：{{ data.name }}</div>
<div class="info-item" style="width: 20%">性别：{{ info.sex }}</div> <div class="info-item" style="width: 20%">性别：{{ info.sex }}</div>
<div class="info-item" style="width: 28%">费别：</div> <div class="info-item" style="width: 28%">费别：{{ data.feeType === 'YB' ? '医保' : '自费' }}</div>
<div class="info-item" style="width: 24%">年龄：{{ info.age }}</div> <div class="info-item" style="width: 24%">年龄：{{ info.age }}</div>
</div> </div>
<div class="info-row"> <div class="info-row">
@ -158,15 +158,38 @@ function close() {
emits('close', false) 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() { async function print() {
if (!paperRef.value) return; if (!paperRef.value) return;
await nextTick(); 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 { 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(); window.print();
emits('printed'); emits('printed');
} finally { } finally {
document.body.classList.remove('printing-rx'); document.body.classList.remove('printing-rx');
printRoot.remove();
} }
} }
@ -350,25 +373,27 @@ defineExpose({ print });
} }
</style> </style>
<style> <style>
.rx-print-root {
display: none;
}
@media print { @media print {
@page { @page {
size: A4; size: A4;
margin: 12mm; margin: 12mm;
} }
body.printing-rx * { body.printing-rx > :not(.rx-print-root) {
visibility: hidden !important; display: none !important;
} }
body.printing-rx .rx-print-area, body.printing-rx > .rx-print-root {
body.printing-rx .rx-print-area * { display: block !important;
visibility: visible !important; width: 100% !important;
} }
body.printing-rx .rx-print-area { body.printing-rx > .rx-print-root .rx-print-area {
position: absolute !important; position: static !important;
left: 0 !important;
top: 0 !important;
width: 100% !important; width: 100% !important;
box-sizing: border-box !important; box-sizing: border-box !important;
padding: 0 !important; padding: 0 !important;