Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
325
klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
Normal file
325
klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
Normal file
@@ -0,0 +1,325 @@
|
|||||||
|
<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 current-coil-no">
|
||||||
|
<div class="nob">{{ content.currentCoilNo || '' }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-cell label-cell">原料号</div>
|
||||||
|
<div class="grid-cell value-cell enter-coil-no">
|
||||||
|
<div class="nob" :style="enterCoilNoStyle">{{ content.enterCoilNo || '' }}</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">拉矫</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 value-cell qrcode-cell">
|
||||||
|
<QRCode :content="content.qrcodeRecordId" :width="80" :height="80" />
|
||||||
|
</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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
enterCoilNoStyle() {
|
||||||
|
const len = (this.content.enterCoilNo || '').length;
|
||||||
|
if (len > 25) return { fontSize: '0.55em' };
|
||||||
|
if (len > 20) return { fontSize: '0.65em' };
|
||||||
|
if (len > 15) return { fontSize: '0.75em' };
|
||||||
|
if (len > 10) return { fontSize: '0.9em' };
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
@import './label-common.css';
|
||||||
|
.label-container {
|
||||||
|
width: 25em;
|
||||||
|
height: 20em;
|
||||||
|
padding: 16px;
|
||||||
|
font-family: var(--label-font);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心Grid布局 */
|
||||||
|
.material-label-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.6fr 1fr 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: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #000;
|
||||||
|
font-family: var(--label-font);
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公司名称单元格 */
|
||||||
|
.company-cell {
|
||||||
|
grid-column: span 4;
|
||||||
|
/* 跨4列 */
|
||||||
|
font-size: 20px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 二维码单元格（跨3行+2列） */
|
||||||
|
.qrcode-cell {
|
||||||
|
grid-row: span 3;
|
||||||
|
/* 跨3行 */
|
||||||
|
grid-column: span 2;
|
||||||
|
/* 跨2列 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-coil-no, .enter-coil-no {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 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>
|
||||||
325
klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue
Normal file
325
klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue
Normal file
@@ -0,0 +1,325 @@
|
|||||||
|
<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 current-coil-no">
|
||||||
|
<div class="nob">{{ content.currentCoilNo || '' }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid-cell label-cell">原料号</div>
|
||||||
|
<div class="grid-cell value-cell enter-coil-no">
|
||||||
|
<div class="nob" :style="enterCoilNoStyle">{{ content.enterCoilNo || '' }}</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">双机架</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 value-cell qrcode-cell">
|
||||||
|
<QRCode :content="content.qrcodeRecordId" :width="80" :height="80" />
|
||||||
|
</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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
enterCoilNoStyle() {
|
||||||
|
const len = (this.content.enterCoilNo || '').length;
|
||||||
|
if (len > 25) return { fontSize: '0.55em' };
|
||||||
|
if (len > 20) return { fontSize: '0.65em' };
|
||||||
|
if (len > 15) return { fontSize: '0.75em' };
|
||||||
|
if (len > 10) return { fontSize: '0.9em' };
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
@import './label-common.css';
|
||||||
|
.label-container {
|
||||||
|
width: 25em;
|
||||||
|
height: 20em;
|
||||||
|
padding: 16px;
|
||||||
|
font-family: var(--label-font);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心Grid布局 */
|
||||||
|
.material-label-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1.6fr 1fr 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: 13px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #000;
|
||||||
|
font-family: var(--label-font);
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公司名称单元格 */
|
||||||
|
.company-cell {
|
||||||
|
grid-column: span 4;
|
||||||
|
/* 跨4列 */
|
||||||
|
font-size: 20px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 二维码单元格（跨3行+2列） */
|
||||||
|
.qrcode-cell {
|
||||||
|
grid-row: span 3;
|
||||||
|
/* 跨3行 */
|
||||||
|
grid-column: span 2;
|
||||||
|
/* 跨2列 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-coil-no, .enter-coil-no {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 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>
|
||||||
@@ -56,6 +56,18 @@
|
|||||||
:paperWidthMm="180"
|
:paperWidthMm="180"
|
||||||
:paperHeightMm="100"
|
:paperHeightMm="100"
|
||||||
/>
|
/>
|
||||||
|
<LajiaoRawTag
|
||||||
|
v-if="tagType === 'lajiao-raw'"
|
||||||
|
:content="innerContent"
|
||||||
|
:paperWidthMm="100"
|
||||||
|
:paperHeightMm="80"
|
||||||
|
/>
|
||||||
|
<ShuangRawTag
|
||||||
|
v-if="tagType === 'shuang-raw'"
|
||||||
|
:content="innerContent"
|
||||||
|
:paperWidthMm="100"
|
||||||
|
:paperHeightMm="80"
|
||||||
|
/>
|
||||||
</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>
|
||||||
@@ -80,6 +92,9 @@ import DuGeTag from './DuGeTag.vue';
|
|||||||
import TuoZhiTag from './TuoZhiTag.vue';
|
import TuoZhiTag from './TuoZhiTag.vue';
|
||||||
import SplitTag from './SplitTag.vue';
|
import SplitTag from './SplitTag.vue';
|
||||||
import TuiHuoRawTag from './TuiHuoRawTag.vue';
|
import TuiHuoRawTag from './TuiHuoRawTag.vue';
|
||||||
|
import LajiaoRawTag from './LajiaoRawTag.vue';
|
||||||
|
import ShuangRawTag from './ShuangRawTag.vue';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'LabelRender',
|
name: 'LabelRender',
|
||||||
@@ -93,6 +108,8 @@ export default {
|
|||||||
TuoZhiTag,
|
TuoZhiTag,
|
||||||
SplitTag,
|
SplitTag,
|
||||||
TuiHuoRawTag,
|
TuiHuoRawTag,
|
||||||
|
LajiaoRawTag,
|
||||||
|
ShuangRawTag,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -134,6 +151,14 @@ export default {
|
|||||||
'tuihuo-raw': {
|
'tuihuo-raw': {
|
||||||
width: 180,
|
width: 180,
|
||||||
height: 100,
|
height: 100,
|
||||||
|
},
|
||||||
|
'lajiao-raw': {
|
||||||
|
width: 100,
|
||||||
|
height: 80,
|
||||||
|
},
|
||||||
|
'shuang-raw': {
|
||||||
|
width: 100,
|
||||||
|
height: 80,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
@@ -193,6 +218,14 @@ export default {
|
|||||||
else if (itemType == 'raw_material' && (warehouseId == '1988150648993148929' || warehouseId == '1988150750390448129')) {
|
else if (itemType == 'raw_material' && (warehouseId == '1988150648993148929' || warehouseId == '1988150750390448129')) {
|
||||||
this.labelType = 'tuihuo-raw';
|
this.labelType = 'tuihuo-raw';
|
||||||
}
|
}
|
||||||
|
// 拉矫卷使用拉矫原料标签
|
||||||
|
else if (itemType == 'raw_material' && warehouseId == '1988150854442741762') {
|
||||||
|
this.labelType = 'lajiao-raw';
|
||||||
|
}
|
||||||
|
// 双机架原料卷使用双机架原料标签
|
||||||
|
else if (itemType == 'raw_material' && warehouseId == '1992873386047643650') {
|
||||||
|
this.labelType = 'shuang-raw';
|
||||||
|
}
|
||||||
// 否则使用普通的原料标签
|
// 否则使用普通的原料标签
|
||||||
else if (itemType == 'raw_material') {
|
else if (itemType == 'raw_material') {
|
||||||
this.labelType = '2';
|
this.labelType = '2';
|
||||||
|
|||||||
Reference in New Issue
Block a user