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

1.  移除合同页面的拖拽拆分面板功能，合并预览区到Tab页签
2.  将原生el-tabs替换为自定义Tab头部，新增合同信息页签
3.  调整产品类型列表列宽，优化页面展示效果
4.  精简冗余代码与样式，提升页面性能与可维护性

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>
+</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>