From 35e4e4bbb0c62a86518cc647061c170607a9e027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Fri, 22 May 2026 10:46:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms/delivery):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=A4=9A=E7=B1=BB=E5=9E=8B=E5=8F=91=E8=B4=A7=E5=8D=95=E6=89=93?=
 =?UTF-8?q?=E5=8D=B0=E7=BB=84=E4=BB=B6=E5=8F=8A=E9=80=82=E9=85=8D=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增WayBillPrinter包装组件，根据商品类型和printType自动切换打印模板
2. 新增锌层、铬料专用的发货单打印模板ZincWayBill1/2、DugeWayBill1/2
3. 优化发货单页面，替换原有固定打印组件为动态匹配的打印组件
4. 补充获取zincLayer和temperGrade字段的逻辑
---
 .../wms/delivery/components/DugeWayBill1.vue  | 1153 +++++++++++++++++
 .../wms/delivery/components/DugeWayBill2.vue  | 1151 ++++++++++++++++
 .../delivery/components/WayBillPrinter.vue    |   72 +
 .../wms/delivery/components/ZincWayBill1.vue  | 1153 +++++++++++++++++
 .../wms/delivery/components/ZincWayBill2.vue  | 1151 ++++++++++++++++
 .../src/views/wms/delivery/waybill/index.vue  |   20 +-
 6 files changed, 4694 insertions(+), 6 deletions(-)
 create mode 100644 klp-ui/src/views/wms/delivery/components/DugeWayBill1.vue
 create mode 100644 klp-ui/src/views/wms/delivery/components/DugeWayBill2.vue
 create mode 100644 klp-ui/src/views/wms/delivery/components/WayBillPrinter.vue
 create mode 100644 klp-ui/src/views/wms/delivery/components/ZincWayBill1.vue
 create mode 100644 klp-ui/src/views/wms/delivery/components/ZincWayBill2.vue

