<template>
|
<div id="print-area">
|
<div class="item" v-for="(items, index) in curPrintInfo" :key="items.ID">
|
<div v-if="index == 0">
|
<div class="flex relative">
|
<div style="position: absolute; left: 20px; height: 90px; margin: 25px 2px 2px">
|
<QrCode
|
:value="curOrderNo"
|
:width="80"
|
:height="80"
|
:options="{ margin: 5 }"
|
ref="qrDiyRef"
|
/>
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 25px; margin: 95px 15px 2px;border-bottom: 1px solid black; /* 线条的颜色和宽度 */ font-size: 12px;">
|
<div style="width: 30%"></div>
|
<div style="width: 18%"></div>
|
<div style="width: 27%">打印人：{{ useUserStore().userInfo?.username }}</div>
|
<div style="width: 25%">打印日期：{{ formatToDate(new Date()) }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
|
<div style="width: 15%">产品编号:</div>
|
<div style="width: 35%">{{ items.ItemCode }}</div>
|
<div style="width: 15%">产品型号:</div>
|
<div style="width: 35%">{{ items.Model }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
|
<div style="width: 15%">SAP料号:</div>
|
<div style="width: 35%">{{ items.SapCode }}</div>
|
<div style="width: 15%">客户名称:</div>
|
<div style="width: 35%">{{ items.Customer }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
|
<div style="width: 15%">生产订单:</div>
|
<div style="width: 35%">{{ items.OrderNo }}</div>
|
<div style="width: 15%">需求分类:</div>
|
<div style="width: 35%">{{ items.DemandCode }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
|
<div style="width: 15%">生产数量:</div>
|
<div style="width: 35%">{{ items.Qty }}</div>
|
<div style="width: 15%">单据状态:</div>
|
<div style="width: 35%">{{ items.Status }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 2px 20px;font-size: 12px;">
|
<div style="width: 15%">产品描述:</div>
|
<div style="width: 85%">{{ items.ItemDesc }}</div>
|
</div>
|
<div style="display: flex; flex-direction: row; height: 20px; margin: 25px 20px 2px;font-size: 12px;">
|
<div style="width: 15%">工艺路线:</div>
|
<div style="width: 85%">{{ items.RouteStr }}</div>
|
</div>
|
</div>
|
<div class="main">
|
<table class=" ">
|
<tr>
|
<th class="material_table_td" style="width: 7%">行号</th>
|
<th class="material_table_td" style="width: 10%">SAP料号</th>
|
<th class="material_table_td" style="width: 10%">料号编码</th>
|
<th class="material_table_td" style="width: 17%">描述</th>
|
<th class="material_table_td" style="width: 7%">备料数量</th>
|
<th class="material_table_td" style="width: 13%">行备注</th>
|
<th class="material_table_td" style="width: 9%">库位</th>
|
<th class="material_table_td" style="width: 9%">07库位</th>
|
<th class="material_table_td" style="width: 9%">发料方式</th>
|
<th class="material_table_td" style="width: 9%"></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">
|
{{ item.LineNo }}
|
</td>
|
<td class="instore_td">
|
{{ item.SapCode }}
|
</td>
|
<td class="instore_td">
|
{{ item.ItemCode }}
|
</td>
|
<td class="instore_td">
|
{{ item.ItemDesc }}
|
</td>
|
<td class="instore_td">
|
{{ item.PickQty }}
|
</td>
|
<td class="instore_td">
|
{{ item.LineRemark }}
|
</td>
|
<td class="instore_td">
|
{{ item.WhCode }}
|
</td>
|
<td class="instore_td">
|
{{ item.WhCode07 }}
|
</td>
|
<td class="instore_td">
|
{{ item.Method }}
|
</td>
|
<td class="instore_td">
|
{{ }}
|
</td>
|
</tr>
|
<tr v-if="Number(curPrintInfo?.length) >1 && index == Number(curPrintInfo?.length) - 1 && items.Items.length < 11" v-for="n in (11-items.Items.length)" :key="n">
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
</tr>
|
<tr v-if="Number(curPrintInfo?.length) ==1 && index == Number(curPrintInfo?.length) - 1 && items.Items.length < 11" v-for="n in (9-items.Items.length)" :key="n">
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
<td class="instore_td2"> </td>
|
</tr>
|
<!-- <tr v-if="index == Number(curPrintInfo?.length) - 1 && items.Items.length <= 11"> -->
|
<tr>
|
<td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">生产订单备注：{{ items.MoRemark }}</td>
|
<td colspan="5" style="height:70px; font-size: 12px;vertical-align: top;">销售订单备注：{{ items.SoRemark }}</td>
|
</tr>
|
</table>
|
</div>
|
<div class="footer flex">
|
<div style="width: 40%"></div>
|
<div style="width: 10%">第{{ index + 1 }}页</div>
|
<div style="width: 10%">共{{ curPrintInfo?.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';
|
import { useUserStore } from '/@/store/modules/user';
|
import { useWoFlowcardStore } from '/@/store/modules/woflowcardprint';
|
import { storeToRefs } from 'pinia';
|
|
const props = defineProps({
|
tableData: { type: Object as PropType<any[]> },
|
wokerorder: { type: String },
|
});
|
const { tableData, wokerorder } = toRefs(props);
|
const useWoFlowCard = useWoFlowcardStore();
|
const { curOrderNo, curPrintInfo } = storeToRefs(useWoFlowCard);
|
</script>
|
<style lang="scss" scoped>
|
#print-area {
|
position: absolute;
|
inset: 0;
|
background-color: #fff;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
margin-right: 10px;
|
margin-left: 10px;
|
font-family: SimSun, "宋体", serif;
|
// background-color: bisque;
|
page-break-after: always;
|
|
.head {
|
z-index: 1;
|
width: 100%;
|
margin: 20px;
|
background-color: azure;
|
font-size: 36px;
|
font-weight: bold;
|
line-height: 100px;
|
text-align: left;
|
}
|
|
.main {
|
display: flex;
|
flex: 1;
|
// align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
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 {
|
height: 60px;
|
border: 1px solid #000;
|
font-family: SimSun, "宋体", serif;
|
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>
|
