feat（wms）：修复 print 顶部白块的问题，对齐 vue3 + ep 的样式
YunaiV
parent
0246fa1ebc
commit
08511191f7
|
|
@ -37,6 +37,7 @@ const printRows = computed<PrintRow[]>(() =>
|
|||
})),
|
||||
);
|
||||
|
||||
/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
|
||||
function waitForPaint() {
|
||||
return new Promise<void>((resolve) => {
|
||||
requestAnimationFrame(() => {
|
||||
|
|
@ -45,10 +46,12 @@ function waitForPaint() {
|
|||
});
|
||||
}
|
||||
|
||||
/** 退出打印模式，恢复当前页面显示 */
|
||||
function removePrintMode() {
|
||||
document.body.classList.remove('wms-receipt-order-printing');
|
||||
}
|
||||
|
||||
/** 获取打印用字典文案，空值统一显示为横杠 */
|
||||
function getPrintDictLabel(dictType: string, value?: number) {
|
||||
if (value === undefined || value === null) {
|
||||
return '-';
|
||||
|
|
@ -56,6 +59,7 @@ function getPrintDictLabel(dictType: string, value?: number) {
|
|||
return getDictLabel(dictType, value) || '-';
|
||||
}
|
||||
|
||||
/** 打印入库单：加载数据后只展示打印区域，再调用浏览器打印 */
|
||||
async function print(id: number) {
|
||||
const order = await getReceiptOrder(id);
|
||||
const details = order.details || (await getReceiptOrderDetailListByOrderId(id));
|
||||
|
|
@ -71,126 +75,134 @@ defineExpose({ print });
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<div class="relative mb-2">
|
||||
<h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
|
||||
入库单
|
||||
</h2>
|
||||
<div v-if="printData.no" class="absolute right-0 top-0">
|
||||
<Barcode
|
||||
:content="printData.no"
|
||||
:display-value="false"
|
||||
:format="BarcodeFormatEnum.CODE39"
|
||||
:height="40"
|
||||
:width="180"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
|
||||
<div>入库单号：{{ printData.no || '-' }}</div>
|
||||
<div>
|
||||
入库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) }}
|
||||
</div>
|
||||
<div>仓库：{{ printData.warehouseName || '-' }}</div>
|
||||
<div>
|
||||
入库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
|
||||
</div>
|
||||
<div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
|
||||
<div>供应商：{{ printData.merchantName || '-' }}</div>
|
||||
<div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
|
||||
<div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
|
||||
<div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
|
||||
<div class="col-span-3 grid grid-cols-2 gap-x-6">
|
||||
<div>
|
||||
创建：{{ formatDateTime(printData.createTime) || '-' }} /
|
||||
{{ printData.creatorName || printData.creator || '-' }}
|
||||
</div>
|
||||
<div>
|
||||
更新：{{ formatDateTime(printData.updateTime) || '-' }} /
|
||||
{{ printData.updaterName || printData.updater || '-' }}
|
||||
<Teleport to="body">
|
||||
<div
|
||||
id="wmsReceiptOrderPrint"
|
||||
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">
|
||||
<h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
|
||||
入库单
|
||||
</h2>
|
||||
<div v-if="printData.no" class="absolute right-0 top-0">
|
||||
<Barcode
|
||||
:content="printData.no"
|
||||
:display-value="false"
|
||||
:format="BarcodeFormatEnum.CODE39"
|
||||
:height="40"
|
||||
:width="180"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
|
||||
<div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
|
||||
<div>入库单号：{{ printData.no || '-' }}</div>
|
||||
<div>
|
||||
入库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) }}
|
||||
</div>
|
||||
<div>仓库：{{ printData.warehouseName || '-' }}</div>
|
||||
<div>
|
||||
入库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
|
||||
</div>
|
||||
<div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
|
||||
<div>供应商：{{ printData.merchantName || '-' }}</div>
|
||||
<div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
|
||||
<div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
|
||||
<div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
|
||||
<div class="col-span-3 grid grid-cols-2 gap-x-6">
|
||||
<div>
|
||||
创建：{{ formatDateTime(printData.createTime) || '-' }} /
|
||||
{{ printData.creatorName || printData.creator || '-' }}
|
||||
</div>
|
||||
<div>
|
||||
更新：{{ formatDateTime(printData.updateTime) || '-' }} /
|
||||
{{ printData.updaterName || printData.updater || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
|
||||
</div>
|
||||
<table class="w-full border-collapse text-[13px] leading-[1.5]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
商品信息
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
规格信息
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
数量
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
单价(元)
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
金额(元)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="detail in printRows" :key="detail.id || detail.skuId">
|
||||
<td class="border border-solid border-[#dcdfe6] p-2">
|
||||
<div>{{ detail.itemName || '-' }}</div>
|
||||
<div v-if="detail.itemCode" class="text-xs">
|
||||
编号：{{ detail.itemCode }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2">
|
||||
<div>{{ detail.skuName || '-' }}</div>
|
||||
<div v-if="detail.skuCode" class="text-xs">
|
||||
编号：{{ detail.skuCode }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatQuantity(detail.quantity) || '-' }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatPrice(detail.price) || '-' }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatPrice(detail.totalPrice) || '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="printRows.length > 0">
|
||||
<td
|
||||
class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
|
||||
colspan="2"
|
||||
>
|
||||
合计
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
|
||||
{{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
|
||||
{{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="printRows.length === 0">
|
||||
<td
|
||||
class="border border-solid border-[#dcdfe6] p-2 text-center"
|
||||
:colspan="tableColumnCount"
|
||||
>
|
||||
暂无明细
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="w-full border-collapse text-[13px] leading-[1.5]">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
商品信息
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
规格信息
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
数量
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
单价(元)
|
||||
</th>
|
||||
<th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
|
||||
金额(元)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="detail in printRows" :key="detail.id || detail.skuId">
|
||||
<td class="border border-solid border-[#dcdfe6] p-2">
|
||||
<div>{{ detail.itemName || '-' }}</div>
|
||||
<div v-if="detail.itemCode" class="text-xs">
|
||||
编号：{{ detail.itemCode }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2">
|
||||
<div>{{ detail.skuName || '-' }}</div>
|
||||
<div v-if="detail.skuCode" class="text-xs">
|
||||
编号：{{ detail.skuCode }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatQuantity(detail.quantity) || '-' }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatPrice(detail.price) || '-' }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] p-2 text-right">
|
||||
{{ formatPrice(detail.totalPrice) || '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="printRows.length > 0">
|
||||
<td
|
||||
class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
|
||||
colspan="2"
|
||||
>
|
||||
合计
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
|
||||
{{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
|
||||
</td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
|
||||
<td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
|
||||
{{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="printRows.length === 0">
|
||||
<td
|
||||
class="border border-solid border-[#dcdfe6] p-2 text-center"
|
||||
:colspan="tableColumnCount"
|
||||
>
|
||||
暂无明细
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@page {
|
||||
margin: 8mm 10mm;
|
||||
}
|
||||
|
||||
@media print {
|
||||
:global(body.wms-receipt-order-printing) {
|
||||
-webkit-print-color-adjust: exact;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
|
|
@ -209,9 +221,10 @@ defineExpose({ print });
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 24px;
|
||||
padding: 0 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue