<script setup>
|
import request from "@/utils/request"
|
import {ElDatePicker, ElMessage} from "element-plus"
|
import {nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, watch} from "vue"
|
import {Search} from "@element-plus/icons-vue"
|
import {useRouter} from 'vue-router'
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
import {useI18n} from 'vue-i18n'
|
import deepClone from "@/utils/deepClone";
|
import QRCode from "qrcode";
|
import companyInfo from "@/stores/sd/companyInfo";
|
import userInfo from "@/stores/userInfo"
|
import {add,addAuto} from '@/utils/decimal';
|
//语言获取
|
const company = companyInfo()
|
const {t} = useI18n()
|
let router = useRouter()
|
let produceList = ref([])
|
let count = ref([{id:1},{id:2}])
|
let list = ref()
|
const details = ref([])
|
const user=userInfo()
|
const name1=ref("admin")
|
const name2=ref("admin")
|
|
const printStyle = ref(null);
|
|
|
|
const data = ref({
|
printList: []
|
})
|
|
let props = defineProps({
|
printList: null,
|
companyVal: null
|
})
|
|
const {currentRoute} = useRouter()
|
const route = currentRoute.value
|
|
|
data.value.printList = JSON.parse(props.printList)
|
|
onMounted(() => {
|
clearPrintStyles()
|
addPrintStyles()
|
selectPrint()
|
})
|
onUnmounted(() => {
|
clearPrintStyles()
|
})
|
|
const clearPrintStyles = () => {
|
// 2. 清除所有样式表中包含@media print的规则（适用于全局样式）
|
Array.from(document.styleSheets).forEach(styleSheet => {
|
try {
|
// 遍历样式规则
|
const rules = styleSheet.cssRules || styleSheet.rules;
|
if (!rules) return;
|
|
// 从后往前删除，避免索引错乱
|
for (let i = rules.length - 1; i >= 0; i--) {
|
const rule = rules[i];
|
// 检查是否为打印媒体查询规则
|
if (rule.media && rule.media.mediaText.includes('print')) {
|
styleSheet.deleteRule(i);
|
}
|
}
|
} catch (e) {
|
// 跨域样式表可能无法访问，忽略错误
|
console.log('无法清理跨域样式表:', e);
|
}
|
});
|
|
|
};
|
|
|
const addPrintStyles = () => {
|
printStyle.value = document.createElement('style');
|
printStyle.value.id = 'dynamic-print-style';
|
printStyle.value.textContent = `
|
@media print {
|
@page {
|
margin: 7.5mm 8mm 3.5mm 8mm ;
|
|
}
|
|
.pages{
|
height: 94vh;
|
}
|
#footsum{
|
position: absolute;
|
bottom: 0cm;
|
width: 100%; /* 或者设置成具体的宽度 */
|
}
|
#sticky-footer {
|
position: fixed;
|
bottom: 0.5cm;
|
width: 100%; /* 或者设置成具体的宽度 */
|
}
|
|
}
|
`;
|
document.head.appendChild(printStyle.value);
|
|
};
|
|
|
const companyList = ref([{
|
company:'洛阳北方玻璃技术股份有限公司',
|
companyInfo:"LUOYANG NORTH GLASS TECHNOLOGY CO.,LTD.",
|
address:'洛阳国家高新技术开发区张庄',
|
phone:'0379-64312861.64331830',
|
url:'http://www.northglass.com',
|
fax:'0379-64332066',
|
email:"luoyang@northglass.com",
|
postcode:'471003'
|
|
},
|
{
|
company:'上海北玻玻璃技术工业有限公司',
|
companyInfo:"SHANGHAI NORTH GLASS TECHNOLOGY&INDUSTRY CO.,LTD.",
|
address:'上海市松江区小昆山镇光华路328号',
|
phone:'(021)57858640',
|
url:'http://www.northglass.com',
|
fax:'(021)57858600',
|
email:"sngpzb@163.com",
|
postcode:'201614'
|
|
}
|
])
|
let companyAddress = ref(companyList.value[0])
|
watch(props, (newVal, oldVal) => {
|
companyAddress.value = companyList.value[props.companyVal-1]
|
})
|
|
|
onUpdated(() => {
|
const element = document.getElementById('my-paragraph');
|
if (element) {
|
//console.log(element.style.height)
|
}
|
});
|
const orderDetailList = ref([])
|
const customer = ref({})
|
const selectPrint =async () => {
|
request.post(`/finishedGoodsInventory/getSelectPrints`, data.value).then((res) => {
|
if (res.code == 200) {
|
produceList.value = deepClone(res.data.data)
|
customer.value = produceList.value[0].detail[0]
|
let height = 0
|
let index = 0
|
for(let i=0;i<produceList.value.length;i++){
|
//换产品就换页
|
if(i>0){
|
index+=1
|
}
|
orderDetailList.value[index]=[]
|
orderDetailList.value[index].push({
|
type:'customer',
|
customer:produceList.value[i].detail[0]
|
})
|
produceList.value[i].detailList.forEach(order => {
|
height+=50
|
//判断高度是否超过350，则换页
|
if(height>=500){
|
height=0
|
index+=1
|
orderDetailList.value[index]=[]
|
|
orderDetailList.value[index].push({
|
type:'customer',
|
customer:produceList.value[i].detail[0]
|
})
|
}
|
orderDetailList.value[index].push({
|
type:'product',
|
productName:order.product_name
|
})
|
|
|
order.detailList.forEach(item => {
|
height+=30
|
if(height>=500){
|
height=0
|
index+=1
|
orderDetailList.value[index]=[]
|
orderDetailList.value[index].push({
|
type:'customer',
|
customer:produceList.value[i].detail[0]
|
})
|
}
|
orderDetailList.value[index].push({
|
type:'size',
|
size:item
|
})
|
})
|
})
|
}
|
orderDetailList.value.forEach((page,index)=>{
|
let sum = {
|
quantity:0,
|
area:0,
|
weight:0
|
}
|
page.forEach((row)=>{
|
if(row.type==='size'){
|
sum.quantity +=row.size.quantity
|
sum.area =addAuto(row.size.area,sum.area,2)
|
sum.weight =addAuto(row.size.weight,sum.weight,2)
|
}
|
})
|
page.push({
|
type:'sum',
|
sum:sum
|
})
|
})
|
} else {
|
ElMessage.warning(res.msg)
|
router.push("/login")
|
}
|
})
|
}
|
|
</script>
|
|
<template>
|
<div >
|
<div :class="'div_'+n " v-for="n in 2" >
|
<div class="pages" v-for="page in orderDetailList" :key="page" style="width: 100%;position: relative;" >
|
<table >
|
<thead style="width: 100%">
|
<tr>
|
<td colspan="5" >
|
<div style="text-align: center;font-weight: bolder;display: flex">
|
<div style="width: 35px;height: 35px">
|
<img id="img-pic" style="width:100%;height: 100%" src="@/assets/northGlass.ico" alt="">
|
</div>
|
|
<div style="font-size: 15px;font-weight: bold;line-height: 15px;width: 300px">
|
<p
|
style="font-size: 15px;
|
font-weight: bold;
|
line-height: 15px;"
|
>{{companyAddress.company}}</p>
|
<span style="font-size: 8px;"> {{companyAddress.companyInfo}}</span>
|
</div>
|
</div>
|
|
</td>
|
|
</tr>
|
<tr>
|
<td colspan="5" style="text-align: center;font-size: 10px">
|
<div>(装箱单)</div>
|
</td>
|
</tr>
|
<tr style="width: 100%;font-size: 9px" >
|
<td colspan="5">
|
<div style="display:flex;">
|
<div style="width: 100%"><span style="font-weight: bold;font-size: 10px">客户名称</span>：
|
<input class="contactNumber" style="width: 80%;font-size: 10px" type="text"
|
v-model="page[0].customer.customer_name" />
|
</div>
|
</div>
|
<div style="display:flex;">
|
<div style="width: 100%;font-size: 10px"><span style="font-weight: bold">工程名称</span>：{{page[0].customer.project}}({{page[0].customer.batch}})</div>
|
</div>
|
<div style="display:flex;">
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">订单号</span>：{{page[0].customer.order_id}}</div>
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">装箱单号</span>：{{page[0].customer.remarks}}</div>
|
</div>
|
<div style="display:flex;">
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">包装日期</span>：{{page[0].customer.reporting_work_time}}</div>
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">本架数量</span>：{{page[0].customer.quantity}}</div>
|
</div>
|
<div style="display:flex;">
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold;font-size: 10px">加工班组</span>：{{page[0].customer.teams_groups_name2}}</div>
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold;font-size: 10px">包装班组</span>：{{page[0].customer.teams_groups_name}}</div>
|
</div>
|
<div style="display:flex;">
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">质量检验</span>：刘化菊</div>
|
<div style="width: 50%;font-size: 10px"><span style="font-weight: bold">成品发货</span>：郑珊珊</div>
|
</div>
|
|
|
</td>
|
</tr>
|
<tr style="width: 100%;font-size: 12px">
|
<td style="width: 20%;">编号</td>
|
<td style="width: 20%;">宽度</td>
|
<td style="width: 20%;">高度</td>
|
<td style="width: 20%;">片数</td>
|
<td style="width: 20%;">面积(m²)</td>
|
</tr>
|
<tr style="width: 100%;">
|
<td colspan="5" ><hr></td>
|
</tr>
|
</thead>
|
<tbody>
|
<template v-for="(row,index) in page" :key="row">
|
<tr v-if="row.type==='product'" style="width: 100%;height: 100px" >
|
<td colspan="1" style="font-weight: bold;font-size: 11px">加工品种:</td>
|
<td colspan="4">
|
<textarea style="resize: none;width: 90%;height: 100px;border: 0;word-break:break-all;" class="textarea" type="textarea" v-model="row.productName" /></td>
|
</tr>
|
<tr v-else-if="row.type==='size'" style="width: 100%;height: 30px">
|
<td style="font-size: 10px">{{ row.size.building_number }}</td>
|
<td style="font-weight: bold">{{ row.size.width }}</td>
|
<td style="font-weight: bold">{{ row.size.height }}</td>
|
<td style="font-weight: bold">{{ row.size.quantity }}</td>
|
<td>{{ row.size.area }}</td>
|
</tr>
|
|
|
|
</template>
|
</tbody>
|
<tfoot id="sticky-footer">
|
<tr style="border: 0;font-size: 8px">
|
<td colspan="5" style="border: 0;">
|
<div style="display:flex;">
|
<div>地址:{{companyAddress.address}}</div>
|
<div>电话:{{companyAddress.phone}}</div>
|
</div>
|
<div style="display:flex;">
|
<div>{{companyAddress.url}}</div>
|
<div>传真:{{companyAddress.fax}}</div>
|
</div>
|
<div style="display:flex;">
|
<div>E-mail:{{companyAddress.email}}</div>
|
<div>邮编：{{companyAddress.postcode}}</div>
|
</div>
|
|
</td>
|
</tr>
|
</tfoot>
|
</table>
|
|
<table id="footsum">
|
<template v-for="(row,index) in page" :key="index">
|
<tr v-if="row.type==='sum'" style="border: 0;font-size: 10px">
|
<td colspan="5" style="border: 0;">
|
<div style="display:flex;">
|
<div>本页数量</div>
|
<div>{{row.sum.quantity}}</div>
|
<div>面积</div>
|
<div>{{row.sum.area}}(m²)</div>
|
<div>重量</div>
|
<div>{{row.sum.weight}}(kg)</div>
|
</div>
|
</td>
|
</tr>
|
</template>
|
</table>
|
</div>
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
* {
|
margin: 0;
|
padding: 0;
|
}
|
.contactNumber{
|
width: 40%;
|
height:20px;
|
border: none;
|
box-shadow: none;
|
font-size: 15px;
|
}
|
.div_1{
|
width: 38%;
|
}
|
.div_2{
|
width: 40%;
|
margin-left: 15%;
|
}
|
.element-to-break-after {
|
width: 8%;
|
}
|
.element-to-breakr{
|
page-break-after: always;
|
}
|
#contentTable{
|
width: 100%;
|
height: 100%;
|
}
|
|
#record{
|
font-size: 15px;
|
text-align: left;
|
display: flex;
|
flex-wrap: wrap
|
}
|
.pages{
|
width: 100%;
|
page-break-after: always;
|
}
|
table{
|
width: 100%;
|
}
|
|
|
|
|
|
.textarea{
|
--el-border-color: rgba(255,255,255,0.0);
|
--el-input-focus-border-color: rgba(255,255,255,0.0);
|
--el-input-focus-border-width: 0px;
|
--el-input-hover-border-color: rgba(255,255,255,0.0);
|
--el-input-hover-border-width: 0px;
|
}
|
|
</style>
|
