打印出货单修改

klp-admin/src/main/resources/application-dev.yml

@@ -76,13 +76,22 @@ spring:
           username: klp
           password: KeLunPu@123
         # 从库数据源
-        slave:
+        acid:
           lazy: true
           type: ${spring.datasource.type}
           driverClassName: com.mysql.cj.jdbc.Driver
           url: jdbc:mysql://140.143.206.120:13306/klp_pocketfactory?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true
           username: klp
           password: KeLunPu@123
+
+        # 从库数据源（镀锌一库）
+        galvanize1:
+          lazy: true
+          type: ${spring.datasource.type}
+          driverClassName: com.mysql.cj.jdbc.Driver
+          url: jdbc:mysql://140.143.206.120:3306/cgldb?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true
+          username: klp
+          password: KeLunPu123@
 #        oracle:
 #          type: ${spring.datasource.type}
 #          driverClassName: oracle.jdbc.OracleDriver

klp-ui/src/views/wms/delivery/components/wayBill.vue

@@ -53,20 +53,20 @@
             <th>数量（件）</th>
             <th>重量（T）</th>
             <th>单价</th>
-            <th>备注</th>
+
           </tr>
         </thead>
         <tbody>
           <!-- 无明细提示 -->
           <tr v-if="localWaybillDetails.length === 0">
-            <td colspan="13" class="no-data">
+            <td colspan="12" class="no-data">
               <div class="no-data-content">
                 <el-empty description="暂无发货单明细" />
               </div>
             </td>
           </tr>
           <!-- 明细数据 -->
-          <tr v-for="(item, index) in localWaybillDetails" :key="index">
+          <tr v-for="(item, index) in displayWaybillDetails" :key="index">
             <td><input type="text" class="transparent-input" v-model="item.productName" /></td>
             <td><input type="text" class="table-input transparent-input" v-model="item.edgeType" />
             </td>
@@ -87,11 +87,7 @@
             <td><input type="number" class="table-input transparent-input" v-model.number="item.weight"
                 placeholder="0.00" /></td>
             <td><input type="text" class="table-input transparent-input" v-model="item.unitPrice" /></td>
-            <td>
+
-              <div class="table-cell-with-action">
-                <input type="text" class="table-input transparent-input" v-model="item.remark" />
-              </div>
-            </td>
           </tr>
         </tbody>
       </table>
@@ -130,6 +126,11 @@
     </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>
     </div>
