From f617bb884da05140b503088db668e3df3618c02f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 7 Jul 2026 11:22:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(crm/contract):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=90=88=E5=90=8C=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E4=B8=8E?=
 =?UTF-8?q?Tab=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  移除合同页面的拖拽拆分面板功能，合并预览区到Tab页签
2.  将原生el-tabs替换为自定义Tab头部，新增合同信息页签
3.  调整产品类型列表列宽，优化页面展示效果
4.  精简冗余代码与样式，提升页面性能与可维护性
---
 klp-ui/src/views/crm/components/CoilTable.vue |   2 +-
 .../crm/contract/components/ContractTabs.vue  | 193 +++++++++++++-----
 klp-ui/src/views/crm/contract/index.vue       |  55 +----
 3 files changed, 149 insertions(+), 101 deletions(-)

diff --git a/klp-ui/src/views/crm/components/CoilTable.vue b/klp-ui/src/views/crm/components/CoilTable.vue
index 26d7b08d1..2b7eb6ffc 100644
--- a/klp-ui/src/views/crm/components/CoilTable.vue
+++ b/klp-ui/src/views/crm/components/CoilTable.vue
@@ -42,7 +42,7 @@
       <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
       <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
       <el-table-column label="物料类型" align="center" prop="materialType" />
-      <el-table-column label="产品类型" align="center" width="180">
+      <el-table-column label="产品类型" align="center" width="140">
         <template slot-scope="scope">
           <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
           <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
diff --git a/klp-ui/src/views/crm/contract/components/ContractTabs.vue b/klp-ui/src/views/crm/contract/components/ContractTabs.vue
index 973c9d71b..821c22e76 100644
--- a/klp-ui/src/views/crm/contract/components/ContractTabs.vue
+++ b/klp-ui/src/views/crm/contract/components/ContractTabs.vue
@@ -1,51 +1,91 @@
 <template>
   <div class="contract-tabs">
     <div v-if="orderId" class="tabs-content">
-      <el-tabs v-model="activeTab" type="border-card">
-        <el-tab-pane label="财务状态" name="finance" v-hasPermi="['crm:order:finance']">
-          <div class="order-finance" v-if="activeTab === 'finance'">
-            <!-- 财务状态内容 -->
-            <ReceiveTable :order="currentOrder" />
-          </div>
-        </el-tab-pane>
+      <!-- 自定义Tab头部 -->
+      <div class="tab-header">
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'contract' }"
+          @click="activeTab = 'contract'"
+        >合同信息</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'finance' }"
+          @click="activeTab = 'finance'"
+        >财务状态</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'dispute' }"
+          @click="activeTab = 'dispute'"
+        >订单异议</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'product' }"
+          @click="activeTab = 'product'"
+        >生产成果</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'coil' }"
+          @click="activeTab = 'coil'"
+        >发货配卷</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'delivery' }"
+          @click="activeTab = 'delivery'"
+        >发货单据</span>
+        <span
+          class="tab-item"
+          :class="{ active: activeTab === 'attachment' }"
+          @click="activeTab = 'attachment'"
+        >合同附件</span>
+      </div>
 