diff --git a/klp-ui/src/views/wms/delivery/components/DugeWayBill1.vue b/klp-ui/src/views/wms/delivery/components/DugeWayBill1.vue
new file mode 100644
index 00000000..3c97c812
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/DugeWayBill1.vue
@@ -0,0 +1,1153 @@
+<!-- 发货单组件 -->
+<template>
+  <div>
+    <div class="waybill-container" ref="waybillRef">
+      <div class="waybill-content">
+        <!-- 头部信息 -->
+        <!-- 标题信息 -->
+        <div class="title">科伦普发货单</div>
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">收货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
+          </div>
+          <div class="header-center">
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}
+            </div>
+            <span class="label date-label">年</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}
+            </div>
+            <span class="label date-label">月</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}
+            </div>
+            <span class="label date-label">日</span>
+          </div>
+          <div class="header-right">
+            <span class="label">发货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
+          </div>
+        </div>
+
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">负责人：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">订单号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.orderId ?
+              localWaybill.orderCode : localWaybill.principalPhone }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">合同号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
+          </div>
+          <div class="header-center">
+            <span class="label">车牌：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <table class="waybill-table">
+          <thead>
+            <tr>
+              <th>品名</th>
+              <th>切边</th>
+              <th>包装</th>
+              <th>仓库位置</th>
+              <th>结算</th>
+              <th>调制度</th>
+              <th>卷号</th>
+              <th>规格</th>
+              <th>材质</th>
+              <!-- <th>数量（件）</th> -->
+              <th>重量(t)</th>
+              <th>单价</th>
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- 无明细提示 -->
+            <!-- <tr v-if="localWaybillDetails.length === 0">
+              <td colspan="12" class="no-data">
+                <div class="no-data-content">
+                  <el-empty description="暂无发货单明细" />
+                </div>
+              </td>
+            </tr> -->
+            <!-- 明细数据 -->
+            <tr v-for="(item, index) in displayWaybillDetails" :key="index">
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.productName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.temperGrade }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.specification }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.material }}</div>
+              </td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
+                  placeholder="0.00" /></td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.remark }}</div>
+              </td>
+            </tr>
+            <!-- 加粗最后一行的线 -->
+            <tr style="height: 0;">
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+            </tr>
+          </tbody>
+        </table>
+
+
+
+        <!-- 备注说明 -->
+        <div class="waybill-remarks">
+          <p>
+            1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
+          </p>
+        </div>
+
+        <div class="waybill-pickup-location">
+          <!-- <div class="pickup-location-item inline"> -->
+          <span style="font-size: 18px; font-weight: bold;">取货地点：</span>
+          <input type="text" class="editable-input full-input transparent-input"
+            v-model="localWaybill.pickupLocation" />
+          <!-- </div> -->
+        </div>
+
+        <!-- 签名栏 -->
+        <div class="waybill-footer">
+          <!-- <div class="footer-item inline">
+          <span class="label">销售：</span>
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
+        </div> -->
+          <div class="footer-item inline">
+            <span class="label">发货：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">司机：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">磅房：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="waybill-actions">
+      <div class="waybill-pagebar">
+        <el-button size="mini" @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</el-button>
+        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
+        <el-button size="mini" @click="changePage(currentPage + 1)"
+          :disabled="currentPage >= totalPages">下一页</el-button>
+      </div>
+      <el-button type="primary" @click="saveAsImage">保存为图片</el-button>
+      <el-button type="success" @click="printWaybill">打印</el-button>
+      <el-button type="warning" @click="exportExcel">导出Excel</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import domtoimage from 'dom-to-image';
+import { PDFDocument } from 'pdf-lib';
+import html2canvas from 'html2canvas';
+import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
+
+export default {
+  props: {
+    // 组件接收完整的发货单内容, 渲染发货单,这个面板内包括一个保存为图片(已经安装了dom-to-image)和一个打印按钮(已经安装了print-js)
+    waybill: {
+      type: Object,
+      default: () => { }
+    },
+    waybillDetails: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 7,
+      totalPages: 1,
+      // 本地可编辑的发货单数据
+      localWaybill: {
+        consigneeUnit: '',
+        senderUnit: '',
+        deliveryYear: '',
+        deliveryMonth: '',
+        deliveryDay: '',
+        principal: '',
+        principalPhone: '',
+        licensePlate: '',
+        pickupLocation: ''
+      },
+      // 本地可编辑的发货单明细
+      localWaybillDetails: [],
+      // 预览/打印用明细（每页固定7行，不足补空行）
+      displayWaybillDetails: []
+    };
+  },
+  watch: {
+    // 监听props变化，更新本地数据
+    waybill: {
+      handler(newVal) {
+        if (newVal) {
+          this.localWaybill = {
+            orderId: newVal.orderId || '',
+            orderCode: newVal.orderCode || '',
+            consigneeUnit: newVal.consigneeUnit || '',
+            senderUnit: newVal.senderUnit || '',
+            deliveryYear: this.getYearFromDate(newVal.deliveryTime) || '',
+            deliveryMonth: this.getMonthFromDate(newVal.deliveryTime) || '',
+            deliveryDay: this.getDayFromDate(newVal.deliveryTime) || '',
+            principal: newVal.principal || '',
+            principalPhone: newVal.principalPhone || '',
+            licensePlate: newVal.licensePlate || '',
+            pickupLocation: newVal.pickupLocation || '',
+            contractCode: newVal.contractCode || ''
+          };
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    waybillDetails: {
+      handler(newVal) {
+        if (newVal && Array.isArray(newVal)) {
+          this.localWaybillDetails = [...newVal];
+        } else {
+          this.localWaybillDetails = [];
+        }
+        this.refreshPagination();
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    buildPage(details, page) {
+      const perPage = this.perPage;
+      const src = Array.isArray(details) ? details : [];
+      const start = (page - 1) * perPage;
+      const pageRows = src.slice(start, start + perPage).map((x) => ({ ...x }));
+      while (pageRows.length < perPage) {
+        pageRows.push({
+          productName: '',
+          edgeType: '',
+          packageType: '',
+          actualWarehouseName: '',
+          settlementType: '',
+          rawMaterialFactory: '',
+          coilNumber: '',
+          specification: '',
+          material: '',
+          quantity: '',
+          weight: '',
+          unitPrice: ''
+        });
+      }
+      return pageRows;
+    },
+    readWaybill() {
+      const file = this.$refs.file.files[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onload = (e) => {
+        const data = e.target.result;
+        const wb = XLSX.read(data, { type: 'array' });
+        const ws = wb.Sheets[wb.SheetNames[0]];
+        const json = XLSX.utils.sheet_to_eth(ws);
+        console.log(json);
+        // this.localWaybillDetails = json;
+        // this.refreshPagination();
+      };
+      reader.onerror = (e) => {
+        console.error('读取文件失败:', e);
+      };
+    },
+    refreshPagination() {
+      const src = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      this.totalPages = Math.max(1, Math.ceil(src.length / this.perPage));
+      if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
+      if (this.currentPage < 1) this.currentPage = 1;
+      this.displayWaybillDetails = this.buildPage(src, this.currentPage);
+    },
+    changePage(next) {
+      this.currentPage = next;
+      this.refreshPagination();
+    },
+    // 从日期字符串中提取年份
+    getYearFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getFullYear().toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取月份
+    getMonthFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return (date.getMonth() + 1).toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取日
+    getDayFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getDate().toString();
+      }
+      return '';
+    },
+    // 保存为图片
+    saveAsImage() {
+      const node = this.$refs.waybillRef;
+      // 确保容器在保存图片时能完整显示所有内容
+      const originalWidth = node.style.width;
+      const originalOverflow = node.style.overflow;
+
+      // 临时调整容器样式，确保所有内容可见
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 获取实际内容宽度
+      const contentWidth = node.scrollWidth;
+      const contentHeight = node.scrollHeight;
+
+      domtoimage.toPng(node, {
+        width: contentWidth,
+        height: contentHeight,
+        style: {
+          width: `${contentWidth}px`,
+          height: `${contentHeight}px`,
+          overflow: 'visible'
+        }
+      })
+        .then(dataUrl => {
+          const link = document.createElement('a');
+          link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`;
+          link.href = dataUrl;
+          link.click();
+        })
+        .catch(error => {
+          console.error('保存图片失败:', error);
+          this.$message.error('保存图片失败');
+        })
+        .finally(() => {
+          // 恢复原始样式
+          node.style.width = originalWidth;
+          node.style.overflow = originalOverflow;
+        });
+    },
+    // 打印发货单
+    async printWaybill() {
+      const node = this.$refs.waybillRef;
+      const paperWidthMm = 241;
+      const paperHeightMm = 140;
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
+
+      const mmToPx = (mm) => (mm * 96) / 25.4;
+      const mmToPt = 72 / 25.4;
+      const pageWidthPt = paperWidthMm * mmToPt;
+      const pageHeightPt = paperHeightMm * mmToPt;
+
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
+
+      const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage));
+
+      const originalPage = this.currentPage;
+      const originalDisplay = this.displayWaybillDetails;
+
+      const pdfDoc = await PDFDocument.create();
+
+      // 强制让容器内容不被裁剪，以便html2canvas完整捕获
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 针对“导出PDF再打印”的场景：为打印机右侧不可打印区预留约30mm
+      // 通过缩放内容区域（不换行、不省略），让最终PDF右侧自带留白
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
+      try {
+        for (let page = 1; page <= totalPages; page++) {
+          this.currentPage = page;
+          this.displayWaybillDetails = this.buildPage(allDetails, page);
+          await this.$nextTick();
+
+          // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
+          const canvas = await html2canvas(node, {
+            backgroundColor: '#ffffff',
+            scale: 6,
+            useCORS: true,
+            willReadFrequently: true,
+            width: pageWidthPx,
+            height: pageHeightPx,
+            windowWidth: pageWidthPx,
+            windowHeight: pageHeightPx,
+            scrollX: 0,
+            scrollY: 0
+          });
+
+          const png = canvas.toDataURL('image/png');
+          const imgPng = await pdfDoc.embedPng(png);
+          const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+          pdfPage.drawImage(imgPng, {
+            x: 0,
+            y: 0,
+            width: pageWidthPt,
+            height: pageHeightPt
+          });
+        }
+      } finally {
+        // 恢复截图前的容器样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+
+        this.currentPage = originalPage;
+        this.displayWaybillDetails = originalDisplay;
+        this.refreshPagination();
+      }
+
+      const pdfBytes = await pdfDoc.save();
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+
+      const win = window.open(url, '_blank');
+      if (!win) {
+        this.$message.error('打印失败，请检查浏览器设置');
+        // const a = document.createElement('a');
+        // a.href = url;
+        // a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`;
+        // document.body.appendChild(a);
+        // a.click();
+        // document.body.removeChild(a);
+      }
+    },
+    async exportExcel() {
+      try {
+        // 1. 创建工作簿和工作表
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('科伦普发货单');
+        worksheet.properties.defaultRowHeight = 25; // 设置默认行高（匹配Web端行高）
+
+        // 2. 构建数据（复用原有业务数据）
+        const title = `科伦普发货单`; // 标题
+        const header1 = { // 收货单位+日期+发货单位
+          consignee: `收货单位：${this.localWaybill.consigneeUnit || ''}`,
+          date: `${this.localWaybill.deliveryYear || ''}年${this.localWaybill.deliveryMonth || ''}月${this.localWaybill.deliveryDay || ''}日`,
+          sender: `发货单位：${this.localWaybill.senderUnit || ''}`
+        };
+        const header2 = { // 负责人+订单号+合同号+车牌
+          principal: `负责人：${this.localWaybill.principal || ''}`,
+          phone: `订单号：${this.localWaybill.orderId ? this.localWaybill.orderCode : this.localWaybill.principalPhone || ''}`,
+          contract: `合同号：${this.localWaybill.contractCode || ''}`,
+          license: `车牌：${this.localWaybill.licensePlate || ''}`
+        };
+        const tableHeader = ["品名", '切边', '包装', '仓库位置', '结算', '调制度', '卷号', '规格', '材质', '重量(t)', '单价', '备注']; // 表格表头
+        const tableData = this.displayWaybillDetails.map(item => [ // 表格明细
+          item.productName || '',
+          item.edgeType || '',
+          item.packageType || '',
+          item.actualWarehouseName || '',
+          item.settlementType || '',
+          item.temperGrade || '',
+          item.coilNumber || '',
+          item.specification || '',
+          item.material || '',
+          item.weight || '',
+          item.unitPrice || '',
+          item.remark || ''
+        ]);
+        const remark = '1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。';
+        const pickupLocation = `取货地点：${this.localWaybill.pickupLocation || ''}`;
+        const footer = { // 签名栏
+          deliveryman: `发货：${this.localWaybill.deliveryman || ''}`,
+          driver: `司机：${this.localWaybill.driver || ''}`,
+          weightRoom: `磅房：${this.localWaybill.weightRoom || ''}`
+        };
+
+        // 3. 写入数据到工作表（按行写入）
+        let rowIdx = 1; // exceljs行号从1开始
+        // 3.1 标题行（第1行）
+        const titleCell = worksheet.getCell(`A${rowIdx}`);
+        titleCell.value = title;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A1-L1
+        // 3.2 收货单位行（第2行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header1.consignee;
+        worksheet.getCell(`E${rowIdx}`).value = header1.date;
+        worksheet.getCell(`I${rowIdx}`).value = header1.sender;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 收货单位：A2-D2
+        worksheet.mergeCells(`E${rowIdx}:H${rowIdx}`); // 日期：E2-G2
+        worksheet.mergeCells(`I${rowIdx}:L${rowIdx}`); // 发货单位：H2-K2
+        // 3.3 负责人行（第3行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header2.principal;
+        worksheet.getCell(`D${rowIdx}`).value = header2.phone;
+        worksheet.getCell(`G${rowIdx}`).value = header2.contract;
+        worksheet.getCell(`J${rowIdx}`).value = header2.license;
+        worksheet.mergeCells(`A${rowIdx}:C${rowIdx}`); // 负责人：A3-C3
+        worksheet.mergeCells(`D${rowIdx}:F${rowIdx}`); // 订单号：D3-F3
+        worksheet.mergeCells(`G${rowIdx}:I${rowIdx}`); // 合同号：G3-I3
+        worksheet.mergeCells(`J${rowIdx}:L${rowIdx}`); // 车牌：J3-L3
+        // 3.4 表格表头（第4行）
+        rowIdx++;
+        tableHeader.forEach((text, colIdx) => {
+          const colLetter = String.fromCharCode(65 + colIdx); // A=65, B=66...
+          worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+        });
+        // 3.5 表格明细行
+        tableData.forEach(item => {
+          rowIdx++;
+          item.forEach((text, colIdx) => {
+            const colLetter = String.fromCharCode(65 + colIdx);
+            worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+          });
+        });
+        // 3.6 备注行
+        rowIdx++;
+        const remarkCell = worksheet.getCell(`A${rowIdx}`);
+        remarkCell.value = remark;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A*_L*
+        // 3.7 取货地点行
+        rowIdx++;
+        const pickupCell = worksheet.getCell(`A${rowIdx}`);
+        pickupCell.value = pickupLocation;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A*_L*
+        // 3.8 签名栏行
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = footer.deliveryman;
+        worksheet.getCell(`E${rowIdx}`).value = footer.driver;
+        worksheet.getCell(`I${rowIdx}`).value = footer.weightRoom;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 发货：A*_D*
+        worksheet.mergeCells(`E${rowIdx}:H${rowIdx}`); // 司机：E*_H*
+        worksheet.mergeCells(`I${rowIdx}:L${rowIdx}`); // 磅房：I*_L*
+
+        // 4. 配置列宽（完全匹配Web端）
+        const columnWidths = [70, 60, 50, 90, 70, 70, 110, 90, 80, 70, 50, 60];
+        worksheet.columns = columnWidths.map((width, idx) => ({
+          key: `col${idx + 1}`,
+          width: width / 5 // exceljs的width单位是字符宽度，转换为px（约1px=0.072字符）
+        }));
+
+        // 5. 配置样式（核心：匹配Web端）
+        // 工具函数：设置单元格样式
+        const setCellStyle = (cell, options = {}) => {
+          // 默认样式：宋体、加粗、居中
+          cell.font = {
+            name: 'SimSun', // 宋体（匹配Web端）
+            size: options.size || 16, // 默认16px（表格单元格）
+            bold: options.bold ?? true // 默认加粗
+          };
+          cell.alignment = {
+            horizontal: options.horizontal || 'left', // 水平居中
+            vertical: options.vertical || 'middle', // 垂直居中
+            wrapText: options.wrapText || false // 自动换行
+          };
+          // 边框：表格单元格带边框，其他区域无边框
+          if (options.border) {
+            cell.border = {
+              top: { style: 'thin', color: { argb: 'FF000000' } },
+              bottom: { style: 'thin', color: { argb: 'FF000000' } },
+              left: { style: 'thin', color: { argb: 'FF000000' } },
+              right: { style: 'thin', color: { argb: 'FF000000' } }
+            };
+          } else {
+            cell.border = null; // 无边框
+          }
+        };
+
+        // 5.1 标题样式（24px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell('A1'), { size: 24, border: false, horizontal: 'center' });
+        // 5.2 头部信息样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`A3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`D3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`G3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`J3`), { size: 18, border: false });
+        // 5.3 表格表头样式（16px、宋体、加粗、居中、带边框）
+        for (let col = 0; col < 12; col++) {
+          const colLetter = String.fromCharCode(65 + col);
+          setCellStyle(worksheet.getCell(`${colLetter}4`), { size: 16, border: true, horizontal: 'center' });
+        }
+        // 5.4 表格明细样式（16px、宋体、加粗、居中、带边框）
+        for (let r = 5; r < rowIdx - 2; r++) { // 明细行范围：第5行到备注行前一行
+          for (let col = 0; col < 12; col++) {
+            const colLetter = String.fromCharCode(65 + col);
+            setCellStyle(worksheet.getCell(`${colLetter}${r}`), { size: 16, border: true, horizontal: 'center' });
+          }
+        }
+        // 5.5 备注样式（18px、宋体、加粗、居中、自动换行、无边框）
+        setCellStyle(remarkCell, { size: 18, border: false, wrapText: true });
+        // 5.6 取货地点样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(pickupCell, { size: 18, border: false });
+        // 5.7 签名栏样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I${rowIdx}`), { size: 18, border: false });
+
+        // 第一行的行高
+        const row1 = worksheet.getRow(1);
+        row1.height = 50;
+
+        const row2 = worksheet.getRow(2);
+        row2.height = 40;
+
+        const row3 = worksheet.getRow(3);
+        row3.height = 40;
+        // 备注行的行高
+        const remarkRow = worksheet.getRow(12);
+        remarkRow.height = 100;
+
+        const pickupRow = worksheet.getRow(13);
+        pickupRow.height = 40;
+
+        const footerRow = worksheet.getRow(14);
+        footerRow.height = 40;
+
+        // 6. 生成Excel文件并下载
+        const buffer = await workbook.xlsx.writeBuffer(); // 生成二进制buffer
+        const blob = new Blob([buffer], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `科伦普发货单_${this.waybill.waybillNo || Date.now()}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        // 清理资源
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }, 100);
+
+      } catch (error) {
+        console.error('Excel导出失败：', error);
+        this.$message.error('导出失败，请重试');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.waybill-container {
+  width: 241mm;
+  height: 140mm;
+  margin: 0 auto;
+  padding: 0;
+  background: #fff;
+  box-shadow: none;
+  font-family: SimSun, "Courier New", monospace;
+  overflow: hidden;
+  color: #000 !important;
+  font-weight: 900 !important;
+  box-sizing: border-box;
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+.waybill-content * {
+  box-sizing: border-box;
+}
+
+/* 头部样式 */
+.waybill-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3mm;
+  font-size: 11px;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.label {
+  font-weight: bold;
+  display: inline-block;
+  width: 100px;
+  font-size: 18px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.date-label {
+  width: 1em;
+}
+
+/* 可编辑输入框样式 */
+.editable-input {
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: SimSun, serif;
+  outline: none;
+  transition: all 0.2s;
+  line-height: 18px;
+  border-bottom: 1px dashed #dcdfe6;
+}
+
+.editable-input:focus {
+  border-color: #409eff;
+}
+
+.date-input {
+  width: 40px;
+  text-align: center;
+  margin-right: 5px;
+}
+
+/* 透明输入框样式 */
+.transparent-input {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.transparent-input:focus {
+  border-bottom-color: #409eff;
+  background-color: rgba(64, 158, 255, 0.05);
+}
+
+/* 表格样式 */
+.waybill-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2mm;
+  font-size: 10px;
+  table-layout: fixed;
+}
+
+.waybill-table th,
+.waybill-table td {
+  border: 0.4px solid #000;
+  box-sizing: border-box;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 900;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 表格列宽设置 */
+.waybill-table th:nth-child(1),
+.waybill-table td:nth-child(1) {
+  width: 70px;
+  /* 品名 */
+}
+
+.waybill-table th:nth-child(2),
+.waybill-table td:nth-child(2) {
+  width: 60px;
+  /* 切边 */
+}
+
+.waybill-table th:nth-child(3),
+.waybill-table td:nth-child(3) {
+  width: 50px;
+  /* 包装 */
+}
+
+.waybill-table th:nth-child(4),
+.waybill-table td:nth-child(4) {
+  width: 90px;
+  /* 仓库位置 */
+}
+
+.waybill-table th:nth-child(5),
+.waybill-table td:nth-child(5) {
+  width: 80px;
+  /* 结算 */
+}
+
+/* 调制度 */
+.waybill-table th:nth-child(6),
+.waybill-table td:nth-child(6) {
+  width: 70px;
+}
+
+.waybill-table th:nth-child(7),
+.waybill-table td:nth-child(7) {
+  width: 110px;
+  /* 卷号 */
+}
+
+.waybill-table th:nth-child(8),
+.waybill-table td:nth-child(8) {
+  width: 90px;
+  /* 规格 */
+}
+
+.waybill-table th:nth-child(9),
+.waybill-table td:nth-child(9) {
+  width: 80px;
+  /* 材质 */
+}
+
+/* 数量（件） */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 60px;
+
+} */
+
+/* 重量（kg） */
+.waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 70px;
+
+}
+
+/* 单价 */
+.waybill-table th:nth-child(11),
+.waybill-table td:nth-child(11) {
+  width: 50px;
+}
+
+/* 备注 */
+.waybill-table th:nth-child(12),
+.waybill-table td:nth-child(12) {
+  /* width: 40px; */
+}
+
+
+.waybill-table th {
+  background-color: #f5f7fa;
+  font-weight: bold;
+}
+
+.waybill-table tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+/* 表格输入框样式 */
+.table-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  /* font-family: inherit; */
+  font-size: 16px;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.transparent-input {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100% !important;
+  line-height: 6mm !important;
+  vertical-align: middle !important;
+}
+
+.waybill-table th,
+.waybill-table td {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 6mm !important;
+  height: 6mm;
+  vertical-align: middle !important;
+}
+
+.waybill-table input {
+  vertical-align: middle !important;
+  height: 6mm !important;
+  line-height: 6mm !important;
+  padding: 0 2px !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.waybill-table input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border: 1px dashed #999 !important;
+}
+
+/* 无数据样式 */
+.no-data {
+  height: 200px;
+  vertical-align: middle;
+}
+
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* 表格单元格操作区 */
+.table-cell-with-action {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* 备注样式 */
+.waybill-remarks {
+  margin-bottom: 30px;
+  font-size: 18px;
+  line-height: 1.5;
+  /* font-weight: 600; */
+  font-weight: bold;
+  text-align: justify;
+}
+
+.waybill-remarks p {
+  margin: 5px 0;
+}
+
+/* 底部签名样式 */
+.waybill-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
+.waybill-pickup-location {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+
+
+.waybill-pickup-location label {
+  font-size: 18px;
+  /* margin-right: 10px; */
+  text-align: left !important;
+  width: 40px;
+}
+
+.footer-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+}
+
+.footer-item.inline {
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+}
+
+.footer-item .label {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 40px;
+}
+
+.signature-input {
+  min-width: 150px;
+}
+
+.full-input {
+  /* 占满本行的剩余空间，父容器不是flex */
+  flex: 1;
+}
+
+/* 操作按钮样式 */
+.waybill-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+/* 添加明细按钮 */
+.add-detail-btn {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 打印样式 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+
+@media print {
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 打印机通常存在不可打印区：这里右侧预留30mm安全边距，避免右侧被裁 */
+  .waybill-container {
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .waybill-content {
+    --paper-width-mm: 241;
+    /* 右侧预留约30mm不可打印区：241 - 30 = 211 */
+    --content-width-mm: 211;
+    --offset-x-mm: 0;
+    --offset-y-mm: 0;
+    --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+    width: calc(var(--paper-width-mm) * 1mm);
+    transform-origin: top left;
+    transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+  }
+
+  /* 打印时不要省略：允许换行并让行高/高度自适应 */
+  .waybill-table th,
+  .waybill-table td {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+    line-height: 1.2 !important;
+  }
+
+  .waybill-table input {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+
+  .waybill-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
+  .footer-item.inline {
+    width: 100%;
+  }
+
+  .label {
+    width: auto;
+    text-align: left;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/delivery/components/DugeWayBill2.vue b/klp-ui/src/views/wms/delivery/components/DugeWayBill2.vue
new file mode 100644
index 00000000..12281830
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/DugeWayBill2.vue
@@ -0,0 +1,1151 @@
+<!-- 发货单组件 -->
+<template>
+  <div>
+    <div class="waybill-container" ref="waybillRef">
+      <div class="waybill-content">
+        <!-- 头部信息 -->
+        <!-- 标题信息 -->
+        <div class="title">科伦普发货单</div>
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">收货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
+          </div>
+          <div class="header-center">
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}
+            </div>
+            <span class="label date-label">年</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}
+            </div>
+            <span class="label date-label">月</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}
+            </div>
+            <span class="label date-label">日</span>
+          </div>
+          <div class="header-right">
+            <span class="label">发货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
+          </div>
+        </div>
+
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">负责人：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">订单号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.orderId ? localWaybill.orderCode : localWaybill.principalPhone }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">合同号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
+          </div>
+          <div class="header-center">
+            <span class="label">车牌：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <table class="waybill-table">
+          <thead>
+            <tr>
+              <th>品名</th>
+              <th>切边</th>
+              <th>包装</th>
+              <th>仓库位置</th>
+              <th>结算</th>
+              <th>调制度</th>
+              <th>卷号</th>
+              <th>规格</th>
+              <th>材质</th>
+              <!-- <th>数量（件）</th> -->
+              <th>重量(t)</th>
+              <!-- <th>单价</th> -->
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- 无明细提示 -->
+            <!-- <tr v-if="localWaybillDetails.length === 0">
+              <td colspan="12" class="no-data">
+                <div class="no-data-content">
+                  <el-empty description="暂无发货单明细" />
+                </div>
+              </td>
+            </tr> -->
+            <!-- 明细数据 -->
+            <tr v-for="(item, index) in displayWaybillDetails" :key="index">
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.productName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.temperGrade }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.specification }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.material }}</div>
+              </td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
+                  placeholder="0.00" /></td>
+              <!-- <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div>
+              </td> -->
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.remark }}</div>
+              </td>
+            </tr>
+            <!-- 加粗最后一行的线 -->
+            <tr style="height: 0;">
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+            </tr>
+          </tbody>
+        </table>
+
+
+
+        <!-- 备注说明 -->
+        <div class="waybill-remarks">
+          <p>
+            1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
+          </p>
+        </div>
+
+        <div class="waybill-pickup-location">
+          <!-- <div class="pickup-location-item inline"> -->
+          <span style="font-size: 18px; font-weight: bold;">取货地点：</span>
+          <input type="text" class="editable-input full-input transparent-input"
+            v-model="localWaybill.pickupLocation" />
+          <!-- </div> -->
+        </div>
+
+        <!-- 签名栏 -->
+        <div class="waybill-footer">
+          <!-- <div class="footer-item inline">
+          <span class="label">销售：</span>
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
+        </div> -->
+          <div class="footer-item inline">
+            <span class="label">发货：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">司机：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">磅房：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="waybill-actions">
+      <div class="waybill-pagebar">
+        <el-button size="mini" @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</el-button>
+        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
+        <el-button size="mini" @click="changePage(currentPage + 1)"
+          :disabled="currentPage >= totalPages">下一页</el-button>
+      </div>
+      <el-button type="primary" @click="saveAsImage">保存为图片</el-button>
+      <el-button type="success" @click="printWaybill">打印</el-button>
+      <el-button type="warning" @click="exportExcel">导出Excel</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import domtoimage from 'dom-to-image';
+import { PDFDocument } from 'pdf-lib';
+import html2canvas from 'html2canvas';
+import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
+
+export default {
+  props: {
+    // 组件接收完整的发货单内容, 渲染发货单,这个面板内包括一个保存为图片(已经安装了dom-to-image)和一个打印按钮(已经安装了print-js)
+    waybill: {
+      type: Object,
+      default: () => { }
+    },
+    waybillDetails: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 7,
+      totalPages: 1,
+      // 本地可编辑的发货单数据
+      localWaybill: {
+        consigneeUnit: '',
+        senderUnit: '',
+        deliveryYear: '',
+        deliveryMonth: '',
+        deliveryDay: '',
+        principal: '',
+        principalPhone: '',
+        licensePlate: '',
+        pickupLocation: ''
+      },
+      // 本地可编辑的发货单明细
+      localWaybillDetails: [],
+      // 预览/打印用明细（每页固定7行，不足补空行）
+      displayWaybillDetails: []
+    };
+  },
+  watch: {
+    // 监听props变化，更新本地数据
+    waybill: {
+      handler(newVal) {
+        if (newVal) {
+          this.localWaybill = {
+            orderId: newVal.orderId || '',
+            orderCode: newVal.orderCode || '',
+            consigneeUnit: newVal.consigneeUnit || '',
+            senderUnit: newVal.senderUnit || '',
+            deliveryYear: this.getYearFromDate(newVal.deliveryTime) || '',
+            deliveryMonth: this.getMonthFromDate(newVal.deliveryTime) || '',
+            deliveryDay: this.getDayFromDate(newVal.deliveryTime) || '',
+            principal: newVal.principal || '',
+            principalPhone: newVal.principalPhone || '',
+            licensePlate: newVal.licensePlate || '',
+            pickupLocation: newVal.pickupLocation || '',
+            contractCode: newVal.contractCode || ''
+          };
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    waybillDetails: {
+      handler(newVal) {
+        if (newVal && Array.isArray(newVal)) {
+          this.localWaybillDetails = [...newVal];
+        } else {
+          this.localWaybillDetails = [];
+        }
+        this.refreshPagination();
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    buildPage(details, page) {
+      const perPage = this.perPage;
+      const src = Array.isArray(details) ? details : [];
+      const start = (page - 1) * perPage;
+      const pageRows = src.slice(start, start + perPage).map((x) => ({ ...x }));
+      while (pageRows.length < perPage) {
+        pageRows.push({
+          productName: '',
+          edgeType: '',
+          packageType: '',
+          actualWarehouseName: '',
+          settlementType: '',
+          rawMaterialFactory: '',
+          coilNumber: '',
+          specification: '',
+          material: '',
+          quantity: '',
+          weight: '',
+          unitPrice: ''
+        });
+      }
+      return pageRows;
+    },
+    readWaybill() {
+      const file = this.$refs.file.files[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onload = (e) => {
+        const data = e.target.result;
+        const wb = XLSX.read(data, { type: 'array' });
+        const ws = wb.Sheets[wb.SheetNames[0]];
+        const json = XLSX.utils.sheet_to_eth(ws);
+        console.log(json);
+        // this.localWaybillDetails = json;
+        // this.refreshPagination();
+      };
+      reader.onerror = (e) => {
+        console.error('读取文件失败:', e);
+      };
+    },
+    refreshPagination() {
+      const src = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      this.totalPages = Math.max(1, Math.ceil(src.length / this.perPage));
+      if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
+      if (this.currentPage < 1) this.currentPage = 1;
+      this.displayWaybillDetails = this.buildPage(src, this.currentPage);
+    },
+    changePage(next) {
+      this.currentPage = next;
+      this.refreshPagination();
+    },
+    // 从日期字符串中提取年份
+    getYearFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getFullYear().toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取月份
+    getMonthFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return (date.getMonth() + 1).toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取日
+    getDayFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getDate().toString();
+      }
+      return '';
+    },
+    // 保存为图片
+    saveAsImage() {
+      const node = this.$refs.waybillRef;
+      // 确保容器在保存图片时能完整显示所有内容
+      const originalWidth = node.style.width;
+      const originalOverflow = node.style.overflow;
+
+      // 临时调整容器样式，确保所有内容可见
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 获取实际内容宽度
+      const contentWidth = node.scrollWidth;
+      const contentHeight = node.scrollHeight;
+
+      domtoimage.toPng(node, {
+        width: contentWidth,
+        height: contentHeight,
+        style: {
+          width: `${contentWidth}px`,
+          height: `${contentHeight}px`,
+          overflow: 'visible'
+        }
+      })
+        .then(dataUrl => {
+          const link = document.createElement('a');
+          link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`;
+          link.href = dataUrl;
+          link.click();
+        })
+        .catch(error => {
+          console.error('保存图片失败:', error);
+          this.$message.error('保存图片失败');
+        })
+        .finally(() => {
+          // 恢复原始样式
+          node.style.width = originalWidth;
+          node.style.overflow = originalOverflow;
+        });
+    },
+    // 打印发货单
+    async printWaybill() {
+      const node = this.$refs.waybillRef;
+      const paperWidthMm = 241;
+      const paperHeightMm = 140;
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
+
+      const mmToPx = (mm) => (mm * 96) / 25.4;
+      const mmToPt = 72 / 25.4;
+      const pageWidthPt = paperWidthMm * mmToPt;
+      const pageHeightPt = paperHeightMm * mmToPt;
+
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
+
+      const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage));
+
+      const originalPage = this.currentPage;
+      const originalDisplay = this.displayWaybillDetails;
+
+      const pdfDoc = await PDFDocument.create();
+
+      // 强制让容器内容不被裁剪，以便html2canvas完整捕获
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 针对“导出PDF再打印”的场景：为打印机右侧不可打印区预留约30mm
+      // 通过缩放内容区域（不换行、不省略），让最终PDF右侧自带留白
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
+      try {
+        for (let page = 1; page <= totalPages; page++) {
+          this.currentPage = page;
+          this.displayWaybillDetails = this.buildPage(allDetails, page);
+          await this.$nextTick();
+
+          // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
+          const canvas = await html2canvas(node, {
+            backgroundColor: '#ffffff',
+            scale: 6,
+            useCORS: true,
+            willReadFrequently: true,
+            width: pageWidthPx,
+            height: pageHeightPx,
+            windowWidth: pageWidthPx,
+            windowHeight: pageHeightPx,
+            scrollX: 0,
+            scrollY: 0
+          });
+
+          const png = canvas.toDataURL('image/png');
+          const imgPng = await pdfDoc.embedPng(png);
+          const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+          pdfPage.drawImage(imgPng, {
+            x: 0,
+            y: 0,
+            width: pageWidthPt,
+            height: pageHeightPt
+          });
+        }
+      } finally {
+        // 恢复截图前的容器样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+
+        this.currentPage = originalPage;
+        this.displayWaybillDetails = originalDisplay;
+        this.refreshPagination();
+      }
+
+      const pdfBytes = await pdfDoc.save();
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+
+      const win = window.open(url, '_blank');
+      if (!win) {
+        this.$message.error('打印失败，请检查浏览器设置');
+        // const a = document.createElement('a');
+        // a.href = url;
+        // a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`;
+        // document.body.appendChild(a);
+        // a.click();
+        // document.body.removeChild(a);
+      }
+    },
+    async exportExcel() {
+      try {
+        // 1. 创建工作簿和工作表
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('科伦普发货单');
+        worksheet.properties.defaultRowHeight = 25; // 设置默认行高（匹配Web端行高）
+
+        // 2. 构建数据（复用原有业务数据）
+        const title = `科伦普发货单`; // 标题
+        const header1 = { // 收货单位+日期+发货单位
+          consignee: `收货单位：${this.localWaybill.consigneeUnit || ''}`,
+          date: `${this.localWaybill.deliveryYear || ''}年${this.localWaybill.deliveryMonth || ''}月${this.localWaybill.deliveryDay || ''}日`,
+          sender: `发货单位：${this.localWaybill.senderUnit || ''}`
+        };
+        const header2 = { // 负责人+订单号+合同号+车牌
+          principal: `负责人：${this.localWaybill.principal || ''}`,
+          phone: `订单号：${this.localWaybill.orderId ? this.localWaybill.orderCode : this.localWaybill.principalPhone || ''}`,
+          contract: `合同号：${this.localWaybill.contractCode || ''}`,
+          license: `车牌：${this.localWaybill.licensePlate || ''}`
+        };
+        const tableHeader = ["品名", '切边', '包装', '仓库位置', '结算', '调制度', '卷号', '规格', '材质', '重量(t)', '备注']; // 表格表头（10列）
+        const tableData = this.displayWaybillDetails.map(item => [ // 表格明细（10列）
+          item.productName || '',
+          item.edgeType || '',
+          item.packageType || '',
+          item.actualWarehouseName || '',
+          item.settlementType || '',
+          item.temperGrade || '',
+          item.coilNumber || '',
+          item.specification || '',
+          item.material || '',
+          item.weight || '',
+          // item.unitPrice || '',
+          item.remark || ''
+        ]);
+        const remark = '1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。';
+        const pickupLocation = `取货地点：${this.localWaybill.pickupLocation || ''}`;
+        const footer = { // 签名栏
+          deliveryman: `发货：${this.localWaybill.deliveryman || ''}`,
+          driver: `司机：${this.localWaybill.driver || ''}`,
+          weightRoom: `磅房：${this.localWaybill.weightRoom || ''}`
+        };
+
+        // 3. 写入数据到工作表（按行写入）
+        let rowIdx = 1; // exceljs行号从1开始
+        // 3.1 标题行（第1行）
+        const titleCell = worksheet.getCell(`A${rowIdx}`);
+        titleCell.value = title;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A1-J1（10列）
+        // 3.2 收货单位行（第2行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header1.consignee;
+        worksheet.getCell(`E${rowIdx}`).value = header1.date;
+        worksheet.getCell(`H${rowIdx}`).value = header1.sender;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 收货单位：A2-D2
+        worksheet.mergeCells(`E${rowIdx}:G${rowIdx}`); // 日期：E2-G2
+        worksheet.mergeCells(`H${rowIdx}:K${rowIdx}`); // 发货单位：H2-K2（10列）
+        // 3.3 负责人行（第3行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header2.principal;
+        worksheet.getCell(`D${rowIdx}`).value = header2.phone;
+        worksheet.getCell(`G${rowIdx}`).value = header2.contract;
+        worksheet.getCell(`I${rowIdx}`).value = header2.license;
+        worksheet.mergeCells(`A${rowIdx}:C${rowIdx}`); // 负责人：A3-C3
+        worksheet.mergeCells(`D${rowIdx}:F${rowIdx}`); // 订单号：D3-F3
+        worksheet.mergeCells(`G${rowIdx}:H${rowIdx}`); // 合同号：G3-H3
+        worksheet.mergeCells(`I${rowIdx}:K${rowIdx}`); // 车牌：I3-K3（10列）
+        // 3.4 表格表头（第4行）
+        rowIdx++;
+        tableHeader.forEach((text, colIdx) => {
+          const colLetter = String.fromCharCode(65 + colIdx); // A=65, B=66...
+          worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+        });
+        // 3.5 表格明细行
+        tableData.forEach(item => {
+          rowIdx++;
+          item.forEach((text, colIdx) => {
+            const colLetter = String.fromCharCode(65 + colIdx);
+            worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+          });
+        });
+        // 3.6 备注行
+        rowIdx++;
+        const remarkCell = worksheet.getCell(`A${rowIdx}`);
+        remarkCell.value = remark;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A*_K*（10列）
+        // 3.7 取货地点行
+        rowIdx++;
+        const pickupCell = worksheet.getCell(`A${rowIdx}`);
+        pickupCell.value = pickupLocation;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A*_K*（10列）
+        // 3.8 签名栏行
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = footer.deliveryman;
+        worksheet.getCell(`E${rowIdx}`).value = footer.driver;
+        worksheet.getCell(`H${rowIdx}`).value = footer.weightRoom;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 发货：A*_D*
+        worksheet.mergeCells(`E${rowIdx}:G${rowIdx}`); // 司机：E*_G*
+        worksheet.mergeCells(`H${rowIdx}:J${rowIdx}`); // 磅房：H*_J*（10列）
+
+        // 4. 配置列宽（完全匹配Web端，10列）
+        const columnWidths = [70, 60, 50, 90, 70, 70, 150, 90, 80, 70, 60]; // 去掉原料厂家列
+        worksheet.columns = columnWidths.map((width, idx) => ({
+          key: `col${idx + 1}`,
+          width: width / 5 // exceljs的width单位是字符宽度，转换为px（约1px=0.072字符）
+        }));
+
+        // 5. 配置样式（核心：匹配Web端）
+        // 工具函数：设置单元格样式
+        const setCellStyle = (cell, options = {}) => {
+          // 默认样式：宋体、加粗、居中
+          cell.font = {
+            name: 'SimSun', // 宋体（匹配Web端）
+            size: options.size || 16, // 默认16px（表格单元格）
+            bold: options.bold ?? true // 默认加粗
+          };
+          cell.alignment = {
+            horizontal: options.horizontal || 'left', // 水平居中
+            vertical: options.vertical || 'middle', // 垂直居中
+            wrapText: options.wrapText || false // 自动换行
+          };
+          // 边框：表格单元格带边框，其他区域无边框
+          if (options.border) {
+            cell.border = {
+              top: { style: 'thin', color: { argb: 'FF000000' } },
+              bottom: { style: 'thin', color: { argb: 'FF000000' } },
+              left: { style: 'thin', color: { argb: 'FF000000' } },
+              right: { style: 'thin', color: { argb: 'FF000000' } }
+            };
+          } else {
+            cell.border = null; // 无边框
+          }
+        };
+
+        // 5.1 标题样式（24px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell('A1'), { size: 24, border: false, horizontal: 'center' });
+        // 5.2 头部信息样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`H2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`A3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`D3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`G3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I3`), { size: 18, border: false });
+        // 5.3 表格表头样式（16px、宋体、加粗、居中、带边框）
+        for (let col = 0; col < 11; col++) { // 10列
+          const colLetter = String.fromCharCode(65 + col);
+          setCellStyle(worksheet.getCell(`${colLetter}4`), { size: 16, border: true, horizontal: 'center' });
+        }
+        // 5.4 表格明细样式（16px、宋体、加粗、居中、带边框）
+        for (let r = 5; r < rowIdx - 2; r++) { // 明细行范围：第5行到备注行前一行
+          for (let col = 0; col < 11; col++) { // 10列
+            const colLetter = String.fromCharCode(65 + col);
+            setCellStyle(worksheet.getCell(`${colLetter}${r}`), { size: 16, border: true, horizontal: 'center' });
+          }
+        }
+        // 5.5 备注样式（18px、宋体、加粗、居中、自动换行、无边框）
+        setCellStyle(remarkCell, { size: 18, border: false, wrapText: true });
+        // 5.6 取货地点样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(pickupCell, { size: 18, border: false });
+        // 5.7 签名栏样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`H${rowIdx}`), { size: 18, border: false });
+
+        // 第一行的行高
+        const row1 = worksheet.getRow(1);
+        row1.height = 50;
+
+        const row2 = worksheet.getRow(2);
+        row2.height = 40;
+
+        const row3 = worksheet.getRow(3);
+        row3.height = 40;
+        // 备注行的行高
+        const remarkRow = worksheet.getRow(12);
+        remarkRow.height = 100;
+
+        const pickupRow = worksheet.getRow(13);
+        pickupRow.height = 40;
+
+        const footerRow = worksheet.getRow(14);
+        footerRow.height = 40;
+
+        // 6. 生成Excel文件并下载
+        const buffer = await workbook.xlsx.writeBuffer(); // 生成二进制buffer
+        const blob = new Blob([buffer], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `科伦普发货单_${this.waybill.waybillNo || Date.now()}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        // 清理资源
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }, 100);
+
+      } catch (error) {
+        console.error('Excel导出失败：', error);
+        this.$message.error('导出失败，请重试');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.waybill-container {
+  width: 241mm;
+  height: 140mm;
+  margin: 0 auto;
+  padding: 0;
+  background: #fff;
+  box-shadow: none;
+  font-family: SimSun, "Courier New", monospace;
+  overflow: hidden;
+  color: #000 !important;
+  font-weight: 900 !important;
+  box-sizing: border-box;
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+.waybill-content * {
+  box-sizing: border-box;
+}
+
+/* 头部样式 */
+.waybill-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3mm;
+  font-size: 11px;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.label {
+  font-weight: bold;
+  display: inline-block;
+  width: 100px;
+  font-size: 18px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.date-label {
+  width: 1em;
+}
+
+/* 可编辑输入框样式 */
+.editable-input {
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: SimSun, serif;
+  outline: none;
+  transition: all 0.2s;
+  line-height: 18px;
+  border-bottom: 1px dashed #dcdfe6;
+}
+
+.editable-input:focus {
+  border-color: #409eff;
+}
+
+.date-input {
+  width: 40px;
+  text-align: center;
+  margin-right: 5px;
+}
+
+/* 透明输入框样式 */
+.transparent-input {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.transparent-input:focus {
+  border-bottom-color: #409eff;
+  background-color: rgba(64, 158, 255, 0.05);
+}
+
+/* 表格样式 */
+.waybill-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2mm;
+  font-size: 10px;
+  table-layout: fixed;
+}
+
+.waybill-table th,
+.waybill-table td {
+  border: 0.4px solid #000;
+  box-sizing: border-box;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 900;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 表格列宽设置 */
+.waybill-table th:nth-child(1),
+.waybill-table td:nth-child(1) {
+  width: 70px;
+  /* 品名 */
+}
+
+.waybill-table th:nth-child(2),
+.waybill-table td:nth-child(2) {
+  width: 60px;
+  /* 切边 */
+}
+
+.waybill-table th:nth-child(3),
+.waybill-table td:nth-child(3) {
+  width: 50px;
+  /* 包装 */
+}
+
+.waybill-table th:nth-child(4),
+.waybill-table td:nth-child(4) {
+  width: 90px;
+  /* 仓库位置 */
+}
+
+.waybill-table th:nth-child(5),
+.waybill-table td:nth-child(5) {
+  width: 80px;
+  /* 结算 */
+}
+
+/* 调制度 */
+.waybill-table th:nth-child(6),
+.waybill-table td:nth-child(6) {
+  width: 70px;
+}
+
+.waybill-table th:nth-child(7),
+.waybill-table td:nth-child(7) {
+  width: 150px;
+  /* 卷号 */
+}
+
+.waybill-table th:nth-child(8),
+.waybill-table td:nth-child(8) {
+  width: 90px;
+  /* 规格 */
+}
+
+.waybill-table th:nth-child(9),
+.waybill-table td:nth-child(9) {
+  width: 80px;
+  /* 材质 */
+}
+
+/* 数量（件） */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 60px;
+
+} */
+
+/* 重量（kg） */
+.waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 70px;
+
+}
+
+/* 单价 */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 50px;
+} */
+
+/* 备注 */
+.waybill-table th:nth-child(11),
+.waybill-table td:nth-child(11) {
+  /* width: 40px; */
+}
+
+
+.waybill-table th {
+  background-color: #f5f7fa;
+  font-weight: bold;
+}
+
+.waybill-table tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+/* 表格输入框样式 */
+.table-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  /* font-family: inherit; */
+  font-size: 16px;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.transparent-input {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100% !important;
+  line-height: 6mm !important;
+  vertical-align: middle !important;
+}
+
+.waybill-table th,
+.waybill-table td {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 6mm !important;
+  height: 6mm;
+  vertical-align: middle !important;
+}
+
+.waybill-table input {
+  vertical-align: middle !important;
+  height: 6mm !important;
+  line-height: 6mm !important;
+  padding: 0 2px !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.waybill-table input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border: 1px dashed #999 !important;
+}
+
+/* 无数据样式 */
+.no-data {
+  height: 200px;
+  vertical-align: middle;
+}
+
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* 表格单元格操作区 */
+.table-cell-with-action {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* 备注样式 */
+.waybill-remarks {
+  margin-bottom: 30px;
+  font-size: 18px;
+  line-height: 1.5;
+  /* font-weight: 600; */
+  font-weight: bold;
+  text-align: justify;
+}
+
+.waybill-remarks p {
+  margin: 5px 0;
+}
+
+/* 底部签名样式 */
+.waybill-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
+.waybill-pickup-location {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+
+
+.waybill-pickup-location label {
+  font-size: 18px;
+  /* margin-right: 10px; */
+  text-align: left !important;
+  width: 40px;
+}
+
+.footer-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+}
+
+.footer-item.inline {
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+}
+
+.footer-item .label {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 40px;
+}
+
+.signature-input {
+  min-width: 150px;
+}
+
+.full-input {
+  /* 占满本行的剩余空间，父容器不是flex */
+  flex: 1;
+}
+
+/* 操作按钮样式 */
+.waybill-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+/* 添加明细按钮 */
+.add-detail-btn {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 打印样式 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+
+@media print {
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 打印机通常存在不可打印区：这里右侧预留30mm安全边距，避免右侧被裁 */
+  .waybill-container {
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .waybill-content {
+    --paper-width-mm: 241;
+    /* 右侧预留约30mm不可打印区：241 - 30 = 211 */
+    --content-width-mm: 211;
+    --offset-x-mm: 0;
+    --offset-y-mm: 0;
+    --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+    width: calc(var(--paper-width-mm) * 1mm);
+    transform-origin: top left;
+    transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+  }
+
+  /* 打印时不要省略：允许换行并让行高/高度自适应 */
+  .waybill-table th,
+  .waybill-table td {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+    line-height: 1.2 !important;
+  }
+
+  .waybill-table input {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+
+  .waybill-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
+  .footer-item.inline {
+    width: 100%;
+  }
+
+  .label {
+    width: auto;
+    text-align: left;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/delivery/components/WayBillPrinter.vue b/klp-ui/src/views/wms/delivery/components/WayBillPrinter.vue
new file mode 100644
index 00000000..5e40e58e
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/WayBillPrinter.vue
@@ -0,0 +1,72 @@
+<template>
+  <component :is="printComponent" :waybill="wayBill" :waybillDetails="wayBillDetails" />
+</template>
+
+<script>
+import wayBill from './wayBill.vue';
+import wayBill2 from './wayBill2.vue';
+import ZincWayBill1 from './ZincWayBill1.vue';
+import ZincWayBill2 from './ZincWayBill2.vue';
+import DugeWayBill1 from './DugeWayBill1.vue';
+import DugeWayBill2 from './DugeWayBill2.vue';
+
+export default {
+  name: 'WayBillPrinter',
+  components: {
+    wayBill,
+    wayBill2,
+    ZincWayBill1,
+    ZincWayBill2,
+    DugeWayBill1,
+    DugeWayBill2,
+  },
+  props: {
+    wayBill: {
+      type: Object,
+      default: () => {},
+    },
+    wayBillDetails: {
+      type: Array,
+      default: () => [],
+    },
+    // 0 表示含单价的单据，1 表示不含单价的单据
+    printType: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    printComponent() {
+      if (this.wayBillDetails.length == 0) {
+        if (this.printType == 0) {
+          return 'wayBill';
+        } else {
+          return 'wayBill2';
+        }
+      } else {
+        const productName = this.wayBillDetails[0].productName;
+        if (productName.includes('锌')) {
+          if (this.printType == 0) {
+            return 'ZincWayBill1';
+          } else {
+            return 'ZincWayBill2';
+          }
+        } else if (productName.includes('铬')) {
+          if (this.printType == 0) {
+            return 'DugeWayBill1';
+          } else {
+            return 'DugeWayBill2';
+          }
+        } else {
+          // 其他商品，根据printType判断使用哪个组件
+          if (this.printType == 0) {
+            return 'wayBill';
+          } else {
+            return 'wayBill2';
+          }
+        }
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/components/ZincWayBill1.vue b/klp-ui/src/views/wms/delivery/components/ZincWayBill1.vue
new file mode 100644
index 00000000..a29d9d7d
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/ZincWayBill1.vue
@@ -0,0 +1,1153 @@
+<!-- 发货单组件 -->
+<template>
+  <div>
+    <div class="waybill-container" ref="waybillRef">
+      <div class="waybill-content">
+        <!-- 头部信息 -->
+        <!-- 标题信息 -->
+        <div class="title">科伦普发货单</div>
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">收货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
+          </div>
+          <div class="header-center">
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}
+            </div>
+            <span class="label date-label">年</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}
+            </div>
+            <span class="label date-label">月</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}
+            </div>
+            <span class="label date-label">日</span>
+          </div>
+          <div class="header-right">
+            <span class="label">发货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
+          </div>
+        </div>
+
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">负责人：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">订单号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.orderId ?
+              localWaybill.orderCode : localWaybill.principalPhone }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">合同号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
+          </div>
+          <div class="header-center">
+            <span class="label">车牌：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <table class="waybill-table">
+          <thead>
+            <tr>
+              <th>品名</th>
+              <th>切边</th>
+              <th>包装</th>
+              <th>仓库位置</th>
+              <th>结算</th>
+              <th>锌层</th>
+              <th>卷号</th>
+              <th>规格</th>
+              <th>材质</th>
+              <!-- <th>数量（件）</th> -->
+              <th>重量(t)</th>
+              <th>单价</th>
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- 无明细提示 -->
+            <!-- <tr v-if="localWaybillDetails.length === 0">
+              <td colspan="12" class="no-data">
+                <div class="no-data-content">
+                  <el-empty description="暂无发货单明细" />
+                </div>
+              </td>
+            </tr> -->
+            <!-- 明细数据 -->
+            <tr v-for="(item, index) in displayWaybillDetails" :key="index">
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.productName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.zincLayer }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.specification }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.material }}</div>
+              </td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
+                  placeholder="0.00" /></td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.remark }}</div>
+              </td>
+            </tr>
+            <!-- 加粗最后一行的线 -->
+            <tr style="height: 0;">
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+            </tr>
+          </tbody>
+        </table>
+
+
+
+        <!-- 备注说明 -->
+        <div class="waybill-remarks">
+          <p>
+            1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
+          </p>
+        </div>
+
+        <div class="waybill-pickup-location">
+          <!-- <div class="pickup-location-item inline"> -->
+          <span style="font-size: 18px; font-weight: bold;">取货地点：</span>
+          <input type="text" class="editable-input full-input transparent-input"
+            v-model="localWaybill.pickupLocation" />
+          <!-- </div> -->
+        </div>
+
+        <!-- 签名栏 -->
+        <div class="waybill-footer">
+          <!-- <div class="footer-item inline">
+          <span class="label">销售：</span>
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
+        </div> -->
+          <div class="footer-item inline">
+            <span class="label">发货：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">司机：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">磅房：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="waybill-actions">
+      <div class="waybill-pagebar">
+        <el-button size="mini" @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</el-button>
+        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
+        <el-button size="mini" @click="changePage(currentPage + 1)"
+          :disabled="currentPage >= totalPages">下一页</el-button>
+      </div>
+      <el-button type="primary" @click="saveAsImage">保存为图片</el-button>
+      <el-button type="success" @click="printWaybill">打印</el-button>
+      <el-button type="warning" @click="exportExcel">导出Excel</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import domtoimage from 'dom-to-image';
+import { PDFDocument } from 'pdf-lib';
+import html2canvas from 'html2canvas';
+import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
+
+export default {
+  props: {
+    // 组件接收完整的发货单内容, 渲染发货单,这个面板内包括一个保存为图片(已经安装了dom-to-image)和一个打印按钮(已经安装了print-js)
+    waybill: {
+      type: Object,
+      default: () => { }
+    },
+    waybillDetails: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 7,
+      totalPages: 1,
+      // 本地可编辑的发货单数据
+      localWaybill: {
+        consigneeUnit: '',
+        senderUnit: '',
+        deliveryYear: '',
+        deliveryMonth: '',
+        deliveryDay: '',
+        principal: '',
+        principalPhone: '',
+        licensePlate: '',
+        pickupLocation: ''
+      },
+      // 本地可编辑的发货单明细
+      localWaybillDetails: [],
+      // 预览/打印用明细（每页固定7行，不足补空行）
+      displayWaybillDetails: []
+    };
+  },
+  watch: {
+    // 监听props变化，更新本地数据
+    waybill: {
+      handler(newVal) {
+        if (newVal) {
+          this.localWaybill = {
+            orderId: newVal.orderId || '',
+            orderCode: newVal.orderCode || '',
+            consigneeUnit: newVal.consigneeUnit || '',
+            senderUnit: newVal.senderUnit || '',
+            deliveryYear: this.getYearFromDate(newVal.deliveryTime) || '',
+            deliveryMonth: this.getMonthFromDate(newVal.deliveryTime) || '',
+            deliveryDay: this.getDayFromDate(newVal.deliveryTime) || '',
+            principal: newVal.principal || '',
+            principalPhone: newVal.principalPhone || '',
+            licensePlate: newVal.licensePlate || '',
+            pickupLocation: newVal.pickupLocation || '',
+            contractCode: newVal.contractCode || ''
+          };
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    waybillDetails: {
+      handler(newVal) {
+        if (newVal && Array.isArray(newVal)) {
+          this.localWaybillDetails = [...newVal];
+        } else {
+          this.localWaybillDetails = [];
+        }
+        this.refreshPagination();
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    buildPage(details, page) {
+      const perPage = this.perPage;
+      const src = Array.isArray(details) ? details : [];
+      const start = (page - 1) * perPage;
+      const pageRows = src.slice(start, start + perPage).map((x) => ({ ...x }));
+      while (pageRows.length < perPage) {
+        pageRows.push({
+          productName: '',
+          edgeType: '',
+          packageType: '',
+          actualWarehouseName: '',
+          settlementType: '',
+          rawMaterialFactory: '',
+          coilNumber: '',
+          specification: '',
+          material: '',
+          quantity: '',
+          weight: '',
+          unitPrice: ''
+        });
+      }
+      return pageRows;
+    },
+    readWaybill() {
+      const file = this.$refs.file.files[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onload = (e) => {
+        const data = e.target.result;
+        const wb = XLSX.read(data, { type: 'array' });
+        const ws = wb.Sheets[wb.SheetNames[0]];
+        const json = XLSX.utils.sheet_to_eth(ws);
+        console.log(json);
+        // this.localWaybillDetails = json;
+        // this.refreshPagination();
+      };
+      reader.onerror = (e) => {
+        console.error('读取文件失败:', e);
+      };
+    },
+    refreshPagination() {
+      const src = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      this.totalPages = Math.max(1, Math.ceil(src.length / this.perPage));
+      if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
+      if (this.currentPage < 1) this.currentPage = 1;
+      this.displayWaybillDetails = this.buildPage(src, this.currentPage);
+    },
+    changePage(next) {
+      this.currentPage = next;
+      this.refreshPagination();
+    },
+    // 从日期字符串中提取年份
+    getYearFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getFullYear().toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取月份
+    getMonthFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return (date.getMonth() + 1).toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取日
+    getDayFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getDate().toString();
+      }
+      return '';
+    },
+    // 保存为图片
+    saveAsImage() {
+      const node = this.$refs.waybillRef;
+      // 确保容器在保存图片时能完整显示所有内容
+      const originalWidth = node.style.width;
+      const originalOverflow = node.style.overflow;
+
+      // 临时调整容器样式，确保所有内容可见
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 获取实际内容宽度
+      const contentWidth = node.scrollWidth;
+      const contentHeight = node.scrollHeight;
+
+      domtoimage.toPng(node, {
+        width: contentWidth,
+        height: contentHeight,
+        style: {
+          width: `${contentWidth}px`,
+          height: `${contentHeight}px`,
+          overflow: 'visible'
+        }
+      })
+        .then(dataUrl => {
+          const link = document.createElement('a');
+          link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`;
+          link.href = dataUrl;
+          link.click();
+        })
+        .catch(error => {
+          console.error('保存图片失败:', error);
+          this.$message.error('保存图片失败');
+        })
+        .finally(() => {
+          // 恢复原始样式
+          node.style.width = originalWidth;
+          node.style.overflow = originalOverflow;
+        });
+    },
+    // 打印发货单
+    async printWaybill() {
+      const node = this.$refs.waybillRef;
+      const paperWidthMm = 241;
+      const paperHeightMm = 140;
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
+
+      const mmToPx = (mm) => (mm * 96) / 25.4;
+      const mmToPt = 72 / 25.4;
+      const pageWidthPt = paperWidthMm * mmToPt;
+      const pageHeightPt = paperHeightMm * mmToPt;
+
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
+
+      const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage));
+
+      const originalPage = this.currentPage;
+      const originalDisplay = this.displayWaybillDetails;
+
+      const pdfDoc = await PDFDocument.create();
+
+      // 强制让容器内容不被裁剪，以便html2canvas完整捕获
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 针对“导出PDF再打印”的场景：为打印机右侧不可打印区预留约30mm
+      // 通过缩放内容区域（不换行、不省略），让最终PDF右侧自带留白
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
+      try {
+        for (let page = 1; page <= totalPages; page++) {
+          this.currentPage = page;
+          this.displayWaybillDetails = this.buildPage(allDetails, page);
+          await this.$nextTick();
+
+          // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
+          const canvas = await html2canvas(node, {
+            backgroundColor: '#ffffff',
+            scale: 6,
+            useCORS: true,
+            willReadFrequently: true,
+            width: pageWidthPx,
+            height: pageHeightPx,
+            windowWidth: pageWidthPx,
+            windowHeight: pageHeightPx,
+            scrollX: 0,
+            scrollY: 0
+          });
+
+          const png = canvas.toDataURL('image/png');
+          const imgPng = await pdfDoc.embedPng(png);
+          const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+          pdfPage.drawImage(imgPng, {
+            x: 0,
+            y: 0,
+            width: pageWidthPt,
+            height: pageHeightPt
+          });
+        }
+      } finally {
+        // 恢复截图前的容器样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+
+        this.currentPage = originalPage;
+        this.displayWaybillDetails = originalDisplay;
+        this.refreshPagination();
+      }
+
+      const pdfBytes = await pdfDoc.save();
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+
+      const win = window.open(url, '_blank');
+      if (!win) {
+        this.$message.error('打印失败，请检查浏览器设置');
+        // const a = document.createElement('a');
+        // a.href = url;
+        // a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`;
+        // document.body.appendChild(a);
+        // a.click();
+        // document.body.removeChild(a);
+      }
+    },
+    async exportExcel() {
+      try {
+        // 1. 创建工作簿和工作表
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('科伦普发货单');
+        worksheet.properties.defaultRowHeight = 25; // 设置默认行高（匹配Web端行高）
+
+        // 2. 构建数据（复用原有业务数据）
+        const title = `科伦普发货单`; // 标题
+        const header1 = { // 收货单位+日期+发货单位
+          consignee: `收货单位：${this.localWaybill.consigneeUnit || ''}`,
+          date: `${this.localWaybill.deliveryYear || ''}年${this.localWaybill.deliveryMonth || ''}月${this.localWaybill.deliveryDay || ''}日`,
+          sender: `发货单位：${this.localWaybill.senderUnit || ''}`
+        };
+        const header2 = { // 负责人+订单号+合同号+车牌
+          principal: `负责人：${this.localWaybill.principal || ''}`,
+          phone: `订单号：${this.localWaybill.orderId ? this.localWaybill.orderCode : this.localWaybill.principalPhone || ''}`,
+          contract: `合同号：${this.localWaybill.contractCode || ''}`,
+          license: `车牌：${this.localWaybill.licensePlate || ''}`
+        };
+        const tableHeader = ["品名", '切边', '包装', '仓库位置', '结算', '锌层', '卷号', '规格', '材质', '重量(t)', '单价', '备注']; // 表格表头
+        const tableData = this.displayWaybillDetails.map(item => [ // 表格明细
+          item.productName || '',
+          item.edgeType || '',
+          item.packageType || '',
+          item.actualWarehouseName || '',
+          item.settlementType || '',
+          item.zincLayer || '',
+          item.coilNumber || '',
+          item.specification || '',
+          item.material || '',
+          item.weight || '',
+          item.unitPrice || '',
+          item.remark || ''
+        ]);
+        const remark = '1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。';
+        const pickupLocation = `取货地点：${this.localWaybill.pickupLocation || ''}`;
+        const footer = { // 签名栏
+          deliveryman: `发货：${this.localWaybill.deliveryman || ''}`,
+          driver: `司机：${this.localWaybill.driver || ''}`,
+          weightRoom: `磅房：${this.localWaybill.weightRoom || ''}`
+        };
+
+        // 3. 写入数据到工作表（按行写入）
+        let rowIdx = 1; // exceljs行号从1开始
+        // 3.1 标题行（第1行）
+        const titleCell = worksheet.getCell(`A${rowIdx}`);
+        titleCell.value = title;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A1-L1
+        // 3.2 收货单位行（第2行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header1.consignee;
+        worksheet.getCell(`E${rowIdx}`).value = header1.date;
+        worksheet.getCell(`I${rowIdx}`).value = header1.sender;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 收货单位：A2-D2
+        worksheet.mergeCells(`E${rowIdx}:H${rowIdx}`); // 日期：E2-G2
+        worksheet.mergeCells(`I${rowIdx}:L${rowIdx}`); // 发货单位：H2-K2
+        // 3.3 负责人行（第3行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header2.principal;
+        worksheet.getCell(`D${rowIdx}`).value = header2.phone;
+        worksheet.getCell(`G${rowIdx}`).value = header2.contract;
+        worksheet.getCell(`J${rowIdx}`).value = header2.license;
+        worksheet.mergeCells(`A${rowIdx}:C${rowIdx}`); // 负责人：A3-C3
+        worksheet.mergeCells(`D${rowIdx}:F${rowIdx}`); // 订单号：D3-F3
+        worksheet.mergeCells(`G${rowIdx}:I${rowIdx}`); // 合同号：G3-I3
+        worksheet.mergeCells(`J${rowIdx}:L${rowIdx}`); // 车牌：J3-L3
+        // 3.4 表格表头（第4行）
+        rowIdx++;
+        tableHeader.forEach((text, colIdx) => {
+          const colLetter = String.fromCharCode(65 + colIdx); // A=65, B=66...
+          worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+        });
+        // 3.5 表格明细行
+        tableData.forEach(item => {
+          rowIdx++;
+          item.forEach((text, colIdx) => {
+            const colLetter = String.fromCharCode(65 + colIdx);
+            worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+          });
+        });
+        // 3.6 备注行
+        rowIdx++;
+        const remarkCell = worksheet.getCell(`A${rowIdx}`);
+        remarkCell.value = remark;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A*_L*
+        // 3.7 取货地点行
+        rowIdx++;
+        const pickupCell = worksheet.getCell(`A${rowIdx}`);
+        pickupCell.value = pickupLocation;
+        worksheet.mergeCells(`A${rowIdx}:L${rowIdx}`); // 合并A*_L*
+        // 3.8 签名栏行
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = footer.deliveryman;
+        worksheet.getCell(`E${rowIdx}`).value = footer.driver;
+        worksheet.getCell(`I${rowIdx}`).value = footer.weightRoom;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 发货：A*_D*
+        worksheet.mergeCells(`E${rowIdx}:H${rowIdx}`); // 司机：E*_H*
+        worksheet.mergeCells(`I${rowIdx}:L${rowIdx}`); // 磅房：I*_L*
+
+        // 4. 配置列宽（完全匹配Web端）
+        const columnWidths = [70, 60, 50, 90, 70, 70, 110, 90, 80, 70, 50, 60];
+        worksheet.columns = columnWidths.map((width, idx) => ({
+          key: `col${idx + 1}`,
+          width: width / 5 // exceljs的width单位是字符宽度，转换为px（约1px=0.072字符）
+        }));
+
+        // 5. 配置样式（核心：匹配Web端）
+        // 工具函数：设置单元格样式
+        const setCellStyle = (cell, options = {}) => {
+          // 默认样式：宋体、加粗、居中
+          cell.font = {
+            name: 'SimSun', // 宋体（匹配Web端）
+            size: options.size || 16, // 默认16px（表格单元格）
+            bold: options.bold ?? true // 默认加粗
+          };
+          cell.alignment = {
+            horizontal: options.horizontal || 'left', // 水平居中
+            vertical: options.vertical || 'middle', // 垂直居中
+            wrapText: options.wrapText || false // 自动换行
+          };
+          // 边框：表格单元格带边框，其他区域无边框
+          if (options.border) {
+            cell.border = {
+              top: { style: 'thin', color: { argb: 'FF000000' } },
+              bottom: { style: 'thin', color: { argb: 'FF000000' } },
+              left: { style: 'thin', color: { argb: 'FF000000' } },
+              right: { style: 'thin', color: { argb: 'FF000000' } }
+            };
+          } else {
+            cell.border = null; // 无边框
+          }
+        };
+
+        // 5.1 标题样式（24px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell('A1'), { size: 24, border: false, horizontal: 'center' });
+        // 5.2 头部信息样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`A3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`D3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`G3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`J3`), { size: 18, border: false });
+        // 5.3 表格表头样式（16px、宋体、加粗、居中、带边框）
+        for (let col = 0; col < 12; col++) {
+          const colLetter = String.fromCharCode(65 + col);
+          setCellStyle(worksheet.getCell(`${colLetter}4`), { size: 16, border: true, horizontal: 'center' });
+        }
+        // 5.4 表格明细样式（16px、宋体、加粗、居中、带边框）
+        for (let r = 5; r < rowIdx - 2; r++) { // 明细行范围：第5行到备注行前一行
+          for (let col = 0; col < 12; col++) {
+            const colLetter = String.fromCharCode(65 + col);
+            setCellStyle(worksheet.getCell(`${colLetter}${r}`), { size: 16, border: true, horizontal: 'center' });
+          }
+        }
+        // 5.5 备注样式（18px、宋体、加粗、居中、自动换行、无边框）
+        setCellStyle(remarkCell, { size: 18, border: false, wrapText: true });
+        // 5.6 取货地点样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(pickupCell, { size: 18, border: false });
+        // 5.7 签名栏样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I${rowIdx}`), { size: 18, border: false });
+
+        // 第一行的行高
+        const row1 = worksheet.getRow(1);
+        row1.height = 50;
+
+        const row2 = worksheet.getRow(2);
+        row2.height = 40;
+
+        const row3 = worksheet.getRow(3);
+        row3.height = 40;
+        // 备注行的行高
+        const remarkRow = worksheet.getRow(12);
+        remarkRow.height = 100;
+
+        const pickupRow = worksheet.getRow(13);
+        pickupRow.height = 40;
+
+        const footerRow = worksheet.getRow(14);
+        footerRow.height = 40;
+
+        // 6. 生成Excel文件并下载
+        const buffer = await workbook.xlsx.writeBuffer(); // 生成二进制buffer
+        const blob = new Blob([buffer], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `科伦普发货单_${this.waybill.waybillNo || Date.now()}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        // 清理资源
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }, 100);
+
+      } catch (error) {
+        console.error('Excel导出失败：', error);
+        this.$message.error('导出失败，请重试');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.waybill-container {
+  width: 241mm;
+  height: 140mm;
+  margin: 0 auto;
+  padding: 0;
+  background: #fff;
+  box-shadow: none;
+  font-family: SimSun, "Courier New", monospace;
+  overflow: hidden;
+  color: #000 !important;
+  font-weight: 900 !important;
+  box-sizing: border-box;
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+.waybill-content * {
+  box-sizing: border-box;
+}
+
+/* 头部样式 */
+.waybill-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3mm;
+  font-size: 11px;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.label {
+  font-weight: bold;
+  display: inline-block;
+  width: 100px;
+  font-size: 18px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.date-label {
+  width: 1em;
+}
+
+/* 可编辑输入框样式 */
+.editable-input {
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: SimSun, serif;
+  outline: none;
+  transition: all 0.2s;
+  line-height: 18px;
+  border-bottom: 1px dashed #dcdfe6;
+}
+
+.editable-input:focus {
+  border-color: #409eff;
+}
+
+.date-input {
+  width: 40px;
+  text-align: center;
+  margin-right: 5px;
+}
+
+/* 透明输入框样式 */
+.transparent-input {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.transparent-input:focus {
+  border-bottom-color: #409eff;
+  background-color: rgba(64, 158, 255, 0.05);
+}
+
+/* 表格样式 */
+.waybill-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2mm;
+  font-size: 10px;
+  table-layout: fixed;
+}
+
+.waybill-table th,
+.waybill-table td {
+  border: 0.4px solid #000;
+  box-sizing: border-box;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 900;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 表格列宽设置 */
+.waybill-table th:nth-child(1),
+.waybill-table td:nth-child(1) {
+  width: 70px;
+  /* 品名 */
+}
+
+.waybill-table th:nth-child(2),
+.waybill-table td:nth-child(2) {
+  width: 60px;
+  /* 切边 */
+}
+
+.waybill-table th:nth-child(3),
+.waybill-table td:nth-child(3) {
+  width: 50px;
+  /* 包装 */
+}
+
+.waybill-table th:nth-child(4),
+.waybill-table td:nth-child(4) {
+  width: 90px;
+  /* 仓库位置 */
+}
+
+.waybill-table th:nth-child(5),
+.waybill-table td:nth-child(5) {
+  width: 80px;
+  /* 结算 */
+}
+
+/* 锌层 */
+.waybill-table th:nth-child(6),
+.waybill-table td:nth-child(6) {
+  width: 70px;
+}
+
+.waybill-table th:nth-child(7),
+.waybill-table td:nth-child(7) {
+  width: 110px;
+  /* 卷号 */
+}
+
+.waybill-table th:nth-child(8),
+.waybill-table td:nth-child(8) {
+  width: 90px;
+  /* 规格 */
+}
+
+.waybill-table th:nth-child(9),
+.waybill-table td:nth-child(9) {
+  width: 80px;
+  /* 材质 */
+}
+
+/* 数量（件） */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 60px;
+
+} */
+
+/* 重量（kg） */
+.waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 70px;
+
+}
+
+/* 单价 */
+.waybill-table th:nth-child(11),
+.waybill-table td:nth-child(11) {
+  width: 50px;
+}
+
+/* 备注 */
+.waybill-table th:nth-child(12),
+.waybill-table td:nth-child(12) {
+  /* width: 40px; */
+}
+
+
+.waybill-table th {
+  background-color: #f5f7fa;
+  font-weight: bold;
+}
+
+.waybill-table tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+/* 表格输入框样式 */
+.table-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  /* font-family: inherit; */
+  font-size: 16px;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.transparent-input {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100% !important;
+  line-height: 6mm !important;
+  vertical-align: middle !important;
+}
+
+.waybill-table th,
+.waybill-table td {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 6mm !important;
+  height: 6mm;
+  vertical-align: middle !important;
+}
+
+.waybill-table input {
+  vertical-align: middle !important;
+  height: 6mm !important;
+  line-height: 6mm !important;
+  padding: 0 2px !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.waybill-table input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border: 1px dashed #999 !important;
+}
+
+/* 无数据样式 */
+.no-data {
+  height: 200px;
+  vertical-align: middle;
+}
+
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* 表格单元格操作区 */
+.table-cell-with-action {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* 备注样式 */
+.waybill-remarks {
+  margin-bottom: 30px;
+  font-size: 18px;
+  line-height: 1.5;
+  /* font-weight: 600; */
+  font-weight: bold;
+  text-align: justify;
+}
+
+.waybill-remarks p {
+  margin: 5px 0;
+}
+
+/* 底部签名样式 */
+.waybill-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
+.waybill-pickup-location {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+
+
+.waybill-pickup-location label {
+  font-size: 18px;
+  /* margin-right: 10px; */
+  text-align: left !important;
+  width: 40px;
+}
+
+.footer-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+}
+
+.footer-item.inline {
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+}
+
+.footer-item .label {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 40px;
+}
+
+.signature-input {
+  min-width: 150px;
+}
+
+.full-input {
+  /* 占满本行的剩余空间，父容器不是flex */
+  flex: 1;
+}
+
+/* 操作按钮样式 */
+.waybill-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+/* 添加明细按钮 */
+.add-detail-btn {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 打印样式 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+
+@media print {
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 打印机通常存在不可打印区：这里右侧预留30mm安全边距，避免右侧被裁 */
+  .waybill-container {
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .waybill-content {
+    --paper-width-mm: 241;
+    /* 右侧预留约30mm不可打印区：241 - 30 = 211 */
+    --content-width-mm: 211;
+    --offset-x-mm: 0;
+    --offset-y-mm: 0;
+    --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+    width: calc(var(--paper-width-mm) * 1mm);
+    transform-origin: top left;
+    transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+  }
+
+  /* 打印时不要省略：允许换行并让行高/高度自适应 */
+  .waybill-table th,
+  .waybill-table td {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+    line-height: 1.2 !important;
+  }
+
+  .waybill-table input {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+
+  .waybill-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
+  .footer-item.inline {
+    width: 100%;
+  }
+
+  .label {
+    width: auto;
+    text-align: left;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/delivery/components/ZincWayBill2.vue b/klp-ui/src/views/wms/delivery/components/ZincWayBill2.vue
new file mode 100644
index 00000000..2c97fe3c
--- /dev/null
+++ b/klp-ui/src/views/wms/delivery/components/ZincWayBill2.vue
@@ -0,0 +1,1151 @@
+<!-- 发货单组件 -->
+<template>
+  <div>
+    <div class="waybill-container" ref="waybillRef">
+      <div class="waybill-content">
+        <!-- 头部信息 -->
+        <!-- 标题信息 -->
+        <div class="title">科伦普发货单</div>
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">收货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.consigneeUnit }}</div>
+          </div>
+          <div class="header-center">
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryYear }}
+            </div>
+            <span class="label date-label">年</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryMonth }}
+            </div>
+            <span class="label date-label">月</span>
+            <div class="editable-input date-input transparent-input" contenteditable>{{ localWaybill.deliveryDay }}
+            </div>
+            <span class="label date-label">日</span>
+          </div>
+          <div class="header-right">
+            <span class="label">发货单位：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.senderUnit }}</div>
+          </div>
+        </div>
+
+        <div class="waybill-header">
+          <div class="header-left">
+            <span class="label">负责人：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.principal }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">订单号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.orderId ? localWaybill.orderCode : localWaybill.principalPhone }}</div>
+          </div>
+          <div class="header-right">
+            <span class="label">合同号：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.contractCode }}</div>
+          </div>
+          <div class="header-center">
+            <span class="label">车牌：</span>
+            <div class="editable-input transparent-input" contenteditable>{{ localWaybill.licensePlate }}</div>
+          </div>
+        </div>
+
+        <!-- 表格 -->
+        <table class="waybill-table">
+          <thead>
+            <tr>
+              <th>品名</th>
+              <th>切边</th>
+              <th>包装</th>
+              <th>仓库位置</th>
+              <th>结算</th>
+              <th>锌层</th>
+              <th>卷号</th>
+              <th>规格</th>
+              <th>材质</th>
+              <!-- <th>数量（件）</th> -->
+              <th>重量(t)</th>
+              <!-- <th>单价</th> -->
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- 无明细提示 -->
+            <!-- <tr v-if="localWaybillDetails.length === 0">
+              <td colspan="12" class="no-data">
+                <div class="no-data-content">
+                  <el-empty description="暂无发货单明细" />
+                </div>
+              </td>
+            </tr> -->
+            <!-- 明细数据 -->
+            <tr v-for="(item, index) in displayWaybillDetails" :key="index">
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.productName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.edgeType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.packageType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.actualWarehouseName }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.settlementType }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.zincLayer }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.coilNumber }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.specification }}</div>
+              </td>
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.material }}</div>
+              </td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
+                  placeholder="0.00" /></td>
+              <!-- <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.unitPrice }}</div>
+              </td> -->
+              <td>
+                <div class="table-input transparent-input" contenteditable>{{ item.remark }}</div>
+              </td>
+            </tr>
+            <!-- 加粗最后一行的线 -->
+            <tr style="height: 0;">
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+              <!-- <td><input type="number" class="table-input transparent-input" v-model.number="item.quantity"
+                placeholder="0" /></td> -->
+              <td style="height: 0;"></td>
+              <td style="height: 0;"></td>
+            </tr>
+          </tbody>
+        </table>
+
+
+
+        <!-- 备注说明 -->
+        <div class="waybill-remarks">
+          <p>
+            1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
+          </p>
+        </div>
+
+        <div class="waybill-pickup-location">
+          <!-- <div class="pickup-location-item inline"> -->
+          <span style="font-size: 18px; font-weight: bold;">取货地点：</span>
+          <input type="text" class="editable-input full-input transparent-input"
+            v-model="localWaybill.pickupLocation" />
+          <!-- </div> -->
+        </div>
+
+        <!-- 签名栏 -->
+        <div class="waybill-footer">
+          <!-- <div class="footer-item inline">
+          <span class="label">销售：</span>
+          <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.salesman }}</div>
+        </div> -->
+          <div class="footer-item inline">
+            <span class="label">发货：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.deliveryman }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">司机：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.driver }}
+            </div>
+          </div>
+          <div class="footer-item inline">
+            <span class="label">磅房：</span>
+            <div class="editable-input signature-input transparent-input" contenteditable>{{ localWaybill.weightRoom }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="waybill-actions">
+      <div class="waybill-pagebar">
+        <el-button size="mini" @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</el-button>
+        <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
+        <el-button size="mini" @click="changePage(currentPage + 1)"
+          :disabled="currentPage >= totalPages">下一页</el-button>
+      </div>
+      <el-button type="primary" @click="saveAsImage">保存为图片</el-button>
+      <el-button type="success" @click="printWaybill">打印</el-button>
+      <el-button type="warning" @click="exportExcel">导出Excel</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import domtoimage from 'dom-to-image';
+import { PDFDocument } from 'pdf-lib';
+import html2canvas from 'html2canvas';
+import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
+
+export default {
+  props: {
+    // 组件接收完整的发货单内容, 渲染发货单,这个面板内包括一个保存为图片(已经安装了dom-to-image)和一个打印按钮(已经安装了print-js)
+    waybill: {
+      type: Object,
+      default: () => { }
+    },
+    waybillDetails: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      perPage: 7,
+      totalPages: 1,
+      // 本地可编辑的发货单数据
+      localWaybill: {
+        consigneeUnit: '',
+        senderUnit: '',
+        deliveryYear: '',
+        deliveryMonth: '',
+        deliveryDay: '',
+        principal: '',
+        principalPhone: '',
+        licensePlate: '',
+        pickupLocation: ''
+      },
+      // 本地可编辑的发货单明细
+      localWaybillDetails: [],
+      // 预览/打印用明细（每页固定7行，不足补空行）
+      displayWaybillDetails: []
+    };
+  },
+  watch: {
+    // 监听props变化，更新本地数据
+    waybill: {
+      handler(newVal) {
+        if (newVal) {
+          this.localWaybill = {
+            orderId: newVal.orderId || '',
+            orderCode: newVal.orderCode || '',
+            consigneeUnit: newVal.consigneeUnit || '',
+            senderUnit: newVal.senderUnit || '',
+            deliveryYear: this.getYearFromDate(newVal.deliveryTime) || '',
+            deliveryMonth: this.getMonthFromDate(newVal.deliveryTime) || '',
+            deliveryDay: this.getDayFromDate(newVal.deliveryTime) || '',
+            principal: newVal.principal || '',
+            principalPhone: newVal.principalPhone || '',
+            licensePlate: newVal.licensePlate || '',
+            pickupLocation: newVal.pickupLocation || '',
+            contractCode: newVal.contractCode || ''
+          };
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    waybillDetails: {
+      handler(newVal) {
+        if (newVal && Array.isArray(newVal)) {
+          this.localWaybillDetails = [...newVal];
+        } else {
+          this.localWaybillDetails = [];
+        }
+        this.refreshPagination();
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  methods: {
+    buildPage(details, page) {
+      const perPage = this.perPage;
+      const src = Array.isArray(details) ? details : [];
+      const start = (page - 1) * perPage;
+      const pageRows = src.slice(start, start + perPage).map((x) => ({ ...x }));
+      while (pageRows.length < perPage) {
+        pageRows.push({
+          productName: '',
+          edgeType: '',
+          packageType: '',
+          actualWarehouseName: '',
+          settlementType: '',
+          rawMaterialFactory: '',
+          coilNumber: '',
+          specification: '',
+          material: '',
+          quantity: '',
+          weight: '',
+          unitPrice: ''
+        });
+      }
+      return pageRows;
+    },
+    readWaybill() {
+      const file = this.$refs.file.files[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(file);
+      reader.onload = (e) => {
+        const data = e.target.result;
+        const wb = XLSX.read(data, { type: 'array' });
+        const ws = wb.Sheets[wb.SheetNames[0]];
+        const json = XLSX.utils.sheet_to_eth(ws);
+        console.log(json);
+        // this.localWaybillDetails = json;
+        // this.refreshPagination();
+      };
+      reader.onerror = (e) => {
+        console.error('读取文件失败:', e);
+      };
+    },
+    refreshPagination() {
+      const src = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      this.totalPages = Math.max(1, Math.ceil(src.length / this.perPage));
+      if (this.currentPage > this.totalPages) this.currentPage = this.totalPages;
+      if (this.currentPage < 1) this.currentPage = 1;
+      this.displayWaybillDetails = this.buildPage(src, this.currentPage);
+    },
+    changePage(next) {
+      this.currentPage = next;
+      this.refreshPagination();
+    },
+    // 从日期字符串中提取年份
+    getYearFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getFullYear().toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取月份
+    getMonthFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return (date.getMonth() + 1).toString();
+      }
+      return '';
+    },
+    // 从日期字符串中提取日
+    getDayFromDate(dateStr) {
+      if (dateStr) {
+        const date = new Date(dateStr);
+        return date.getDate().toString();
+      }
+      return '';
+    },
+    // 保存为图片
+    saveAsImage() {
+      const node = this.$refs.waybillRef;
+      // 确保容器在保存图片时能完整显示所有内容
+      const originalWidth = node.style.width;
+      const originalOverflow = node.style.overflow;
+
+      // 临时调整容器样式，确保所有内容可见
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 获取实际内容宽度
+      const contentWidth = node.scrollWidth;
+      const contentHeight = node.scrollHeight;
+
+      domtoimage.toPng(node, {
+        width: contentWidth,
+        height: contentHeight,
+        style: {
+          width: `${contentWidth}px`,
+          height: `${contentHeight}px`,
+          overflow: 'visible'
+        }
+      })
+        .then(dataUrl => {
+          const link = document.createElement('a');
+          link.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || Date.now()}.png`;
+          link.href = dataUrl;
+          link.click();
+        })
+        .catch(error => {
+          console.error('保存图片失败:', error);
+          this.$message.error('保存图片失败');
+        })
+        .finally(() => {
+          // 恢复原始样式
+          node.style.width = originalWidth;
+          node.style.overflow = originalOverflow;
+        });
+    },
+    // 打印发货单
+    async printWaybill() {
+      const node = this.$refs.waybillRef;
+      const paperWidthMm = 241;
+      const paperHeightMm = 140;
+      const safeRightMarginMm = 45;
+      const safeLeftPaddingMm = 6;
+      const safeTopShiftMm = 15;
+      const safeContentWidthMm = paperWidthMm - safeRightMarginMm - safeLeftPaddingMm;
+
+      const mmToPx = (mm) => (mm * 96) / 25.4;
+      const mmToPt = 72 / 25.4;
+      const pageWidthPt = paperWidthMm * mmToPt;
+      const pageHeightPt = paperHeightMm * mmToPt;
+
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
+
+      const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
+      const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage));
+
+      const originalPage = this.currentPage;
+      const originalDisplay = this.displayWaybillDetails;
+
+      const pdfDoc = await PDFDocument.create();
+
+      // 强制让容器内容不被裁剪，以便html2canvas完整捕获
+      const originalStyle = { width: node.style.width, overflow: node.style.overflow };
+      const contentEl = node.querySelector('.waybill-content');
+      const originalContentCssText = contentEl ? contentEl.style.cssText : '';
+
+      node.style.width = 'auto';
+      node.style.overflow = 'visible';
+
+      // 针对“导出PDF再打印”的场景：为打印机右侧不可打印区预留约30mm
+      // 通过缩放内容区域（不换行、不省略），让最终PDF右侧自带留白
+      if (contentEl) {
+        contentEl.style.setProperty('--content-width-mm', String(safeContentWidthMm));
+        contentEl.style.setProperty('--offset-x-mm', String(safeLeftPaddingMm));
+        contentEl.style.setProperty('--offset-y-mm', String(safeTopShiftMm));
+      }
+
+      try {
+        for (let page = 1; page <= totalPages; page++) {
+          this.currentPage = page;
+          this.displayWaybillDetails = this.buildPage(allDetails, page);
+          await this.$nextTick();
+
+          // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
+          const canvas = await html2canvas(node, {
+            backgroundColor: '#ffffff',
+            scale: 6,
+            useCORS: true,
+            willReadFrequently: true,
+            width: pageWidthPx,
+            height: pageHeightPx,
+            windowWidth: pageWidthPx,
+            windowHeight: pageHeightPx,
+            scrollX: 0,
+            scrollY: 0
+          });
+
+          const png = canvas.toDataURL('image/png');
+          const imgPng = await pdfDoc.embedPng(png);
+          const pdfPage = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
+          pdfPage.drawImage(imgPng, {
+            x: 0,
+            y: 0,
+            width: pageWidthPt,
+            height: pageHeightPt
+          });
+        }
+      } finally {
+        // 恢复截图前的容器样式
+        node.style.width = originalStyle.width;
+        node.style.overflow = originalStyle.overflow;
+        if (contentEl) contentEl.style.cssText = originalContentCssText;
+
+        this.currentPage = originalPage;
+        this.displayWaybillDetails = originalDisplay;
+        this.refreshPagination();
+      }
+
+      const pdfBytes = await pdfDoc.save();
+      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+      const url = URL.createObjectURL(blob);
+
+      const win = window.open(url, '_blank');
+      if (!win) {
+        this.$message.error('打印失败，请检查浏览器设置');
+        // const a = document.createElement('a');
+        // a.href = url;
+        // a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`;
+        // document.body.appendChild(a);
+        // a.click();
+        // document.body.removeChild(a);
+      }
+    },
+    async exportExcel() {
+      try {
+        // 1. 创建工作簿和工作表
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet('科伦普发货单');
+        worksheet.properties.defaultRowHeight = 25; // 设置默认行高（匹配Web端行高）
+
+        // 2. 构建数据（复用原有业务数据）
+        const title = `科伦普发货单`; // 标题
+        const header1 = { // 收货单位+日期+发货单位
+          consignee: `收货单位：${this.localWaybill.consigneeUnit || ''}`,
+          date: `${this.localWaybill.deliveryYear || ''}年${this.localWaybill.deliveryMonth || ''}月${this.localWaybill.deliveryDay || ''}日`,
+          sender: `发货单位：${this.localWaybill.senderUnit || ''}`
+        };
+        const header2 = { // 负责人+订单号+合同号+车牌
+          principal: `负责人：${this.localWaybill.principal || ''}`,
+          phone: `订单号：${this.localWaybill.orderId ? this.localWaybill.orderCode : this.localWaybill.principalPhone || ''}`,
+          contract: `合同号：${this.localWaybill.contractCode || ''}`,
+          license: `车牌：${this.localWaybill.licensePlate || ''}`
+        };
+        const tableHeader = ["品名", '切边', '包装', '仓库位置', '结算', '锌层', '卷号', '规格', '材质', '重量(t)', '备注']; // 表格表头（10列）
+        const tableData = this.displayWaybillDetails.map(item => [ // 表格明细（10列）
+          item.productName || '',
+          item.edgeType || '',
+          item.packageType || '',
+          item.actualWarehouseName || '',
+          item.settlementType || '',
+          item.zincLayer || '',
+          item.coilNumber || '',
+          item.specification || '',
+          item.material || '',
+          item.weight || '',
+          // item.unitPrice || '',
+          item.remark || ''
+        ]);
+        const remark = '1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。';
+        const pickupLocation = `取货地点：${this.localWaybill.pickupLocation || ''}`;
+        const footer = { // 签名栏
+          deliveryman: `发货：${this.localWaybill.deliveryman || ''}`,
+          driver: `司机：${this.localWaybill.driver || ''}`,
+          weightRoom: `磅房：${this.localWaybill.weightRoom || ''}`
+        };
+
+        // 3. 写入数据到工作表（按行写入）
+        let rowIdx = 1; // exceljs行号从1开始
+        // 3.1 标题行（第1行）
+        const titleCell = worksheet.getCell(`A${rowIdx}`);
+        titleCell.value = title;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A1-J1（10列）
+        // 3.2 收货单位行（第2行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header1.consignee;
+        worksheet.getCell(`E${rowIdx}`).value = header1.date;
+        worksheet.getCell(`H${rowIdx}`).value = header1.sender;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 收货单位：A2-D2
+        worksheet.mergeCells(`E${rowIdx}:G${rowIdx}`); // 日期：E2-G2
+        worksheet.mergeCells(`H${rowIdx}:K${rowIdx}`); // 发货单位：H2-K2（10列）
+        // 3.3 负责人行（第3行）
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = header2.principal;
+        worksheet.getCell(`D${rowIdx}`).value = header2.phone;
+        worksheet.getCell(`G${rowIdx}`).value = header2.contract;
+        worksheet.getCell(`I${rowIdx}`).value = header2.license;
+        worksheet.mergeCells(`A${rowIdx}:C${rowIdx}`); // 负责人：A3-C3
+        worksheet.mergeCells(`D${rowIdx}:F${rowIdx}`); // 订单号：D3-F3
+        worksheet.mergeCells(`G${rowIdx}:H${rowIdx}`); // 合同号：G3-H3
+        worksheet.mergeCells(`I${rowIdx}:K${rowIdx}`); // 车牌：I3-K3（10列）
+        // 3.4 表格表头（第4行）
+        rowIdx++;
+        tableHeader.forEach((text, colIdx) => {
+          const colLetter = String.fromCharCode(65 + colIdx); // A=65, B=66...
+          worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+        });
+        // 3.5 表格明细行
+        tableData.forEach(item => {
+          rowIdx++;
+          item.forEach((text, colIdx) => {
+            const colLetter = String.fromCharCode(65 + colIdx);
+            worksheet.getCell(`${colLetter}${rowIdx}`).value = text;
+          });
+        });
+        // 3.6 备注行
+        rowIdx++;
+        const remarkCell = worksheet.getCell(`A${rowIdx}`);
+        remarkCell.value = remark;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A*_K*（10列）
+        // 3.7 取货地点行
+        rowIdx++;
+        const pickupCell = worksheet.getCell(`A${rowIdx}`);
+        pickupCell.value = pickupLocation;
+        worksheet.mergeCells(`A${rowIdx}:K${rowIdx}`); // 合并A*_K*（10列）
+        // 3.8 签名栏行
+        rowIdx++;
+        worksheet.getCell(`A${rowIdx}`).value = footer.deliveryman;
+        worksheet.getCell(`E${rowIdx}`).value = footer.driver;
+        worksheet.getCell(`H${rowIdx}`).value = footer.weightRoom;
+        worksheet.mergeCells(`A${rowIdx}:D${rowIdx}`); // 发货：A*_D*
+        worksheet.mergeCells(`E${rowIdx}:G${rowIdx}`); // 司机：E*_G*
+        worksheet.mergeCells(`H${rowIdx}:J${rowIdx}`); // 磅房：H*_J*（10列）
+
+        // 4. 配置列宽（完全匹配Web端，10列）
+        const columnWidths = [70, 60, 50, 90, 70, 70, 150, 90, 80, 70, 60]; // 去掉原料厂家列
+        worksheet.columns = columnWidths.map((width, idx) => ({
+          key: `col${idx + 1}`,
+          width: width / 5 // exceljs的width单位是字符宽度，转换为px（约1px=0.072字符）
+        }));
+
+        // 5. 配置样式（核心：匹配Web端）
+        // 工具函数：设置单元格样式
+        const setCellStyle = (cell, options = {}) => {
+          // 默认样式：宋体、加粗、居中
+          cell.font = {
+            name: 'SimSun', // 宋体（匹配Web端）
+            size: options.size || 16, // 默认16px（表格单元格）
+            bold: options.bold ?? true // 默认加粗
+          };
+          cell.alignment = {
+            horizontal: options.horizontal || 'left', // 水平居中
+            vertical: options.vertical || 'middle', // 垂直居中
+            wrapText: options.wrapText || false // 自动换行
+          };
+          // 边框：表格单元格带边框，其他区域无边框
+          if (options.border) {
+            cell.border = {
+              top: { style: 'thin', color: { argb: 'FF000000' } },
+              bottom: { style: 'thin', color: { argb: 'FF000000' } },
+              left: { style: 'thin', color: { argb: 'FF000000' } },
+              right: { style: 'thin', color: { argb: 'FF000000' } }
+            };
+          } else {
+            cell.border = null; // 无边框
+          }
+        };
+
+        // 5.1 标题样式（24px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell('A1'), { size: 24, border: false, horizontal: 'center' });
+        // 5.2 头部信息样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`H2`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`A3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`D3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`G3`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`I3`), { size: 18, border: false });
+        // 5.3 表格表头样式（16px、宋体、加粗、居中、带边框）
+        for (let col = 0; col < 11; col++) { // 10列
+          const colLetter = String.fromCharCode(65 + col);
+          setCellStyle(worksheet.getCell(`${colLetter}4`), { size: 16, border: true, horizontal: 'center' });
+        }
+        // 5.4 表格明细样式（16px、宋体、加粗、居中、带边框）
+        for (let r = 5; r < rowIdx - 2; r++) { // 明细行范围：第5行到备注行前一行
+          for (let col = 0; col < 11; col++) { // 10列
+            const colLetter = String.fromCharCode(65 + col);
+            setCellStyle(worksheet.getCell(`${colLetter}${r}`), { size: 16, border: true, horizontal: 'center' });
+          }
+        }
+        // 5.5 备注样式（18px、宋体、加粗、居中、自动换行、无边框）
+        setCellStyle(remarkCell, { size: 18, border: false, wrapText: true });
+        // 5.6 取货地点样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(pickupCell, { size: 18, border: false });
+        // 5.7 签名栏样式（18px、宋体、加粗、居中、无边框）
+        setCellStyle(worksheet.getCell(`A${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`E${rowIdx}`), { size: 18, border: false });
+        setCellStyle(worksheet.getCell(`H${rowIdx}`), { size: 18, border: false });
+
+        // 第一行的行高
+        const row1 = worksheet.getRow(1);
+        row1.height = 50;
+
+        const row2 = worksheet.getRow(2);
+        row2.height = 40;
+
+        const row3 = worksheet.getRow(3);
+        row3.height = 40;
+        // 备注行的行高
+        const remarkRow = worksheet.getRow(12);
+        remarkRow.height = 100;
+
+        const pickupRow = worksheet.getRow(13);
+        pickupRow.height = 40;
+
+        const footerRow = worksheet.getRow(14);
+        footerRow.height = 40;
+
+        // 6. 生成Excel文件并下载
+        const buffer = await workbook.xlsx.writeBuffer(); // 生成二进制buffer
+        const blob = new Blob([buffer], {
+          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `科伦普发货单_${this.waybill.waybillNo || Date.now()}.xlsx`;
+        document.body.appendChild(link);
+        link.click();
+        // 清理资源
+        setTimeout(() => {
+          document.body.removeChild(link);
+          URL.revokeObjectURL(url);
+        }, 100);
+
+      } catch (error) {
+        console.error('Excel导出失败：', error);
+        this.$message.error('导出失败，请重试');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.waybill-container {
+  width: 241mm;
+  height: 140mm;
+  margin: 0 auto;
+  padding: 0;
+  background: #fff;
+  box-shadow: none;
+  font-family: SimSun, "Courier New", monospace;
+  overflow: hidden;
+  color: #000 !important;
+  font-weight: 900 !important;
+  box-sizing: border-box;
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.waybill-content {
+  --paper-width-mm: 241;
+  --content-width-mm: 241;
+  --offset-x-mm: 0;
+  --offset-y-mm: 0;
+  --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+  width: calc(var(--paper-width-mm) * 1mm);
+  transform-origin: top left;
+  transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+}
+
+.waybill-content * {
+  box-sizing: border-box;
+}
+
+/* 头部样式 */
+.waybill-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 3mm;
+  font-size: 11px;
+}
+
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.label {
+  font-weight: bold;
+  display: inline-block;
+  width: 100px;
+  font-size: 18px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.date-label {
+  width: 1em;
+}
+
+/* 可编辑输入框样式 */
+.editable-input {
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 18px;
+  font-weight: bold;
+  font-family: SimSun, serif;
+  outline: none;
+  transition: all 0.2s;
+  line-height: 18px;
+  border-bottom: 1px dashed #dcdfe6;
+}
+
+.editable-input:focus {
+  border-color: #409eff;
+}
+
+.date-input {
+  width: 40px;
+  text-align: center;
+  margin-right: 5px;
+}
+
+/* 透明输入框样式 */
+.transparent-input {
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.transparent-input:focus {
+  border-bottom-color: #409eff;
+  background-color: rgba(64, 158, 255, 0.05);
+}
+
+/* 表格样式 */
+.waybill-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2mm;
+  font-size: 10px;
+  table-layout: fixed;
+}
+
+.waybill-table th,
+.waybill-table td {
+  border: 0.4px solid #000;
+  box-sizing: border-box;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 900;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 表格列宽设置 */
+.waybill-table th:nth-child(1),
+.waybill-table td:nth-child(1) {
+  width: 70px;
+  /* 品名 */
+}
+
+.waybill-table th:nth-child(2),
+.waybill-table td:nth-child(2) {
+  width: 60px;
+  /* 切边 */
+}
+
+.waybill-table th:nth-child(3),
+.waybill-table td:nth-child(3) {
+  width: 50px;
+  /* 包装 */
+}
+
+.waybill-table th:nth-child(4),
+.waybill-table td:nth-child(4) {
+  width: 90px;
+  /* 仓库位置 */
+}
+
+.waybill-table th:nth-child(5),
+.waybill-table td:nth-child(5) {
+  width: 80px;
+  /* 结算 */
+}
+
+/* 锌层 */
+.waybill-table th:nth-child(6),
+.waybill-table td:nth-child(6) {
+  width: 70px;
+}
+
+.waybill-table th:nth-child(7),
+.waybill-table td:nth-child(7) {
+  width: 150px;
+  /* 卷号 */
+}
+
+.waybill-table th:nth-child(8),
+.waybill-table td:nth-child(8) {
+  width: 90px;
+  /* 规格 */
+}
+
+.waybill-table th:nth-child(9),
+.waybill-table td:nth-child(9) {
+  width: 80px;
+  /* 材质 */
+}
+
+/* 数量（件） */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 60px;
+
+} */
+
+/* 重量（kg） */
+.waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 70px;
+
+}
+
+/* 单价 */
+/* .waybill-table th:nth-child(10),
+.waybill-table td:nth-child(10) {
+  width: 50px;
+} */
+
+/* 备注 */
+.waybill-table th:nth-child(11),
+.waybill-table td:nth-child(11) {
+  /* width: 40px; */
+}
+
+
+.waybill-table th {
+  background-color: #f5f7fa;
+  font-weight: bold;
+}
+
+.waybill-table tr:nth-child(even) {
+  background-color: #fafafa;
+}
+
+/* 表格输入框样式 */
+.table-input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  /* font-family: inherit; */
+  font-size: 16px;
+  line-height: 6mm;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.transparent-input {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: 100% !important;
+  line-height: 6mm !important;
+  vertical-align: middle !important;
+}
+
+.waybill-table th,
+.waybill-table td {
+  padding: 0 !important;
+  margin: 0 !important;
+  line-height: 6mm !important;
+  height: 6mm;
+  vertical-align: middle !important;
+}
+
+.waybill-table input {
+  vertical-align: middle !important;
+  height: 6mm !important;
+  line-height: 6mm !important;
+  padding: 0 2px !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.waybill-table input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border: 1px dashed #999 !important;
+}
+
+/* 无数据样式 */
+.no-data {
+  height: 200px;
+  vertical-align: middle;
+}
+
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+/* 表格单元格操作区 */
+.table-cell-with-action {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+/* 备注样式 */
+.waybill-remarks {
+  margin-bottom: 30px;
+  font-size: 18px;
+  line-height: 1.5;
+  /* font-weight: 600; */
+  font-weight: bold;
+  text-align: justify;
+}
+
+.waybill-remarks p {
+  margin: 5px 0;
+}
+
+/* 底部签名样式 */
+.waybill-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 18px;
+}
+
+.waybill-pickup-location {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+
+
+
+.waybill-pickup-location label {
+  font-size: 18px;
+  /* margin-right: 10px; */
+  text-align: left !important;
+  width: 40px;
+}
+
+.footer-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+}
+
+.footer-item.inline {
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+}
+
+.footer-item .label {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 40px;
+}
+
+.signature-input {
+  min-width: 150px;
+}
+
+.full-input {
+  /* 占满本行的剩余空间，父容器不是flex */
+  flex: 1;
+}
+
+/* 操作按钮样式 */
+.waybill-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+/* 添加明细按钮 */
+.add-detail-btn {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+/* 打印样式 */
+@page {
+  size: 241mm 140mm;
+  margin: 0;
+}
+
+@media print {
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* 打印机通常存在不可打印区：这里右侧预留30mm安全边距，避免右侧被裁 */
+  .waybill-container {
+    width: 241mm;
+    height: 140mm;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .waybill-content {
+    --paper-width-mm: 241;
+    /* 右侧预留约30mm不可打印区：241 - 30 = 211 */
+    --content-width-mm: 211;
+    --offset-x-mm: 0;
+    --offset-y-mm: 0;
+    --scale: calc(var(--content-width-mm) / var(--paper-width-mm));
+
+    width: calc(var(--paper-width-mm) * 1mm);
+    transform-origin: top left;
+    transform: translate(calc(var(--offset-x-mm) * 1mm), calc(var(--offset-y-mm) * 1mm)) scale(var(--scale));
+  }
+
+  /* 打印时不要省略：允许换行并让行高/高度自适应 */
+  .waybill-table th,
+  .waybill-table td {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    height: auto !important;
+    line-height: 1.2 !important;
+  }
+
+  .waybill-table input {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+  }
+
+  .waybill-footer {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+
+  .footer-item.inline {
+    width: 100%;
+  }
+
+  .label {
+    width: auto;
+    text-align: left;
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index c90d603f..c93c8df2 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -230,8 +230,9 @@
 
     <!-- 打印发货单对话框 -->
     <el-dialog title="打印发货单" :visible.sync="printDialogVisible" width="1000px" append-to-body center>
-      <WayBill v-if="printType === 0" :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
-      <WayBill2 v-else :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
+      <!-- <WayBill v-if="printType === 0" :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
+      <WayBill2 v-else :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" /> -->
+      <WayBillPrinter :wayBill="currentWaybill" :wayBillDetails="currentWaybillDetails" :printType="printType" />
     </el-dialog>
   </div>
 </template>
@@ -245,20 +246,22 @@ import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
 import { listOrder } from "@/api/crm/order";
 import MemoInput from "@/components/MemoInput";
 import DeliveryWaybillDetail from "../components/detailTable.vue";
-import WayBill from "../components/wayBill.vue";
+// import WayBill from "../components/wayBill.vue";
 import PlanList from "../components/planList.vue";
-import WayBill2 from "../components/wayBill2.vue";
+// import WayBill2 from "../components/wayBill2.vue";
 import PlanSelector from "../components/planSelector.vue";
 import DragResizePanel from "@/components/DragResizePanel";
+import WayBillPrinter from "../components/WayBillPrinter.vue";
 
 export default {
   name: "Exp-Waybill",
   components: {
     MemoInput,
     DeliveryWaybillDetail,
-    WayBill,
+    WayBillPrinter,
+    // WayBill,
     PlanList,
-    WayBill2,
+    // WayBill2,
     PlanSelector,
     DragResizePanel
   },
@@ -693,9 +696,14 @@ export default {
             };
             this.currentWaybillDetails = this.currentWaybillDetails.map(item => {
               const actualWarehouseName = response.rows.find(detail => detail.coilId === item.coilId)?.actualWarehouseName || '';
+              const zincLayer = response.rows.find(detail => detail.coilId === item.coilId)?.zincLayer || '';
+              const temperGrade = response.rows.find(detail => detail.coilId === item.coilId)?.temperGrade || '';
+              console.log(zincLayer, temperGrade, actualWahouseNames);
               return {
                 ...item,
                 actualWarehouseName: actualWarehouseName,
+                zincLayer: zincLayer || '', 
+                temperGrade: temperGrade || '',
               };
             });
           });