<template>
|
<div class="flex">
|
<div id="print-area">
|
<div class="item" v-for="(items, index) in printData" :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" :key="indexs">
|
<!-- <td class="material_table_td">
|
{{ Number(indexs) + 1 }}
|
</td> -->
|
<td class="instore_td">
|
<QrCode
|
:value="item.ORDER_NO"
|
:width="80"
|
:height="80"
|
: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(printData?.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%">共{{ printData?.length }}页</div>
|
<div style="width: 40%"></div>
|
</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);
|
const printData = [
|
{
|
id: '111',
|
Items: [
|
{
|
ID: 111,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 112,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 113,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 114,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 115,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 116,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 116,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 116,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
// {
|
// ID: 116,
|
// ORDER_NO: 'YDSO241101002',
|
// WORK_ORDER: 'YDMOB241104737',
|
// ITEM_CODE: '20100705.0102.00',
|
// ITEM_NAME:
|
// 'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
// PLAN_QTY: 100,
|
// SCAN_QTY: 50,
|
// },
|
],
|
},
|
{
|
id: '112',
|
Items: [
|
{
|
ID: 311,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 312,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 313,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
],
|
},
|
{
|
id: '113',
|
Items: [
|
{
|
ID: 211,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 212,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
{
|
ID: 213,
|
ORDER_NO: 'YDSO241101002',
|
WORK_ORDER: 'YDMOB241104737',
|
ITEM_CODE: '20100705.0102.00',
|
ITEM_NAME:
|
'YM-DEMS-BD11Q48 AC0-300V AC20mA 电能1级 网线2m 配合YD-DEMS-BD2RHT使用,配套互感器带小插头 雅达白色啤盒V3/B版HC',
|
PLAN_QTY: 100,
|
SCAN_QTY: 50,
|
},
|
],
|
},
|
];
|
</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>
|
