From e5821a3f68ddc8f318395c5b138fd409c165f093 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 16 Mar 2026 15:34:53 +0800
Subject: [PATCH] =?UTF-8?q?fix(wms):=20=E6=8F=90=E9=AB=98html2canvas?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E6=AF=94=E4=BE=8B=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=8F=91=E8=B4=A7=E5=8D=95=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整wayBill和wayBill2组件的html2canvas缩放比例从3提高到6，以获得更清晰的打印效果
重构发货单页面布局，将表格和分页组件放入滚动容器，表单区域设为固定位置
---
 .../views/wms/delivery/components/wayBill.vue |   2 +-
 .../wms/delivery/components/wayBill2.vue      |   2 +-
 .../src/views/wms/delivery/waybill/index.vue  | 122 +++++++++---------
 3 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/klp-ui/src/views/wms/delivery/components/wayBill.vue b/klp-ui/src/views/wms/delivery/components/wayBill.vue
index a401b675..38791f42 100644
--- a/klp-ui/src/views/wms/delivery/components/wayBill.vue
+++ b/klp-ui/src/views/wms/delivery/components/wayBill.vue
@@ -440,7 +440,7 @@ export default {
           // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
           const canvas = await html2canvas(node, {
             backgroundColor: '#ffffff',
-            scale: 3,
+            scale: 6,
             useCORS: true,
             willReadFrequently: true,
             width: pageWidthPx,
diff --git a/klp-ui/src/views/wms/delivery/components/wayBill2.vue b/klp-ui/src/views/wms/delivery/components/wayBill2.vue
index 003cbf81..cb29572e 100644
--- a/klp-ui/src/views/wms/delivery/components/wayBill2.vue
+++ b/klp-ui/src/views/wms/delivery/components/wayBill2.vue
@@ -440,7 +440,7 @@ export default {
           // 固定按纸张尺寸截图：右侧留白来自于 contentEl 的缩放（241 -> 211mm），而不是扩大截图宽度
           const canvas = await html2canvas(node, {
             backgroundColor: '#ffffff',
-            scale: 3,
+            scale: 6,
             useCORS: true,
             willReadFrequently: true,
             width: pageWidthPx,
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index 30360a28..1a6afc5f 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -2,16 +2,16 @@
   <div class="app-container">
     <el-row :gutter="10">
       <el-col :span="5">
-        <PlanList ref="planList" @select="handlePlanSelect"/>
+        <PlanList ref="planList" @select="handlePlanSelect" />
       </el-col>
 
-      <el-col :span="19" style="height: calc(100vh - 124px); overflow-y: scroll;">
+      <el-col :span="19" style="position: relative;">
         <el-card v-if="!selectedPlan">
           <el-empty description="请先选择发货计划" />
         </el-card>
         <el-card v-else>
-          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-            label-width="68px">
+          <el-form style="position: sticky; left: 0; top: 0;" :model="queryParams" ref="queryForm" size="small"
+            :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item label="发货单名称" prop="waybillName">
               <el-input v-model="queryParams.waybillName" placeholder="请输入发货单名称" clearable
                 @keyup.enter.native="handleQuery" />
@@ -35,62 +35,64 @@
               </el-descriptions>
             </el-form-item>
           </el-form>
+          <div style="height: calc(100vh - 184px); overflow-y: scroll; overflow-x: hidden;">
+            <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
+              @row-click="handleRowClick">
+              <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
+              <el-table-column label="发货单名称" align="center" prop="waybillName" />
+              <el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
+              <el-table-column label="收货单位" align="center" prop="consigneeUnit" />
+              <!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
+              <el-table-column label="订单编号" align="center" prop="orderNo">
+                <template slot-scope="scope">
+                  <span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
+                  <span v-else>{{ scope.row.principalPhone }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="负责人" align="center" prop="principal" width="60" />
+              <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
 
-          <el-table v-loading="loading" border :data="deliveryWaybillList" highlight-current-row
-            @row-click="handleRowClick">
-            <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
-            <el-table-column label="发货单名称" align="center" prop="waybillName" />
-            <el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
-            <el-table-column label="收货单位" align="center" prop="consigneeUnit" />
-            <!-- <el-table-column label="发货单位" align="center" prop="senderUnit" /> -->
-            <el-table-column label="订单编号" align="center" prop="orderNo">
-              <template slot-scope="scope">
-                <span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
-                <span v-else>{{ scope.row.principalPhone }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
-              <template slot-scope="scope">
-                <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="负责人" align="center" prop="principal" width="60" />
-            <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip/>
+              <!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
+              <el-table-column label="完成状态" align="center" prop="status" width="120">
+                <template slot-scope="scope">
+                  <el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
+                    <el-option label="已发货" :value="1" />
+                    <el-option label="未发货" :value="0" />
+                    <el-option label="已打印" :value="2" />
+                    <el-option label="未打印" :value="3" />
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" icon="el-icon-view"
+                    @click.stop="handlePrint(scope.row)">打印发货单</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-view"
+                    @click.stop="handlePrintSimple(scope.row)">简单打印</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-copy"
+                    @click.stop="handleCopy(scope.row)">复制新增</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
+                    title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
+                  <el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
+                    title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
 
-            <!-- <el-table-column label="负责人电话" align="center" prop="principalPhone" width="100" /> -->
-            <el-table-column label="完成状态" align="center" prop="status" width="120">
-              <template slot-scope="scope">
-                <el-select v-model="scope.row.status" placeholder="请选择完成状态" @change="handleStatusChange(scope.row)">
-                  <el-option label="已发货" :value="1" />
-                  <el-option label="未发货" :value="0" />
-                  <el-option label="已打印" :value="2" />
-                  <el-option label="未打印" :value="3" />
-                </el-select>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-              <template slot-scope="scope">
-                <el-button size="mini" type="text" icon="el-icon-view"
-                  @click.stop="handlePrint(scope.row)">打印发货单</el-button>
-                <el-button size="mini" type="text" icon="el-icon-view"
-                  @click.stop="handlePrintSimple(scope.row)">简单打印</el-button>
-                <el-button size="mini" type="text" icon="el-icon-copy"
-                  @click.stop="handleCopy(scope.row)">复制新增</el-button>
-                <el-button size="mini" type="text" icon="el-icon-edit" :disabled="scope.row.status === 1"
-                  title="已发货的发货单不能修改" @click.stop="handleUpdate(scope.row)">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete" :disabled="scope.row.status === 1"
-                  title="已发货的发货单不能删除" @click.stop="handleDelete(scope.row)">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize" @pagination="getList" />
 
-          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize" @pagination="getList" />
+            <el-divider style="margin: 20px 0;" />
 
-          <el-divider style="margin: 20px 0;" />
+            <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
+            <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
+          </div>
 
-          <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
-          <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
         </el-card>
       </el-col>
     </el-row>
@@ -119,10 +121,10 @@
           <el-input v-model="form.principal" placeholder="请输入负责人" />
         </el-form-item>
         <el-form-item label="订单编号" prop="principalPhone" v-if="!form.orderId">
-          <el-input v-model="form.principalPhone" placeholder="请输入订单编号"/>
+          <el-input v-model="form.principalPhone" placeholder="请输入订单编号" />
         </el-form-item>
-         <el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
-          <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled/>
+        <el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
+          <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@@ -405,7 +407,7 @@ export default {
       });
     },
     handleCopy(row) {
-      this.form = { 
+      this.form = {
         waybillNo: new Date().getTime(),
         waybillName: row.waybillName,
         planId: row.planId,
@@ -485,7 +487,7 @@ export default {
         this.loading = false;
       });
     },
-        /** 打印发货单 */
+    /** 打印发货单 */
     handlePrintSimple(row) {
       this.loading = true;
       this.printType = 1;