<template>
<section>
<a-row style="margin: 10px 0px">
<a-button style="margin-right: 10px" @click="printPage">
<template #icon>
<printer-outlined/>
</template>
打印
</a-button>
<a-button type="primary" danger @click="closeWin">
<template #icon>
<close-circle-outlined/>
</template>
关闭
</a-button>
</a-row>
<div id="print-body">
<!-- 统一
显示逻辑，单订单
和多订单都是数组 -->
<div v-if="displayData && displayData.length > 0">
<!-- 第一遍
显示 -->
<div class="display-copy">
<div class="copy-header">第一联</div>
<div v-for="(orderData, orderIndex) in displayData" :key="`first-${orderIndex}`" class="order-table-wrapper">
<table class="custom-table">
<colgroup>
<col style="width: 40px"/>
<col style="width: 155px"/>
<col style="width: 40px"/>
<col style="width: 120px"/>
<col style="width: 40px"/>
<col style="width: 70px"/>
<col style="width: 40px"/>
<col style="width: 60px"/>
<col style="width: 200px"/>
<col style="width: 70px"/>
<col style="width: 40px"/>
<col style="width: 60px"/>
</colgroup>
<tr class="big-header-row">
<th colspan="11">管路下料数据</th>
<th>
<div :id="'qrcode-' + orderIndex" class="qrcode-container"></div>
</th>
</tr>
<tr class="info-row">
<
td colspan="2" class="left">{{ orderData.printName }}</
td>
<
td class="center">派工单
号</
td>
<
td class="center">{{ orderData.orderNo }} <span
v-if="orderData.shopMatOrderNo">({{ orderData.shopMatOrderNo }})</span></
td>
<
td class="center">开工日期</
td>
<
td class="center"></
td>
<
td class="center">施工班组</
td>
<
td class="center"></
td>
<
td class="center">下料人</
td>
<
td colspan="3" class="center"></
td>
</tr>
<tr class="header-row">
<
td class="center">分段</
td>
<
td class="center">图纸
号/小票
号</
td>
<
td class="center">等级</
td>
<
td class="center">材料名</
td>
<
td class="center">页数</
td>
<
td class="center">管段</
td>
<
td class="center">管长MM</
td>
<
td class="center">弯管</
td>
<
td class="center">备注</
td>
<
td class="center">炉
号</
td>
<
td class="center">通舱件</
td>
<
td class="center">修改方式</
td>
</tr>
<tbody v-if="orderData.matList && orderData.matList.length > 0">
<tr v-for="(item, idx) in orderData.matList" :key="idx" class="data-row">
<
td class="center">{{ item.block }}</
td>
<
td class="left">
<div>{{ item.drawNo }}</div>
<div>{{ item.pipeNo }}</div>
</
td>
<
td class="center">{{ item.pipeClass }}</
td>
<
td class="left">{{ item.materialDesp }}</
td>
<
td class="center">{{ item.pageNo }}</
td>
<
td class="center">{{ item.info }}</
td>
<
td class="center">{{ item.length }} XX</
td>
<
td class="center">{{ item.groove }}</
td>
<
td class="left">{{ item.cutRemark }}</
td>
<
td class="center">{{ item.heatNo }}</
td>
<
td class="center">{{ item.isThroughCabin }}</
td>
<
td class="center">{{ item.modifyType }}</
td>
</tr>
</tbody>
<tbody v-else>
<tr>
<
td colspan="12" class="center" style="padding: 20px;">暂无数据</
td>
</tr>
</tbody>
</table>
<!-- 每个订单表格后都添加
分页，除了最后一个 -->
<div v-if="orderIndex < displayData.length - 1" class="page-break"></div>
</div>
</div>
<!-- 强制
分页 -->
<div class="force-page-break"></div>
<!-- 第二遍
显示 -->
<div class="display-copy">
<div class="copy-header">第二联</div>
<div v-for="(orderData, orderIndex) in displayData" :key="`second-${orderIndex}`" class="order-table-wrapper">
<table class="custom-table">
<colgroup>
<col style="width: 40px"/>
<col style="width: 155px"/>
<col style="width: 40px"/>
<col style="width: 120px"/>
<col style="width: 40px"/>
<col style="width: 70px"/>
<col style="width: 40px"/>
<col style="width: 60px"/>
<col style="width: 200px"/>
<col style="width: 70px"/>
<col style="width: 40px"/>
<col style="width: 60px"/>
</colgroup>
<tr class="big-header-row">
<th colspan="12">管路下料数据</th>
</tr>
<tr class="info-row">
<
td colspan="2" class="left">{{ orderData.printName }}</
td>
<
td class="center">派工单
号</
td>
<
td class="center">{{ orderData.orderNo }} <span
v-if="orderData.shopMatOrderNo">({{ orderData.shopMatOrderNo }})</span></
td>
<
td class="center">开工日期</
td>
<
td class="center"></
td>
<
td class="center">施工班组</
td>
<
td class="center"></
td>
<
td class="center">下料人</
td>
<
td colspan="3" class="center"></
td>
</tr>
<tr class="header-row">
<
td class="center">分段</
td>
<
td class="center">图纸
号/小票
号</
td>
<
td class="center">等级</
td>
<
td class="center">材料名</
td>
<
td class="center">页数</
td>
<
td class="center">管段</
td>
<
td class="center">管长MM</
td>
<
td class="center">弯管</
td>
<
td class="center">备注</
td>
<
td class="center">炉
号</
td>
<
td class="center">通舱件</
td>
<
td class="center">修改方式</
td>
</tr>
<tbody v-if="orderData.matList && orderData.matList.length > 0">
<tr v-for="(item, idx) in orderData.matList" :key="idx" class="data-row">
<
td class="center">{{ item.block }}</
td>
<
td class="left">
<div>{{ item.drawNo }}</div>
<div>{{ item.pipeNo }}</div>
</
td>
<
td class="center">{{ item.pipeClass }}</
td>
<
td class="left">{{ item.materialDesp }}</
td>
<
td class="center">{{ item.pageNo }}</
td>
<
td class="center">{{ item.info }}</
td>
<
td class="center">{{ item.length }} XX</
td>
<
td class="center">{{ item.groove }}</
td>
<
td class="left">{{ item.cutRemark }}</
td>
<
td class="center">{{ item.heatNo }}</
td>
<
td class="center">{{ item.isThroughCabin }}</
td>
<
td class="center">{{ item.modifyType }}</
td>
</tr>
</tbody>
<tbody v-else>
<tr>
<
td colspan="12" class="center" style="padding: 20px;">暂无数据</
td>
</tr>
</tbody>
</table>
<!-- 每个订单表格后都添加
分页，除了最后一个 -->
<div v-if="orderIndex < displayData.length - 1" class="page-break"></div>
</div>
</div>
</div>
<div v-else>
<div style="text-align: center; padding: 50px; color: #999;">
暂无数据
</div>
</div>
</div>
</section>
</template>
<script setup>
import {computed, onActivated, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {print} from '@/utils/print'
import * as server from "@/packages/piping/api/cppf"
import {CloseCircleOutlined, PrinterOutlined} from '@ant-design/icons-vue'
import QRCode from 'qrcode'
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const data = ref([]) // 用于单订单数据
const dataList = ref([]) // 用于存储多订单数据
// 计算属性：判断参数类型
const orderNo = computed(() => route.query.orderNo)
const orderNos = computed(() => route.query.orderNos)
// 添加安全的计算属性
const hasOrderNos = computed(() => {
return !!orderNos.value
})
// 统一
显示数据计算属性
const displayData = computed(() => {
return hasOrderNos.value ? dataList.value : data.value
})
// 文档标题计算属性
const documentTitle = computed(() => {
if (hasOrderNos.value) {
return '多订单管路下料数据'
} else if (displayData.value && displayData.value.length > 0) {
return `派工单
号:${displayData.value[0]?.orderNo || ''}`
}
return '管路下料数据'
})
// 加载数据方法
const loadData = () => {
loading.value = true
if (orderNos.value) {
// 如果有orderNos参数，调用多订单查询接口
server.getPreCutWorkOrderPrintListByOrderNos({orderNos: orderNos.value}).then(res => {
if (!res.error) {
// 多订单返回的是数组，直接赋值给dataList
dataList.value = res.data || []
loading.value = false
// 自动打印
setTimeout(() => {
printPage()
}, 100)
} else {
dataList.value = []
loading.value = false
}
}).catch(error => {
console.error('获取多订单数据失败:', error)
dataList.value = []
loading.value = false
})
} else if (orderNo.value) {
// 如果有orderNo参数，调用单订单查询接口
server.getPreCutWorkOrderPrintList({orderNo: orderNo.value}).then(res => {
if (!res.error) {
// 单订单返回的是数组，直接赋值给data
data.value = res.data || []
loading.value = false
// 自动打印
setTimeout(() => {
printPage()
}, 100)
}
}).catch(error => {
console.error('获取单订单数据失败:', error)
loading.value = false
})
} else {
loading.value = false
}
}
const printPage = () => {
print({
type: 'raw-html',
printable: document.querySelector('#print-body').innerHTML,
documentTitle: documentTitle.value,
direction: 'landscape',
style: `
@media print {
.qrcode-container canvas {
display: block;
max-width: 50px;
max-height: 50px;
transform: scale(1);
}
.display-copy {
page-break-after: always;
}
.display-copy:last-child {
page-break-after: auto;
}
.page-break {
page-break-after: always;
}
.force-page-break {
display: none;
}
.copy-header {
display: block;
}
}
.custom-table {
font-size: 8px;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
margin-bottom: 20px;
}
.big-header-row th {
padding: 10px 0;
font-size: 30px;
color: #000000;
border: 1px solid #000;
}
.header-row
td {
padding: 5px;
text-align: center;
border: 1px solid #000;
}
.data-row
td {
padding: 5px;
border: 1px solid #000;
border-top: none;
}
.info-row
td {
padding: 5px;
border: 1px solid #000;
border-top: none;
}
.left { text-align: left; }
.center { text-align: center; }
/*
分页设置 */
.page-break {
page-break-after: always;
height: 0;
}
/* 强制
分页 */
.force-page-break {
page-break-after: always;
height: 0;
border: none;
margin: 0;
padding: 0;
}
/* 多订单表格之间的间距 */
.order-table-wrapper {
margin-bottom: 30px;
}
.order-table-wrapper:last-child {
margin-bottom: 0;
}
/* 两遍
显示之间的分隔 */
.display-copy {
margin-bottom: 40px;
}
.display-copy:last-child {
margin-bottom: 0;
}
/* 联次标题 */
.copy-header {
display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #000;
}
`
})
}
const closeWin = () => {
const url = window.location.href
if (url.indexOf('iframe=true') !== -1) {
window.history.go(-1)
} else {
router.back()
}
}
onActivated(() => {
loadData()
generateQRCodes()
})
const generateQRCodes = () => {
displayData.value.forEach((orderData, index) => {
const qrcodeContainer = document.getElementById(`qrcode-${index}`)
debugger
if (qrcodeContainer && orderData.workSpaceNo) {
QRCode.toDataURL(orderData.workSpaceNo, { scale: 2 }, (err, url) => {
if (err) {
console.error('生成二维码失败:', err)
return
}
qrcodeContainer.innerHTML = `<img src="${url}" style="width:50px;height:50px;">`
})
}
})
}
</script>
<style scoped>
.custom-table {
font-size: 8px;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
margin-bottom: 20px;
}
.big-header-row th {
padding: 10px 0;
font-size: 30px;
color: #000000;
border: 1px solid #000;
}
.header-row
td {
padding: 5px;
text-align: center;
border: 1px solid #000;
}
.data-row
td {
padding: 5px;
border: 1px solid #000;
border-top: none;
}
.info-row
td {
padding: 5px;
border: 1px solid #000;
border-top: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
/* 多订单表格样式 */
.order-table-wrapper {
margin-bottom: 30px;
}
.order-table-wrapper:last-child {
margin-bottom: 0;
}
/* 打印时
分页 */
.page-break {
page-break-after: always;
height: 0;
}
/* 强制
分页 */
.force-page-break {
page-break-after: always;
height: 0;
border: none;
margin: 0;
padding: 0;
}
/* 两遍
显示之间的分隔 */
.display-copy {
margin-bottom: 40px;
}
.display-copy:last-child {
margin-bottom: 0;
}
/* 联次标题 */
.copy-header {
display: none;
text-align: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
color: #000;
}
/* 打印时
分页控制 */
@media print {
.display-copy {
page-break-after: always;
}
.display-copy:last-child {
page-break-after: auto;
}
.page-break {
page-break-after: always;
}
.force-page-break {
display: none;
}
.copy-header {
display: block;
}
}
.qrcode-container canvas {
width: 50px;
height: 50px;
transform: scale(1);
}
</style>
页面上有二维码，为什么打印
页面没有
本文链接了一个优快云的博客详情页面,该页面包含了博客的具体内容,但由于未直接提供文本信息,故无法详细摘录其核心要点.从链接中可以得知这是一篇技术分享文章.
扫一扫
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
