From 7e487a487d63c3068421944b9c37686b07a32c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Wed, 8 Apr 2026 10:36:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=8F=91=E8=B4=A7=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8F=91=E8=B4=A7=E5=8D=95=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=B9=B6=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构发货单界面布局，使用可拖拽面板组件提升用户体验。新增订单绑定、逻辑库区显示等功能，并调整页面样式。

- 使用DragResizePanel组件实现可拖拽分割布局
- 新增订单绑定、解绑和切换功能
- 在详情表格中添加逻辑库区、厂家和品质字段
- 优化左侧面板可折叠功能
- 调整页面样式和响应式布局
---
 .../src/components/DragResizePanel/index.vue  | 159 ++++++
 .../wms/delivery/components/detailTable.vue   |   6 +
 .../wms/delivery/components/planList.vue      |   8 +-
 .../src/views/wms/delivery/waybill/index.vue  | 460 +++++++++++++-----
 4 files changed, 514 insertions(+), 119 deletions(-)
 create mode 100644 klp-ui/src/components/DragResizePanel/index.vue

diff --git a/klp-ui/src/components/DragResizePanel/index.vue b/klp-ui/src/components/DragResizePanel/index.vue
new file mode 100644
index 00000000..d3e0e9a4
--- /dev/null
+++ b/klp-ui/src/components/DragResizePanel/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="drag-resize-panel" :class="{ 'vertical': direction === 'vertical' }">
+    <div class="panel-a" :style="panelAstyle">
+      <slot name="panelA"></slot>
+    </div>
+    <div class="resizer" :class="{ 'vertical-resizer': direction === 'vertical' }" @mousedown="startResize"></div>
+    <div class="panel-b" :style="panelBstyle">
+      <slot name="panelB"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DragResizePanel',
+  props: {
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: function(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    // 设置panelA的初始大小，最大值和最小值，默认值为300px，10000px，100px
+    // panelB占据剩余空间
+    initialSize: {
+      type: Number,
+      default: 300
+    },
+    minSize: {
+      type: Number,
+      default: 100
+    },
+    maxSize: {
+      type: Number,
+      default: 10000
+    }
+  },
+  data() {
+    return {
+      currentSize: this.initialSize,
+      isResizing: false,
+      startPosition: 0
+    };
+  },
+  computed: {
+    panelAstyle() {
+      if (this.direction === 'horizontal') {
+        return { width: this.currentSize + 'px' };
+      } else {
+        return { height: this.currentSize + 'px' };
+      }
+    },
+    panelBstyle() {
+      if (this.direction === 'horizontal') {
+        return { flex: 1 };
+      } else {
+        return { flex: 1 };
+      }
+    }
+  },
+  methods: {
+    startResize(e) {
+      e.preventDefault();
+      this.isResizing = true;
+      this.startPosition = this.direction === 'horizontal' ? e.clientX : e.clientY;
+      this.startSize = this.currentSize;
+      
+      document.addEventListener('mousemove', this.handleResize);
+      document.addEventListener('mouseup', this.stopResize);
+    },
+    handleResize(e) {
+      if (!this.isResizing) return;
+      
+      const delta = this.direction === 'horizontal' ? e.clientX - this.startPosition : e.clientY - this.startPosition;
+      const newSize = this.startSize + delta;
+      
+      if (newSize >= this.minSize && newSize <= this.maxSize) {
+        this.currentSize = newSize;
+      }
+    },
+    stopResize() {
+      this.isResizing = false;
+      document.removeEventListener('mousemove', this.handleResize);
+      document.removeEventListener('mouseup', this.stopResize);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.drag-resize-panel {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.drag-resize-panel.vertical {
+  flex-direction: column;
+}
+
+.panel-a {
+  position: relative;
+  overflow: hidden;
+}
+
+.panel-b {
+  position: relative;
+  overflow: auto;
+}
+
+.resizer {
+  width: 4px;
+  cursor: col-resize;
+  position: relative;
+  transition: background-color 0.3s;
+  height: 100%;
+}
+
+.resizer.vertical-resizer {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.resizer:hover {
+  background-color: #409eff;
+}
+
+.resizer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 40px;
+  width: 2px;
+  background-color: #c0c4cc;
+  border-radius: 1px;
+  transition: background-color 0.3s;
+}
+
+.resizer.vertical-resizer::before {
+  width: 40px;
+  height: 2px;
+}
+
+.resizer:hover::before {
+  background-color: #409eff;
+}
+
+.resizer:active {
+  background-color: #409eff;
+}
+
+.resizer:active::before {
+  background-color: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue
index 3e7b703a..cbb59e7c 100644
--- a/klp-ui/src/views/wms/delivery/components/detailTable.vue
+++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue
@@ -38,6 +38,7 @@
         <el-table-column label="切边" align="center" prop="edgeType" />
         <el-table-column label="包装" align="center" prop="packaging" />
         <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
+        <el-table-column label="逻辑库区" align="center" prop="warehouseName" />
         <el-table-column label="结算方式" align="center" prop="settlementType" />
         <!-- <el-table-column label="原料厂家" align="center" prop="rawMaterialFactory" /> -->
         <el-table-column label="卷号" align="center" prop="coilNo">
@@ -47,9 +48,11 @@
         </el-table-column>
         <el-table-column label="规格" align="center" prop="specification" />
         <el-table-column label="材质" align="center" prop="material" />
+        <el-table-column label="厂家" align="center" prop="manufacturer" />
         <el-table-column label="表面处理" align="center" prop="surfaceTreatmentDesc" />
         <!-- <el-table-column label="数量" align="center" prop="quantity" /> -->
         <el-table-column label="重量" align="center" prop="weight" />
+        <el-table-column label="品质" align="center" prop="qualityStatus" />
         <!-- <el-table-column label="单价" align="center" prop="unitPrice" /> -->
         <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -241,6 +244,9 @@ export default {
           if (coil) {
             item.actualWarehouseName = coil.actualWarehouseName;
             item.surfaceTreatmentDesc = coil.surfaceTreatmentDesc;
+            item.qualityStatus = coil.qualityStatus;
+            item.warehouseName = coil.warehouseName;
+            item.manufacturer = coil.manufacturer;
           }
         });
       }
diff --git a/klp-ui/src/views/wms/delivery/components/planList.vue b/klp-ui/src/views/wms/delivery/components/planList.vue
index 3443b760..36cc3bd7 100644
--- a/klp-ui/src/views/wms/delivery/components/planList.vue
+++ b/klp-ui/src/views/wms/delivery/components/planList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <div style="padding: 10px">
     <div style="display: flex; width: 100%; gap: 5px">
       <el-input 
         v-model="planQueryParams.planName" 
@@ -17,7 +17,7 @@
       :props="planTreeProps" 
       @node-click="handlePlanSelect"
       default-expand-all 
-      style="margin-top: 10px; height: 550px; overflow: auto;"
+      style="margin-top: 10px; height: 800px; overflow: auto;"
     >
       <template slot-scope="{ node, data }">
         <span 
@@ -94,7 +94,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-  </el-card>
+  </div>
 </template>
 
 <script>
@@ -109,7 +109,7 @@ export default {
       planQueryParams: {
         planName: '',
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 30,
         planType: 0,
       },
       selectedPlan: null,
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index 9c50a074..1e8768c0 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -1,15 +1,31 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="5">
-        <PlanList ref="planList" @select="handlePlanSelect" />
-      </el-col>
+    <div class="main-container1">
+      <!-- 左侧计划列表 -->
+      <div class="left-panel-container" :style="{ width: leftWidth + 'px' }">
+        <div class="left-panel" v-show="!isLeftCollapsed">
+          <div class="panel-header">
+            <h3>发货计划</h3>
+          </div>
+          <PlanList ref="planList" @select="handlePlanSelect" />
+        </div>
+      </div>
 
-      <el-col :span="19" style="position: relative;">
-        <el-card v-if="!selectedPlan">
+      <!-- 切换按钮 -->
+      <div class="toggle-button" @click="toggleLeftPanel">
+        <el-button type="text" size="small" :icon="isLeftCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'">
+        </el-button>
+      </div>
+
+      <!-- 可拖拽分割线 -->
+      <div class="resizer" ref="resizer" @mousedown="startResize" v-show="!isLeftCollapsed"></div>
+
+      <!-- 右侧内容区域 -->
+      <div class="right-panel" :style="{ flex: 1 }">
+        <div v-if="!selectedPlan">
           <el-empty description="请先选择发货计划" />
-        </el-card>
-        <el-card v-else>
+        </div>
+        <div v-else>
           <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">
@@ -24,86 +40,106 @@
               <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号" clearable
                 @keyup.enter.native="handleQuery" />
             </el-form-item>
+            <el-form-item label="负责人" prop="principal">
+              <el-select v-model="queryParams.principal" placeholder="请选择负责人" clearable filterable allow-create
+                @change="handleQuery">
+                <el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
+                  :value="item.value" />
+              </el-select>
+            </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
               <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+
+          <el-row :gutter="20">
+            <el-col :span="8">
               <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                 :disabled="!selectedPlan" title="请先选择发货计划">新增</el-button>
               <el-button type="success" plain icon="el-icon-refresh" size="mini" @click="handleQuery">刷新</el-button>
-              <!-- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button> -->
-            </el-form-item>
-            <el-form-item>
-              <el-descriptions :column="2" :data="queryParams" border>
-                <el-descriptions-item label="单据总数">{{ deliveryCountTotal }}</el-descriptions-item>
-                <el-descriptions-item label="已发数量">{{ deliveryCountFinished }}</el-descriptions-item>
-              </el-descriptions>
-            </el-form-item>
-          </el-form>
-          <div style="height: calc(100vh - 204px); overflow: hidden; display: flex; flex-direction: column;">
-            <div :style="{ height: topHeight + 'px', overflow: 'auto' }">
-              <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-button type="warning" plain icon="el-icon-download" size="mini"
+                @click="handleExportPlan">导出</el-button>
+            </el-col>
 
-                <!-- <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, 0)">打印发货单</el-button>
-                    <el-button size="mini" type="text" icon="el-icon-view"
-                      @click.stop="handlePrint(scope.row, 1)">简单打印</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-col :span="16" style="display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
+              <div>
+                <el-descriptions :column="2" :data="queryParams" border>
+                  <el-descriptions-item label="单据总数">{{ deliveryCountTotal }}</el-descriptions-item>
+                  <el-descriptions-item label="已发数量">{{ deliveryCountFinished }}</el-descriptions-item>
+                </el-descriptions>
+              </div>
+              <div>
+                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+                  :limit.sync="queryParams.pageSize" @pagination="getList" />
+              </div>
+            </el-col>
+          </el-row>
 
-              <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-                :limit.sync="queryParams.pageSize" @pagination="getList" />
-            </div>
+          <div style="height: calc(100vh - 164px); overflow: hidden;">
+            <DragResizePanel direction="vertical" :initialSize="300" :minSize="100">
+              <template slot="panelA">
+                <div style="height: 100%; overflow: auto;">
+                  <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 />
 
-            <!-- 可拖拽的分割线 -->
-            <div class="resizer" ref="resizer" @mousedown="startResize"></div>
-
-            <div :style="{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }">
-              <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
-              <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
-            </div>
+                    <!-- <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, 0)">打印发货单</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-view"
+                          @click.stop="handlePrint(scope.row, 1)">简单打印</el-button>
+                        <el-button size="mini" type="text" icon="el-icon-document-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>
+                </div>
+              </template>
+              <template slot="panelB">
+                <div style="height: 100%; overflow: auto;">
+                  <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
+                  <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
+                </div>
+              </template>
+            </DragResizePanel>
           </div>
-        </el-card>
-      </el-col>
-    </el-row>
+        </div>
+      </div>
+    </div>
 
     <!-- 添加或修改发货单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -120,9 +156,6 @@
         <el-form-item label="车牌" prop="licensePlate">
           <MemoInput v-model="form.licensePlate" storageKey="licensePlate" placeholder="请输入车牌" />
         </el-form-item>
-        <el-form-item label="收货单位" prop="consigneeUnit">
-          <el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
-        </el-form-item>
         <el-form-item label="发货单位" prop="senderUnit">
           <el-input v-model="form.senderUnit" placeholder="请输入发货单位" />
         </el-form-item>
@@ -131,15 +164,47 @@
             placeholder="请选择发货时间">
           </el-date-picker>
         </el-form-item>
-        <el-form-item label="负责人" prop="principal">
-          <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="请输入订单编号" />
+          <div style="display: flex; gap: 10px; align-items: center;">
+            <el-input v-model="form.principalPhone" placeholder="请输入订单编号" style="flex: 1;" />
+            <el-button type="primary" size="small" @click="bindOrder">绑定订单</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="订单编号" prop="principalPhone" v-else title="当前发货单已绑定订单">
-          <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled />
+          <div style="display: flex; gap: 10px; align-items: center;">
+            <el-input v-model="form.orderCode" placeholder="请输入订单编号" readonly disabled style="flex: 1;" />
+            <el-button type="warning" size="small" @click="unbindOrder">解绑</el-button>
+            <el-button type="primary" size="small" @click="changeOrder">切换订单</el-button>
+          </div>
         </el-form-item>
+
+        <!-- 订单选择对话框 -->
+        <el-dialog title="选择订单" :visible.sync="orderDialogVisible" width="800px" append-to-body>
+          <el-input @change="loadOrderList" v-model="orderQuery" placeholder="输入关键词搜索" style="margin-bottom: 10px;" @input="handleOrderSearch" />
+          <el-table v-loading="orderLoading" :data="orderList" max-height="500px" style="width: 100%" @row-click="handleOrderSelect">
+            <el-table-column prop="orderCode" label="订单编号" />
+            <el-table-column prop="companyName" label="客户公司" />
+            <el-table-column prop="salesman" label="销售员" />
+            <el-table-column prop="contractCode" label="合同号" />
+            <el-table-column prop="deliveryDate" label="交货日期" />
+          </el-table>
+          <div slot="footer" class="dialog-footer">
+            <el-button @click="orderDialogVisible = false">取消</el-button>
+          </div>
+        </el-dialog>
+        <el-form-item label="收货单位" prop="consigneeUnit">
+          <el-input v-model="form.consigneeUnit" placeholder="请输入收货单位" />
+        </el-form-item>
+
+
+        <el-form-item label="负责人" prop="principal">
+          <el-select v-model="form.principal" placeholder="请选择负责人" clearable filterable allow-create>
+            <el-option v-for="item in dict.type.wip_pack_saleman" :key="item.value" :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -164,12 +229,14 @@ import { listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计
 import { listDeliveryPlan } from "@/api/wms/deliveryPlan";
 import { listCoilByIds } from "@/api/wms/coil";
 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 PlanList from "../components/planList.vue";
 import WayBill2 from "../components/wayBill2.vue";
 import PlanSelector from "../components/planSelector.vue";
+import DragResizePanel from "@/components/DragResizePanel";
 
 export default {
   name: "DeliveryWaybill",
@@ -179,8 +246,10 @@ export default {
     WayBill,
     PlanList,
     WayBill2,
-    PlanSelector
+    PlanSelector,
+    DragResizePanel
   },
+  dicts: ['wip_pack_saleman'],
   data() {
     return {
       // 按钮loading
@@ -200,8 +269,7 @@ export default {
       // 发货单表格数据
       deliveryWaybillList: [],
       waybillId: null,
-      // 上部分高度
-      topHeight: 300,
+
       // 打印相关数据
       printDialogVisible: false,
       currentWaybill: {},
@@ -214,10 +282,17 @@ export default {
       open: false,
       // 发货计划列表
       planListOption: [],
+      // 左侧面板宽度
+      leftWidth: 260,
+      // 左侧面板是否收起
+      isLeftCollapsed: false,
+      // 拖拽相关
+      startX: 0,
+      startLeftWidth: 0,
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 50,
         waybillNo: undefined,
         waybillName: undefined,
         licensePlate: undefined,
@@ -245,11 +320,19 @@ export default {
       },
       coilList: [],
       canEdit: true,
+      // 订单列表
+      orderList: [],
+      orderLoading: false,
+      // 订单选择对话框
+      orderDialogVisible: false,
+      // 订单搜索关键词
+      orderQuery: '',
     };
   },
   created() {
     this.loadPlanList();
     this.getList();
+    this.loadOrderList();
   },
   computed: {
     /** 计算已发货数量 */
@@ -268,33 +351,59 @@ export default {
         this.planListOption = response.rows || [];
       });
     },
-    /** 开始拖拽 */
+    /** 加载订单列表 */
+    loadOrderList() {
+      this.orderLoading = true;
+      listOrder({ pageNum: 1, pageSize: 100, orderType: 1, keyword: this.orderQuery }).then(response => {
+        this.orderList = response.rows || [];
+        this.orderLoading = false;
+      }).catch(error => {
+        console.error('获取订单列表失败:', error);
+        this.orderLoading = false;
+      });
+    },
+    /** 切换左侧面板收起/展开 */
+    toggleLeftPanel() {
+      if (this.isLeftCollapsed) {
+        // 展开：恢复到原来的宽度
+        this.leftWidth = 200;
+        this.isLeftCollapsed = false;
+      } else {
+        // 收起：只隐藏内容，保留容器宽度以确保按钮可见
+        this.leftWidth = 0;
+        this.isLeftCollapsed = true;
+      }
+    },
+    /** 开始拖拽水平分割线 */
     startResize(e) {
       e.preventDefault();
+      // 如果面板是收起状态，先展开它
+      if (this.isLeftCollapsed) {
+        this.leftWidth = 200;
+        this.isLeftCollapsed = false;
+      }
       // 记录初始位置
-      const container = this.$el.querySelector('.el-card__body');
-      const containerRect = container.getBoundingClientRect();
-      this.startY = e.clientY;
-      this.startTopHeight = this.topHeight;
+      this.startX = e.clientX;
+      this.startLeftWidth = this.leftWidth;
       document.addEventListener('mousemove', this.resize);
       document.addEventListener('mouseup', this.stopResize);
     },
-    /** 拖拽中 */
+    /** 拖拽中（水平） */
     resize(e) {
-      const container = this.$el.querySelector('.el-card__body');
-      const containerRect = container.getBoundingClientRect();
       // 基于初始位置计算相对变化
-      const deltaY = e.clientY - this.startY;
-      const newHeight = this.startTopHeight + deltaY;
-      if (newHeight > 100 && newHeight < containerRect.height - 100) {
-        this.topHeight = newHeight;
+      const deltaX = e.clientX - this.startX;
+      const newWidth = this.startLeftWidth + deltaX;
+      // 限制最小宽度
+      if (newWidth > 100 && newWidth < 500) {
+        this.leftWidth = newWidth;
       }
     },
-    /** 结束拖拽 */
+    /** 结束拖拽（水平） */
     stopResize() {
       document.removeEventListener('mousemove', this.resize);
       document.removeEventListener('mouseup', this.stopResize);
     },
+
     getList() {
       this.loading = true;
       // 确保查询参数包含planId
@@ -471,6 +580,8 @@ export default {
         salesPerson: row.salesPerson,
         principal: row.principal,
         principalPhone: row.principalPhone,
+        // 车牌号
+        licensePlate: row.licensePlate,
         remark: row.remark
       };
       this.open = true;
@@ -482,10 +593,48 @@ export default {
         ...this.queryParams
       }, `deliveryWaybill_${new Date().getTime()}.xlsx`)
     },
+    handleExportPlan() {
+      this.download('wms/deliveryWaybillDetail/export', {
+        planId: this.selectedPlan.planId
+      }, `deliveryPlan_${new Date().getTime()}.xlsx`)
+    },
+    /** 绑定订单 */
+    bindOrder() {
+      this.orderDialogVisible = true;
+    },
+    /** 解绑订单 */
+    unbindOrder() {
+      this.form.orderId = undefined;
+      this.form.orderCode = undefined;
+      this.form.consigneeUnit = undefined;
+      this.form.principal = undefined;
+    },
+    /** 切换订单 */
+    changeOrder() {
+      this.orderDialogVisible = true;
+    },
+    /** 订单搜索 */
+    handleOrderSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    /** 选择订单 */
+    handleOrderSelect(row) {
+      this.form.orderId = row.orderId;
+      this.form.orderCode = row.orderCode;
+      this.form.consigneeUnit = row.companyName;
+      this.form.principal = row.salesman;
+      this.orderDialogVisible = false;
+    },
     /** 打印发货单 */
     handlePrint(row, printType) {
       this.loading = true;
       this.printType = printType || 0;
+      updateDeliveryWaybill({
+        waybillId: row.waybillId,
+        status: 2
+      }).then(() => {
+        row.status = 2;
+      });
       // 获取发货单明细
       listDeliveryWaybillDetail({
         waybillId: row.waybillId,
@@ -545,26 +694,84 @@ export default {
 </script>
 
 <style scoped>
-.plan-container {
-  padding: 10px;
-  height: 100%;
-  border-right: 1px solid #ebeef5;
+.app-container {
+  height: 100vh;
+  padding: 0;
+  overflow: hidden;
+  height: calc(100vh - 84px);
 }
 
-.plan-container h3 {
-  margin: 0 0 10px 0;
+.main-container1 {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+
+.left-panel-container {
+  height: 100%;
+  position: relative;
+  transition: width 0.3s ease;
+  /* 移除 overflow: hidden，确保按钮不被裁剪 */
+}
+
+.left-panel {
+  height: 100%;
+  border-right: 1px solid #ebeef5;
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.panel-header h3 {
+  margin: 0;
   padding: 0;
   font-size: 16px;
   font-weight: 500;
 }
 
-.resizer {
+.toggle-button {
+  position: absolute;
+  bottom: 0px;
+  z-index: 10;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 0 4px 4px 0;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-left: -1px;
+  /* 确保按钮始终可见 */
+  transition: all 0.3s ease;
+}
+
+.toggle-button .el-button {
+  padding: 0;
+  margin: 0;
   width: 100%;
-  height: 4px;
-  background-color: #818181;
-  cursor: row-resize;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resizer {
+  width: 4px;
+  /* background-color: #818181; */
+  cursor: col-resize;
   position: relative;
   transition: background-color 0.3s;
+  height: 100%;
 }
 
 .resizer:hover {
@@ -577,8 +784,8 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 40px;
-  height: 2px;
+  height: 40px;
+  width: 2px;
   background-color: #c0c4cc;
   border-radius: 1px;
   transition: background-color 0.3s;
@@ -595,4 +802,27 @@ export default {
 .resizer:active::before {
   background-color: #fff;
 }
+
+.right-panel {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 保留原有的垂直分割线样式 */
+.resizer.row-resizer {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}
+
+.resizer.row-resizer::before {
+  width: 40px;
+  height: 2px;
+}
+
+::v-deep .el-pagination {
+  margin-top: 6px !important;
+}
 </style>