<template>
|
<div id="print-area">
|
<div class="item" v-for="(items, index) in tableData" :key="items.id">
|
<div v-if="index == 0">
|
<div class="flex relative">
|
<div class="head">成品入库单 </div>
|
<div class="absolute right-12 m-4 z-2">
|
<!-- <QrCode
|
:value="qrInstoreOrder"
|
:width="64"
|
:height="64"
|
:options="{ margin: 5 }"
|
ref="qrDiyRef"
|
/> -->
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 30px; margin: 2px">
|
<div style="width: 40%"></div>
|
<div style="width: 17%"></div>
|
<div style="width: 18%"></div>
|
<div style="width: 25%">入库日期：{{ formatToDate(new Date()) }}</div>
|
</div>
|
</div>
|
<div class="main">
|
<table class=" ">
|
<tr>
|
<!-- <th class="material_table_td w-1/14">序号</th> -->
|
<th class="material_table_td" style="width: 14%">入库单号</th>
|
<th class="material_table_td" style="width: 14%">销售订单号</th>
|
<th class="material_table_td" style="width: 16%">包装工单号</th>
|
<th class="material_table_td" style="width: 16%">料号</th>
|
<th class="material_table_td" style="width: 24%">描述</th>
|
<th class="material_table_td" style="width: 8%">计划数量</th>
|
<th class="material_table_td" style="width: 8%">入库数量</th>
|
</tr>
|
<tr v-for="(item, indexs) in items.Items.filter((q) => q.STATUS == 'Y')" :key="indexs">
|
<!-- <td class="material_table_td">
|
{{ Number(indexs) + 1 }}
|
</td> -->
|
<td class="instore_td">
|
<QrCode
|
:value="item.ORDER_NO"
|
:width="70"
|
:height="70"
|
:options="{ margin: 1 }"
|
ref="qrDiyRef"
|
/>
|
</td>
|
<td class="instore_td">
|
{{ item.SALES_ORDER }}
|
</td>
|
<td class="instore_td">
|
{{ item.WORK_ORDER }}
|
</td>
|
<td class="instore_td">
|
{{ item.ITEM_CODE }}
|
</td>
|
<td class="instore_td">
|
{{ item.ITEM_NAME }}
|
</td>
|
<td class="instore_td">
|
{{ item.PLAN_QTY }}
|
</td>
|
<td class="instore_td">
|
{{ item.SCAN_QTY }}
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 30px; margin-bottom: 15px; " v-if="index == Number(tableData?.length) - 1">
|
<div style="width: 20%; margin-left: 15px;">入库人员：{{}}</div>
|
<div style="width: 20%">生产主管：{{}}</div>
|
<div style="width: 20%">品管确认：{{}}</div>
|
<div style="width: 20%">PMC审核：{{}}</div>
|
<div style="width: 20%">仓库签收：{{}}</div>
|
</div>
|
<div class="footer flex">
|
<div style="width: 40%"></div>
|
<div style="width: 10%">第{{ index + 1 }}页</div>
|
<div style="width: 10%">共{{ tableData?.length }}页</div>
|
<div style="width: 40%"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, toRefs } from 'vue';
|
import { QrCode } from '/@/components/Qrcode/index';
|
import { formatToDate } from '/@/utils/dateUtil';
|
|
const props = defineProps({
|
tableData: { type: Object as PropType<any[]> },
|
qrInstoreOrder: { type: String },
|
});
|
const { tableData, qrInstoreOrder } = toRefs(props);
|
</script>
|
<style lang="scss" scoped>
|
#print-area {
|
position: absolute;
|
inset: 0;
|
background-color: #fff;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
// background-color: bisque;
|
page-break-after: always;
|
height: 100%;
|
|
.head {
|
z-index: 1;
|
width: 100%;
|
background-color: azure;
|
font-size: 36px;
|
font-weight: bold;
|
line-height: 100px;
|
text-align: center;
|
}
|
|
.main {
|
display: flex;
|
flex: 1;
|
// align-items: center;
|
justify-content: center;
|
padding: 15px;
|
|
table {
|
border-collapse: collapse;
|
}
|
|
table,
|
th,
|
td {
|
border: solid 1px black;
|
}
|
|
tr > th {
|
height: 60px;
|
}
|
|
/* 设置标题字段字体大小 */
|
// :deep() {
|
// .ant-table-tbody > tr > td {
|
// font-size: 3px; /* 修改为你想要的字体大小 */
|
// line-height: 18px;
|
// }
|
|
// .ant-table-thead > tr > th {
|
// line-height: 21px;
|
// }
|
|
// .ant-table-title {
|
// font-size: 4px; /* 设置你想要的字体大小 */
|
// }
|
// }
|
|
.instore_td {
|
border: 1px solid #000;
|
font-size: 6px; /* 修改为你想要的字体大小 */
|
line-height: 20px;
|
text-align: center;
|
word-break: break-all;
|
}
|
|
.material_table_td {
|
border: 1px solid #000;
|
font-size: 6px; /* 修改为你想要的字体大小 */
|
line-height: 20px;
|
text-align: center;
|
word-break: break-all;
|
}
|
}
|
|
.footer {
|
display: flex;
|
margin-bottom: 15px;
|
background-color: #eee;
|
font-size: 14px;
|
// font-weight: bold;
|
line-height: 100px;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
