From a43cedc00f1532c57e31e935229cbb02fe705e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 30 Mar 2026 09:50:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms/delivery):=20=E6=94=B9=E8=BF=9B?=
 =?UTF-8?q?=E5=8F=91=E8=B4=A7=E5=8D=95=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加可拖拽分割线调整表格和详情区域高度
固定顶部操作栏和表格区域滚动
优化页面整体样式和用户体验
---
 .../wms/delivery/components/detailTable.vue   |   5 +-
 .../src/views/wms/delivery/waybill/index.vue  | 179 ++++++++++++------
 2 files changed, 128 insertions(+), 56 deletions(-)

diff --git a/klp-ui/src/views/wms/delivery/components/detailTable.vue b/klp-ui/src/views/wms/delivery/components/detailTable.vue
index 6b59f99c..42cbc9cc 100644
--- a/klp-ui/src/views/wms/delivery/components/detailTable.vue
+++ b/klp-ui/src/views/wms/delivery/components/detailTable.vue
@@ -1,7 +1,8 @@
 <template>
-  <div v-loading="loading">
+  <div v-loading="loading" style="position: relative; top: 0; background-color: #f5f7fa;">
     <div v-if="waybillId">
-      <el-row :gutter="10" class="mb8">
+      <!-- 这一部分始终定在最上方 -->
+      <el-row :gutter="10" class="mb8" style="position: sticky; top: 0; z-index: 10000; padding: 10px; background-color: #fff;">
         <el-col :span="2" style="font-weight: 900;">发货单明细</el-col>
         <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
diff --git a/klp-ui/src/views/wms/delivery/waybill/index.vue b/klp-ui/src/views/wms/delivery/waybill/index.vue
index 911383d7..9c50a074 100644
--- a/klp-ui/src/views/wms/delivery/waybill/index.vue
+++ b/klp-ui/src/views/wms/delivery/waybill/index.vue
@@ -39,64 +39,68 @@
               </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 />
+          <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-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-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>
 
-            <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" />
+            </div>
 
-            <el-divider style="margin: 20px 0;" />
+            <!-- 可拖拽的分割线 -->
+            <div class="resizer" ref="resizer" @mousedown="startResize"></div>
 
-            <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
-            <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
+            <div :style="{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }">
+              <DeliveryWaybillDetail v-if="canEdit" ref="detailTable" :waybillId="waybillId" :coilList="coilList" />
+              <el-empty v-else description="已发货，不可修改，点击打印查看详情" />
+            </div>
           </div>
-
         </el-card>
       </el-col>
     </el-row>
@@ -157,7 +161,7 @@
 <script>
 import { listDeliveryWaybill, getDeliveryWaybill, delDeliveryWaybill, addDeliveryWaybill, updateDeliveryWaybill, updateDeliveryWaybillStatus } from "@/api/wms/deliveryWaybill";
 import { listSelectableCoils } from "@/api/wms/deliveryPlan"; // 导入发货计划API
-import { listDeliveryPlan } from "@/api/wms/deliveryPlan"; 
+import { listDeliveryPlan } from "@/api/wms/deliveryPlan";
 import { listCoilByIds } from "@/api/wms/coil";
 import { listDeliveryWaybillDetail } from "@/api/wms/deliveryWaybillDetail";
 import MemoInput from "@/components/MemoInput";
@@ -196,6 +200,8 @@ export default {
       // 发货单表格数据
       deliveryWaybillList: [],
       waybillId: null,
+      // 上部分高度
+      topHeight: 300,
       // 打印相关数据
       printDialogVisible: false,
       currentWaybill: {},
@@ -262,6 +268,33 @@ export default {
         this.planListOption = response.rows || [];
       });
     },
+    /** 开始拖拽 */
+    startResize(e) {
+      e.preventDefault();
+      // 记录初始位置
+      const container = this.$el.querySelector('.el-card__body');
+      const containerRect = container.getBoundingClientRect();
+      this.startY = e.clientY;
+      this.startTopHeight = this.topHeight;
+      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;
+      }
+    },
+    /** 结束拖拽 */
+    stopResize() {
+      document.removeEventListener('mousemove', this.resize);
+      document.removeEventListener('mouseup', this.stopResize);
+    },
     getList() {
       this.loading = true;
       // 确保查询参数包含planId
@@ -524,4 +557,42 @@ export default {
   font-size: 16px;
   font-weight: 500;
 }
+
+.resizer {
+  width: 100%;
+  height: 4px;
+  background-color: #818181;
+  cursor: row-resize;
+  position: relative;
+  transition: background-color 0.3s;
+}
+
+.resizer:hover {
+  background-color: #409eff;
+}
+
+.resizer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 2px;
+  background-color: #c0c4cc;
+  border-radius: 1px;
+  transition: background-color 0.3s;
+}
+
+.resizer:hover::before {
+  background-color: #409eff;
+}
+
+.resizer:active {
+  background-color: #409eff;
+}
+
+.resizer:active::before {
+  background-color: #fff;
+}
 </style>