feat: 新增订单日期范围筛选、明细管理与分类接口

1. 为订单和订单明细BO新增签订、交货日期范围查询字段并配置日期格式化
2. 实现订单日期范围筛选逻辑，新增日期加一天工具方法处理带时间字段的范围查询
3. 重构订单明细列表查询逻辑，支持按合同号、需方、日期范围关联主表筛选
4. 新增通用分类管理接口与页面
5. 优化合同列表页面，新增详情编辑跳转与日期范围筛选
6. 新增订单明细全量查询与单订单明细编辑页面

klp-crm/src/main/java/com/klp/crm/domain/bo/CrmOrderBo.java

@@ -249,5 +249,20 @@ public class CrmOrderBo extends BaseEntity {
 
     private List<Long> orderIds;
 
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date signDateStart;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date signDateEnd;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date deliveryDateStart;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date deliveryDateEnd;
 
 }

klp-crm/src/main/java/com/klp/crm/domain/bo/CrmOrderItemBo.java

@@ -6,6 +6,10 @@ import lombok.EqualsAndHashCode;
 import javax.validation.constraints.*;
 
 import java.math.BigDecimal;
+import java.util.Date;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import org.springframework.format.annotation.DateTimeFormat;
 
 /**
  * 正式订单明细业务对象 crm_order_item
@@ -143,4 +147,30 @@ public class CrmOrderItemBo extends BaseEntity {
      */
     private String purpose;
 
+    /**
+     * 筛选：合同号（模糊，按订单主表 crm_order.contract_code）
+     */
+    private String contractCode;
+
+    /**
+     * 筛选：需方（模糊，按订单主表 crm_order.customer）
+     */
+    private String customer;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date signDateStart;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date signDateEnd;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date deliveryDateStart;
+
+    @DateTimeFormat(pattern = "yyyy-MM-dd")
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date deliveryDateEnd;
+
 }

klp-crm/src/main/java/com/klp/crm/service/impl/CrmOrderItemServiceImpl.java

@@ -1,6 +1,7 @@
 package com.klp.crm.service.impl;
 
 import cn.hutool.core.bean.BeanUtil;
+import cn.hutool.core.util.ObjectUtil;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
@@ -35,7 +36,6 @@ import com.klp.mapper.WmsReceivableMapper;
 import com.klp.mapper.WmsDeliveryWaybillMapper;
 import com.klp.mapper.WmsDeliveryWaybillDetailMapper;
 import com.klp.service.IWmsMaterialCoilService;
-import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 
 import java.util.*;
 import java.util.stream.Collectors;
@@ -72,26 +72,19 @@ public class CrmOrderItemServiceImpl implements ICrmOrderItemService {
      */
     @Override
     public TableDataInfo<CrmOrderItemVo> queryPageList(CrmOrderItemBo bo, PageQuery pageQuery) {
+        List<Long> orderIdScope = resolveOrderIdScope(bo);
+        if (orderIdScope != null && orderIdScope.isEmpty()) {
+            Page<CrmOrderItemVo> emptyPage = new Page<>(ObjectUtil.defaultIfNull(pageQuery.getPageNum(), 1),
+                ObjectUtil.defaultIfNull(pageQuery.getPageSize(), 10), 0);
+            emptyPage.setRecords(Collections.emptyList());
+            return TableDataInfo.build(emptyPage);
+        }
         LambdaQueryWrapper<CrmOrderItem> lqw = buildQueryWrapper(bo);
+        if (orderIdScope != null) {
+            lqw.in(CrmOrderItem::getOrderId, orderIdScope);
+        }
         Page<CrmOrderItemVo> result = baseMapper.selectVoPage(pageQuery.build(), lqw);
-        List<CrmOrderItemVo> records = result.getRecords();
+        fillOrderInfoOnItems(result.getRecords());
-        if (records != null && !records.isEmpty()) {
-            List<Long> orderIds = records.stream()
-                .map(CrmOrderItemVo::getOrderId)
-                .filter(Objects::nonNull)
-                .distinct()
-                .collect(Collectors.toList());
-            if (!orderIds.isEmpty()) {
-                CrmOrderBo crmOrder = new CrmOrderBo();
-                crmOrder.setOrderIds(orderIds);
-                List<CrmOrderVo> orderList = crmOrderService.queryList(crmOrder);
-                Map<Long, CrmOrderVo> orderMap = orderList.stream()
-                    .collect(Collectors.toMap(CrmOrderVo::getOrderId, o -> o, (a, b) -> a));
-                for (CrmOrderItemVo item : records) {
-                    item.setOrderInfo(orderMap.get(item.getOrderId()));
-                }
-            }
-        }
         return TableDataInfo.build(result);
     }
 
@@ -100,8 +93,72 @@ public class CrmOrderItemServiceImpl implements ICrmOrderItemService {
      */
     @Override
     public List<CrmOrderItemVo> queryList(CrmOrderItemBo bo) {
+        List<Long> orderIdScope = resolveOrderIdScope(bo);
+        if (orderIdScope != null && orderIdScope.isEmpty()) {
+            return Collections.emptyList();
+        }
         LambdaQueryWrapper<CrmOrderItem> lqw = buildQueryWrapper(bo);
-        return baseMapper.selectVoList(lqw);
+        if (orderIdScope != null) {
+            lqw.in(CrmOrderItem::getOrderId, orderIdScope);
+        }
+        List<CrmOrderItemVo> list = baseMapper.selectVoList(lqw);
+        fillOrderInfoOnItems(list);
+        return list;
+    }
+
+    /**
+     * 按合同号/需方筛选时，解析为订单 ID 列表；无此类筛选返回 null（不按订单 ID 限制）。
+     * 若同时传 orderId，则仅在匹配集合内保留该订单。
+     */
+    private List<Long> resolveOrderIdScope(CrmOrderItemBo bo) {
+        boolean hasContractFilter = StringUtils.isNotBlank(bo.getContractCode());
+        boolean hasCustomerFilter = StringUtils.isNotBlank(bo.getCustomer());
+        boolean hasSignDateFilter = bo.getSignDateStart() != null || bo.getSignDateEnd() != null;
+        boolean hasDeliveryDateFilter = bo.getDeliveryDateStart() != null || bo.getDeliveryDateEnd() != null;
+        
+        if (!hasContractFilter && !hasCustomerFilter && !hasSignDateFilter && !hasDeliveryDateFilter) {
+            return null;
+        }
+        LambdaQueryWrapper<CrmOrder> ow = Wrappers.lambdaQuery();
+        ow.eq(CrmOrder::getDelFlag, 0L);
+        ow.like(hasContractFilter, CrmOrder::getContractCode, bo.getContractCode());
+        ow.like(hasCustomerFilter, CrmOrder::getCustomer, bo.getCustomer());
+        // 日期范围查询：开始日期 >= 开始，结束日期 < 结束+1天（处理带时间的字段）
+        ow.ge(bo.getSignDateStart() != null, CrmOrder::getSignTime, bo.getSignDateStart());
+        ow.lt(bo.getSignDateEnd() != null, CrmOrder::getSignTime, addOneDay(bo.getSignDateEnd()));
+        ow.ge(bo.getDeliveryDateStart() != null, CrmOrder::getDeliveryDate, bo.getDeliveryDateStart());
+        ow.lt(bo.getDeliveryDateEnd() != null, CrmOrder::getDeliveryDate, addOneDay(bo.getDeliveryDateEnd()));
+        List<CrmOrder> orders = crmOrderMapper.selectList(ow);
+        List<Long> matched = orders.stream().map(CrmOrder::getOrderId).collect(Collectors.toList());
+        if (bo.getOrderId() != null) {
+            if (!matched.contains(bo.getOrderId())) {
+                return Collections.emptyList();
+            }
+            return Collections.singletonList(bo.getOrderId());
+        }
+        return matched;
+    }
+
+    private void fillOrderInfoOnItems(List<CrmOrderItemVo> records) {
+        if (records == null || records.isEmpty()) {
+            return;
+        }
+        List<Long> orderIds = records.stream()
+            .map(CrmOrderItemVo::getOrderId)
+            .filter(Objects::nonNull)
+            .distinct()
+            .collect(Collectors.toList());
+        if (orderIds.isEmpty()) {
+            return;
+        }
+        CrmOrderBo crmOrder = new CrmOrderBo();
+        crmOrder.setOrderIds(orderIds);
+        List<CrmOrderVo> orderList = crmOrderService.queryList(crmOrder);
+        Map<Long, CrmOrderVo> orderMap = orderList.stream()
+            .collect(Collectors.toMap(CrmOrderVo::getOrderId, o -> o, (a, b) -> a));
+        for (CrmOrderItemVo item : records) {
+            item.setOrderInfo(orderMap.get(item.getOrderId()));
+        }
     }
 
     private LambdaQueryWrapper<CrmOrderItem> buildQueryWrapper(CrmOrderItemBo bo) {
@@ -114,7 +171,7 @@ public class CrmOrderItemServiceImpl implements ICrmOrderItemService {
         lqw.eq(StringUtils.isNotBlank(bo.getSpecialRequire()), CrmOrderItem::getSpecialRequire, bo.getSpecialRequire());
         lqw.eq(bo.getItemAmount() != null, CrmOrderItem::getItemAmount, bo.getItemAmount());
         lqw.eq(StringUtils.isNotBlank(bo.getFinishedProductSpec()), CrmOrderItem::getFinishedProductSpec, bo.getFinishedProductSpec());
-        lqw.eq(StringUtils.isNotBlank(bo.getMaterial()), CrmOrderItem::getMaterial, bo.getMaterial());
+        lqw.like(StringUtils.isNotBlank(bo.getMaterial()), CrmOrderItem::getMaterial, bo.getMaterial());
         lqw.eq(StringUtils.isNotBlank(bo.getGrade()), CrmOrderItem::getGrade, bo.getGrade());
         lqw.eq(bo.getWeight() != null, CrmOrderItem::getWeight, bo.getWeight());
         lqw.eq(StringUtils.isNotBlank(bo.getWidthTolerance()), CrmOrderItem::getWidthTolerance, bo.getWidthTolerance());
@@ -176,6 +233,17 @@ public class CrmOrderItemServiceImpl implements ICrmOrderItemService {
         return baseMapper.deleteBatchIds(ids) > 0;
     }
 
+    /**
+     * 日期加一天（用于处理带时间的日期字段范围查询）
+     */
+    private Date addOneDay(Date date) {
+        if (date == null) return null;
+        Calendar calendar = Calendar.getInstance();
+        calendar.setTime(date);
+        calendar.add(Calendar.DATE, 1);
+        return calendar.getTime();
+    }
+
     @Override
     public CrmContractOrderFinanceVo queryFinanceAndObjectionByContractId(Long contractId) {
         CrmContractOrderFinanceVo result = new CrmContractOrderFinanceVo();

klp-crm/src/main/java/com/klp/crm/service/impl/CrmOrderServiceImpl.java

@@ -238,6 +238,11 @@ public class CrmOrderServiceImpl implements ICrmOrderService {
         qw.eq(bo.getContractId() != null, "co.contract_id", bo.getContractId());
         qw.like(StringUtils.isNotBlank(bo.getAnnexFiles()), "co.annex_files", bo.getAnnexFiles());
         qw.eq(bo.getIsTop() != null, "co.is_top", bo.getIsTop());
+        // 日期范围查询：开始日期 >= 开始，结束日期 < 结束+1天（处理带时间的字段）
+        qw.ge(bo.getSignDateStart() != null, "co.sign_time", bo.getSignDateStart());
+        qw.lt(bo.getSignDateEnd() != null, "co.sign_time", addOneDay(bo.getSignDateEnd()));
+        qw.ge(bo.getDeliveryDateStart() != null, "co.delivery_date", bo.getDeliveryDateStart());
+        qw.lt(bo.getDeliveryDateEnd() != null, "co.delivery_date", addOneDay(bo.getDeliveryDateEnd()));
         if(bo.getOrderIds() !=null){
             qw.in(!bo.getOrderIds().isEmpty(), "co.order_id", bo.getOrderIds());
         }
@@ -304,4 +309,15 @@ public class CrmOrderServiceImpl implements ICrmOrderService {
         }
         return baseMapper.deleteBatchIds(ids) > 0;
     }
+
+    /**
+     * 日期加一天（用于处理带时间的日期字段范围查询）
+     */
+    private Date addOneDay(Date date) {
+        if (date == null) return null;
+        Calendar calendar = Calendar.getInstance();
+        calendar.setTime(date);
+        calendar.add(Calendar.DATE, 1);
+        return calendar.getTime();
+    }
 }

klp-ui/src/api/wms/category.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询通用分类列表
+export function listCategory(query) {
+  return request({
+    url: '/wms/category/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询通用分类详细
+export function getCategory(categoryId) {
+  return request({
+    url: '/wms/category/' + categoryId,
+    method: 'get'
+  })
+}
+
+// 新增通用分类
+export function addCategory(data) {
+  return request({
+    url: '/wms/category',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改通用分类
+export function updateCategory(data) {
+  return request({
+    url: '/wms/category',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除通用分类
+export function delCategory(categoryId) {
+  return request({
+    url: '/wms/category/' + categoryId,
+    method: 'delete'
+  })
+}
+
+// 导出通用分类
+export function exportCategory(query) {
+  return request({
+    url: '/wms/category/export',
+    method: 'get',
+    params: query
+  })
+}

klp-ui/src/views/crm/contract/components/ContractList.vue

@@ -3,21 +3,43 @@
     <!-- 筛选区和按钮操作区合并 -->
     <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
-        <div style="display: flex; align-items: center; gap: 4px;">
+        <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
           <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable
-            @keyup.enter.native="handleQuery" />
+            @keyup.enter.native="handleQuery" style="width: 160px;" />
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
           <el-button icon="el-icon-sort" size="mini" @click="toggleMoreFilter"
             :type="showMoreFilter ? 'primary' : 'default'">
-            <!-- {{ showMoreFilter ? '收起' : '更多' }} -->
           </el-button>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$emit('add')"></el-button>
         </div>
+        <div style="font-size: 12px; color: #909399;">
+          共 <span style="color: #409eff; font-weight: bold;">{{ total }}</span> 条记录
+        </div>
+      </div>
+
+      <!-- 日期范围筛选行 -->
+      <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px;">
+        <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
+          <span style="white-space: nowrap;">签订日期：</span>
+          <el-date-picker clearable v-model="queryParams.signDateStart" type="date" value-format="yyyy-MM-dd"
+            placeholder="签订日期开始" style="width: 180px;" />
+          <span>~</span>
+          <el-date-picker clearable v-model="queryParams.signDateEnd" type="date" value-format="yyyy-MM-dd"
+            placeholder="签订日期结束" style="width: 180px;" />
+        </div>
+        <div style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: #606266;">
+          <span style="white-space: nowrap;">交货日期：</span>
+          <el-date-picker clearable v-model="queryParams.deliveryDateStart" type="date" value-format="yyyy-MM-dd"
+            placeholder="交货开始日期" style="width: 180px;" />
+          <span>~</span>
+          <el-date-picker clearable v-model="queryParams.deliveryDateEnd" type="date" value-format="yyyy-MM-dd"
+            placeholder="交货结束日期" style="width: 180px;" />
+        </div>
       </div>
 
       <!-- 更多筛选条件 -->
       <div v-show="showMoreFilter" class="more-filter"
-        style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
+        style="margin-top: 8px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
           <el-form-item label="合同名称" prop="contractName">
             <el-input v-model="queryParams.contractName" placeholder="请输入合同名称" clearable
@@ -37,16 +59,6 @@
           <el-form-item label="需方" prop="customer">
             <el-input v-model="queryParams.customer" placeholder="请输入需方" clearable @keyup.enter.native="handleQuery" />
           </el-form-item>
-          <el-form-item label="签订时间" prop="signTime">
-            <el-date-picker clearable v-model="queryParams.signTime" type="date" value-format="yyyy-MM-dd"
-              placeholder="请选择签订时间">
-            </el-date-picker>
-          </el-form-item>
-          <el-form-item label="交货日期" prop="deliveryDate">
-            <el-date-picker clearable v-model="queryParams.deliveryDate" type="date" value-format="yyyy-MM-dd"
-              placeholder="请选择交货日期">
-            </el-date-picker>
-          </el-form-item>
           <el-form-item label="签订地点" prop="signLocation">
             <el-input v-model="queryParams.signLocation" placeholder="请输入签订地点" clearable
               @keyup.enter.native="handleQuery" />
@@ -107,6 +119,7 @@
           <!-- 操作按钮独占一行 -->
         <div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
           <el-button size="mini" type="text" :icon="row.isTop ? 'el-icon-top' : 'el-icon-s-operation'" @click.stop="handleToggleTop(row)">{{ row.isTop ? '取消置顶' : '置顶' }}</el-button>
+          <el-button size="mini" type="text" icon="el-icon-document" @click.stop="$emit('detailEdit', row)">详情编辑</el-button>
           <el-button size="mini" type="text" icon="el-icon-download" @click.stop="handleExport(row)">导出</el-button>
           <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
@@ -155,8 +168,10 @@ export default {
         contractCode: undefined,
         supplier: undefined,
         customer: undefined,
-        signTime: undefined,
+        signDateStart: undefined,
-        deliveryDate: undefined,
+        signDateEnd: undefined,
+        deliveryDateStart: undefined,
+        deliveryDateEnd: undefined,
         signLocation: undefined,
         status: undefined,
       },
@@ -204,6 +219,10 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.$refs["queryForm"].resetFields();
+      this.queryParams.signDateStart = undefined;
+      this.queryParams.signDateEnd = undefined;
+      this.queryParams.deliveryDateStart = undefined;
+      this.queryParams.deliveryDateEnd = undefined;
       this.handleQuery();
     },
 

klp-ui/src/views/crm/contract/detail/index.vue

@@ -0,0 +1,782 @@
+<template>
+  <div class="contract-detail-page">
+    <!-- 筛选栏 -->
+    <div class="filter-section">
+      <el-input
+        v-model="contractQuery.contractCode"
+        placeholder="合同号"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="contractQuery.supplier"
+        placeholder="供方"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="contractQuery.customer"
+        placeholder="需方"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-select v-model="contractQuery.status" placeholder="合同状态" size="small" clearable style="width: 120px">
+        <el-option label="草稿" value="0" />
+        <el-option label="已生效" value="1" />
+        <el-option label="已作废" value="2" />
+        <el-option label="已完成" value="3" />
+      </el-select>
+      <el-date-picker
+        v-model="signDateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="签订开始"
+        end-placeholder="签订结束"
+        size="small"
+        style="width: 220px"
+        value-format="yyyy-MM-dd"
+        :unlink-panels="true"
+        @change="handleSignDateChange"
+      />
+      <el-date-picker
+        v-model="deliveryDateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="交货开始"
+        end-placeholder="交货结束"
+        size="small"
+        style="width: 220px"
+        value-format="yyyy-MM-dd"
+        :unlink-panels="true"
+        @change="handleDeliveryDateChange"
+      />
+      <el-input
+        v-model="contractQuery.signLocation"
+        placeholder="签订地点"
+        size="small"
+        clearable
+        style="width: 120px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">筛选</el-button>
+      <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      <span v-if="total > 0" class="result-count">共 {{ total }} 条记录</span>
+    </div>
+
+    <!-- 合同详情表格 -->
+    <div class="table-section">
+      <el-table
+        :data="contractList"
+        size="small"
+        border
+        v-loading="loading"
+        style="width: 100%"
+        class="contract-edit-table"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
+      >
+        <!-- 合同号 -->
+        <el-table-column label="合同号" prop="contractCode" min-width="130" fixed="left">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.contractCode"
+                size="small"
+                class="editable-cell"
+                :title="scope.row.contractCode"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 供方 -->
+        <el-table-column label="供方" prop="supplier" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.supplier"
+                size="small"
+                class="editable-cell"
+                :title="scope.row.supplier"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 需方 -->
+        <el-table-column label="需方" prop="customer" min-width="160">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper" style="display: flex; align-items: center; gap: 2px;">
+              <el-input
+                v-model="scope.row.customer"
+                size="small"
+                class="editable-cell"
+                :title="scope.row.customer"
+                style="flex: 1"
+                @blur="saveRow(scope.row)"
+              />
+              <el-button
+                type="text"
+                size="mini"
+                icon="el-icon-search"
+                style="flex-shrink: 0; padding: 4px 2px; color: #5F7BA0;"
+                @click="openCustomerDialog(scope.$index)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 签订日期 -->
+        <el-table-column label="签订日期" prop="signTime" width="110">
+          <template slot-scope="scope">
+            <el-date-picker
+              v-model="scope.row.signTime"
+              type="date"
+              size="small"
+              value-format="yyyy-MM-dd"
+              class="editable-cell-date"
+              :clearable="false"
+              @change="saveRow(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 交货日期 -->
+        <el-table-column label="交货日期" prop="deliveryDate" width="110">
+          <template slot-scope="scope">
+            <el-date-picker
+              v-model="scope.row.deliveryDate"
+              type="date"
+              size="small"
+              value-format="yyyy-MM-dd"
+              class="editable-cell-date"
+              :clearable="false"
+              @change="saveRow(scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 签订地点 -->
+        <el-table-column label="签订地点" prop="signLocation" width="120">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.signLocation"
+                size="small"
+                class="editable-cell-blue"
+                :title="scope.row.signLocation"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 供方地址 -->
+        <el-table-column label="供方地址" prop="supplierAddress" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.supplierAddress"
+                size="small"
+                class="editable-cell-blue"
+                :title="scope.row.supplierAddress"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 供方电话 -->
+        <el-table-column label="供方电话" prop="supplierPhone" width="120">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.supplierPhone"
+                size="small"
+                class="editable-cell-blue"
+                :title="scope.row.supplierPhone"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 供方开户行 -->
+        <el-table-column label="供方开户行" prop="supplierBank" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.supplierBank"
+                size="small"
+                class="editable-cell-blue"
+                :title="scope.row.supplierBank"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 供方账号 -->
+        <el-table-column label="供方账号" prop="supplierAccount" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.supplierAccount"
+                size="small"
+                class="editable-cell-blue"
+                :title="scope.row.supplierAccount"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 需方地址 -->
+        <el-table-column label="需方地址" prop="customerAddress" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.customerAddress"
+                size="small"
+                class="editable-cell-green"
+                :title="scope.row.customerAddress"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 需方电话 -->
+        <el-table-column label="需方电话" prop="customerPhone" width="120">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.customerPhone"
+                size="small"
+                class="editable-cell-green"
+                :title="scope.row.customerPhone"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 需方开户行 -->
+        <el-table-column label="需方开户行" prop="customerBank" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.customerBank"
+                size="small"
+                class="editable-cell-green"
+                :title="scope.row.customerBank"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 需方账号 -->
+        <el-table-column label="需方账号" prop="customerAccount" min-width="140">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.customerAccount"
+                size="small"
+                class="editable-cell-green"
+                :title="scope.row.customerAccount"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 订单金额 -->
+        <el-table-column label="订单金额" prop="orderAmount" width="110">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.orderAmount"
+                size="small"
+                class="editable-cell-pink"
+                :title="scope.row.orderAmount"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 已收款 -->
+        <el-table-column label="已收款" prop="receivedAmount" width="110">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.receivedAmount"
+                size="small"
+                class="editable-cell-pink"
+                :title="scope.row.receivedAmount"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 状态 -->
+        <el-table-column label="状态" prop="status" width="90" align="center">
+          <template slot-scope="scope">
+            <el-select v-model="scope.row.status" size="small" class="editable-cell-pink" @change="saveRow(scope.row)">
+              <el-option label="草稿" value="0" />
+              <el-option label="已生效" value="1" />
+              <el-option label="已作废" value="2" />
+              <el-option label="已完成" value="3" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <!-- 备注 -->
+        <el-table-column label="备注" prop="remark" min-width="150">
+          <template slot-scope="scope">
+            <div class="editable-cell-wrapper">
+              <el-input
+                v-model="scope.row.remark"
+                size="small"
+                class="editable-cell-pink"
+                :title="scope.row.remark"
+                @blur="saveRow(scope.row)"
+              />
+            </div>
+          </template>
+        </el-table-column>
+        <!-- 操作 -->
+        <el-table-column label="操作" width="80" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="saveRow(scope.row)">保存</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="contractQuery.pageNum"
+        :limit.sync="contractQuery.pageSize"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- 客户选择弹窗 -->
+    <el-dialog
+      title="选择客户"
+      :visible.sync="customerDialogVisible"
+      width="720px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div style="margin-bottom: 12px; display: flex; gap: 8px;">
+        <el-input
+          v-model="customerQuery.companyName"
+          placeholder="公司名称"
+          size="small"
+          clearable
+          style="width: 180px"
+          @keyup.enter.native="searchCustomer"
+        />
+        <el-input
+          v-model="customerQuery.contactPerson"
+          placeholder="联系人"
+          size="small"
+          clearable
+          style="width: 140px"
+          @keyup.enter.native="searchCustomer"
+        />
+        <el-button type="primary" size="small" icon="el-icon-search" @click="searchCustomer">搜索</el-button>
+      </div>
+      <el-table
+        :data="customerList"
+        v-loading="customerLoading"
+        size="small"
+        border
+        highlight-current-row
+        @current-change="handleCustomerCurrentChange"
+        style="width: 100%"
+        max-height="360"
+      >
+        <el-table-column label="公司名称" prop="companyName" min-width="160" show-overflow-tooltip />
+        <el-table-column label="联系人" prop="contactPerson" width="100" />
+        <el-table-column label="联系方式" prop="contactWay" width="130" show-overflow-tooltip />
+        <el-table-column label="地址" prop="address" min-width="160" show-overflow-tooltip />
+        <el-table-column label="税号" prop="taxNumber" width="140" show-overflow-tooltip />
+        <el-table-column label="操作" width="70" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="selectCustomer(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div style="margin-top: 8px; text-align: right;">
+        <el-pagination
+          small
+          layout="total, prev, pager, next"
+          :total="customerTotal"
+          :page-size="customerQuery.pageSize"
+          :current-page.sync="customerQuery.pageNum"
+          @current-change="searchCustomer"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listOrder, updateOrder } from '@/api/crm/order'
+import { listCustomer } from '@/api/crm/customer'
+
+const STATUS_MAP = {
+  '0': { label: '草稿', type: 'info' },
+  '1': { label: '已生效', type: 'success' },
+  '2': { label: '已作废', type: 'danger' },
+  '3': { label: '已完成', type: 'primary' }
+}
+
+export default {
+  name: 'ContractDetailEdit',
+  data() {
+    return {
+      loading: false,
+      contractList: [],
+      total: 0,
+      signDateRange: null,
+      deliveryDateRange: null,
+      contractQuery: {
+        pageNum: 1,
+        pageSize: 50,
+        contractCode: undefined,
+        supplier: undefined,
+        customer: undefined,
+        status: undefined,
+        signDateStart: undefined,
+        signDateEnd: undefined,
+        deliveryDateStart: undefined,
+        deliveryDateEnd: undefined,
+        signLocation: undefined
+      },
+      // 存储原始数据，用于判断是否有修改
+      originalData: {},
+      // 客户选择弹窗
+      customerDialogVisible: false,
+      customerLoading: false,
+      customerList: [],
+      customerTotal: 0,
+      currentRowIndex: null,
+      customerQuery: {
+        pageNum: 1,
+        pageSize: 10,
+        companyName: undefined,
+        contactPerson: undefined
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    statusType(status) {
+      return (STATUS_MAP[String(status)] || {}).type || ''
+    },
+    statusLabel(status) {
+      return (STATUS_MAP[String(status)] || {}).label || '未知'
+    },
+
+    // 签订日期范围变更
+    handleSignDateChange(val) {
+      if (val && val.length === 2) {
+        this.contractQuery.signDateStart = val[0]
+        this.contractQuery.signDateEnd = val[1]
+      } else {
+        this.contractQuery.signDateStart = undefined
+        this.contractQuery.signDateEnd = undefined
+      }
+      this.handleQuery()
+    },
+
+    // 交货日期范围变更
+    handleDeliveryDateChange(val) {
+      if (val && val.length === 2) {
+        this.contractQuery.deliveryDateStart = val[0]
+        this.contractQuery.deliveryDateEnd = val[1]
+      } else {
+        this.contractQuery.deliveryDateStart = undefined
+        this.contractQuery.deliveryDateEnd = undefined
+      }
+      this.handleQuery()
+    },
+
+    // 获取合同列表
+    getList() {
+      this.loading = true
+      listOrder(this.contractQuery).then(res => {
+        this.contractList = res.rows || []
+        this.total = res.total || 0
+        this.originalData = {}
+        this.contractList.forEach(row => {
+          this.originalData[row.orderId] = JSON.stringify(row)
+        })
+      }).catch(e => {
+        console.error(e)
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
+    // 判断数据是否有变化
+    hasChanged(row) {
+      if (!row.orderId || !this.originalData[row.orderId]) return false
+      return this.originalData[row.orderId] !== JSON.stringify(row)
+    },
+
+    // 筛选
+    handleQuery() {
+      this.contractQuery.pageNum = 1
+      this.getList()
+    },
+
+    // 重置
+    resetQuery() {
+      this.signDateRange = null
+      this.deliveryDateRange = null
+      this.contractQuery.contractCode = undefined
+      this.contractQuery.supplier = undefined
+      this.contractQuery.customer = undefined
+      this.contractQuery.status = undefined
+      this.contractQuery.signDateStart = undefined
+      this.contractQuery.signDateEnd = undefined
+      this.contractQuery.deliveryDateStart = undefined
+      this.contractQuery.deliveryDateEnd = undefined
+      this.contractQuery.signLocation = undefined
+      this.contractQuery.pageNum = 1
+      this.getList()
+    },
+
+    // 保存行数据
+    saveRow(row) {
+      if (!row.orderId) {
+        this.$message.warning('合同ID不存在')
+        return
+      }
+      // 判断是否有修改
+      if (!this.hasChanged(row)) {
+        return
+      }
+      updateOrder(row).then(() => {
+        // 更新原始数据
+        this.originalData[row.orderId] = JSON.stringify(row)
+        this.$message.success('保存成功')
+      }).catch(e => {
+        this.$message.error('保存失败')
+        console.error(e)
+        // 刷新数据
+        this.getList()
+      })
+    },
+
+    // 打开客户选择弹窗
+    openCustomerDialog(rowIndex) {
+      this.currentRowIndex = rowIndex
+      this.customerQuery.pageNum = 1
+      this.customerQuery.companyName = undefined
+      this.customerQuery.contactPerson = undefined
+      this.customerDialogVisible = true
+      this.searchCustomer()
+    },
+
+    // 搜索客户
+    searchCustomer() {
+      this.customerLoading = true
+      listCustomer(this.customerQuery).then(res => {
+        this.customerList = res.rows || []
+        this.customerTotal = res.total || 0
+      }).catch(e => {
+        console.error('查询客户失败', e)
+      }).finally(() => {
+        this.customerLoading = false
+      })
+    },
+
+    // 客户表格行高亮选中
+    handleCustomerCurrentChange(val) {
+      this.selectedCustomer = val
+    },
+
+    // 选择客户并回填
+    selectCustomer(customer) {
+      if (this.currentRowIndex === null || !this.contractList[this.currentRowIndex]) {
+        this.customerDialogVisible = false
+        return
+      }
+      const row = this.contractList[this.currentRowIndex]
+      row.customer = customer.companyName || ''
+      row.customerAddress = customer.address || ''
+      row.customerPhone = customer.contactWay || ''
+      row.customerTaxNo = customer.taxNumber || ''
+      if (customer.bankInfo) {
+        try {
+          const bankData = JSON.parse(customer.bankInfo)
+          if (Array.isArray(bankData) && bankData.length > 0) {
+            const firstBank = bankData[0]
+            row.customerBank = firstBank.bankName || ''
+            row.customerAccount = firstBank.accountNo || ''
+          } else if (typeof bankData === 'object') {
+            row.customerBank = bankData.bankName || ''
+            row.customerAccount = bankData.accountNo || ''
+          }
+        } catch (e) {
+          row.customerBank = customer.bankInfo || ''
+        }
+      }
+      this.customerDialogVisible = false
+      this.saveRow(row)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.contract-detail-page {
+  padding: 16px;
+  min-height: 100%;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+
+.table-section {
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  padding: 16px;
+}
+
+/* 可编辑单元格包装器 */
+.editable-cell-wrapper {
+  width: 100%;
+}
+
+/* 可编辑单元格样式 - 基础信息 */
+.editable-cell ::v-deep .el-input__inner {
+  background-color: #fff3e6;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+/* 可编辑单元格样式 - 蓝色 */
+.editable-cell-blue ::v-deep .el-input__inner {
+  background-color: #e6f7ff;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-blue ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+/* 可编辑单元格样式 - 绿色 */
+.editable-cell-green ::v-deep .el-input__inner {
+  background-color: #f6ffed;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-green ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+/* 可编辑单元格样式 - 粉色 */
+.editable-cell-pink ::v-deep .el-input__inner {
+  background-color: #fff0f6;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-pink ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+/* 日期选择器样式 */
+.editable-cell-date ::v-deep .el-input__inner {
+  background-color: #e6f7ff;
+  border-color: transparent;
+  padding: 0 8px;
+  padding-right: 20px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 11px;
+}
+.editable-cell-date ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+}
+
+/* 隐藏日期选择器的图标，防止与文字重叠 */
+.editable-cell-date ::v-deep .el-input__prefix {
+  display: none;
+}
+.editable-cell-date ::v-deep .el-input__suffix {
+  right: 2px;
+}
+.editable-cell-date ::v-deep .el-input__suffix-inner {
+  transform: scale(0.8);
+}
+
+/* 表格样式优化 */
+.contract-edit-table ::v-deep .el-input__inner {
+  border-color: transparent;
+}
+.contract-edit-table ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+}
+
+.contract-edit-table ::v-deep .el-table__body td {
+  padding: 4px 0;
+}
+
+::v-deep .el-button--primary {
+  color: #fff !important;
+  background: #5F7BA0 !important;
+  border-color: #5F7BA0 !important;
+}
+::v-deep .el-button--primary:hover,
+::v-deep .el-button--primary:focus {
+  background: #4d6a8e !important;
+  border-color: #4d6a8e !important;
+}
+
+/* 筛选结果数量显示 */
+.result-count {
+  margin-left: auto;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
+}
+</style>

klp-ui/src/views/crm/contract/index.vue

@@ -3,7 +3,8 @@
     <!-- 左侧合同列表 -->
     <div class="left-panel" style="width: 30%; border-right: 1px solid #e4e7ed; overflow-y: auto;">
       <ContractList ref="orderList" @add="handleAdd" @update="handleUpdate" @delete="handleDelete"
-        @export="handleExport" @exportContract="handleExportContract" @rowClick="handleRowClick" />
+        @export="handleExport" @exportContract="handleExportContract" @rowClick="handleRowClick"
+        @detailEdit="handleDetailEdit" />
     </div>
 
     <!-- 右侧内容区域 -->
@@ -357,6 +358,31 @@ export default {
       this.open = false;
       this.reset();
     },
+    /** 跳转合同详情编辑页（与列表路由同级，末段为 contractDetail；query.id 为 orderId） */
+    handleDetailEdit(row) {
+      const orderId = row && row.orderId;
+      if (!orderId) {
+        this.$message.warning("缺少订单ID，无法打开详情编辑");
+        return;
+      }
+      const segments = this.$route.path.split("/").filter(Boolean);
+      if (!segments.length) {
+        console.error("handleDetailEdit: 当前路由 path 为空", this.$route.path);
+        this.$message.error("路由异常，无法跳转");
+        return;
+      }
+      segments[segments.length - 1] = "contractDetail";
+      const path = `/${segments.join("/")}`;
+      this.$router
+        .push({ path, query: { id: String(orderId) } })
+        .catch((err) => {
+          if (err && err.name === "NavigationDuplicated") {
+            return;
+          }
+          console.error("跳转合同详情编辑失败:", err);
+          this.$message.error("跳转失败，请确认菜单里详情页路由地址为 contractDetail，且与列表页同级");
+        });
+    },
     /** 行点击事件 */
     handleRowClick(row) {
       this.form = row;

klp-ui/src/views/crm/orderItem/all.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="app-container order-item-all-page">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="filter-form">
+      <el-form-item label="合同号" prop="contractCode">
+        <el-input v-model="queryParams.contractCode" placeholder="模糊" clearable style="width: 140px" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="需方" prop="customer">
+        <el-input v-model="queryParams.customer" placeholder="模糊" clearable style="width: 140px" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="材质" prop="material">
+        <el-input v-model="queryParams.material" placeholder="模糊" clearable style="width: 120px" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="订单ID" prop="orderId">
+        <el-input v-model="queryParams.orderId" placeholder="精确" clearable style="width: 120px" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="toolbar">
+      <el-button type="danger" size="small" icon="el-icon-delete" :disabled="!selection.length" @click="handleBatchDelete">批量删除</el-button>
+      <span class="toolbar-tip">合同列为只读；明细列失焦自动保存（需有修改权限）</span>
+    </div>
+
+    <el-table
+      ref="table"
+      v-loading="loading"
+      :data="tableData"
+      border
+      size="small"
+      height="calc(100vh - 220px)"
+      style="width: 100%"
+      class="order-item-all-table"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="45" fixed="left" />
+      <el-table-column label="明细ID" prop="itemId" width="88" fixed="left" show-overflow-tooltip />
+
+      <el-table-column label="合同号" min-width="120" fixed="left" show-overflow-tooltip>
+        <template slot-scope="{ row }">{{ (row.orderInfo && row.orderInfo.contractCode) || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="合同名称" min-width="130" fixed="left" show-overflow-tooltip>
+        <template slot-scope="{ row }">{{ (row.orderInfo && row.orderInfo.contractName) || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="需方" min-width="120" show-overflow-tooltip>
+        <template slot-scope="{ row }">{{ (row.orderInfo && row.orderInfo.customer) || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="供方" min-width="120" show-overflow-tooltip>
+        <template slot-scope="{ row }">{{ (row.orderInfo && row.orderInfo.supplier) || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="签订时间" width="110">
+        <template slot-scope="{ row }">{{ row.orderInfo && row.orderInfo.signTime ? parseTime(row.orderInfo.signTime, '{y}-{m}-{d}') : '-' }}</template>
+      </el-table-column>
+      <el-table-column label="订单编号" min-width="110" show-overflow-tooltip>
+        <template slot-scope="{ row }">{{ (row.orderInfo && row.orderInfo.orderCode) || '-' }}</template>
+      </el-table-column>
+      <el-table-column label="订单ID" prop="orderId" width="88" show-overflow-tooltip />
+
+      <el-table-column label="产品类型" min-width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.productType" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="原料规格" min-width="110">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.rawMaterialSpec" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="成品规格" min-width="110">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.finishedProductSpec" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" width="90">
+        <template slot-scope="{ row }">
+          <el-input-number v-model="row.productNum" class="cell-input-num" size="small" :min="1" :controls="false" style="width: 100%" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="材质" width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.material" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="等级" width="80">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.grade" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="宽度" width="90">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.width" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="厚度" width="90">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.thickness" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="宽度公差" width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.widthTolerance" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="厚度公差" width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.thicknessTolerance" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="重量" width="100">
+        <template slot-scope="{ row }">
+          <el-input-number v-model="row.weight" class="cell-input-num" size="small" :precision="3" :min="0" :controls="false" style="width: 100%" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="合同定价" width="100">
+        <template slot-scope="{ row }">
+          <el-input-number v-model="row.contractPrice" class="cell-input-num" size="small" :precision="2" :min="0" :controls="false" style="width: 100%" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="明细金额" width="100">
+        <template slot-scope="{ row }">
+          <el-input-number v-model="row.itemAmount" class="cell-input-num" size="small" :precision="2" :min="0" :controls="false" style="width: 100%" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表面处理" width="110">
+        <template slot-scope="{ row }">
+          <el-select v-model="row.surfaceTreatment" size="small" style="width: 100%" @change="saveRow(row)">
+            <el-option label="钝化" value="PASSIVATION" />
+            <el-option label="涂油" value="OILING" />
+            <el-option label="耐指纹" value="FINGERPRINT" />
+            <el-option label="无" value="NONE" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="包装要求" width="100">
+        <template slot-scope="{ row }">
+          <el-select v-model="row.packagingReq" size="small" style="width: 100%" @change="saveRow(row)">
+            <el-option label="裸包" value="BARE" />
+            <el-option label="简包" value="SIMPLE" />
+            <el-option label="精包" value="STANDARD" />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column label="切边要求" min-width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.edgeCuttingReq" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="表面质量" min-width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.surfaceQuality" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="特殊要求" min-width="120">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.specialRequire" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="用途" min-width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.purpose" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" min-width="120">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.remark" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="定制人" width="90">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.customizer" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="发货人" width="90">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.shipper" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="排产批次" width="100">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.productionBatch" size="small" @blur="saveRow(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" fixed="right">
+        <template slot-scope="{ row }">
+          <el-button type="text" size="mini" @click="saveRow(row, true)">保存</el-button>
+          <el-button type="text" size="mini" class="btn-danger" @click="handleDelete(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="loadList"
+    />
+  </div>
+</template>
+
+<script>
+import { listOrderItem, updateOrderItem, delOrderItem } from '@/api/crm/orderItem'
+
+const ITEM_PAYLOAD_KEYS = [
+  'itemId',
+  'orderId',
+  'productType',
+  'rawMaterialSpec',
+  'productNum',
+  'specialRequire',
+  'itemAmount',
+  'remark',
+  'finishedProductSpec',
+  'material',
+  'grade',
+  'weight',
+  'widthTolerance',
+  'thicknessTolerance',
+  'contractPrice',
+  'customizer',
+  'shipper',
+  'productionBatch',
+  'surfaceTreatment',
+  'surfaceQuality',
+  'edgeCuttingReq',
+  'packagingReq',
+  'width',
+  'thickness',
+  'purpose'
+]
+
+function buildItemPayload(row) {
+  const payload = {}
+  ITEM_PAYLOAD_KEYS.forEach((key) => {
+    if (row[key] !== undefined) {
+      payload[key] = row[key]
+    }
+  })
+  return payload
+}
+
+export default {
+  name: 'CrmOrderItemAll',
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      total: 0,
+      selection: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        contractCode: undefined,
+        customer: undefined,
+        material: undefined,
+        orderId: undefined
+      }
+    }
+  },
+  created() {
+    this.loadList()
+  },
+  methods: {
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.loadList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: this.queryParams.pageSize,
+        contractCode: undefined,
+        customer: undefined,
+        material: undefined,
+        orderId: undefined
+      }
+      this.resetForm('queryForm')
+      this.loadList()
+    },
+    handleSelectionChange(rows) {
+      this.selection = rows || []
+    },
+    loadList() {
+      this.loading = true
+      const params = { ...this.queryParams }
+      if (params.orderId === '' || params.orderId === undefined) {
+        delete params.orderId
+      } else if (params.orderId != null) {
+        const n = Number(params.orderId)
+        params.orderId = Number.isNaN(n) ? params.orderId : n
+      }
+      listOrderItem(params)
+        .then((res) => {
+          this.tableData = res.rows || []
+          this.total = res.total || 0
+        })
+        .catch((err) => {
+          console.error('加载订单明细列表失败:', err)
+          this.$modal.msgError('加载失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    saveRow(row, showOk) {
+      if (!row || !row.itemId) {
+        return
+      }
+      const payload = buildItemPayload(row)
+      updateOrderItem(payload)
+        .then(() => {
+          if (showOk) {
+            this.$modal.msgSuccess('已保存')
+          }
+        })
+        .catch((err) => {
+          console.error('保存订单明细失败:', err)
+          this.$modal.msgError('保存失败')
+          this.loadList()
+        })
+    },
+    handleDelete(row) {
+      if (!row || !row.itemId) {
+        return
+      }
+      this.$modal
+        .confirm('确认删除该条明细？')
+        .then(() => delOrderItem(row.itemId))
+        .then(() => {
+          this.$modal.msgSuccess('已删除')
+          this.loadList()
+        })
+        .catch(() => {})
+    },
+    handleBatchDelete() {
+      if (!this.selection.length) {
+        return
+      }
+      const ids = this.selection.map((r) => r.itemId).filter(Boolean)
+      if (!ids.length) {
+        return
+      }
+      this.$modal
+        .confirm(`确认删除选中的 ${ids.length} 条明细？`)
+        .then(() => Promise.all(ids.map((id) => delOrderItem(id))))
+        .then(() => {
+          this.$modal.msgSuccess('已删除')
+          this.loadList()
+        })
+        .catch((err) => {
+          if (err) {
+            console.error('批量删除失败:', err)
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-item-all-page {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.filter-form {
+  margin-bottom: 0;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.toolbar-tip {
+  font-size: 12px;
+  color: #909399;
+}
+.order-item-all-table ::v-deep .cell-input-num .el-input__inner {
+  padding-left: 6px;
+  padding-right: 6px;
+  text-align: left;
+}
+.btn-danger {
+  color: #f56c6c;
+}
+</style>

klp-ui/src/views/crm/orderItem/index.vue

@@ -0,0 +1,667 @@
+<template>
+  <div class="order-item-page">
+    <!-- 筛选栏 -->
+    <div class="filter-section">
+      <el-input
+        v-model="queryParams.contractCode"
+        placeholder="合同号"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="queryParams.customer"
+        placeholder="客户名称"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="queryParams.productName"
+        placeholder="产品名称"
+        size="small"
+        clearable
+        style="width: 140px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="queryParams.material"
+        placeholder="材质"
+        size="small"
+        clearable
+        style="width: 120px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-input
+        v-model="queryParams.surfaceTreatment"
+        placeholder="表面处理"
+        size="small"
+        clearable
+        style="width: 130px"
+        @keyup.enter.native="handleQuery"
+      />
+      <el-select v-model="queryParams.packagingReq" placeholder="包装要求" size="small" clearable style="width: 120px">
+        <el-option label="裸包" value="BARE" />
+        <el-option label="简包" value="SIMPLE" />
+        <el-option label="精包" value="STANDARD" />
+      </el-select>
+      <el-date-picker
+        v-model="signDateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="签订开始"
+        end-placeholder="签订结束"
+        size="small"
+        style="width: 220px"
+        value-format="yyyy-MM-dd"
+        :unlink-panels="true"
+        @change="handleSignDateChange"
+      />
+      <el-date-picker
+        v-model="deliveryDateRange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="交货开始"
+        end-placeholder="交货结束"
+        size="small"
+        style="width: 220px"
+        value-format="yyyy-MM-dd"
+        :unlink-panels="true"
+        @change="handleDeliveryDateChange"
+      />
+      <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">筛选</el-button>
+      <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+    </div>
+
+    <!-- 订单明细表格 -->
+    <div class="table-section">
+      <el-table
+        :data="orderItemList"
+        size="small"
+        border
+        v-loading="loading"
+        style="width: 100%"
+        class="order-item-table"
+        :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
+      >
+        <!-- 合同信息列（只读，灰色背景） -->
+        <el-table-column label="合同信息" align="center">
+          <el-table-column label="合同号" prop="contractCode" min-width="130" show-overflow-tooltip>
+            <template slot-scope="{ row }">
+              <span class="contract-info" :title="row.contractCode">{{ row.contractCode }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="供方" prop="supplier" min-width="140" show-overflow-tooltip>
+            <template slot-scope="{ row }">
+              <span class="contract-info" :title="row.supplier">{{ row.supplier }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="需方" prop="customer" min-width="140" show-overflow-tooltip>
+            <template slot-scope="{ row }">
+              <span class="contract-info" :title="row.customer">{{ row.customer }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="签订日期" prop="signTime" width="100">
+            <template slot-scope="{ row }">
+              <span class="contract-info contract-date">{{ formatDate(row.signTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="交货日期" prop="deliveryDate" width="100">
+            <template slot-scope="{ row }">
+              <span class="contract-info contract-date">{{ formatDate(row.deliveryDate) }}</span>
+            </template>
+          </el-table-column>
+        </el-table-column>
+
+        <!-- 订单明细列（可编辑） -->
+        <el-table-column label="订单明细" align="center">
+          <el-table-column label="序号" prop="seqNo" width="70">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.seqNo"
+                  size="small"
+                  :title="scope.row.seqNo"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="产品名称" prop="productName" min-width="130">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.productName"
+                  size="small"
+                  class="editable-cell"
+                  :title="scope.row.productName"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="规格" prop="productSpec" min-width="120">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.productSpec"
+                  size="small"
+                  class="editable-cell"
+                  :title="scope.row.productSpec"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="材质" prop="material" width="100">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.material"
+                  size="small"
+                  class="editable-cell-blue"
+                  :title="scope.row.material"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="宽度(mm)" prop="width" width="110">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.width"
+                  size="small"
+                  class="editable-cell-blue"
+                  :title="scope.row.width"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="厚度(mm)" prop="thickness" width="110">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.thickness"
+                  size="small"
+                  class="editable-cell-blue"
+                  :title="scope.row.thickness"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="数量" prop="quantity" width="80">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.quantity"
+                  size="small"
+                  class="editable-cell-green"
+                  :title="scope.row.quantity"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="重量(吨)" prop="weight" width="100">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.weight"
+                  size="small"
+                  class="editable-cell-green"
+                  :title="scope.row.weight"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="单价" prop="unitPrice" width="100">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.unitPrice"
+                  size="small"
+                  class="editable-cell-green"
+                  :title="scope.row.unitPrice"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="金额" prop="amount" width="100">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.amount"
+                  size="small"
+                  class="editable-cell-green"
+                  :title="scope.row.amount"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="表面处理" prop="surfaceTreatment" width="110">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.surfaceTreatment"
+                  size="small"
+                  class="editable-cell-pink"
+                  :title="scope.row.surfaceTreatment"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="包装要求" prop="packagingReq" width="100">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.packagingReq" size="small" style="width: 100%" class="editable-cell-pink" @change="saveRow(scope.row)">
+                <el-option label="裸包" value="BARE" />
+                <el-option label="简包" value="SIMPLE" />
+                <el-option label="精包" value="STANDARD" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="备注" prop="remark" min-width="120">
+            <template slot-scope="scope">
+              <div class="editable-cell-wrapper">
+                <el-input
+                  v-model="scope.row.remark"
+                  size="small"
+                  class="editable-cell-pink"
+                  :title="scope.row.remark"
+                  @blur="saveRow(scope.row)"
+                />
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+
+        <!-- 操作列 -->
+        <el-table-column label="操作" width="80" fixed="right" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" @click="saveRow(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"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listOrderItem, updateOrderItem } from '@/api/crm/orderItem'
+import { listOrder } from '@/api/crm/order'
+import { listCategory } from '@/api/wms/category'
+
+export default {
+  name: 'OrderItemList',
+  data() {
+    return {
+      loading: false,
+      orderItemList: [],
+      total: 0,
+      signDateRange: null,
+      deliveryDateRange: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 50,
+        contractCode: undefined,
+        customer: undefined,
+        productName: undefined,
+        material: undefined,
+        surfaceTreatment: undefined,
+        packagingReq: undefined,
+        signDateStart: undefined,
+        signDateEnd: undefined,
+        deliveryDateStart: undefined,
+        deliveryDateEnd: undefined
+      },
+      // 缓存合同信息
+      contractMap: {},
+      // 存储原始数据，用于判断是否有修改
+      originalData: {},
+      // 表面处理选项
+      surfaceTreatmentOptions: []
+    }
+  },
+  created() {
+    this.getList()
+    this.loadSurfaceTreatmentOptions()
+  },
+  methods: {
+    // 格式化日期为 YYYY-MM-DD
+    formatDate(dateStr) {
+      if (!dateStr) return ''
+      // 处理各种日期格式
+      const date = new Date(dateStr)
+      if (isNaN(date.getTime())) {
+        // 如果不是有效日期，尝试直接截取前10位
+        return String(dateStr).substring(0, 10)
+      }
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    },
+
+    // 获取订单明细列表
+    getList() {
+      this.loading = true
+      listOrderItem(this.queryParams).then(res => {
+        const items = res.rows || []
+        this.total = res.total || 0
+        // 获取所有相关的合同ID
+        const orderIds = [...new Set(items.map(item => item.orderId).filter(id => id))]
+        if (orderIds.length > 0) {
+          // 批量获取合同信息
+          this.loadContractInfo(orderIds, items)
+        } else {
+          this.orderItemList = items
+          this.loading = false
+        }
+      }).catch(e => {
+        console.error(e)
+        this.loading = false
+      })
+    },
+
+    // 加载合同信息
+    loadContractInfo(orderIds, items) {
+      // 使用listOrder获取合同信息，通过params传递orderIds
+      const params = {
+        pageNum: 1,
+        pageSize: 9999,
+        orderIds: orderIds.join(',')
+      }
+      listOrder(params).then(res => {
+        const contracts = res.rows || []
+        // 构建合同ID到合同信息的映射
+        contracts.forEach(contract => {
+          this.contractMap[contract.orderId] = contract
+        })
+        // 合并数据
+        this.orderItemList = items.map(item => {
+          const contract = this.contractMap[item.orderId] || {}
+          return {
+            ...item,
+            contractCode: contract.contractCode || '',
+            supplier: contract.supplier || '',
+            customer: contract.customer || '',
+            signTime: contract.signTime || '',
+            deliveryDate: contract.deliveryDate || ''
+          }
+        })
+        // 保存原始数据副本
+        this.originalData = {}
+        this.orderItemList.forEach(row => {
+          this.originalData[row.itemId || row.detailId] = JSON.stringify(row)
+        })
+      }).catch(e => {
+        console.error(e)
+        this.orderItemList = items
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
+    // 判断数据是否有变化
+    hasChanged(row) {
+      const id = row.itemId || row.detailId
+      if (!id || !this.originalData[id]) return false
+      return this.originalData[id] !== JSON.stringify(row)
+    },
+
+    // 筛选
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+
+    // 签订日期范围变更
+    handleSignDateChange(val) {
+      if (val && val.length === 2) {
+        this.queryParams.signDateStart = val[0]
+        this.queryParams.signDateEnd = val[1]
+      } else {
+        this.queryParams.signDateStart = undefined
+        this.queryParams.signDateEnd = undefined
+      }
+      this.handleQuery()
+    },
+
+    // 交货日期范围变更
+    handleDeliveryDateChange(val) {
+      if (val && val.length === 2) {
+        this.queryParams.deliveryDateStart = val[0]
+        this.queryParams.deliveryDateEnd = val[1]
+      } else {
+        this.queryParams.deliveryDateStart = undefined
+        this.queryParams.deliveryDateEnd = undefined
+      }
+      this.handleQuery()
+    },
+
+    // 重置
+    resetQuery() {
+      this.signDateRange = null
+      this.deliveryDateRange = null
+      this.queryParams.contractCode = undefined
+      this.queryParams.customer = undefined
+      this.queryParams.productName = undefined
+      this.queryParams.material = undefined
+      this.queryParams.surfaceTreatment = undefined
+      this.queryParams.packagingReq = undefined
+      this.queryParams.signDateStart = undefined
+      this.queryParams.signDateEnd = undefined
+      this.queryParams.deliveryDateStart = undefined
+      this.queryParams.deliveryDateEnd = undefined
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+
+    // 加载表面处理选项
+    loadSurfaceTreatmentOptions() {
+      listCategory({ categoryType: 'surface_treatment', pageNum: 1, pageSize: 100 }).then(res => {
+        this.surfaceTreatmentOptions = res.rows || []
+      }).catch(e => {
+        console.error('获取表面处理选项失败', e)
+      })
+    },
+
+    // 保存行数据
+    saveRow(row) {
+      if (!row.itemId && !row.detailId) {
+        this.$message.warning('数据ID不存在')
+        return
+      }
+      // 判断是否有修改
+      if (!this.hasChanged(row)) {
+        return
+      }
+      // 只保存订单明细相关字段
+      const data = {
+        itemId: row.itemId,
+        detailId: row.detailId,
+        orderId: row.orderId,
+        seqNo: row.seqNo,
+        productName: row.productName,
+        productSpec: row.productSpec,
+        material: row.material,
+        width: row.width,
+        thickness: row.thickness,
+        quantity: row.quantity,
+        weight: row.weight,
+        unitPrice: row.unitPrice,
+        amount: row.amount,
+        surfaceTreatment: row.surfaceTreatment,
+        packagingReq: row.packagingReq,
+        remark: row.remark
+      }
+      updateOrderItem(data).then(() => {
+        // 更新原始数据
+        const id = row.itemId || row.detailId
+        this.originalData[id] = JSON.stringify(row)
+        this.$message.success('保存成功')
+      }).catch(e => {
+        this.$message.error('保存失败')
+        console.error(e)
+        // 刷新数据
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-item-page {
+  padding: 16px;
+  min-height: 100%;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 12px 16px;
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+}
+
+.table-section {
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  padding: 16px;
+}
+
+/* 合同信息样式（只读） */
+.contract-info {
+  color: #606266;
+  background: #f5f7fa;
+  padding: 4px 6px;
+  border-radius: 4px;
+  display: inline-block;
+  width: 100%;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 日期单元格样式 */
+.contract-date {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 11px;
+  letter-spacing: -0.3px;
+  padding: 4px 4px;
+  text-align: center;
+}
+
+/* 可编辑单元格包装器 */
+.editable-cell-wrapper {
+  width: 100%;
+}
+
+/* 可编辑单元格样式 */
+.editable-cell ::v-deep .el-input__inner {
+  background-color: #fff3e6;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+.editable-cell-blue ::v-deep .el-input__inner {
+  background-color: #e6f7ff;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-blue ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+.editable-cell-green ::v-deep .el-input__inner {
+  background-color: #f6ffed;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-green ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+.editable-cell-pink ::v-deep .el-input__inner {
+  background-color: #fff0f6;
+  border-color: transparent;
+  padding: 0 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.editable-cell-pink ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+  background-color: #fff;
+  overflow: visible;
+  white-space: normal;
+}
+
+/* 表格样式优化 */
+.order-item-table ::v-deep .el-input__inner {
+  border-color: transparent;
+}
+.order-item-table ::v-deep .el-input__inner:focus {
+  border-color: #5F7BA0;
+}
+
+.order-item-table ::v-deep .el-table__body td {
+  padding: 4px 0;
+}
+
+::v-deep .el-button--primary {
+  color: #fff !important;
+  background: #5F7BA0 !important;
+  border-color: #5F7BA0 !important;
+}
+::v-deep .el-button--primary:hover,
+::v-deep .el-button--primary:focus {
+  background: #4d6a8e !important;
+  border-color: #4d6a8e !important;
+}
+</style>