yunxi
/
mes-heli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Merge branch 'dev' of http://222.71.165.188:3000/yunxi/mes-heli into dev

Browse Source
pull/1/head
siontion 9 months ago
parent f3c1de043c a742ba6012
commit 9fb9a95df7
3 changed files with 399 additions and 11 deletions
Show Stats Download Patch File Download Diff File

28
mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/dayin.vue
Unescape View File

@ -1,28 +1,36 @@
<template>
<el-button class="default-btn primary-btn" @click="printHandle()">打印启动单</el-button>
<el-button class="default-btn primary-btn" @click="printHandle2()">打印发货单</el-button>
<!-- 【打印】 - 弹框-->
<!-- 【打印启动单】 - 弹框-->
<Print ref="printRef" :info="dialogInfo" />
<!-- 【打印发货单】 - 弹框-->
<ShipmentsPrint ref="shipmentsPrintRef" :info="dialogInfo" />
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import Print from './print.vue' // 引入打印弹框
import ShipmentsPrint from './shipmentsPrint.vue' // 引入打印弹框
/**
* 【打印小票】
*/
// 打印启动单
const printRef = ref() // 打印弹框
let dialogVisible = ref(false) // 打印弹框是否显示
let dialogInfo = ref({}) // 打印弹框数据
const dialogVisible = ref(false) // 打印弹框是否显示
const dialogInfo = ref({}) // 打印弹框数据
const data = ref<Record<string, any>>({});
/**
* 打印小票
*/
// 打印启动单
const printHandle =()=> {
dialogInfo.value = data.value || {};
dialogVisible.value = true;
printRef.value.open()
}
//打印发货单
const shipmentsPrintRef = ref() // 打印弹框
const printHandle2 =()=> {
dialogInfo.value = data.value || {};
dialogVisible.value = true;
shipmentsPrintRef.value.open()
}
</script>

2
mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/print.vue
Unescape View File

@ -1,5 +1,5 @@
<template>
<Dialog title="打印" v-model="dialogVisible" width="1000">
<Dialog title="打印预览" v-model="dialogVisible" width="1000">
<!-- 打印预览 -->
<div class="print-wrap page" ref="print">
<table border="2" cellspacing="0" id="table">

380
mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/shipmentsPrint.vue
Unescape View File

@ -0,0 +1,380 @@
<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">
<span>制单人：{{ `` }}</span>
<span>-回单联-</span>
</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);
}
</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);
}
#table {
position: relative;
}
/*
A4的大小：21cm*29.7cm（width:794px;）。
单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
</style>
Write Preview
Loading…
Cancel
Save