-        <el-tab-pane label="订单异议" name="dispute" v-hasPermi="['crm:order:objection']">
-          <div class="order-dispute" v-if="activeTab === 'dispute'">
-            <!-- 订单异议内容 -->
-            <OrderObjection :order="currentOrder" />
-          </div>
-        </el-tab-pane>
-         <el-tab-pane label="生产成果" name="product">
-          <div class="order-record" v-if="activeTab === 'product'" v-loading="productCoilLoading">
-            <!-- 生产成果内容 -->
-            <CoilTable ref="productCoilTable" :data="productCoilList || []" :showSelection="true"
-              :pagination="productPagination" :total-statistics="productTotalStatistics"
-              @selection-change="handleProductSelectionChange"
-              @page-change="handleProductPageChange">
-              <template slot="filter-actions" slot-scope="{ selectedRows }">
-                <el-button type="primary" size="mini" icon="el-icon-refresh"
-                  :disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
-                  批量转单
-                </el-button>
-              </template>
-            </CoilTable>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="发货配卷" name="coil">
-          <div class="order-record" v-if="activeTab === 'coil'" v-loading="deliveryCoilLoading">
-            <!-- 发货配卷内容 -->
-            <CoilTable :data="deliveryCoilList || []"
-              :pagination="deliveryPagination" :total-statistics="deliveryTotalStatistics"
-              @page-change="handleDeliveryPageChange" />
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="发货单据" name="delivery">
-          <div class="order-record" v-if="activeTab === 'delivery'">
-            <!-- 发货单内容 -->
-            <DeliveryTable :data="deliveryWaybillList || []" />
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="合同附件" name="attachment" v-hasPermi="['crm:order:record']">
+      <!-- Tab内容区域（可滚动） -->
+      <div class="tab-body">
+        <!-- 合同信息 -->
+        <div v-show="activeTab === 'contract'">
+          <ContractPreview :contract="currentOrder" @updateStatus="$emit('updateStatus', $event)" />
+        </div>
+
+        <!-- 财务状态 -->
+        <div v-show="activeTab === 'finance'">
+          <ReceiveTable :order="currentOrder" />
+        </div>
+
+        <!-- 订单异议 -->
+        <div v-show="activeTab === 'dispute'">
+          <OrderObjection :order="currentOrder" />
+        </div>
+
+        <!-- 生产成果 -->
+        <div v-show="activeTab === 'product'" v-loading="productCoilLoading">
+          <CoilTable ref="productCoilTable" :data="productCoilList || []" :showSelection="true"
+            :pagination="productPagination" :total-statistics="productTotalStatistics"
+            @selection-change="handleProductSelectionChange"
+            @page-change="handleProductPageChange">
+            <template slot="filter-actions" slot-scope="{ selectedRows }">
+              <el-button type="primary" size="mini" icon="el-icon-refresh"
+                :disabled="!selectedRows.length" @click="handleBatchTransferContract(selectedRows)">
+                批量转单
+              </el-button>
+            </template>
+          </CoilTable>
+        </div>
+
+        <!-- 发货配卷 -->
+        <div v-show="activeTab === 'coil'" v-loading="deliveryCoilLoading">
+          <CoilTable :data="deliveryCoilList || []"
+            :pagination="deliveryPagination" :total-statistics="deliveryTotalStatistics"
+            @page-change="handleDeliveryPageChange" />
+        </div>
+
+        <!-- 发货单据 -->
+        <div v-show="activeTab === 'delivery'">
+          <DeliveryTable :data="deliveryWaybillList || []" />
+        </div>
+
+        <!-- 合同附件 -->
+        <div v-show="activeTab === 'attachment'">
           <div class="attachment-item">
             <h4>商务附件</h4>
             <FileList :oss-ids="contractAttachment" />
@@ -62,8 +102,8 @@
             <h4>其他附件</h4>
             <FileList :oss-ids="form.annexFiles" />
           </div>
-        </el-tab-pane>
-      </el-tabs>
+        </div>
+      </div>
 
       <!-- 批量转单 - 选择目标合同弹窗 -->
       <el-dialog title="批量转单" :visible.sync="batchTransferDialogVisible" width="500px" append-to-body
@@ -79,7 +119,7 @@
         </span>
       </el-dialog>
     </div>
-    <div v-else class="no-selection" style="display: flex; align-items: center; justify-content: center; height: 100%;">
+    <div v-else class="no-selection">
       <el-empty description="请先选择合同" />
     </div>
   </div>
@@ -91,6 +131,7 @@ import ContractSelect from "@/components/KLPService/ContractSelect";
 import { batchUpdateContractCoil } from "@/api/wms/coil";
 import FileList from "@/components/FileList";
 import DeliveryTable from "../../components/DeliveryTable.vue";
+import ContractPreview from "./ContractPreview.vue";
 
 // 导入可能需要的组件
 import OrderDetail from "../../components/OrderDetail.vue";
@@ -108,6 +149,7 @@ export default {
     ContractSelect,
     FileList,
     DeliveryTable,
+    ContractPreview,
     OrderDetail,
     OrderEdit,
     ReceiveTable,
@@ -153,7 +195,7 @@ export default {
   data() {
     return {
       // 活动tab
-      activeTab: "finance",
+      activeTab: "contract",
       selectedProductRows: [],
       batchTransferDialogVisible: false,
       batchTargetContractId: '',
@@ -304,4 +346,57 @@ export default {
     },
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.contract-tabs {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-header {
+  flex-shrink: 0;
+  display: flex;
+  border-bottom: 2px solid #e4e7ed;
+  background: #fff;
+}
+
+.tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  color: #606266;
+  font-size: 14px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: color .3s, border-color .3s;
+  user-select: none;
+}
+
+.tab-item:hover {
+  color: #409eff;
+}
+
+.tab-item.active {
+  color: #409eff;
+  border-bottom-color: #409eff;
+}
+
+.tab-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.no-selection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+</style>
diff --git a/klp-ui/src/views/crm/contract/index.vue b/klp-ui/src/views/crm/contract/index.vue
index 4981333c6..32334aaf0 100644
--- a/klp-ui/src/views/crm/contract/index.vue
+++ b/klp-ui/src/views/crm/contract/index.vue
@@ -11,24 +11,11 @@
 
     <!-- 右侧内容区域 -->
     <div class="right-panel" v-if="form.orderId" style="flex: 1; display: flex; flex-direction: column;">
-      <!-- 右侧上方：合同内容信息预览 -->
-      <div class="preview-panel" ref="previewPanel"
-        style="flex: 1; overflow-y: auto; border-bottom: 1px solid #e4e7ed;">
-        <ContractPreview :contract="form" @updateStatus="handleStatusChange" />
-      </div>
-
-      <!-- 拖拽调整条 -->
-      <div class="resize-handle" ref="resizeHandle"
-        style="height: 8px; background-color: #f5f7fa; cursor: row-resize; display: flex; align-items: center; justify-content: center;"
-        @mousedown="startResize">
-        <div style="width: 40px; height: 2px; background-color: #dcdfe6;"></div>
-      </div>
-
-      <!-- 右侧下方：Tab标签页 -->
-      <div class="tab-panel" ref="tabPanel" style="flex: 1; overflow-y: auto;">
+      <div class="tab-panel" style="flex: 1; overflow: hidden;">
         <ContractTabs :orderId="form.orderId" :deliveryWaybillList="wmsDeliveryWaybills"
           :contract-attachment="form.businessAnnex" :technical-agreement="form.techAnnex"
-          :other-attachment="form.productionSchedule" :currentOrder="form" />
+          :other-attachment="form.productionSchedule" :currentOrder="form"
+          @updateStatus="handleStatusChange" />
       </div>
     </div>
     <div v-else style="flex: 1; display: flex; flex-direction: column;">
@@ -234,7 +221,6 @@ import { addCustomer } from "@/api/crm/customer";
 import { listDeliveryWaybill } from "@/api/wms/deliveryWaybill";
 import dayjs from "dayjs";
 import ContractList from "./components/ContractList.vue";
-import ContractPreview from "./components/ContractPreview.vue";
 import ContractTabs from "./components/ContractTabs.vue";
 import ContractExportDialog from "./components/ContractExportDialog.vue";
 import ProductContent from "./components/ProductContent.vue";
@@ -246,7 +232,6 @@ export default {
   name: "Contract",
   components: {
     ContractList,
-    ContractPreview,
     ContractTabs,
     ContractExportDialog,
     ProductContent,
@@ -706,34 +691,6 @@ export default {
       this.customerOpen = false;
       this.customerForm = {};
     },
-    /** 开始拖拽调整 */
-    startResize(e) {
-      e.preventDefault();
-      const previewPanel = this.$refs.previewPanel;
-      const tabPanel = this.$refs.tabPanel;
-      const startY = e.clientY;
-      const startPreviewHeight = previewPanel.offsetHeight;
-      const parentHeight = previewPanel.parentElement.offsetHeight;
-
-      const handleMouseMove = (event) => {
-        const deltaY = event.clientY - startY;
-        const newPreviewHeight = startPreviewHeight + deltaY;
-        const newTabHeight = parentHeight - newPreviewHeight - 8; // 8是拖拽条的高度
-
-        if (newPreviewHeight > 100 && newTabHeight > 100) { // 最小高度限制
-          previewPanel.style.flex = `0 0 ${newPreviewHeight}px`;
-          tabPanel.style.flex = `0 0 ${newTabHeight}px`;
-        }
-      };
-
-      const handleMouseUp = () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-      };
-
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
-    }
   }
 };
 </script>
@@ -756,11 +713,7 @@ export default {
   overflow: hidden;
 }
 
-.preview-panel {
-  overflow-y: auto;
-}
-
 .tab-panel {
-  overflow-y: auto;
+  overflow: hidden;
 }
 </style>
\ No newline at end of file