<template>
|
<div class="print-container"
|
id="print-requisition">
|
<div class="print-content">
|
<div class="bill-title">生产领料单</div>
|
<div class="info-grid">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">创建日期：</span>
|
<span class="value">{{ formatDate(orderRow?.createTime) }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">领料单号：</span>
|
<span class="value">{{ orderRow?.npsNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">申请人：</span>
|
<span class="value">{{ userName }}</span>
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-item"
|
style="width: 50%;">
|
<span class="label">产品名称/型号：</span>
|
<span class="value">{{ orderRow?.productName }} / {{ orderRow?.model }}</span>
|
</div>
|
<div class="info-item"
|
style="width: 25%;">
|
<span class="label">生产数量：</span>
|
<span class="value">{{ orderRow?.quantity }}</span>
|
</div>
|
<div class="info-item"
|
style="width: 25%;">
|
<span class="label">需求日期：</span>
|
<span class="value">{{ formatDate(orderRow?.planCompleteTime) }}</span>
|
</div>
|
</div>
|
</div>
|
<table class="material-table">
|
<thead>
|
<tr>
|
<th width="50">序号</th>
|
<th>工序名称</th>
|
<th>规格/名称</th>
|
<th>批号</th>
|
<th width="80">需求数量</th>
|
<th width="80">领料数量</th>
|
<th width="60">单位</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in materialList"
|
:key="index">
|
<td align="center">{{ index + 1 }}</td>
|
<td>{{ item.operationName || '-' }}</td>
|
<td>{{ item.materialName || item.productName }} {{ item.materialModel || item.model }}</td>
|
<td>{{ item.batchNo || '-' }}</td>
|
<td align="right">{{ item.demandedQuantity }}</td>
|
<td align="right">{{ item.pickQuantity || item.pickQty || 0 }}</td>
|
<td align="center">{{ item.unit }}</td>
|
</tr>
|
</tbody>
|
</table>
|
<div class="print-footer">
|
<div class="footer-item">领料：________________</div>
|
<div class="footer-item">发料：________________</div>
|
<div class="footer-item">审核：________________</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import dayjs from "dayjs";
|
import useUserStore from "@/store/modules/user";
|
import { computed } from "vue";
|
|
const props = defineProps({
|
orderRow: {
|
type: Object,
|
default: () => ({}),
|
},
|
materialList: {
|
type: Array,
|
default: () => [],
|
},
|
});
|
|
const userStore = useUserStore();
|
const userName = computed(() => userStore.nickName || userStore.name || "-");
|
|
const formatDate = date => {
|
return date ? dayjs(date).format("YYYY年MM月DD日") : "-";
|
};
|
</script>
|
|
<style lang="scss">
|
/* 屏幕显示样式 */
|
.print-requisition-wrapper {
|
display: none;
|
}
|
|
/* 打印专用样式 */
|
@media print {
|
@page {
|
size: landscape;
|
margin: 10mm;
|
}
|
|
/* 基础打印设置 */
|
html,
|
body {
|
visibility: hidden;
|
height: auto !important;
|
overflow: visible !important;
|
margin: 0 !important;
|
padding: 0 !important;
|
width: 100%;
|
}
|
|
/* 显式显示打印容器及其所有子元素 */
|
.print-requisition-wrapper,
|
.print-requisition-wrapper * {
|
visibility: visible !important;
|
}
|
|
/* 确保打印容器占据整个页面并移除绝对定位干扰 */
|
.print-requisition-wrapper {
|
display: block !important;
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: auto;
|
background: white;
|
margin: 0 !important;
|
padding: 0 !important;
|
z-index: 99999;
|
}
|
|
.print-container {
|
width: 100% !important;
|
padding: 0 10mm; /* 使用对称的左右内边距确保居中 */
|
box-sizing: border-box;
|
height: auto;
|
overflow: visible;
|
color: #000;
|
font-family: "SimSun", "STSong", serif;
|
page-break-inside: avoid;
|
display: block;
|
.print-content {
|
width: 100%;
|
text-align: center;
|
}
|
.bill-title {
|
font-size: 20px;
|
font-weight: bold;
|
text-align: center;
|
margin-bottom: 20px;
|
letter-spacing: 5px;
|
text-decoration: underline;
|
}
|
|
.info-grid {
|
margin-bottom: 10px;
|
font-size: 14px;
|
|
.info-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 8px;
|
|
.info-item {
|
width: 33.33%;
|
display: flex;
|
align-items: flex-end;
|
|
.label {
|
font-weight: bold;
|
white-space: nowrap;
|
}
|
.value {
|
border-bottom: 1px solid #000;
|
padding: 0 5px;
|
flex: 1;
|
min-height: 20px;
|
}
|
}
|
}
|
}
|
|
.material-table {
|
width: 100%;
|
border-collapse: collapse;
|
border: 2px solid #000;
|
font-size: 13px;
|
|
th,
|
td {
|
border: 1px solid #000 !important;
|
padding: 6px 4px;
|
height: 25px;
|
-webkit-print-color-adjust: exact;
|
print-color-adjust: exact;
|
}
|
|
th {
|
background-color: #f2f2f2 !important;
|
font-weight: bold;
|
}
|
}
|
|
.print-footer {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 30px;
|
padding: 0 10px;
|
|
.footer-item {
|
font-size: 14px;
|
}
|
}
|
}
|
}
|
</style>
|
