feat(wms):修复 print 顶部白块的问题,对齐 vue3 + ep 的样式
parent
0246fa1ebc
commit
08511191f7
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue