<!--打印内容 -->
|
<template>
|
<div id="printContent" class="printContent">
|
|
|
<div class="ermbox">
|
<div class="t40">
|
销售订单号：<span>{{ itemTitle.info16 }}</span>
|
</div>
|
<div class="imgL">
|
<canvas ref="qrcodeCanvas"></canvas>
|
</div>
|
<div class="t41">
|
生产订单号：<span>{{ itemTitle.info5 }}</span>
|
</div>
|
</div>
|
|
<div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
|
<div class="t1">{{ Name }}</div>
|
<div class="header_pt">
|
<div class="box1">
|
|
|
<!-- <img class="imgL" src="http://localhost:8888/src/assets/logo-mini.png" alt="" /> -->
|
<!-- <img class="imgL" src="@/assets/logo.png" alt="" /> -->
|
<!-- <div class="t2">
|
<p class="text1">鲁丽家居股份有限公司</p>
|
</div> -->
|
</div>
|
<div class="box-t1">
|
<div>
|
打印时间：<span>{{ DateToday }}</span>
|
</div>
|
<div>
|
缺料总数量：<span>{{ deltailList.length }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="tableBox">
|
<table cellspacing="0" cellpadding="0">
|
<tr class="middle_first">
|
<td class="middle_tree">编号</td>
|
<td class="middle_two">材料</td>
|
<td class="middle_two">部件名称</td>
|
<td class="middle_four">尺寸</td>
|
<td class="middle_one">部件条码</td>
|
</tr>
|
<tr class="middle_first" v-for="(item, index) in itemW" :key="index">
|
<td class="middle_tree">{{ item.num }}</td>
|
<td class="middle_two">
|
<div>
|
{{ item.info18 }}
|
</div>
|
</td>
|
<td class="middle_two">
|
<div>
|
{{ item.detailName }}
|
</div>
|
</td>
|
<td class="middle_four">
|
<div>
|
{{ item.info16 }}
|
</div>
|
</td>
|
<td class="middle_one">
|
<div>
|
{{ item.upi }}
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<span class="pageNum">{{ indexW + 1 }}</span>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps, onMounted } from 'vue';
|
import printJS from 'print-js';
|
import QRCode from 'qrcode';
|
const Name = ref([]);
|
const DateToday = ref('');
|
const itemTitle: any = ref({});
|
const deltailList = ref<any[]>([]);
|
const splitArray = (array: any, size: any) => {
|
let data = [];
|
for (let i = 0; i < array.length; i += size) {
|
data.push(array.slice(i, i + size));
|
}
|
return data;
|
};
|
|
const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);
|
|
// };
|
const printHd = (name: string, itemSubTitle: any, deltailListArr: any) => {
|
console.log('打印条数8888==' + deltailListArr.length);
|
Name.value = name;
|
debugger;
|
|
// if(itemSubTitle && itemSubTitle.length>0){
|
// itemTitle.value = itemSubTitle[0]
|
// }
|
itemTitle.value.info5 = deltailListArr[0].info5;
|
itemTitle.value.info16 = deltailListArr[0].info16;
|
|
deltailListArr.forEach((item, index) => {
|
item.num = index + 1;
|
});
|
deltailList.value = splitArray(deltailListArr, 16);
|
console.log(deltailList.value);
|
const currentDate = new Date();
|
const formattedDate = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD 格式
|
DateToday.value = formattedDate; // 将当前日期赋值给 DateToday
|
// DateToday.value = '2024-01-01';
|
|
// DateToday.value = formatUtcToData(
|
// new Date().toString(),
|
// "YYYY-MM-DD"
|
// );
|
|
// console.log(itemSubTitle)
|
// console.log(deltailListArr)
|
if (deltailListArr[0].info5) {
|
debugger
|
nextTick(() => {
|
QRCode.toCanvas(qrcodeCanvas.value, deltailListArr[0].info5, { width: 150 });
|
});// 在组件挂载时生成二维码
|
}
|
|
nextTick(() => {
|
printJS({
|
printable: 'printContent', // 要打印的元素的 ID
|
type: 'html', // 使用 HTML 内容
|
// header: '目标标题', // 设置打印时的标题，如果不需要可以去掉此行
|
css: ['*'], // 设定样式，如果你需要引入具体的 CSS 文件，可以在这里放入样式文件的 URL
|
style: `
|
|
.header_pt {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.tableBox {
|
border: 1px solid #909399;
|
height: 780px;
|
overflow: hidden;
|
}
|
|
.printWp {
|
padding: 15px 20px;
|
height: 1070px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.t1 {
|
text-align: center;
|
font-size: 20px !important;
|
font-weight: bold;
|
border: 1px solid transparent;
|
padding-bottom: 119px;
|
}
|
|
.ermbox {
|
position: absolute;
|
top: 10px;
|
left: 20px;
|
}
|
|
.imgL {
|
|
}
|
.printContent {
|
position: relative;
|
z-index: 999;
|
font-size: 12px;
|
}
|
|
.printContent .box-t1 {
|
line-height: 24px;
|
text-align: right;
|
position: relative;
|
width: 200px;
|
}
|
|
.printContent .box-t1 div {
|
display: block;
|
}
|
|
.ermbox span {
|
font-weight: 700;
|
}
|
.t40 {
|
font-size: 12px;
|
}
|
.t41 {
|
font-size: 16px;
|
}
|
.printContent table {
|
padding: 10px 0;
|
}
|
|
.printContent table tr,
|
.printContent table td {
|
margin: 0;
|
padding: 0;
|
}
|
|
.printContent table td {
|
border: 1px solid transparent;
|
text-align: center;
|
padding: 0px;
|
}
|
|
.printContent table td div {
|
height: 44px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
word-break: break-all;
|
overflow: hidden;
|
}
|
|
.printContent .middle_tree {
|
width: 50px;
|
}
|
|
.printContent .middle_four {
|
width: 80px;
|
}
|
|
.printContent .middle_one {
|
width: 233px;
|
}
|
|
.printContent .middle_two {
|
width: 210px;
|
}
|
|
.printContent span {
|
color: gray;
|
}
|
|
.printContent .box-t2 {
|
display: flex;
|
flex-wrap: wrap;
|
margin: 0 3%;
|
}
|
|
.printContent .box-t2 div {
|
width: 50%;
|
height: 32px;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.printContent .box-t2R {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.printContent .box-t2R div {
|
width: 100%;
|
height: 40px;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.printContent .pageNum {
|
position: absolute;
|
right: 20px;
|
bottom: 0;
|
}
|
|
`,
|
scanStyles: false, // 是否扫描当前的 CSS 样式
|
});
|
});
|
|
|
};
|
|
|
|
// onMounted(async () => {
|
// if (qrcodeCanvas.value) {
|
// try {
|
// await QRCode.toCanvas(qrcodeCanvas.value, "7777", { width: 100 });
|
// } catch (err) {
|
// console.error('生成二维码出错:', err);
|
// }
|
// } else {
|
// console.error('qrcodeCanvas未定义');
|
// }
|
// });
|
|
// 暴露方法
|
defineExpose({ printHd });
|
</script>
|
|
<style>
|
|
.header_pt {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.tableBox {
|
border: 1px solid #909399;
|
height: 780px;
|
overflow: hidden;
|
}
|
|
.printWp {
|
padding: 15px 20px;
|
height: 1070px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.t1 {
|
text-align: center;
|
font-size: 20px !important;
|
font-weight: bold;
|
border: 1px solid transparent;
|
padding-bottom: 119px;
|
}
|
|
.ermbox {
|
position: absolute;
|
top: 10px;
|
left: 20px;
|
}
|
|
.imgL {
|
|
}
|
.printContent {
|
position: relative;
|
z-index: -999;
|
font-size: 12px;
|
}
|
|
.printContent .box-t1 {
|
line-height: 24px;
|
text-align: right;
|
position: relative;
|
width: 200px;
|
}
|
|
.printContent .box-t1 div {
|
display: block;
|
}
|
|
.ermbox span {
|
font-weight: 700;
|
}
|
.t40 {
|
font-size: 12px;
|
}
|
.t41 {
|
font-size: 16px;
|
}
|
.printContent table {
|
padding: 10px 0;
|
}
|
|
.printContent table tr,
|
.printContent table td {
|
margin: 0;
|
padding: 0;
|
}
|
|
.printContent table td {
|
border: 1px solid transparent;
|
text-align: center;
|
padding: 0px;
|
}
|
|
.printContent table td div {
|
height: 44px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
word-break: break-all;
|
overflow: hidden;
|
}
|
|
.printContent .middle_tree {
|
width: 50px;
|
}
|
|
.printContent .middle_four {
|
width: 80px;
|
}
|
|
.printContent .middle_one {
|
width: 233px;
|
}
|
|
.printContent .middle_two {
|
width: 210px;
|
}
|
|
.printContent span {
|
color: gray;
|
}
|
|
.printContent .box-t2 {
|
display: flex;
|
flex-wrap: wrap;
|
margin: 0 3%;
|
}
|
|
.printContent .box-t2 div {
|
width: 50%;
|
height: 32px;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.printContent .box-t2R {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.printContent .box-t2R div {
|
width: 100%;
|
height: 40px;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.printContent .pageNum {
|
position: absolute;
|
right: 20px;
|
bottom: 0;
|
}
|
|
</style>
|
