<script setup>
|
import request from "@/utils/request"
|
import {computed, onMounted, ref} from "vue"
|
|
//这里是打印的配置项
|
const print=ref({
|
id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
|
popTitle: '配置页眉标题', // 打印配置页上方的标题
|
extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
|
preview: false, // 是否启动预览模式，默认是false
|
previewTitle: '预览的标题', // 打印预览的标题
|
previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
|
zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
|
previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
|
previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
|
beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
|
openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
|
closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
|
clickMounted() { console.log('点击v-print绑定的按钮了！') },
|
|
})
|
|
let props = defineProps({
|
orderId:null
|
})
|
let data = ref({
|
order:{
|
processingNote:''
|
},
|
orderProductDetail:[]
|
})
|
const grossNum = ref({
|
quantity: 0,
|
grossArea: 0,
|
perimeter: 0
|
})
|
const getData = () => {
|
request.get(`/order/printOrderProductDetail/${props.orderId}`).then(res => {
|
data.value= res.data
|
res.data.orderProductDetail.forEach(item => {
|
grossNum.value.quantity += getQuantity(item.productDetail)
|
grossNum.value.grossArea += getArea(item.productDetail)
|
grossNum.value.perimeter += getPerimeter(item.productDetail)
|
|
})
|
|
grossNum.value.quantity = parseFloat(grossNum.value.quantity.toFixed(3))
|
grossNum.value.grossArea = parseFloat(grossNum.value.grossArea.toFixed(3))
|
grossNum.value.perimeter = parseFloat(grossNum.value.perimeter.toFixed(3))
|
|
})
|
}
|
|
onMounted(() => {
|
getData()
|
})
|
|
const getQuantity = (productList) => {
|
let quantity = 0
|
productList.forEach(item => {
|
quantity += item.quantity
|
})
|
return parseFloat(quantity.toFixed(3))
|
|
}
|
|
const getArea = (productList) => {
|
let area = 0
|
productList.forEach(item => {
|
area += item.grossArea
|
})
|
return parseFloat(area.toFixed(3))
|
|
}
|
|
const getPerimeter = (productList) => {
|
let perimeter = 0
|
productList.forEach(item => {
|
perimeter += item.perimeter
|
})
|
return parseFloat(perimeter.toFixed(3))
|
}
|
|
const printSheet = () => {
|
// printJS({
|
// printable:'sheet',
|
// type:'html',
|
// //style:styleAll(),
|
// targetStyles: ['*']
|
// //scanStyles:false
|
// })
|
}
|
|
|
|
|
defineExpose({
|
printSheet
|
});
|
</script>
|
|
|
<template>
|
<div id="sheet">
|
|
<el-row style="margin-bottom: 0.5rem;">
|
<el-col :span="24">
|
<h1>
|
<img src="../../../assets/northGlass.ico" alt="" style="float: left;max-width: 60px;max-height: 60px">
|
天津北玻玻璃工业技术有限公司（THBB-QR7.1-01）
|
</h1>
|
</el-col>
|
|
</el-row >
|
<el-row style="text-align: left">
|
<el-col :span="2" ></el-col>
|
<el-col :span="8" >地址:天津宝坻区节能环保工业区天兴路西侧宝中道南侧</el-col>
|
<el-col :span="2"></el-col>
|
<el-col :span="5" >电话:022-59280088</el-col>
|
<el-col :span="5" >传真:022-59280066</el-col>
|
</el-row>
|
<hr>
|
<hr class="hr-border">
|
|
<el-row >
|
<el-col :span="24"><h3>玻璃加工单</h3></el-col>
|
|
</el-row>
|
|
<table >
|
<tr>
|
<th class="title-1">客户名称</th>
|
<th colspan="3">{{data.order.customerName}}</th>
|
<th class="title-1">工程名称</th>
|
<th colspan="3">{{data.order.project}}</th>
|
</tr>
|
<tr>
|
<th class="title-1">生产单号</th>
|
<th>{{data.order.orderId}}</th>
|
<th class="title-1">下单日期</th>
|
<th>{{data.order.createTime}}</th>
|
<th class="title-1">订单类型</th>
|
<th>{{data.order.orderType}}</th>
|
<th class="title-1">跟单员</th>
|
<th>{{data.order.creator}}</th>
|
</tr>
|
<tr>
|
<th>磨边</th>
|
<th></th>
|
<th>完工日期</th>
|
<th>{{data.order.deliveryDate}}</th>
|
<th>商标</th>
|
<th>{{data.order.icon}}</th>
|
<th>包装</th>
|
<th>{{data.order.packType}}</th>
|
</tr>
|
|
</table>
|
<table border="1" >
|
<thead>
|
<tr>
|
<th class="title-1">玻璃图号</th>
|
<th>彩釉图号</th>
|
<th>编号</th>
|
<th>规格（宽W*高H）</th>
|
<th>片数</th>
|
<th>面积</th>
|
<th>延米</th>
|
<th>交货日期</th>
|
<th>序号</th>
|
<th>箱架号</th>
|
<th>备注1</th>
|
<th>备注2</th>
|
<th>磨边/备注/加工内容</th>
|
</tr>
|
</thead>
|
<tbody v-for="(item,index) in data.orderProductDetail" :key="index">
|
<tr>
|
<td class="no-change-row">品 种</td>
|
<td colspan="9">{{item.productName}}</td>
|
<td class="no-change-row">产品描述</td>
|
<td colspan="3"></td>
|
</tr>
|
<tr v-for="(item1,index1) in item.productDetail" :key="index1">
|
<td>{{}}</td>
|
<td></td>
|
<td></td>
|
<td>{{item1.width +'*'+item1.height}}</td>
|
<td>{{item1.quantity}}</td>
|
<td>{{item1.grossArea}}</td>
|
<td>{{item1.perimeter}}</td>
|
<td></td>
|
<td>{{item1.orderNumber}}</td>
|
<td></td>
|
<td></td>
|
<td></td>
|
<td></td>
|
</tr>
|
|
<tr>
|
<td colspan="4">小计</td>
|
<td>{{getQuantity(item.productDetail)}}</td>
|
<td>{{getArea(item.productDetail)}}</td>
|
<td>{{getPerimeter(item.productDetail)}}</td>
|
<td colspan="6"></td>
|
</tr>
|
|
|
</tbody>
|
<tfoot>
|
<tr>
|
<td colspan="4">总计</td>
|
<td>{{grossNum.quantity}}</td>
|
<td>{{grossNum.grossArea}}</td>
|
<td>{{grossNum.perimeter}}</td>
|
<td colspan="6"></td>
|
</tr>
|
<tr>
|
<td colspan="13">
|
<!-- v-model=""-->
|
<el-input
|
v-model="data.order.processingNote"
|
:rows="2"
|
type="textarea"
|
placeholder=""
|
readonly
|
autosize
|
resize="none"
|
|
/>
|
</td>
|
</tr>
|
</tfoot>
|
</table>
|
<el-row style="text-align: left ">
|
<el-col :span="4">下单员：</el-col>
|
<el-col :span="4">审核人：</el-col>
|
<el-col :span="4">校对：</el-col>
|
</el-row>
|
<el-row style="text-align: left ">
|
<el-col :span="4">创建时间：</el-col>
|
<el-col :span="4">审核时间：</el-col>
|
<el-col :span="4">打印时间：</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<style scoped>
|
#sheet{
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
}
|
h1,h3{
|
left:0;
|
right:0;
|
top:0;
|
bottom:0;
|
margin:auto;
|
}
|
h1{
|
font-size: 1.5rem;
|
}
|
h3{
|
font-size: 1.2rem;
|
font-weight: bolder;
|
}
|
|
|
table{
|
border-collapse: collapse;
|
border: 1px solid black;
|
width: 100%;
|
}
|
th,.no-change-row {
|
white-space: nowrap;
|
}
|
|
.title-1{
|
width: 76px;
|
}
|
|
.hr-border{
|
height: 2px;
|
width: 100%;
|
background-color: black;
|
color: black;
|
}
|
|
</style>
|
