Compare commits

...

2 Commits

Author SHA1 Message Date
砂糖
0e808964c9 Merge branch '0.8.X' of http://49.232.154.205:10100/DeXun/klp-oa into 0.8.X 2026-03-24 14:52:50 +08:00
砂糖
062bcd0b71 feat(标签打印): 添加分条成品标签类型及打印组件
新增分条成品标签类型,支持在特定仓库中自动识别并打印分条成品标签。添加SplitTag.vue组件用于分条成品标签的渲染,并更新相关逻辑以支持新的标签类型。
2026-03-24 14:52:47 +08:00
3 changed files with 310 additions and 4 deletions

View File

@@ -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 == '冷硬卷') {

View 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>

View File

@@ -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 == '热轧卷板') {