From 5a4ab2f65eba30224eded2731af66e8f953096cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=96=87=E6=98=8A?=
<15984991+wwh2328692301@user.noreply.gitee.com>
Date: Thu, 21 May 2026 17:07:00 +0800
Subject: [PATCH] feat(crm/order-item): add order grouping sort and row
highlight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
1. 新增订单明细创建时间字段到VO类并配置JSON格式化
2. 实现按交货日期倒序+创建时间倒序的分组排序逻辑
3. 添加表格分组交替背景色样式与排序状态提示
---
.../com/klp/crm/domain/vo/CrmOrderItemVo.java | 8 ++
klp-ui/src/views/crm/orderItem/index.vue | 81 ++++++++++++++++++-
2 files changed, 85 insertions(+), 4 deletions(-)
diff --git a/klp-crm/src/main/java/com/klp/crm/domain/vo/CrmOrderItemVo.java b/klp-crm/src/main/java/com/klp/crm/domain/vo/CrmOrderItemVo.java
index eded264e..d8553f4b 100644
--- a/klp-crm/src/main/java/com/klp/crm/domain/vo/CrmOrderItemVo.java
+++ b/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;
+
/**
* 订单信息
*/
diff --git a/klp-ui/src/views/crm/orderItem/index.vue b/klp-ui/src/views/crm/orderItem/index.vue
index 1bcb3b09..bdd74c59 100644
--- a/klp-ui/src/views/crm/orderItem/index.vue
+++ b/klp-ui/src/views/crm/orderItem/index.vue
@@ -76,6 +76,7 @@
/>
筛选
重置
+ {{ sortInfo }}
@@ -88,6 +89,7 @@
style="width: 100%"
class="order-item-table"
:header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 600 }"
+ :row-class-name="groupRowClassName"
>
@@ -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;
+}