pms 新增/修改保养计划 区分已经设置完保养规则相关数据的保养项

src/views/pms/maintenance/IotMaintenancePlan.vue

@@ -48,7 +48,7 @@
 
     <!-- 列表 -->
     <ContentWrap>
-      <el-table v-loading="loading" :data="pagedList" :stripe="true" :show-overflow-tooltip="true">
+      <el-table v-loading="loading" :data="pagedList" :stripe="true" :show-overflow-tooltip="true" :cell-class-name="cellClassName">
         <!-- 添加序号列 -->
         <el-table-column
           type="index"
@@ -477,6 +477,59 @@ const configDialog = reactive({
   }
 })
 
+// 单元格类名回调方法
+const cellClassName = ({ row, column }) => {
+  // 只对序号列进行处理
+  if (column.type === 'index') {
+    // 检查该行所有启用的规则是否都已配置完整
+    if (checkRowFilled(row)) {
+      return 'all-filled'; // 返回自定义类名
+    }
+  }
+  return '';
+};
+
+// 检查行数据是否完整填写
+const checkRowFilled = (row: IotMaintenanceBomVO) => {
+  // 检查是否启用了至少一个规则
+  const hasRuleEnabled =
+    row.mileageRule === 0 ||
+    row.runningTimeRule === 0 ||
+    row.naturalDateRule === 0;
+
+  if (!hasRuleEnabled) {
+    return false; // 没有任何规则启用，不显示背景色
+  }
+  // 检查里程规则
+  const mileageFilled = row.mileageRule !== 0
+    ? true // 规则未启用，视为已"填写"
+    : (row.lastRunningKilometers > 0 &&
+      row.nextRunningKilometers > 0 &&
+      row.kiloCycleLead > 0 &&
+    // 检查累计里程参数是否已选择（当条件满足时）
+    (!(row.mileageAccumulatedAttrs?.length && !row.totalMileage) ||
+      (row.mileageAccumulatedAttrs?.length && !row.totalMileage && row.type)));
+
+  // 检查运行时间规则
+  const runningTimeFilled = row.runningTimeRule !== 0
+    ? true
+    : (row.lastRunningTime > 0 &&
+      row.nextRunningTime > 0 &&
+      row.timePeriodLead > 0  &&
+      // 检查累计时间参数是否已选择（当条件满足时）
+      (!(row.timeAccumulatedAttrs?.length && !row.totalRunTime) ||
+        (row.timeAccumulatedAttrs?.length && !row.totalRunTime && row.code)));
+
+  // 检查自然日期规则
+  const naturalDateFilled = row.naturalDateRule !== 0
+    ? true
+    : (row.lastNaturalDate &&
+      row.nextNaturalDate > 0 &&
+      row.naturalDatePeriodLead > 0);
+
+  return mileageFilled && runningTimeFilled && naturalDateFilled;
+};
+
 // 打开配置对话框
 const openConfigDialog = (row: IotMaintenanceBomVO) => {
   // 新增规则校验：至少一个规则开启
@@ -640,11 +693,7 @@ const saveConfig = () => {
 
     // 更新当前行的数据
     Object.assign(configDialog.current, updateData);
-    /* Object.assign(configDialog.current, {
-      ...configDialog.form,
-      // Date对象 -> 时间戳
-      lastNaturalDate: finalDate,
-    }) */
+
     configDialog.visible = false
   })
 }
@@ -786,13 +835,6 @@ const deviceChoose = async(selectedDevices) => {
     }
   })
 
-  // 数据加载完成后设置初始化标志为 false
-  /* setTimeout(() => {
-    isInitializing.value = false;
-  }, 500); */
-
-  // 新增数据后自动跳转到第一页
-  // currentPage.value = 1
 }
 
 const deviceFormRef = ref<InstanceType<typeof MainPlanDeviceList>>()
@@ -1142,4 +1184,10 @@ const handleDelete = async (str: string) => {
   justify-content: flex-end;
   margin-top: 20px;
 }
+
+/* 已完整填写行的背景色 */
+:deep(.el-table .all-filled) {
+  background-color: #f0fff3 !important; /* 淡绿色背景 */
+  transition: background-color 0.3s ease; /* 平滑过渡效果 */
+}
 </style>

src/views/pms/maintenance/IotMaintenancePlanEdit.vue

@@ -50,7 +50,7 @@
     <ContentWrap>
       <el-table ref="tableRef" @header-dragend="handleHeaderDragEnd" v-loading="loading"
                 :data="pagedList" :stripe="true" :show-overflow-tooltip="true"
-                style="table-layout: fixed" border :header-cell-style="tableHeaderStyle">
+                style="table-layout: fixed" border :header-cell-style="tableHeaderStyle"  :cell-class-name="cellClassName">
         <!-- 添加序号列 -->
         <el-table-column
           type="index"
@@ -1040,6 +1040,59 @@ const calculateRemainDay = (row: IotMaintenanceBomVO) => {
 
 };
 
+// 单元格类名回调方法
+const cellClassName = ({ row, column }) => {
+  // 只对序号列进行处理
+  if (column.type === 'index') {
+    // 检查该行所有启用的规则是否都已配置完整
+    if (checkRowFilled(row)) {
+      return 'all-filled'; // 返回自定义类名
+    }
+  }
+  return '';
+};
+
+// 检查行数据是否完整填写
+const checkRowFilled = (row: IotMaintenanceBomVO) => {
+  // 检查是否启用了至少一个规则
+  const hasRuleEnabled =
+    row.mileageRule === 0 ||
+    row.runningTimeRule === 0 ||
+    row.naturalDateRule === 0;
+
+  if (!hasRuleEnabled) {
+    return false; // 没有任何规则启用，不显示背景色
+  }
+  // 检查里程规则
+  const mileageFilled = row.mileageRule !== 0
+    ? true // 规则未启用，视为已"填写"
+    : (row.lastRunningKilometers > 0 &&
+      row.nextRunningKilometers > 0 &&
+      row.kiloCycleLead > 0 &&
+      // 检查累计里程参数是否已选择（当条件满足时）
+      (!(row.mileageAccumulatedAttrs?.length && !row.totalMileage) ||
+        (row.mileageAccumulatedAttrs?.length && !row.totalMileage && row.type)));
+
+  // 检查运行时间规则
+  const runningTimeFilled = row.runningTimeRule !== 0
+    ? true
+    : (row.lastRunningTime > 0 &&
+      row.nextRunningTime > 0 &&
+      row.timePeriodLead > 0  &&
+      // 检查累计时间参数是否已选择（当条件满足时）
+      (!(row.timeAccumulatedAttrs?.length && !row.totalRunTime) ||
+        (row.timeAccumulatedAttrs?.length && !row.totalRunTime && row.code)));
+
+  // 检查自然日期规则
+  const naturalDateFilled = row.naturalDateRule !== 0
+    ? true
+    : (row.lastNaturalDate &&
+      row.nextNaturalDate > 0 &&
+      row.naturalDatePeriodLead > 0);
+
+  return mileageFilled && runningTimeFilled && naturalDateFilled;
+};
+
 // 统一计算所有列宽
 const calculateAllColumnsWidth = () => {
   const MIN_WIDTH = 80; // 最小列宽
@@ -1662,4 +1715,10 @@ el-table {
     padding: 0 30px 0 11px !important; /* 日历图标空间 */
   }
 }
+
+/* 已完整填写行的背景色 */
+:deep(.el-table .all-filled) {
+  background-color: #f0fff3 !important; /* 淡绿色背景 */
+  transition: background-color 0.3s ease; /* 平滑过渡效果 */
+}
 </style>