<!--打印内容 -->
|
<template>
|
<div id="printContent" class="printContent">
|
<div class="printWp" v-for="(itemW, indexW) in deltailList" :key="indexW">
|
<!-- <div class="t1">{{Name[0]}} {{Name[1]}} {{Name[2]}}</div> -->
|
|
<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">
|
<!-- MAKINO J CHINA CO.,LTD<br /> -->
|
鲁丽木业股份有限公司
|
</p>
|
</div>
|
</div>
|
<div class="box-t1">
|
<div>
|
单号：<span>{{ itemTitle.orderNo }}</span>
|
</div>
|
<!-- <div>DO性质：{{ itemTitle.doNature }}<span></span> </div> -->
|
<div>
|
<!-- 合同号：{{ itemTitle.customOrderNumber }}<span></span> -->
|
<div>
|
<span> {{ DateToday }}</span>
|
</div>
|
</div>
|
<div class="t4">
|
<!-- 收货方： <span>{{ itemTitle.clientName }}</span> -->
|
</div>
|
</div>
|
</div>
|
|
<div class="tableBox">
|
<table cellspacing="0" cellpadding="0">
|
<tr class="middle_first">
|
<td class="middle_tree">编号</td>
|
<!-- <td class="middle_one">客户物料代码</td>
|
<td class="middle_one">客户物料名称</td> -->
|
<td class="middle_one">批次</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_one">
|
<div>
|
{{ item.customMaterialcode }}
|
</div>
|
</td>
|
<td class="middle_one">
|
<div>
|
{{ item.customMaterialName }}
|
</div>
|
</td> -->
|
<td class="middle_one">
|
<div>
|
{{ item.planNo }}
|
</div>
|
</td>
|
<td class="middle_two">
|
<div>
|
{{ item.orderId }}
|
</div>
|
</td>
|
<td class="middle_four">
|
<div>
|
{{ item.packageCode }}
|
</div>
|
</td>
|
<td class="middle_one">
|
<div>
|
{{ item.shortageCount }}
|
</div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<!-- <br /> <br /> -->
|
<!-- <div class="box-t2">
|
<div>供货方确认：牧野汽车装备（武汉）有限公司 </div>
|
<div> 签收人（代收人）： </div>
|
</div> -->
|
<!-- 姓名 电话 地址 -->
|
<!-- <div class="box-t2">
|
<div>姓名&电话：</div>
|
<div> 日期： </div>
|
</div> -->
|
<!-- <div class="box-t2 box-t2R">
|
<div>地址：</div>
|
</div> -->
|
<span class="pageNum">{{ indexW + 1 }}</span>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, nextTick, computed, defineExpose, defineEmits, markRaw, defineProps } from 'vue';
|
import printJS from 'print-js';
|
// import { formatUtcToData } from "@/utils/formate";
|
|
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 printHd = (name: string, itemSubTitle: any, deltailListArr: any) => {
|
Name.value = name;
|
// if(itemSubTitle && itemSubTitle.length>0){
|
// itemTitle.value = itemSubTitle[0]
|
// }
|
itemTitle.value.orderNo = deltailListArr[0].orderNo;
|
deltailListArr.forEach((item, index) => {
|
item.num = index + 1;
|
});
|
deltailList.value = splitArray(deltailListArr, 16);
|
console.log(deltailList.value);
|
|
DateToday.value = '2024-01-01';
|
|
// DateToday.value = formatUtcToData(
|
// new Date().toString(),
|
// "YYYY-MM-DD"
|
// );
|
|
// console.log(itemSubTitle)
|
// console.log(deltailListArr)
|
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;
|
}
|
|
.imgL {
|
width: 140px;
|
}
|
|
.t1 {
|
text-align: center;
|
font-size: 30px !important;
|
font-weight: bold;
|
border: 1px solid transparent;
|
}
|
|
.printContent {
|
position: relative;
|
z-index: -1;
|
font-size: 12px;
|
}
|
|
.printContent .box-t1 {
|
line-height: 24px;
|
text-align: right;
|
position: relative;
|
width: 200px;
|
}
|
|
.printContent .box-t1 div {
|
display: block;
|
}
|
|
.printContent .t4 {
|
text-align: right;
|
}
|
|
.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 样式
|
});
|
});
|
};
|
|
// 暴露方法
|
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;
|
}
|
|
.imgL {
|
width: 140px;
|
}
|
|
.t1 {
|
text-align: center;
|
font-size: 30px !important;
|
font-weight: bold;
|
border: 1px solid transparent;
|
}
|
|
.printContent {
|
position: relative;
|
z-index: -1;
|
font-size: 12px;
|
}
|
|
.printContent .box-t1 {
|
line-height: 24px;
|
text-align: right;
|
position: relative;
|
width: 200px;
|
}
|
|
.printContent .box-t1 div {
|
display: block;
|
}
|
|
.printContent .t4 {
|
text-align: right;
|
}
|
|
.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>
|
