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-item" style="width: 28%">姓名：{{ data.name }}</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>
<div class="info-row">
@ -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 });
}
</style>
<style>
.rx-print-root {
display: none;
}
@media print {
@page {
size: A4;
margin: 12mm;
}
body.printing-rx * {
visibility: hidden !important;
body.printing-rx > :not(.rx-print-root) {
display: none !important;
}
body.printing-rx .rx-print-area,
body.printing-rx .rx-print-area * {
visibility: visible !important;
body.printing-rx > .rx-print-root {
display: block !important;
width: 100% !important;
}
body.printing-rx .rx-print-area {
position: absolute !important;
left: 0 !important;
top: 0 !important;
body.printing-rx > .rx-print-root .rx-print-area {
position: static !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0 !important;