@@ -155,6 +156,9 @@ export default {
   },
   data() {
     return {
+      currentPage: 1,
+      perPage: 5,
+      totalPages: 1,
       // 本地可编辑的发货单数据
       localWaybill: {
         consigneeUnit: '',
@@ -168,7 +172,9 @@ export default {
         pickupLocation: ''
       },
       // 本地可编辑的发货单明细
-      localWaybillDetails: []
+      localWaybillDetails: [],
+      // 预览/打印用明细（每页固定5行，不足补空行）
+      displayWaybillDetails: []
     };
   },
   watch: {
@@ -194,18 +200,52 @@ export default {
     },
     waybillDetails: {
       handler(newVal) {
-        console.log('waybillDetails', 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;
+    },
+    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) {
@@ -273,55 +313,57 @@ export default {
     // 打印发货单
     async printWaybill() {
       const node = this.$refs.waybillRef;
-      // 确保容器在打印时能完整显示所有内容
+      const paperWidthMm = 241;
-      const originalWidth = node.style.width;
+      const paperHeightMm = 140;
-      const originalHeight = node.style.height;
-      const paperWidthMm = 297;
-      const paperHeightMm = 180;
-      const originalOverflow = node.style.overflow;
 
-      // 临时调整容器样式，确保所有内容可见
+      const mmToPx = (mm) => (mm * 96) / 25.4;
-      node.style.width = 'auto';
-      node.style.overflow = 'visible';
-
-      // 获取实际内容宽度
-      const contentWidth = node.scrollWidth;
-      const contentHeight = node.scrollHeight;
-
-      // console.log('contentWidth', contentWidth, originalWidth, originalHeight);
-      // 改用html2canvas + pdf-lib打印pdf
-      const canvas = await html2canvas(node, {
-        backgroundColor: '#ffffff',
-        scale: 3,
-        useCORS: true,
-        // 让 html2canvas 为频繁读回优化 Canvas（与批量导出一致）
-        willReadFrequently: true,
-        // 确保按元素尺寸截图，明确指定宽高
-        width: contentWidth,
-        height: contentHeight,
-        windowWidth: contentWidth,
-        windowHeight: contentHeight,
-      });
-      // 5. 使用 pdf-lib 生成单页 PDF（占满整张纸，无边距）
       const mmToPt = 72 / 25.4;
       const pageWidthPt = paperWidthMm * mmToPt;
       const pageHeightPt = paperHeightMm * mmToPt;
 
-      const pdfDoc = await PDFDocument.create();
+      const pageWidthPx = Math.round(mmToPx(paperWidthMm));
-      console.log('canvas', canvas);
+      const pageHeightPx = Math.round(mmToPx(paperHeightMm));
-      const png = canvas.toDataURL('image/png');
-      const imgPng = await pdfDoc.embedPng(png);
-      // 确保页面尺寸正确：宽100mm，高80mm（横向）
-      const page = pdfDoc.addPage([pageWidthPt, pageHeightPt]);
 
-      // 直接拉伸填充整个PDF页面，不留边距，确保占满整张纸
+      const allDetails = Array.isArray(this.localWaybillDetails) ? this.localWaybillDetails : [];
-      // 从(0,0)开始，直接填充整个页面尺寸
+      const totalPages = Math.max(1, Math.ceil(allDetails.length / this.perPage));
-      page.drawImage(imgPng, {
+
-        x: 0,
+      const originalPage = this.currentPage;
-        y: 0,
+      const originalDisplay = this.displayWaybillDetails;
-        width: pageWidthPt,
+
-        height: pageHeightPt
+      const pdfDoc = await PDFDocument.create();
-      });
+
+      try {
+        for (let page = 1; page <= totalPages; page++) {
+          this.currentPage = page;
+          this.displayWaybillDetails = this.buildPage(allDetails, page);
+          await this.$nextTick();
+
+          const canvas = await html2canvas(node, {
+            backgroundColor: '#ffffff',
+            scale: 3,
+            useCORS: true,
+            willReadFrequently: true,
+            width: pageWidthPx,
+            height: pageHeightPx,
+            windowWidth: pageWidthPx,
+            windowHeight: pageHeightPx
+          });
+
+          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 {
+        this.currentPage = originalPage;
+        this.displayWaybillDetails = originalDisplay;
+        this.refreshPagination();
+      }
 
       const pdfBytes = await pdfDoc.save();
       const blob = new Blob([pdfBytes], { type: 'application/pdf' });
@@ -331,18 +373,11 @@ export default {
       if (!win) {
         const a = document.createElement('a');
         a.href = url;
-        a.download = `标签_${new Date().getTime()}.pdf`;
+        a.download = `发货单_${this.waybill.waybillName || this.waybill.waybillNo || new Date().getTime()}.pdf`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
       }
-
-
-      // 恢复原始样式
-      setTimeout(() => {
-        node.style.width = originalWidth;
-        node.style.overflow = originalOverflow;
-      }, 100);
     }
   }
 }
@@ -350,16 +385,15 @@ export default {
 
 <style scoped>
 .waybill-container {
-  width: 960px;
+  width: 241mm;
-  max-width: none;
+  height: 140mm;
-  min-width: 850px;
   margin: 0 auto;
-  padding: 20px;
+  padding: 6mm;
-  background: white;
+  padding-top: 22mm;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
-  font-family: SimSun, serif;
+  box-shadow: none;
-  overflow-x: auto;
+  font-family: SimSun, "Courier New", monospace;
-  overflow-y: visible;
+  overflow: hidden;
 }
 
 /* 头部样式 */
@@ -367,8 +401,8 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 3mm;
-  font-size: 16px;
+  font-size: 11px;
 }
 
 .header-left,
@@ -432,22 +466,22 @@ export default {
 /* 表格样式 */
 .waybill-table {
   width: 100%;
-  max-width: 100%;
   border-collapse: collapse;
-  margin-bottom: 20px;
+  margin-bottom: 2mm;
-  font-size: 12px;
+  font-size: 10px;
   table-layout: fixed;
 }
 
 .waybill-table th,
 .waybill-table td {
-  border: 1px solid #000;
+  border: 0.4px solid #000;
   box-sizing: border-box;
-  line-height: 24px;
+  line-height: 6mm;
   text-align: center;
   vertical-align: middle;
-  word-wrap: break-word;
+  padding: 0;
-  word-break: break-all;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 /* 表格列宽设置 */
@@ -523,11 +557,6 @@ export default {
   /* 单价 */
 }
 
-.waybill-table th:nth-child(13),
-.waybill-table td:nth-child(13) {
-  width: 100px;
-  /* 备注 */
-}
 
 .waybill-table th {
   background-color: #f5f7fa;
@@ -543,11 +572,57 @@ export default {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 4px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 6mm;
+  text-align: inherit;
+  vertical-align: middle;
 }
 
-.table-input:focus {
+.transparent-input {
-  border-color: #409eff;
+  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 !important;
+  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;
 }
 
 /* 无数据样式 */