feat(crm/order-item): add order grouping sort and row highlight

1. 新增订单明细创建时间字段到VO类并配置JSON格式化
2. 实现按交货日期倒序+创建时间倒序的分组排序逻辑
3. 添加表格分组交替背景色样式与排序状态提示

klp-crm/src/main/java/com/klp/crm/domain/vo/CrmOrderItemVo.java

@@ -1,8 +1,10 @@
 package com.klp.crm.domain.vo;
 
 import java.math.BigDecimal;
+import java.util.Date;
 import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
 import com.alibaba.excel.annotation.ExcelProperty;
+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.klp.common.annotation.ExcelDictFormat;
 import com.klp.common.convert.ExcelDictConvert;
 import lombok.Data;
@@ -173,6 +175,12 @@ public class CrmOrderItemVo {
     @ExcelProperty(value = "用途")
     private String purpose;
 
+    /**
+     * 创建时间
+     */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    private Date createTime;
+
     /**
      * 订单信息
      */

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

@@ -76,6 +76,7 @@
       />
       <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="sortInfo" class="sort-hint">{{ sortInfo }}</span>
     </div>
 
     <!-- 订单明细表格 -->
@@ -88,6 +89,7 @@
         style="width: 100%"
         class="order-item-table"
         :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
+        :row-class-name="groupRowClassName"
       >
         <!-- 合同信息列（只读，灰色背景） -->
         <el-table-column label="合同信息" align="center">
@@ -343,7 +345,9 @@ export default {
       // 存储原始数据，用于判断是否有修改
       originalData: {},
       // 表面处理选项
-      surfaceTreatmentOptions: []
+      surfaceTreatmentOptions: [],
+      // 排序状态提示
+      sortInfo: ''
     }
   },
   created() {
@@ -378,7 +382,7 @@ export default {
           // 批量获取合同信息
           this.loadContractInfo(orderIds, items)
         } else {
-          this.orderItemList = items
+          this.orderItemList = this.groupSort(items)
           this.loading = false
         }
       }).catch(e => {
@@ -402,7 +406,7 @@ export default {
           this.contractMap[contract.orderId] = contract
         })
         // 合并数据
-        this.orderItemList = items.map(item => {
+        const merged = items.map(item => {
           const contract = this.contractMap[item.orderId] || {}
           return {
             ...item,
@@ -413,6 +417,8 @@ export default {
             deliveryDate: contract.deliveryDate || ''
           }
         })
+        // 排序后赋值
+        this.orderItemList = this.groupSort(merged)
         // 保存原始数据副本
         this.originalData = {}
         this.orderItemList.forEach(row => {
@@ -420,12 +426,63 @@ export default {
         })
       }).catch(e => {
         console.error(e)
-        this.orderItemList = items
+        this.orderItemList = this.groupSort(items)
       }).finally(() => {
         this.loading = false
       })
     },
 
+    // 分组排序：组间按交货日期倒序，组内按创建时间倒序
+    groupSort(items) {
+      if (!items || items.length === 0) {
+        this.sortInfo = ''
+        this._groupColorIndex = 0
+        return items
+      }
+      // 构建每个orderId对应的deliveryDate映射
+      const deliveryDateMap = {}
+      items.forEach(item => {
+        if (item.orderId && !deliveryDateMap[item.orderId]) {
+          deliveryDateMap[item.orderId] = item.deliveryDate || ''
+        }
+      })
+      const sorted = [...items].sort((a, b) => {
+        // 同组：按createTime倒序
+        if (a.orderId && a.orderId === b.orderId) {
+          const timeA = a.createTime || ''
+          const timeB = b.createTime || ''
+          if (timeA === timeB) return 0
+          if (!timeA) return 1
+          if (!timeB) return -1
+          return timeB > timeA ? 1 : -1
+        }
+        // 异组：按deliveryDate倒序
+        const dateA = deliveryDateMap[a.orderId] || ''
+        const dateB = deliveryDateMap[b.orderId] || ''
+        if (dateA === dateB) {
+          // 交货日期相同或都为空时，按orderId排序保证分组连续
+          return (a.orderId || 0) - (b.orderId || 0)
+        }
+        if (!dateA) return 1
+        if (!dateB) return -1
+        return dateB > dateA ? 1 : -1
+      })
+      // 设置排序状态提示
+      const groupCount = Object.keys(deliveryDateMap).length
+      this.sortInfo = `已按合同交货日期倒序 + 明细创建时间倒序排列（共${groupCount}个合同组）`
+      return sorted
+    },
+
+    // 分组行样式：同一合同组使用交替背景色
+    groupRowClassName({ row, rowIndex }) {
+      // 记录上一个orderId，切换时翻转颜色
+      if (rowIndex === 0 || (this._lastOrderId !== undefined && this._lastOrderId !== row.orderId)) {
+        this._groupColorIndex = (this._groupColorIndex || 0) + 1
+      }
+      this._lastOrderId = row.orderId
+      return this._groupColorIndex % 2 === 1 ? 'group-row-a' : 'group-row-b'
+    },
+
     // 判断数据是否有变化
     hasChanged(row) {
       const id = row.itemId || row.detailId
@@ -687,4 +744,20 @@ export default {
   background: #4d6a8e !important;
   border-color: #4d6a8e !important;
 }
+
+/* 排序状态提示 */
+.sort-hint {
+  margin-left: auto;
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+}
+
+/* 分组交替背景色 */
+::v-deep .el-table .group-row-a td {
+  background-color: #ffffff !important;
+}
+::v-deep .el-table .group-row-b td {
+  background-color: #fafcff !important;
+}
 </style>