From a660db06773007b1be690e0674829c00a57aeb7b Mon Sep 17 00:00:00 2001
From: 廖井涛 <2265517004@qq.com>
Date: 星期三, 24 十二月 2025 16:21:23 +0800
Subject: [PATCH] 订单首页流程卡新增楼层编号显示
---
north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue | 298 +++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 185 insertions(+), 113 deletions(-)
diff --git a/north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue b/north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue
index 170d531..41ad90d 100644
--- a/north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue
+++ b/north-glass-erp/northglass-erp/src/components/mm/PrintPackingListLuoyang.vue
@@ -23,6 +23,9 @@
const name1=ref("admin")
const name2=ref("admin")
+const printStyle = ref(null);
+const title = ref({})
+
const data = ref({
@@ -31,22 +34,86 @@
let props = defineProps({
printList: null,
- companyVal: null
+ companyVal: null,
+ printPage: 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:"LUOYANGNORTHGLASSTECHNOLOGYCO.,LTD.",
+ companyInfo:"LUOYANG NORTH GLASS TECHNOLOGY CO.,LTD.",
address:'娲涢槼鍥藉楂樻柊鎶�鏈紑鍙戝尯寮犲簞',
phone:'0379-64312861.64331830',
url:'http://www.northglass.com',
@@ -82,43 +149,61 @@
const orderDetailList = ref([])
const customer = ref({})
const selectPrint =async () => {
- request.post(`/finishedGoodsInventory/getSelectPrints`, data.value).then((res) => {
+ const page1 = props.printPage==='storageRecordPint'?`/finishedGoodsInventory/getSelectPrints`:'/finishedGoodsInventory/getInventoryPrints'
+ const value = props.printPage==='storageRecordPint'?data.value:data.value.printList
+ request.post(page1, 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
-
- produceList.value[0].detailList.forEach(order => {
- if(orderDetailList.value[index]===undefined){
- orderDetailList.value[index]=[]
- }
- height+=50
- //鍒ゆ柇楂樺害鏄惁瓒呰繃350锛屽垯鎹㈤〉
- if(height>=500){
- height=0
+ for(let i=0;i<produceList.value.length;i++){
+ //鎹骇鍝佸氨鎹㈤〉
+ if(i>0){
index+=1
- orderDetailList.value[index]=[]
}
+ orderDetailList.value[index]=[]
orderDetailList.value[index].push({
- type:'product',
- productName:order.product_name
+ type:'customer',
+ customer:produceList.value[i].detail[0]
})
-
-
- order.detailList.forEach(item => {
- height+=30
+ 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:'size',
- size:item
+ 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,
@@ -136,8 +221,8 @@
type:'sum',
sum:sum
})
- })
+ })
} else {
ElMessage.warning(res.msg)
router.push("/login")
@@ -149,57 +234,63 @@
<template>
<div >
- <div :class="'div_'+n " style="width: 46%;position: relative;" v-for="n in 2" >
- <table v-for="page in orderDetailList" :key="page" style="width: 100%">
- <thead>
+ <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="1" style="text-align: center;font-weight: bolder;">
- <div style="width: 60px;height: 60px">
- <img id="img-pic" style="width:100%;height: 100%" src="@/assets/northGlass.ico" alt="">
- </div>
- </td>
- <td colspan="4" style="font-weight: bolder">
- <div style="font-size: 15px;font-weight: bold;line-height: 15px;">
- <p
- style="font-size: 15px;
+ <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>
+ >{{companyAddress.company}}</p>
+ <span style="font-size: 8px;"> {{companyAddress.companyInfo}}</span>
+ </div>
</div>
+
</td>
+
</tr>
<tr>
- <td colspan="5" style="text-align: center;">
+ <td colspan="5" style="text-align: center;font-size: 10px">
<div>(瑁呯鍗�)</div>
</td>
</tr>
- <tr style="width: 100%;font-size: 12px" >
+ <tr style="width: 100%;font-size: 9px" >
<td colspan="5">
<div style="display:flex;">
- <div style="width: 100%"><span style="font-weight: bold;">瀹㈡埛鍚嶇О</span>锛�
- <input class="contactNumber" style="width: 60%;font-size: 12px" type="text"
- v-model="customer.customer_name" />
+ <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%"><span style="font-weight: bold">宸ョ▼鍚嶇О</span>锛歿{customer.project}}</div>
+ <div style="width: 100%;font-size: 10px;display:flex;">
+ <span style="font-weight: bold">宸ョ▼鍚嶇О</span>锛�<div style="width: 75%;">{{page[0].customer.project}}({{page[0].customer.batch}})</div>
+ </div>
</div>
<div style="display:flex;">
- <div style="width: 50%"><span style="font-weight: bold">璁㈠崟鍙�</span>锛歿{customer.order_id}}</div>
- <div style="width: 50%"><span style="font-weight: bold">瑁呯鍗曞彿</span>锛歿{customer.remarks}}</div>
+ <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%"><span style="font-weight: bold">鍖呰鏃ユ湡</span>锛歿{customer.reporting_work_time}}</div>
- <div style="width: 50%"><span style="font-weight: bold">鏈灦鏁伴噺</span>锛歿{customer.quantity}}</div>
+ <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%"><span style="font-weight: bold">鍔犲伐鐝粍</span>锛歿{customer.teams_groups_name}}</div>
- <div style="width: 50%"><span style="font-weight: bold">鍖呰鐝粍</span>锛歿{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_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%"><span style="font-weight: bold">璐ㄩ噺妫�楠�</span>锛氬垬鍖栬強</div>
- <div style="width: 50%"><span style="font-weight: bold">鎴愬搧鍙戣揣</span>锛�</div>
+ <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>
@@ -219,9 +310,9 @@
<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: 13px">鍔犲伐鍝佺:</td>
+ <td colspan="1" style="font-weight: bold;font-size: 11px">鍔犲伐鍝佺:</td>
<td colspan="4">
- <textarea style="resize: none;width: 100%;height: 100px;border: 0" class="textarea" type="textarea" v-model="row.productName" /></td>
+ <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>
@@ -231,10 +322,37 @@
<td>{{ row.size.area }}</td>
</tr>
- <tr id="footsum" v-else style="border: 0;font-size: 10px">
+
+
+ </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>鏈〉鏁伴噺</div>
<div>{{row.sum.quantity}}</div>
<div>闈㈢Н</div>
<div>{{row.sum.area}}(m虏)</div>
@@ -243,30 +361,11 @@
</div>
</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>
</div>
+ </div>
+
</div>
</template>
@@ -283,8 +382,12 @@
box-shadow: none;
font-size: 15px;
}
+.div_1{
+ width: 38%;
+}
.div_2{
- margin-left: 6%;
+ width: 40%;
+ margin-left: 15%;
}
.element-to-break-after {
width: 8%;
@@ -303,49 +406,18 @@
display: flex;
flex-wrap: wrap
}
-
-table{
+.pages{
width: 100%;
page-break-after: always;
}
-
-@media print {
- @page {
- size: auto; /* auto is the initial value */
- margin: 4mm 5mm 0mm 5mm /* this affects the margin in the printer settings */
-
- }
- #footsum{
- position: fixed;
- bottom: 2cm;
- width: 100%; /* 鎴栬�呰缃垚鍏蜂綋鐨勫搴� */
- }
- #sticky-footer {
- position: fixed;
- bottom: 1cm;
- width: 100%; /* 鎴栬�呰缃垚鍏蜂綋鐨勫搴� */
- }
-/* thead{
- display: table-header-group;
- page-break-inside: avoid;
- }
- table {
- page-break-inside: auto;
- }
- tr {
- page-break-inside: avoid;
- }
-
-
- tfoot {
- display: table-footer-group;
- page-break-inside: avoid;
- }*/
-
+table{
+ width: 100%;
}
+
+
.textarea{
--el-border-color: rgba(255,255,255,0.0);
--el-input-focus-border-color: rgba(255,255,255,0.0);
--
Gitblit v1.8.0