refactor(crm/contract): 重构合同页面布局与Tab组件

1. 移除合同页面的拖拽拆分面板功能，合并预览区到Tab页签 2. 将原生el-tabs替换为自定义Tab头部，新增合同信息页签 3. 调整产品类型列表列宽，优化页面展示效果 4. 精简冗余代码与样式，提升页面性能与可维护性
2026-07-07 11:22:17 +08:00
parent 70251cd9d1
commit f617bb884d
3 changed files with 149 additions and 101 deletions
--- 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" />
--- 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: '',
@@ -305,3 +347,56 @@ export default {
  }
 };
 </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>
--- 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>