heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue
2025-01-09 18:29:48 +08:00

484 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Dialog title="打印预览" v-model="dialogVisible" width="1000">
<!-- 打印预览 -->
<div class="print-wrap page" ref="print">
<!-- 客户联 -->
<table border="2" cellspacing="0" id="table" >
<tbody>
<tr>
<td colspan="10">
<div style="display: flex; align-items: center; justify-content: space-between">
<img src="/src/assets/imgs/exlogo.png" style="width: 100px" alt="" />
<span style="font-size: 20px; font-weight: 700">发货单</span>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
>
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2"> 发货编号 </td>
<td colspan="3">
<span>{{ 'HL202306024' }}</span>
</td>
<td>合同号</td>
<td colspan="2">{{ `` }}</td>
<td> 性质: </td>
<td>{{ `新作` }} </td>
</tr>
</tbody>
<tr>
<td colspan="2"> 发货日期 </td>
<td colspan="3">
{{ `2024-01-18` }}
</td>
<td> 联系人</td>
<td>{{ `张鹏` }} </td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="2"> 收货单位 </td>
<td colspan="8">{{ `京凤汽车股份有限公司铸造分公司` }}</td>
</tr>
<tr>
<td colspan="2"> 收货地址 </td>
<td colspan="8">{{ `湖北省集阳市高新区米带路和斗店路交又口东凤铸造撤迁改造项目` }}</td>
</tr>
<tr>
<td colspan="2"> 项目名称</td>
<td colspan="4">{{ `康明斯Ruby发动机缸益` }}</td>
<td>重量(T)</td>
<td>{{ `18` }}</td>
<td>位置(米)</td>
<td>{{ `9.6` }}</td>
</tr>
<tbody>
<tr>
<td colspan="4"> 内容清单 </td>
<td> 单位 </td>
<td> 数量 </td>
<td>重量(T)</td>
<td>尺寸(米)</td>
<td colspan="2"> 备注 </td>
</tr>
<tr v-for="item in 6" :key="item.index">
<td colspan="4"> 工菜模具详见清单阳件 </td>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td colspan="2"> 备注 </td>
</tr>
</tbody>
<tr>
<td colspan="2"> 发货单位 </td>
<td colspan="3">
{{ `杭州合立机有限公可` }}
</td>
<td> 联系人</td>
<td>{{ `张鹏` }} </td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="2"> 司机姓名 </td>
<td colspan="2">
{{ `杭州合立机有限公可` }}
</td>
<td>车牌号</td>
<td colspan="2"></td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="5">
<div style="text-align: left">内部货物门点人签名:</div>
</td>
<td colspan="5">
<div style="text-align: left">收货人签名:</div>
</td>
</tr>
</table>
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
<span>制单人:{{ `` }}</span>
<span>-客户联-</span>
</div>
<div class="divide_line" style="margin: 20px 0"></div>
<!-- 回单联 -->
<table border="2" cellspacing="0" id="table1" style="position: relative !important">
<!-- <img
src="/src/assets/imgs/exlogo.png"
style="position: absolute; top: 10px; width: 90px"
alt=""
/> -->
<tbody>
<tr>
<td colspan="10">
<div style="display: flex; align-items: center; justify-content: space-between">
<img src="/src/assets/imgs/exlogo.png" style="width: 100px" alt="" />
<span style="font-size: 20px; font-weight: 700">发货单</span>
<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
>
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="2"> 发货编号 </td>
<td colspan="3">
<span>{{ 'HL202306024' }}</span>
</td>
<td>合同号</td>
<td colspan="2">{{ `` }}</td>
<td> 性质: </td>
<td>{{ `新作` }} </td>
</tr>
</tbody>
<tr>
<td colspan="2"> 发货日期 </td>
<td colspan="3">
{{ `2024-01-18` }}
</td>
<td> 联系人</td>
<td>{{ `张鹏` }} </td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="2"> 收货单位 </td>
<td colspan="8">{{ `京凤汽车股份有限公司铸造分公司` }}</td>
</tr>
<tr>
<td colspan="2"> 收货地址 </td>
<td colspan="8">{{ `湖北省集阳市高新区米带路和斗店路交又口东凤铸造撤迁改造项目` }}</td>
</tr>
<tr>
<td colspan="2"> 项目名称</td>
<td colspan="4">{{ `康明斯Ruby发动机缸益` }}</td>
<td>重量(T)</td>
<td>{{ `18` }}</td>
<td>位置(米)</td>
<td>{{ `9.6` }}</td>
</tr>
<tbody>
<tr>
<td colspan="4"> 内容清单 </td>
<td> 单位 </td>
<td> 数量 </td>
<td>重量(T)</td>
<td>尺寸(米)</td>
<td colspan="2"> 备注 </td>
</tr>
<tr v-for="item in 6" :key="item.index">
<td colspan="4"> 工菜模具详见清单阳件 </td>
<td> </td>
<td> </td>
<td></td>
<td></td>
<td colspan="2"> 备注 </td>
</tr>
</tbody>
<tr>
<td colspan="2"> 发货单位 </td>
<td colspan="3">
{{ `杭州合立机有限公可` }}
</td>
<td> 联系人</td>
<td>{{ `张鹏` }} </td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="2"> 司机姓名 </td>
<td colspan="2">
{{ `杭州合立机有限公可` }}
</td>
<td>车牌号</td>
<td colspan="2"></td>
<td> 电话 </td>
<td colspan="2">{{ `13812345678` }} </td>
</tr>
<tr>
<td colspan="5">
<div style="text-align: left">内部货物门点人签名:</div>
</td>
<td colspan="5">
<div style="text-align: left">收货人签名:</div>
</td>
</tr>
</table>
<div
style="
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
"
>
<span>制单人:{{ `` }}</span>
<span>-回单联-</span>
</div>
<!-- 附件 -->
<!-- 附件需要判断 -->
<div v-for="item in 2" :key="item.index">
<div class="divide_line1" style="margin-top: 30px"></div>
<table border="2" cellspacing="0" id="table1" style="height: 28cm; ">
<tbody>
<tr>
<td colspan="10">
<div style="display: flex; align-items: center; justify-content: space-between">
<img src="/src/assets/imgs/exlogo.png" style="width: 100px" alt="" />
<span style="font-size: 20px; font-weight: 700">清单附件</span>
<span style="font-size: 12px">发货编号:{{ `H1202306024` }}</span>
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td> 序号 </td>
<td colspan="3">
<span>模具名称</span>
</td>
<td colspan="3">模具图号</td>
<td> 数量(套) </td>
<td colspan="2">备注 </td>
</tr>
<tr>
<td colspan="10" style="background-color: rgb(255, 255, 0)">
<div style="text-align: left">模具清单</div>
</td>
</tr>
<tr v-for="item in 7" :key="item">
<td> {{ item }} </td>
<td colspan="3">
<span>{{ '模具名称' }}</span>
</td>
<td colspan="3">{{ `模具图号` }}</td>
<td> {{ item }} </td>
<td colspan="2">{{ `备注` }} </td>
</tr>
<tr>
<td colspan="10" style="background-color: rgb(255, 255, 0)">
<div style="text-align: left">备件清单</div>
</td>
</tr>
<tr v-for="item in 5" :key="item">
<td> {{ item }} </td>
<td colspan="3">
<span>{{ '模具名称' }}</span>
</td>
<td colspan="3">{{ `模具图号` }}</td>
<td> {{ item }} </td>
<td colspan="2">{{ `备注` }} </td>
</tr>
<tr>
<td colspan="10" style="background-color: rgb(255, 255, 0)">
<div style="text-align: left">刀具清单</div>
</td>
</tr>
<tr v-for="item in 5" :key="item">
<td> {{ item }} </td>
<td colspan="3">
<span>{{ '模具名称' }}</span>
</td>
<td colspan="3">{{ `模具图号` }}</td>
<td> {{ item }} </td>
<td colspan="2">{{ `备注` }} </td>
</tr>
</tbody>
<tr>
<td colspan="10">
<div style="text-align: left">内部货物门点人签名:</div>
</td>
</tr>
</table>
<div
style="
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
"
>
<span>制单人{{ `` }}</span>
<span>-回单联-</span>
</div>
</div>
</div>
<template #footer>
<!-- 打印 -->
<el-button @click="onPrint" type="primary">打印</el-button>
<el-button @click="outopen">取消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
// import { ref, reactive } from 'vue'
import { Check } from '@element-plus/icons-vue'
const dialogVisible = ref(false) // 弹窗的是否展示
const onPrint = () => {
// 拿到打印页面dom节点
const printNode = document.querySelector('.print-wrap')
if (!printNode) return
// 页面文档创建一个空的内框架,用于挂载打印节点,并设置一定的样式
const newIframe: any = document.createElement('iframe')
newIframe.setAttribute(
'style',
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
)
newIframe.setAttribute('align', 'center')
document.body.appendChild(newIframe)
// 将打印页面设置为内框架内容
let doc: any = null
doc = newIframe.contentWindow.document
doc.write(`
<style type="text/css">
/* 浏览器打印基本样式 */
.page {
width: 21cm;
min-height: 29.7cm;
padding: 10mm;
margin: 20px auto;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
font-size: 14px !important;
}
@page {
size: A4;
margin: 5px 1cm;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
table {
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
height: auto; /* 高度根据内容自适应 */
font-size: 14px;
text-align: center;
border-collapse: collapse;
margin-top: 5mm; /* 添加顶部外边距,替代原先的页内边距 */
td {
padding: 5px 0;
border: 1px solid #333;
}
}
.divide_line {
justify-content: center;
border-bottom: 1px dashed rgba(51, 51, 51, 1);
}
.divide_line1 {
justify-content: center;
border-bottom: 1px dashed rgb(255, 255, 255);
}
</style>
<div>
${printNode.innerHTML}
</div>`)
doc.close()
// 浏览器打印页面打开渲染
setTimeout(() => {
newIframe.contentWindow.focus()
newIframe.contentWindow.print()
document.body.removeChild(newIframe) // 移除打印内框架,下次打印下次再挂载
dialogVisible.value = false
}, 100)
}
const outopen = () => {
dialogVisible.value = false
}
const queryParams: any = ref({
code: undefined
})
const isSelected = ref([1, 3])
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
</script>
<style scoped lang="scss">
.page {
width: 21cm;
min-height: 29.7cm;
padding: 10mm;
margin: 20px auto;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
font-size: 14px !important;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
table {
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
height: auto; /* 高度根据内容自适应 */
font-size: 14px;
text-align: center;
border-collapse: collapse;
margin-top: 5mm; /* 添加顶部外边距,替代原先的页内边距 */
td {
padding: 5px 0;
border: 1px solid #333;
}
}
.divide_line {
justify-content: center;
border-bottom: 1px dashed rgba(51, 51, 51, 1);
}
.divide_line1 {
justify-content: center;
border-bottom: 1px dashed rgb(255, 255, 255);
}
#table {
position: relative;
}
/*
A4的大小21cm*29.7cmwidth:794px;)。
单位换算1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
</style>