Compare commits
2 Commits
876bb48b1d
...
0e808964c9
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0e808964c9 | ||
|
|
062bcd0b71 |
@@ -4,7 +4,8 @@ const ECoilPrintType = {
|
||||
'镀锌成品': '4',
|
||||
'镀铬成品': 'ge',
|
||||
'镀锌原料': '5',
|
||||
'脱脂原料': '6'
|
||||
'脱脂原料': '6',
|
||||
'分条成品': 'split',
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -26,6 +27,11 @@ export const getCoilTagPrintType = (coil) => {
|
||||
else if (itemType == 'raw_material' && (warehouseId == '1988150545175736322')) {
|
||||
type = ECoilPrintType['脱脂原料'];
|
||||
}
|
||||
// 分条成品库
|
||||
else if (itemType == 'product' && (warehouseId == '1988150210872930306' || warehouseId == '1988150800092950529' || warehouseId == '1988150380649967617' || warehouseId == '1988151027466170370')) {
|
||||
type = ECoilPrintType['分条成品'];
|
||||
}
|
||||
// 其他卷使用成品标签
|
||||
else if (itemType == 'raw_material') {
|
||||
type = ECoilPrintType['原料标签'];
|
||||
} else if (itemType == 'product' && itemName == '冷硬卷') {
|
||||
|
||||
287
klp-ui/src/views/wms/coil/panels/LabelRender/SplitTag.vue
Normal file
287
klp-ui/src/views/wms/coil/panels/LabelRender/SplitTag.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="label-container" :style="{ '--print-scale': printScale }">
|
||||
<div class="material-label-grid">
|
||||
<!-- 公司名称行 -->
|
||||
<div class="grid-cell company-cell">嘉祥科伦普重工有限公司</div>
|
||||
|
||||
<!-- 第一行:冷卷号、热卷号 -->
|
||||
<div class="grid-cell label-cell">原料号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.enterCoilNo|| '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">钢卷号</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.currentCoilNo || '' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行:规格、钢种 -->
|
||||
<div class="grid-cell label-cell">规格</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.specification || '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">净重</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.netWeight || '' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行:净重、下工序 -->
|
||||
<div class="grid-cell label-cell">材质</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.material || '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">厂家</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.manufacturer }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 第四行:包装要求、切边要求 -->
|
||||
<div class="grid-cell label-cell">生产班组</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ content.team || '' }}</div>
|
||||
</div>
|
||||
<div class="grid-cell label-cell">生产日期</div>
|
||||
<div class="grid-cell value-cell">
|
||||
<div class="nob">{{ formatDate(content.createTime) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from '@/components/QRCode/index.vue';
|
||||
|
||||
export default {
|
||||
name: 'ZincRawTag',
|
||||
components: {
|
||||
QRCode
|
||||
},
|
||||
props: {
|
||||
content: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
currentCoilNo: '',
|
||||
entryCoilNo: '',
|
||||
specification: '',
|
||||
material: '',
|
||||
netWeight: '',
|
||||
nextProcess: '',
|
||||
packagingRequirements: '',
|
||||
trimmingRequirements: '',
|
||||
team: '',
|
||||
createTime: '',
|
||||
qrcodeRecordId: '',
|
||||
})
|
||||
},
|
||||
paperWidthMm: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
paperHeightMm: {
|
||||
type: Number,
|
||||
default: 80
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
printScale: 1,
|
||||
printMediaQuery: null
|
||||
}
|
||||
},
|
||||
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 '';
|
||||
const date = new Date(dateStr);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}.${month}.${day}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.label-container {
|
||||
width: 45em;
|
||||
height: 25em;
|
||||
padding: 16px;
|
||||
font-family: "SimSun", serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 核心Grid布局 */
|
||||
.material-label-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
|
||||
grid-auto-rows: 1fr; /* 行高自适应 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
border: 1px solid #333;
|
||||
padding: 4px;
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 公司名称单元格 */
|
||||
.company-cell {
|
||||
grid-column: span 4; /* 跨4列 */
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
/* background-color: #f5f5f5; */
|
||||
}
|
||||
|
||||
/* 标签单元格(左) */
|
||||
.label-cell {
|
||||
/* background-color: #f5f5f5; */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 值单元格 */
|
||||
.value-cell {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.date-cell {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* 二维码单元格(跨2列+2行) */
|
||||
.qrcode-cell {
|
||||
grid-row: span 2; /* 跨2行 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode-container {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border: 1px dashed #999; /* 占位虚线 */
|
||||
}
|
||||
|
||||
/* 内容可编辑区域 */
|
||||
.nob {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
font-family: '黑体', serif;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@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>
|
||||
@@ -44,6 +44,12 @@
|
||||
:paperWidthMm="180"
|
||||
:paperHeightMm="100"
|
||||
/>
|
||||
<SplitTag
|
||||
v-if="tagType === 'split'"
|
||||
:content="content"
|
||||
:paperWidthMm="180"
|
||||
:paperHeightMm="100"
|
||||
/>
|
||||
</div>
|
||||
<div class="action-buttons" v-if="!hideActions">
|
||||
<el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
|
||||
@@ -65,7 +71,7 @@ import WhereTag from './WhereTag.vue';
|
||||
import ZincRawTag from './ZincRawTag.vue';
|
||||
import DuGeTag from './DuGeTag.vue';
|
||||
import TuoZhiTag from './TuoZhiTag.vue';
|
||||
|
||||
import SplitTag from './SplitTag.vue';
|
||||
|
||||
export default {
|
||||
name: 'LabelRender',
|
||||
@@ -77,6 +83,7 @@ export default {
|
||||
ZincRawTag,
|
||||
DuGeTag,
|
||||
TuoZhiTag,
|
||||
SplitTag,
|
||||
// SampleTagPreview,
|
||||
// ForgeTagPreview,
|
||||
// SaltSprayTagPreview,
|
||||
@@ -113,6 +120,10 @@ export default {
|
||||
width: 180,
|
||||
height: 100,
|
||||
},
|
||||
'split': {
|
||||
width: 180,
|
||||
height: 100,
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -151,8 +162,10 @@ export default {
|
||||
this.labelType = '6';
|
||||
} else if (itemType == 'raw_material') {
|
||||
this.labelType = '2';
|
||||
} else if (itemType == 'product') {
|
||||
this.labelType = 'where';
|
||||
}
|
||||
// 分条成品
|
||||
else if (itemType == 'product' && (warehouseId == '1988150210872930306' || warehouseId == '1988150800092950529' || warehouseId == '1988150380649967617' || warehouseId == '1988151027466170370')) {
|
||||
this.labelType = 'split';
|
||||
} else if (itemType == 'product' && itemName == '冷硬卷') {
|
||||
this.labelType = '3';
|
||||
} else if (itemType == 'product' && itemName == '热轧卷板') {
|
||||
|
||||
Reference in New Issue
Block a user