From 5f523158c1d39c1daa55b6816ff383dde6d0f47b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Fri, 26 Jun 2026 17:46:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms/coil/label):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=8B=89=E7=9F=AB=E5=92=8C=E5=8F=8C=E6=9C=BA=E6=9E=B6=E5=8E=9F?=
 =?UTF-8?q?=E6=96=99=E6=A0=87=E7=AD=BE=E6=89=93=E5=8D=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增LajiaoRawTag和ShuangRawTag两个原料标签组件，分别适配拉矫卷和双机架原料卷的打印需求，同时根据仓库ID自动匹配对应的标签类型，完善原料标签的适配场景。
---
 .../coil/panels/LabelRender/LajiaoRawTag.vue  | 325 ++++++++++++++++++
 .../coil/panels/LabelRender/ShuangRawTag.vue  | 325 ++++++++++++++++++
 .../wms/coil/panels/LabelRender/index.vue     |  33 ++
 3 files changed, 683 insertions(+)
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
 create mode 100644 klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue

diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
new file mode 100644
index 000000000..dc49669ba
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/LajiaoRawTag.vue
@@ -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>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue
new file mode 100644
index 000000000..7497d6985
--- /dev/null
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/ShuangRawTag.vue
@@ -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>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
index ee2917c12..2fd4c6177 100644
--- a/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
+++ b/klp-ui/src/views/wms/coil/panels/LabelRender/index.vue
@@ -56,6 +56,18 @@
         :paperWidthMm="180"
         :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 class="action-buttons" v-if="!hideActions">
       <el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
@@ -80,6 +92,9 @@ import DuGeTag from './DuGeTag.vue';
 import TuoZhiTag from './TuoZhiTag.vue';
 import SplitTag from './SplitTag.vue';
 import TuiHuoRawTag from './TuiHuoRawTag.vue';
+import LajiaoRawTag from './LajiaoRawTag.vue';
+import ShuangRawTag from './ShuangRawTag.vue';
+
 
 export default {
   name: 'LabelRender',
@@ -93,6 +108,8 @@ export default {
     TuoZhiTag,
     SplitTag,
     TuiHuoRawTag,
+    LajiaoRawTag,
+    ShuangRawTag,
   },
   data() {
     return {
@@ -134,6 +151,14 @@ export default {
         'tuihuo-raw': {
           width: 180,
           height: 100,
+        },
+        'lajiao-raw': {
+          width: 100,
+          height: 80,
+        },
+        'shuang-raw': {
+          width: 100,
+          height: 80,
         }
       },
       loading: false,
@@ -193,6 +218,14 @@ export default {
         else if (itemType == 'raw_material' && (warehouseId == '1988150648993148929' || warehouseId == '1988150750390448129')) {
           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') {
           this.labelType = '2';