<script setup>
|
|
|
import request from "@/utils/request"
|
import {ElDatePicker, ElMessage} from "element-plus"
|
import {nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue"
|
import {Search} from "@element-plus/icons-vue"
|
import {useRoute, useRouter} from "vue-router"
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
|
import { useI18n } from 'vue-i18n'
|
import deepClone from "@/utils/deepClone";
|
//语言获取
|
const { t } = useI18n()
|
let router=useRouter()
|
const route = useRoute()
|
let produceList = ref([])
|
let delivery = ref([])
|
let money = ref("")
|
let takeCare = "注意:请妥善保管好我司的玻璃架，如有丢失或损坏，按1500元只赔偿。谢谢配合!"
|
let remark = "备注:本批玻璃为优等合格品，请在卸货时,当面消点验收、如有质量问题在一周内与本公司联系,否则概不负责！"
|
|
let props = defineProps({
|
deliveryId:null
|
})
|
|
const form = ref({
|
})
|
|
|
|
|
const Printing = ()=>{
|
|
// 需要打印的局部区域赋予"print-wrap"的id
|
let el = document.getElementById("pis");
|
let doc = document;
|
let body = doc.body || doc.getElementsByTagName("body")[0];
|
let printId = "print-" + Date.now();
|
|
// 创建无副作用的打印容器(因不确定页面的打印元素有无其它样式)
|
let content = doc.createElement("div");
|
content.id = printId;
|
|
// 样式控制与打印无关的元素隐藏
|
let style = doc.createElement("style");
|
style.innerHTML =
|
"body>#" +
|
printId +
|
"{display:none}@media print{body>:not(#" +
|
printId +
|
"){display:none !important}body>#" +
|
printId +
|
"{display:block;padding-top:1px}}";
|
|
content.innerHTML = el.outerHTML;
|
// console.log("el.outerHTML", el.outerHTML);
|
body.appendChild(style);
|
|
// 与style元素设置的样式相配合
|
// 把打印内容的元素添加到body(作为body的子元素，可用body的子选择器 '>' 控制打印样式)
|
body.appendChild(content);
|
setTimeout(() => {
|
window.print();
|
body.removeChild(content);
|
body.removeChild(style);
|
}, 20);
|
}
|
|
|
onMounted(()=>{
|
|
if(route.query.deliveryID===null || route.query.deliveryID===undefined || route.query.deliveryID===''){
|
return
|
}
|
form.value.deliveryId=route.query.deliveryID
|
|
|
request.post(`/delivery/getSelectDeliveryPrinting`,form.value).then((res) => {
|
if(res.code==200){
|
produceList.value = deepClone(res.data.data)
|
delivery.value=deepClone(res.data.delivery)
|
money.value=deepClone(res.data.money)
|
|
}else{
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
|
|
|
})
|
|
setTimeout(function(){
|
Printing()
|
}, 1000);
|
|
|
|
|
</script>
|
|
<template>
|
|
<div>
|
<el-button @click="Printing" style="margin-top: -5px" id="searchButton" type="primary" >打印</el-button>
|
|
<div id="pis" style="width: 100%;height: 100%">
|
<div style="font-size: 30px;text-align: center;font-weight: bold;">常州市吉利玻璃有限公司</div>
|
<el-row :gutter="20">
|
<el-col :span="7"><div></div></el-col>
|
<el-col :span="10"><div style="font-size: 25px;text-align: center;font-weight: bold;">销售发货单</div></el-col>
|
<el-col :span="7">
|
<div style="display: flex;margin-top: 10px;">
|
<div style="font-weight: bold;font-size: 15px">发货单号：</div>
|
<div style="font-weight: bold;font-size: 15px">{{delivery.deliveryId}}</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="border: 1px solid #d3dce6;border-collapse: collapse;width: 100%;height: 100%;">
|
<table id="table1" style="border: 1px solid #d3dce6;border-collapse: collapse;width: 100%;height: 100%;">
|
<tr>
|
<th style="text-align: left;border:none;" colspan="3">客户名称：<span>{{delivery.customerName}}</span></th>
|
<th style="text-align: left;border:none;" colspan="3">项目名称：<span>{{delivery.project}}</span></th>
|
<th style="text-align: left;border:none;" colspan="2">联系人：<span>{{delivery.contacts}}</span></th>
|
|
</tr>
|
<tr>
|
<th style="text-align: left;border:none;" colspan="6">送货地址：<span>{{delivery.deliveryAddress}}</span></th>
|
<th style="text-align: left;border:none;" colspan="2">联系电话：<span>{{delivery.contactNumber}}</span></th>
|
|
</tr>
|
<tr>
|
<th style="width: 6%;">序号</th>
|
<th style="width: 20%;">楼层编号</th>
|
<th style="width: 20%;">宽(弧度)*高</th>
|
<th style="width: 10%;">数量</th>
|
<th style="width: 10%;">面积</th>
|
<th style="width: 10%;">单价</th>
|
<th style="width: 12%;">金额</th>
|
<th style="width: 12%;">加工要求</th>
|
</tr>
|
|
<template v-for="(item, index) in produceList" :key="index" >
|
<tr>
|
<td style="font-size: 15px;font-weight: bold;" colspan="3">产品名称:<span>{{item.DeliveryDetail.orderDetail.productName}}</span></td>
|
<td style="font-size: 15px;font-weight: bold;" colspan="3">对方单号:</td>
|
<td style="font-size: 15px;font-weight: bold;" colspan="2">订单编号:<span>{{item.DeliveryDetail.orderDetail.orderId}}</span></td>
|
</tr>
|
|
<tr class="day-in" v-for="(items, index1) in item.DeliveryDetailList" :key="index1">
|
<td>{{items.order_number}}</td>
|
<td>{{items.buildingNumber}}</td>
|
<td style="font-size: 15px;font-weight: bold;">{{items.width}}x{{items.height}}</td>
|
<td>{{items.quantity}}</td>
|
<td>{{items.area}}</td>
|
<td>{{items.price}}</td>
|
<td>{{items.money}}</td>
|
<td>{{items.processingNote}}</td>
|
</tr>
|
<tr class="day-in" >
|
<td style="font-size: 15px;font-weight: bold;" colspan="3">小计:</td>
|
<td>{{item.DeliveryDetail.quantity}}</td>
|
<td>{{item.DeliveryDetail.area}}</td>
|
<td></td>
|
<td>{{item.DeliveryDetail.money}}</td>
|
<td></td>
|
</tr>
|
|
</template>
|
<tr class="day-in">
|
<td style="font-size: 15px;font-weight: bold;" colspan="3">合计:</td>
|
<td>{{delivery.quantity}}</td>
|
<td>{{delivery.area}}</td>
|
<td></td>
|
<td>{{delivery.money}}</td>
|
<td></td>
|
</tr>
|
<tr class="day-in">
|
<td style="text-align: left;border-width: 0 1px 0 0; border-style: solid; border-color: #d3dce6" colspan="3">
|
<div style="display: flex;font-size: 10px;">
|
<div>加工费用</div>
|
<div style="margin-left: 20%">单价</div>
|
<div style="margin-left: 20%">数量</div>
|
<div style="margin-left: 20%">金额</div>
|
</div>
|
|
</td>
|
<td style="text-align: left;border:none;font-size: 15px;font-weight: bold;" colspan="5">总金额: {{delivery.money}}</td>
|
</tr>
|
<tr class="day-in">
|
<td style="text-align: left;border-width: 0 1px 0 0; border-style: solid; border-color: #d3dce6;" colspan="3"></td>
|
<td style="text-align: left;border:none;font-size: 15px;font-weight: bold;" colspan="5">大写金额: {{money}}</td>
|
</tr>
|
</table>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="3"><div class="bottom">制单员：<span style="font-size: 10px">{{delivery.creator}}</span></div></el-col>
|
<el-col :span="5"><div class="bottom">制单日期：<span style="font-size: 10px">{{delivery.createTime}}</span></div></el-col>
|
<el-col :span="4"><div class="bottom">发货员：</div></el-col>
|
<el-col :span="4"><div class="bottom">司机：</div></el-col>
|
<el-col :span="4"><div class="bottom">客户签字：</div></el-col>
|
<el-col :span="4"><div class="bottom">签收日期：</div></el-col>
|
|
</el-row>
|
<el-row :gutter="20" style="margin-top: 20px;">
|
<el-col :span="3"><div class="bottom">架子 只</div></el-col>
|
<el-col :span="21"><div class="bottom">{{takeCare}}</div></el-col>
|
</el-row>
|
<el-row :gutter="20" style="margin-top: 20px;">
|
<el-col :span="24"><div class="bottom">{{remark}}</div></el-col>
|
</el-row>
|
|
|
|
</div>
|
</div>
|
|
</template>
|
|
<style>
|
@media print{
|
@page {
|
mso-header:none;
|
margin: 10mm 16mm;
|
margin-bottom: 8mm;
|
margin-top:8mm;
|
|
}
|
/*#fen {page-break-after: always;}*/
|
}
|
#table1 tr{
|
height: 30px;
|
}
|
#table1 th{
|
height: 30px;
|
border: 1px solid #d3dce6;
|
border-collapse: collapse;
|
font-size: 15px;
|
}
|
.day-in td{
|
text-align: center;
|
}
|
#table1 td{
|
border: 1px solid #d3dce6;
|
border-collapse: collapse;
|
}
|
#deliveryPrinting .el-dialog__header{
|
visibility:hidden
|
}
|
|
.el-overlay-dialog{
|
overflow-y: scroll;
|
}
|
/*::-webkit-scrollbar {
|
display: none;
|
}*/
|
.bottom{
|
font-size: 12px;
|
|
}
|
|
</style>
|
