排期表样式

yudao-ui-admin-vue3/src/views/pressure2/equipboilerscheduling/index.vue

@@ -186,11 +186,11 @@
       @selection-change="handleSelectionChange"
       @sort-change="handleSortChange"
       ref="tableRef"
-      :cell-style="getCellStyle"
+      :cell-class-name="getCellClassName"
       :row-class-name="getRowClassName"
       border
       @row-click="handleRowClick"
-      :key="queryParams.pageNo + '-' + queryParams.pageSize"
+      row-key="id"
     >
       <el-table-column v-if="source === 'pressure'" type="selection" width="40"/>
       <el-table-column
@@ -418,6 +418,10 @@ const getList = async () => {
     const data = await EquipBoilerSchedulingApi.getEquipBoilerSchedulingPage(queryParams.value)
     list.value = data.list
     total.value = data.total
+    // 数据更新后强制表格重新布局,确保样式正确应用
+    nextTick(() => {
+      tableRef.value?.doLayout()
+    })
   } finally {
     loading.value = false
   }
@@ -587,29 +591,33 @@ const handleSortChange = ({ prop, order }) => {
 /** 判断是否有已排期的时间 */
 const hasPlanSchedule = (row: EquipBoilerSchedulingVO, type: 'in' | 'out' | 'pressure') => {
   if (type === 'in') {
-    return !!row.planInCheckDate
+    return row.planInCheckDate != null && row.planInCheckDate !== '' && row.planInCheckDate !== 'null'
   } else if (type === 'out') {
-    return !!row.planOutCheckDate
+    return row.planOutCheckDate != null && row.planOutCheckDate !== '' && row.planOutCheckDate !== 'null'
   } else {
-    return !!row.planPressureCheckDate
+    return row.planPressureCheckDate != null && row.planPressureCheckDate !== '' && row.planPressureCheckDate !== 'null'
   }
 }
 
-/** 获取单元格样式 */
-const getCellStyle = ({ row, column }) => {
-  // 检查列是否为检验日期列
-  const checkColumns = ['nextInCheckDate', 'nextOutCheckDate', 'nextPressureCheckDate']
-  if (checkColumns.includes(column.property)) {
-    // 根据不同类型的检验判断是否有排期
-    if (column.property === 'nextInCheckDate' && row.planInCheckDate) {
-      return { background: '#FFFF99' }
-    } else if (column.property === 'nextOutCheckDate' && row.planOutCheckDate) {
-      return { background: '#FFFF99' }
-    } else if (column.property === 'nextPressureCheckDate' && row.planPressureCheckDate) {
-      return { background: '#FFFF99' }
+/** 获取单元格类名 */
+const getCellClassName = ({ row, column }) => {
+  // 检查列是否为检验日期列，只有当有有效排期时间时才添加黄色背景类
+  if (column.property === 'nextInCheckDate') {
+    if (row.planInCheckDate != null && row.planInCheckDate !== '' && row.planInCheckDate !== 'null') {
+      return 'cell-scheduled'
+    }
+  }
+  if (column.property === 'nextOutCheckDate') {
+    if (row.planOutCheckDate != null && row.planOutCheckDate !== '' && row.planOutCheckDate !== 'null') {
+      return 'cell-scheduled'
     }
   }
-  return {}
+  if (column.property === 'nextPressureCheckDate') {
+    if (row.planPressureCheckDate != null && row.planPressureCheckDate !== '' && row.planPressureCheckDate !== 'null') {
+      return 'cell-scheduled'
+    }
+  }
+  return ''
 }
 
 /** 处理单条记录排期 */
@@ -806,4 +814,9 @@ onUnmounted(()=>{
 :deep(.el-table__body tr.selected-row:hover){
   background-color: #e0edff !important;
 }
+
+// 已排期的单元格黄色背景
+:deep(.cell-scheduled) {
+  background-color: #FFFF99 !important;
+}
 </style>