feat(wms):修复 print 顶部白块的问题,对齐 vue3 + ep 的样式

pull/345/head
YunaiV 2026-05-17 23:15:16 +08:00
parent 0246fa1ebc
commit 08511191f7
1 changed files with 125 additions and 112 deletions

View File

@ -37,6 +37,7 @@ const printRows = computed<PrintRow[]>(() =>
})), })),
); );
/** 等待条码和打印 DOM 完成绘制,避免浏览器打印到旧内容 */
function waitForPaint() { function waitForPaint() {
return new Promise<void>((resolve) => { return new Promise<void>((resolve) => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
@ -45,10 +46,12 @@ function waitForPaint() {
}); });
} }
/** 退出打印模式,恢复当前页面显示 */
function removePrintMode() { function removePrintMode() {
document.body.classList.remove('wms-receipt-order-printing'); document.body.classList.remove('wms-receipt-order-printing');
} }
/** 获取打印用字典文案,空值统一显示为横杠 */
function getPrintDictLabel(dictType: string, value?: number) { function getPrintDictLabel(dictType: string, value?: number) {
if (value === undefined || value === null) { if (value === undefined || value === null) {
return '-'; return '-';
@ -56,6 +59,7 @@ function getPrintDictLabel(dictType: string, value?: number) {
return getDictLabel(dictType, value) || '-'; return getDictLabel(dictType, value) || '-';
} }
/** 打印入库单:加载数据后只展示打印区域,再调用浏览器打印 */
async function print(id: number) { async function print(id: number) {
const order = await getReceiptOrder(id); const order = await getReceiptOrder(id);
const details = order.details || (await getReceiptOrderDetailListByOrderId(id)); const details = order.details || (await getReceiptOrderDetailListByOrderId(id));
@ -71,9 +75,10 @@ defineExpose({ print });
</script> </script>
<template> <template>
<Teleport to="body">
<div <div
id="wmsReceiptOrderPrint" id="wmsReceiptOrderPrint"
class="wms-receipt-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white p-6 text-[#303133] opacity-0" class="wms-receipt-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
> >
<div class="relative mb-2"> <div class="relative mb-2">
<h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]"> <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
@ -185,12 +190,19 @@ defineExpose({ print });
</tbody> </tbody>
</table> </table>
</div> </div>
</Teleport>
</template> </template>
<style scoped> <style scoped>
@page {
margin: 8mm 10mm;
}
@media print { @media print {
:global(body.wms-receipt-order-printing) { :global(body.wms-receipt-order-printing) {
-webkit-print-color-adjust: exact; -webkit-print-color-adjust: exact;
margin: 0 !important;
padding: 0 !important;
print-color-adjust: exact; print-color-adjust: exact;
} }
@ -209,9 +221,10 @@ defineExpose({ print });
top: 0; top: 0;
left: 0; left: 0;
z-index: auto; z-index: auto;
box-sizing: border-box;
width: 100%; width: 100%;
margin: 0 !important; margin: 0 !important;
padding: 24px; padding: 0 !important;
opacity: 1; opacity: 1;
} }
} }