DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 移除多个标签组件的手动打印缩放逻辑与打印样式

Browse Source 
移除了11个物料标签组件中的打印监听事件、动态缩放计算逻辑以及单独的打印样式代码，改为依赖浏览器原生打印适配能力，简化组件代码结构。
This commit is contained in:
砂糖
2026-07-01 15:57:33 +08:00
parent cddc3309ad
commit 9bed76e3dc
11 changed files with 11 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
klp-ui/src/views/wms/coil/panels/LabelRender/DuGeTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="label-box">
<!-- 顶部公司信息 -->
<div class="company-header">
@@ -201,111 +201,13 @@ export default {
data() {
return {
logo,
printScale: 1,
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
if (mq.matches) {
// 进入打印模式
this.calculatePrintScale();
} else {
// 退出打印模式
this.resetPrintScale();
}
},
handleBeforePrint() {
// 延迟计算，确保DOM已更新
setTimeout(() => {
this.calculatePrintScale();
}, 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
// 纸张尺寸：180mm x 100mm
// 在打印时，使用 mm 单位更准确
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
// 为了更准确，我们直接使用 mm 转 px 的通用计算
const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 180;
const paperHeightMm = this.paperHeightMm || 100;
const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸（在屏幕上的尺寸）
const rect = container.getBoundingClientRect();
let contentWidth = rect.width;
let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight;
}
// 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
console.log('打印缩放计算:', {
contentSize: { width: contentWidth, height: contentHeight },
paperSize: { width: paperWidthPx, height: paperHeightPx },
scale: this.printScale
});
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -460,51 +362,4 @@ export default {
text-align: center;
font-size: 1.2em;
}
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
@media print {
@page {
size: 180mm 100mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 隐藏所有其他内容，只显示标签容器 */
body>*:not(.label-container) {
display: none !important;
}
.label-container {
/* 防止分页 - 多重保护 */
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
/* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
/* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 180mm) !important;
max-height: var(--paper-height, 100mm) !important;
overflow: hidden !important;
}
}
</style>

147
klp-ui/src/views/wms/coil/panels/LabelRender/GalvanizedTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="label-box">
<!-- 顶部公司信息 -->
<div class="company-header">
@@ -202,111 +202,13 @@ export default {
data() {
return {
logo,
printScale: 1,
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
if (mq.matches) {
// 进入打印模式
this.calculatePrintScale();
} else {
// 退出打印模式
this.resetPrintScale();
}
},
handleBeforePrint() {
// 延迟计算，确保DOM已更新
setTimeout(() => {
this.calculatePrintScale();
}, 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
// 纸张尺寸：180mm x 100mm
// 在打印时，使用 mm 单位更准确
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
// 为了更准确，我们直接使用 mm 转 px 的通用计算
const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 180;
const paperHeightMm = this.paperHeightMm || 100;
const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸（在屏幕上的尺寸）
const rect = container.getBoundingClientRect();
let contentWidth = rect.width;
let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight;
}
// 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
console.log('打印缩放计算:', {
contentSize: { width: contentWidth, height: contentHeight },
paperSize: { width: paperWidthPx, height: paperHeightPx },
scale: this.printScale
});
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -461,51 +363,4 @@ export default {
text-align: center;
font-size: 1.2em;
}
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
@media print {
@page {
size: 180mm 100mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 隐藏所有其他内容，只显示标签容器 */
body>*:not(.label-container) {
display: none !important;
}
.label-container {
/* 防止分页 - 多重保护 */
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
/* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
/* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 180mm) !important;
max-height: var(--paper-height, 100mm) !important;
overflow: hidden !important;
}
}
</style>

94
klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -96,8 +96,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -111,66 +109,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
},
formatDate(dateStr) {
// 格式化为YYYY.mm.dd
if (!dateStr) return '';
@@ -288,38 +230,4 @@ export default {
font-family: var(--label-font);
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

138
klp-ui/src/views/wms/coil/panels/LabelRender/MaterialTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<table class="material-label-table">
<!-- 调整第一行结构，左侧内容扩大，右侧二维码减小边距 -->
<tr>
@@ -179,7 +179,6 @@ export default {
},
data() {
return {
printScale: 1,
}
},
computed: {
@@ -193,98 +192,10 @@ export default {
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
if (mq.matches) {
// 进入打印模式
this.calculatePrintScale();
} else {
// 退出打印模式
this.resetPrintScale();
}
},
handleBeforePrint() {
// 延迟计算，确保DOM已更新
setTimeout(() => {
this.calculatePrintScale();
}, 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
// 纸张尺寸：180mm x 100mm
const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 100;
const paperHeightMm = this.paperHeightMm || 80;
const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸
const rect = container.getBoundingClientRect();
let contentWidth = rect.width;
let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight;
}
// 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -362,51 +273,4 @@ export default {
overflow-wrap: break-word;
white-space: normal;
}
/* 打印样式 - 强制单页，适配100mm x 80mm纸张，保持原有样式不变 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 隐藏所有其他内容，只显示标签容器 */
body>*:not(.material-label-container) {
display: none !important;
}
.material-label-container {
/* 防止分页 - 多重保护 */
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
/* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
/* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

147
klp-ui/src/views/wms/coil/panels/LabelRender/OuterTagPreview.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="label-box">
<!-- 顶部公司信息 -->
<div class="company-header">
@@ -208,111 +208,13 @@ export default {
data() {
return {
logo,
printScale: 1,
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
if (mq.matches) {
// 进入打印模式
this.calculatePrintScale();
} else {
// 退出打印模式
this.resetPrintScale();
}
},
handleBeforePrint() {
// 延迟计算，确保DOM已更新
setTimeout(() => {
this.calculatePrintScale();
}, 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
// 纸张尺寸：180mm x 100mm
// 在打印时，使用 mm 单位更准确
// 1mm = 3.779527559px (96 DPI) 或 1mm = 3.779527559px (72 DPI)
// 为了更准确，我们直接使用 mm 转 px 的通用计算
const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 180;
const paperHeightMm = this.paperHeightMm || 100;
const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸（在屏幕上的尺寸）
const rect = container.getBoundingClientRect();
let contentWidth = rect.width;
let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight;
}
// 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
console.log('打印缩放计算:', {
contentSize: { width: contentWidth, height: contentHeight },
paperSize: { width: paperWidthPx, height: paperHeightPx },
scale: this.printScale
});
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -467,51 +369,4 @@ export default {
text-align: center;
font-size: 1.2em;
}
/* 打印样式 - 强制单页，适配180mm x 100mm纸张，保持原有样式不变 */
@media print {
@page {
size: 180mm 100mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 隐藏所有其他内容，只显示标签容器 */
body>*:not(.label-container) {
display: none !important;
}
.label-container {
/* 防止分页 - 多重保护 */
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
/* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
/* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 180mm) !important;
max-height: var(--paper-height, 100mm) !important;
overflow: hidden !important;
}
}
</style>

94
klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -96,8 +96,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -111,66 +109,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
},
formatDate(dateStr) {
// 格式化为YYYY.mm.dd
if (!dateStr) return '';
@@ -288,38 +230,4 @@ export default {
font-family: var(--label-font);
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

94
klp-ui/src/views/wms/coil/panels/LabelRender/SplitTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -87,8 +87,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -102,66 +100,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
},
formatDate(dateStr) {
// 格式化为YYYY.mm.dd
if (!dateStr) return '';
@@ -279,38 +221,4 @@ export default {
font-family: var(--label-font);
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

95
klp-ui/src/views/wms/coil/panels/LabelRender/TuiHuoRawTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -100,8 +100,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -115,66 +113,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -274,39 +216,4 @@ export default {
.current-coil-no, .enter-coil-no {
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

95
klp-ui/src/views/wms/coil/panels/LabelRender/TuoZhiTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -100,8 +100,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -115,66 +113,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -274,39 +216,4 @@ export default {
.current-coil-no, .enter-coil-no {
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

138
klp-ui/src/views/wms/coil/panels/LabelRender/WhereTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<table class="material-label-table">
<tr>
<td class="label-cell" style="width: 16.67%; padding: 4px;">卷号</td>
@@ -83,102 +83,13 @@ export default {
},
data() {
return {
printScale: 1,
}
},
mounted() {
// 使用 matchMedia 监听打印状态（更可靠）
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
// 监听打印事件作为备用
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
// 计算初始缩放比例
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
if (mq.matches) {
// 进入打印模式
this.calculatePrintScale();
} else {
// 退出打印模式
this.resetPrintScale();
}
},
handleBeforePrint() {
// 延迟计算，确保DOM已更新
setTimeout(() => {
this.calculatePrintScale();
}, 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
// 纸张尺寸：180mm x 100mm
const dpi = 96; // 标准 DPI
const mmToPx = dpi / 25.4; // 1mm = 3.779527559px
const paperWidthMm = this.paperWidthMm || 100;
const paperHeightMm = this.paperHeightMm || 80;
const marginMm = 2;
const paperWidthPx = paperWidthMm * mmToPx;
const paperHeightPx = paperHeightMm * mmToPx;
const marginPx = marginMm * mmToPx;
// 获取内容实际尺寸
const rect = container.getBoundingClientRect();
let contentWidth = rect.width;
let contentHeight = rect.height;
// 如果尺寸为0或无效，尝试使用 scrollWidth/scrollHeight
if (contentWidth === 0 || contentHeight === 0) {
contentWidth = container.scrollWidth || contentWidth;
contentHeight = container.scrollHeight || contentHeight;
}
// 计算可用空间（减去边距）
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
// 计算缩放比例
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
// 取较小的缩放比例，确保内容完全适配（不超过1，不放大）
this.printScale = Math.min(scaleX, scaleY, 1);
// 设置CSS变量和内联样式
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -252,51 +163,4 @@ export default {
font-family: var(--label-font);
font-size: 1.2em;
}
/* 打印样式 - 强制单页，适配100mm x 80mm纸张，保持原有样式不变 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
padding: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* 隐藏所有其他内容，只显示标签容器 */
body>*:not(.material-label-container) {
display: none !important;
}
.material-label-container {
/* 防止分页 - 多重保护 */
page-break-inside: avoid !important;
break-inside: avoid !important;
page-break-after: avoid !important;
break-after: avoid !important;
page-break-before: avoid !important;
break-before: avoid !important;
orphans: 999 !important;
widows: 999 !important;
/* 应用动态缩放，保持原有样式 */
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
/* 确保缩放后不超出纸张 */
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>

95
klp-ui/src/views/wms/coil/panels/LabelRender/ZincRawTag.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="label-container" :style="{ '--print-scale': printScale }">
<div class="label-container">
<div class="material-label-grid">
<!-- 公司名称行 -->
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
@@ -100,8 +100,6 @@ export default {
},
data() {
return {
printScale: 1,
printMediaQuery: null
}
},
computed: {
@@ -115,66 +113,10 @@ export default {
}
},
mounted() {
this.printMediaQuery = window.matchMedia('print');
this.printMediaQuery.addListener(this.handlePrintMediaChange);
window.addEventListener('beforeprint', this.handleBeforePrint);
window.addEventListener('afterprint', this.handleAfterPrint);
this.$nextTick(() => {
this.calculatePrintScale();
});
},
beforeDestroy() {
if (this.printMediaQuery) {
this.printMediaQuery.removeListener(this.handlePrintMediaChange);
}
window.removeEventListener('beforeprint', this.handleBeforePrint);
window.removeEventListener('afterprint', this.handleAfterPrint);
},
methods: {
handlePrintMediaChange(mq) {
mq.matches ? this.calculatePrintScale() : this.resetPrintScale();
},
handleBeforePrint() {
setTimeout(() => this.calculatePrintScale(), 100);
},
handleAfterPrint() {
this.resetPrintScale();
},
calculatePrintScale() {
this.$nextTick(() => {
const container = this.$el;
if (!container) return;
const dpi = 96;
const mmToPx = dpi / 25.4;
const paperWidthPx = this.paperWidthMm * mmToPx;
const paperHeightPx = this.paperHeightMm * mmToPx;
const marginPx = 2 * mmToPx;
const rect = container.getBoundingClientRect();
const contentWidth = rect.width || container.scrollWidth;
const contentHeight = rect.height || container.scrollHeight;
const availableWidth = paperWidthPx - marginPx * 2;
const availableHeight = paperHeightPx - marginPx * 2;
const scaleX = contentWidth > 0 ? availableWidth / contentWidth : 1;
const scaleY = contentHeight > 0 ? availableHeight / contentHeight : 1;
this.printScale = Math.min(scaleX, scaleY, 1);
container.style.setProperty('--print-scale', this.printScale);
container.style.setProperty('--paper-width', `${this.paperWidthMm}mm`);
container.style.setProperty('--paper-height', `${this.paperHeightMm}mm`);
});
},
resetPrintScale() {
this.printScale = 1;
if (this.$el) {
this.$el.style.setProperty('--print-scale', 1);
this.$el.style.removeProperty('--paper-width');
this.$el.style.removeProperty('--paper-height');
}
}
}
}
</script>
@@ -274,39 +216,4 @@ export default {
.current-coil-no, .enter-coil-no {
font-size: 1em;
}
/* 打印样式 */
@media print {
@page {
size: 100mm 80mm;
margin: 0 !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body>*:not(.label-container) {
display: none !important;
}
.label-container {
page-break-inside: avoid !important;
break-inside: avoid !important;
transform: scale(var(--print-scale, 1)) !important;
transform-origin: top left !important;
max-width: var(--paper-width, 100mm) !important;
max-height: var(--paper-height, 80mm) !important;
overflow: hidden !important;
}
}
</style>