Browse Source

style(inspection): 更新表格行样式以突出显示数量修改

- 将 /deep/ 选择器替换为 ::v-deep 以确保更好的兼容性
- 优化了修改行的背景色配置,提高视觉效果
- 添加了悬停状态的颜色变化以便更好地区分
- 统一了样式规则,移除了重复的CSS定义
- 调整了颜色值以提供更好的对比度和可读性
- 简化了表格行类名应用逻辑,增强代码维护性
master
qiankanghui 2 days ago
parent
commit
90770de500
  1. 24
      src/views/modules/inspection/inspectionRequestAudit.vue
  2. 60
      src/views/modules/inspection/inspectionRequestList.vue

24
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; 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; background-color: #fef0f0 !important;
color: #f56c6c !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
} }
</style>
/deep/ .el-table__row.current-row.modified-request-row > td {
background-color: #fef0f0 !important;
color: #f56c6c !important;
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 -->
<style lang="scss">
.el-table__body tr.modified-request-row > td {
background-color: #ffe6e6 !important;
color: #333333 !important;
} }
</style> </style>

60
src/views/modules/inspection/inspectionRequestList.vue

@ -700,7 +700,7 @@ export default {
searchInspectionRequestHeaderList(this.searchData).then(({ data }) => { searchInspectionRequestHeaderList(this.searchData).then(({ data }) => {
if (data.code === 0) { if (data.code === 0) {
this.mainDataList = data.page.list this.mainDataList = data.page.list
// hasModifiedQty // hasModifiedQty
if (this.mainDataList.length > 0) { if (this.mainDataList.length > 0) {
console.log('=== 主表格数据调试 ===') console.log('=== 主表格数据调试 ===')
@ -708,7 +708,7 @@ export default {
console.log('hasModifiedQty 值:', this.mainDataList[0].hasModifiedQty) console.log('hasModifiedQty 值:', this.mainDataList[0].hasModifiedQty)
console.log('=====================') console.log('=====================')
} }
this.pageIndex = data.page.currPage this.pageIndex = data.page.currPage
this.pageSize = data.page.pageSize this.pageSize = data.page.pageSize
this.totalPage = data.page.totalCount this.totalPage = data.page.totalCount
@ -880,24 +880,24 @@ export default {
mainTableRowClassName ({ row }) { mainTableRowClassName ({ row }) {
// hasModifiedQty // hasModifiedQty
console.log('Row:', row.requestNo, 'hasModifiedQty:', row.hasModifiedQty, 'type:', typeof row.hasModifiedQty) console.log('Row:', row.requestNo, 'hasModifiedQty:', row.hasModifiedQty, 'type:', typeof row.hasModifiedQty)
// 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 === 'y' ||
row.hasModifiedQty === 1 ||
row.hasModifiedQty === 1 ||
row.hasModifiedQty === '1') { row.hasModifiedQty === '1') {
console.log('✅ 应用红色背景到:', row.requestNo) console.log('✅ 应用红色背景到:', row.requestNo)
return 'modified-request-row' return 'modified-request-row'
} }
// //
if (row.hasModifiedQty === undefined || row.hasModifiedQty === null) { if (row.hasModifiedQty === undefined || row.hasModifiedQty === null) {
console.warn('⚠️ 警告: 行', row.requestNo, '缺少 hasModifiedQty 字段,后端可能未返回该字段') console.warn('⚠️ 警告: 行', row.requestNo, '缺少 hasModifiedQty 字段,后端可能未返回该字段')
} }
return '' return ''
}, },
@ -1411,34 +1411,32 @@ padding: 10px 15px 0 0;
// PO - // PO -
.po-section /deep/ .el-table__row.modified-row { .po-section /deep/ .el-table__row.modified-row {
background-color: #fef0f0 !important; background-color: #fef0f0 !important;
&:hover > td { &:hover > td {
background-color: #fde2e2 !important; background-color: #fde2e2 !important;
} }
td { td {
color: #f56c6c; 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 { .po-section {
@ -1466,3 +1464,11 @@ padding: 10px 15px 0 0;
} }
</style> </style>
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 -->
<style lang="scss">
.el-table__body tr.modified-request-row > td {
background-color: #ffe6e6 !important;
color: #333333 !important;
}
</style>
Loading…
Cancel
Save