refactor(wms): 优化发货单打印功能样式和布局

fix(waybill): 修复打印和保存图片时内容截断问题

chore: 删除不再使用的websocket测试页面

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

@@ -83,10 +83,7 @@
 
       <!-- 备注说明 -->
       <div class="waybill-remarks">
-        <p>1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：</p>
-        <p>
-          裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。
-        </p>
+        <p>1、品名：冷硬钢卷（酸连轧）、冷轧钢卷（脱脂退火火拉矫）、镀锌卷板，镀锌管料（镀锌分剪料）；2、切边：净边/毛边；3、包装：裸包：周三径四；简包1：周三径四内外护角；简包2：周三径四+防锈纸；普包：周三径四+内外护角+防锈纸+端护板；精包1：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板；精包2：周三径四+内外护角+防锈纸+薄膜+端护板+内外护板+木托。</p>
       </div>
 
       <!-- 签名栏 -->
@@ -221,7 +218,27 @@ export default {
     // 保存为图片
     saveAsImage() {
       const node = this.$refs.waybillRef;
-      domtoimage.toPng(node)
+      // 确保容器在保存图片时能完整显示所有内容
+      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`;
@@ -231,18 +248,45 @@ export default {
         .catch(error => {
           console.error('保存图片失败:', error);
           this.$message.error('保存图片失败');
+        })
+        .finally(() => {
+          // 恢复原始样式
+          node.style.width = originalWidth;
+          node.style.overflow = originalOverflow;
         });
     },
     // 打印发货单
     printWaybill() {
       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;
+      
       printJS({
         printable: node,
-        maxWidth: 1200,
+        maxWidth: contentWidth,
         type: 'html',
         scanStyles: true,
+        style: `
+          @page { size: A4 landscape; margin: 1cm; }
+          .waybill-container { width: 100%; max-width: none; overflow: visible; }
+          .waybill-table { width: 100%; table-layout: auto; }
+        `,
         targetStyles: ['*']
       });
+      
+      // 恢复原始样式
+      setTimeout(() => {
+        node.style.width = originalWidth;
+        node.style.overflow = originalOverflow;
+      }, 100);
     }
   }
 }
@@ -250,15 +294,16 @@ export default {
 
 <style scoped>
 .waybill-container {
-  width: 1200px;
-  max-width: 1200px;
+  width: auto;
+  max-width: none;
   min-width: 1200px;
   margin: 0 auto;
   padding: 20px;
-  box-sizing: border-box;
   background: white;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   font-family: SimSun, serif;
+  overflow-x: auto;
+  overflow-y: visible;
 }
 
 /* 头部样式 */
@@ -457,7 +502,7 @@ export default {
 /* 备注样式 */
 .waybill-remarks {
   margin-bottom: 30px;
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1.5;
   text-align: justify;
 }

klp-ui/src/views/wms/delivery/waybill/index.vue

@@ -65,9 +65,12 @@
             </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-edit" @click.stop="handleUpdate(scope.row)">修改</el-button>
-                <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(scope.row)">删除</el-button>
+                <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-edit"
+                  @click.stop="handleUpdate(scope.row)">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete"
+                  @click.stop="handleDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -128,14 +131,8 @@
     </el-dialog>
 
     <!-- 打印发货单对话框 -->
-    <el-dialog 
-      title="打印发货单" 
-      :visible.sync="printDialogVisible" 
-      width="90%" 
-      append-to-body>
-      <WayBill 
-        :waybill="currentWaybill" 
-        :waybillDetails="currentWaybillDetails" />
+    <el-dialog title="打印发货单" :visible.sync="printDialogVisible" width="90%" append-to-body center>
+      <WayBill :waybill="currentWaybill" :waybillDetails="currentWaybillDetails" />
     </el-dialog>
   </div>
 </template>