From 90770de500c5450e8a2d3e10d82dd4ac83c6090a Mon Sep 17 00:00:00 2001 From: qiankanghui Date: Mon, 25 May 2026 16:18:31 +0800 Subject: [PATCH] =?UTF-8?q?style(inspection):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E8=A1=8C=E6=A0=B7=E5=BC=8F=E4=BB=A5=E7=AA=81?= =?UTF-8?q?=E5=87=BA=E6=98=BE=E7=A4=BA=E6=95=B0=E9=87=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 /deep/ 选择器替换为 ::v-deep 以确保更好的兼容性 - 优化了修改行的背景色配置，提高视觉效果 - 添加了悬停状态的颜色变化以便更好地区分 - 统一了样式规则，移除了重复的CSS定义 - 调整了颜色值以提供更好的对比度和可读性 - 简化了表格行类名应用逻辑，增强代码维护性 --- .../inspection/inspectionRequestAudit.vue | 24 ++++---- .../inspection/inspectionRequestList.vue | 60 ++++++++++--------- 2 files changed, 46 insertions(+), 38 deletions(-) diff --git a/src/views/modules/inspection/inspectionRequestAudit.vue b/src/views/modules/inspection/inspectionRequestAudit.vue index f10db07..55ce2af 100644 --- a/src/views/modules/inspection/inspectionRequestAudit.vue +++ b/src/views/modules/inspection/inspectionRequestAudit.vue @@ -629,25 +629,27 @@ export default { } // 主表格行样式 - 验货申请中有数量修改时标红 -/deep/ .el-table__body tr.modified-request-row { +// 使用 ::v-deep 确保兼容性 +::v-deep .el-table .modified-request-row { background-color: #fef0f0 !important; } -/deep/ .el-table__body tr.modified-request-row > td { +// 必须针对 td 进行设置，因为 Element 的背景色是挂在 td 上的 +::v-deep .el-table .modified-request-row td { background-color: #fef0f0 !important; color: #f56c6c !important; } -/deep/ .el-table__body tr.modified-request-row:hover > td { - background-color: #fde2e2 !important; -} - -/deep/ .el-table__row.current-row.modified-request-row { - background-color: #fef0f0 !important; +// 针对鼠标悬停时的状态，防止被 hover 颜色覆盖 +::v-deep .el-table .el-table__body tr.modified-request-row:hover > td { + background-color: #fde2e2 !important; // 稍微深一点的红色以便区分 hover } + -/deep/ .el-table__row.current-row.modified-request-row > td { - background-color: #fef0f0 !important; - color: #f56c6c !important; + + diff --git a/src/views/modules/inspection/inspectionRequestList.vue b/src/views/modules/inspection/inspectionRequestList.vue index d6305e2..72c5bf9 100644 --- a/src/views/modules/inspection/inspectionRequestList.vue +++ b/src/views/modules/inspection/inspectionRequestList.vue @@ -700,7 +700,7 @@ export default { searchInspectionRequestHeaderList(this.searchData).then(({ data }) => { if (data.code === 0) { this.mainDataList = data.page.list - + // 调试信息：打印第一条数据的 hasModifiedQty 字段 if (this.mainDataList.length > 0) { console.log('=== 主表格数据调试 ===') @@ -708,7 +708,7 @@ export default { console.log('hasModifiedQty 值:', this.mainDataList[0].hasModifiedQty) console.log('=====================') } - + this.pageIndex = data.page.currPage this.pageSize = data.page.pageSize this.totalPage = data.page.totalCount @@ -880,24 +880,24 @@ export default { mainTableRowClassName ({ row }) { // 调试信息：打印每行的 hasModifiedQty 值 console.log('Row:', row.requestNo, 'hasModifiedQty:', row.hasModifiedQty, 'type:', typeof row.hasModifiedQty) - + // 如果后端返回 hasModifiedQty 字段，直接使用 // 支持多种类型：布尔值、字符串、数字 - if (row.hasModifiedQty === true || - row.hasModifiedQty === 'true' || - row.hasModifiedQty === 'Y' || + if (row.hasModifiedQty === true || + row.hasModifiedQty === 'true' || + row.hasModifiedQty === 'Y' || row.hasModifiedQty === 'y' || - row.hasModifiedQty === 1 || + row.hasModifiedQty === 1 || row.hasModifiedQty === '1') { console.log('✅ 应用红色背景到:', row.requestNo) return 'modified-request-row' } - + // 如果字段不存在，输出提示 if (row.hasModifiedQty === undefined || row.hasModifiedQty === null) { console.warn('⚠️ 警告: 行', row.requestNo, '缺少 hasModifiedQty 字段，后端可能未返回该字段') } - + return '' }, @@ -1411,34 +1411,32 @@ padding: 10px 15px 0 0; // PO表格行样式 - 验货数量修改后标红 .po-section /deep/ .el-table__row.modified-row { background-color: #fef0f0 !important; - + &:hover > td { background-color: #fde2e2 !important; } - + td { color: #f56c6c; } } -// 主表格行样式 - 验货申请中有数量修改时标红 -/deep/ .el-table__row.modified-request-row { - background-color: #fef0f0 !important; - - td { - background-color: #fef0f0 !important; - color: #f56c6c !important; - } - - &:hover > td { - background-color: #fde2e2 !important; - } +/* 强制主表红色背景 */ +::v-deep .el-table__body tr.modified-request-row td { + background-color: #ff4d4f !important; + color: #ffffff !important; } -// 提高优先级，确保覆盖所有可能的样式 -/deep/ .el-table__body tr.modified-request-row > td { - background-color: #fef0f0 !important; - color: #f56c6c !important; +/* 当前选中行也强制红色 */ +::v-deep .el-table__body tr.modified-request-row.current-row td { + background-color: #ff4d4f !important; + color: #ffffff !important; +} + +/* hover状态 */ +::v-deep .el-table__body tr.modified-request-row:hover td { + background-color: #ff7875 !important; + color: #ffffff !important; } .po-section { @@ -1466,3 +1464,11 @@ padding: 10px 15px 0 0; } + + +