feat(标签打印): 添加分条成品标签类型及打印组件
新增分条成品标签类型,支持在特定仓库中自动识别并打印分条成品标签。添加SplitTag.vue组件用于分条成品标签的渲染,并更新相关逻辑以支持新的标签类型。
This commit is contained in:
@@ -4,7 +4,8 @@ const ECoilPrintType = {
|
|||||||
'镀锌成品': '4',
|
'镀锌成品': '4',
|
||||||
'镀铬成品': 'ge',
|
'镀铬成品': 'ge',
|
||||||
'镀锌原料': '5',
|
'镀锌原料': '5',
|
||||||
'脱脂原料': '6'
|
'脱脂原料': '6',
|
||||||
|
'分条成品': 'split',
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -26,6 +27,11 @@ export const getCoilTagPrintType = (coil) => {
|
|||||||
else if (itemType == 'raw_material' && (warehouseId == '1988150545175736322')) {
|
else if (itemType == 'raw_material' && (warehouseId == '1988150545175736322')) {
|
||||||
type = ECoilPrintType['脱脂原料'];
|
type = ECoilPrintType['脱脂原料'];
|
||||||
}
|
}
|
||||||
|
// 分条成品库
|
||||||
|
else if (itemType == 'product' && (warehouseId == '1988150210872930306' || warehouseId == '1988150800092950529' || warehouseId == '1988150380649967617' || warehouseId == '1988151027466170370')) {
|
||||||
|
type = ECoilPrintType['分条成品'];
|
||||||
|
}
|
||||||
|
// 其他卷使用成品标签
|
||||||
else if (itemType == 'raw_material') {
|
else if (itemType == 'raw_material') {
|
||||||
type = ECoilPrintType['原料标签'];
|
type = ECoilPrintType['原料标签'];
|
||||||
} else if (itemType == 'product' && itemName == '冷硬卷') {
|
} 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"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
|
<SplitTag
|
||||||
|
v-if="tagType === 'split'"
|
||||||
|
:content="content"
|
||||||
|
:paperWidthMm="180"
|
||||||
|
:paperHeightMm="100"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="action-buttons" v-if="!hideActions">
|
<div class="action-buttons" v-if="!hideActions">
|
||||||
<el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
|
<el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
|
||||||
@@ -65,7 +71,7 @@ import WhereTag from './WhereTag.vue';
|
|||||||
import ZincRawTag from './ZincRawTag.vue';
|
import ZincRawTag from './ZincRawTag.vue';
|
||||||
import DuGeTag from './DuGeTag.vue';
|
import DuGeTag from './DuGeTag.vue';
|
||||||
import TuoZhiTag from './TuoZhiTag.vue';
|
import TuoZhiTag from './TuoZhiTag.vue';
|
||||||
|
import SplitTag from './SplitTag.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'LabelRender',
|
name: 'LabelRender',
|
||||||
@@ -77,6 +83,7 @@ export default {
|
|||||||
ZincRawTag,
|
ZincRawTag,
|
||||||
DuGeTag,
|
DuGeTag,
|
||||||
TuoZhiTag,
|
TuoZhiTag,
|
||||||
|
SplitTag,
|
||||||
// SampleTagPreview,
|
// SampleTagPreview,
|
||||||
// ForgeTagPreview,
|
// ForgeTagPreview,
|
||||||
// SaltSprayTagPreview,
|
// SaltSprayTagPreview,
|
||||||
@@ -113,6 +120,10 @@ export default {
|
|||||||
width: 180,
|
width: 180,
|
||||||
height: 100,
|
height: 100,
|
||||||
},
|
},
|
||||||
|
'split': {
|
||||||
|
width: 180,
|
||||||
|
height: 100,
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -151,8 +162,10 @@ export default {
|
|||||||
this.labelType = '6';
|
this.labelType = '6';
|
||||||
} else if (itemType == 'raw_material') {
|
} else if (itemType == 'raw_material') {
|
||||||
this.labelType = '2';
|
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 == '冷硬卷') {
|
} else if (itemType == 'product' && itemName == '冷硬卷') {
|
||||||
this.labelType = '3';
|
this.labelType = '3';
|
||||||
} else if (itemType == 'product' && itemName == '热轧卷板') {
|
} else if (itemType == 'product' && itemName == '热轧卷板') {
|
||||||
|
|||||||
Reference in New Issue
Block a user