pms 保养工单 填报 保养项选择样式 背景色

src/views/pms/iotmainworkorder/IotMainWorkOrderOptimize.vue

@@ -89,8 +89,17 @@
   <ContentWrap>
     <!-- 列表 -->
     <ContentWrap>
-      <el-table v-loading="loading" :data="paginatedList" :stripe="true" @row-click="handleRowClick" :row-class-name="tableRowClassName"
-                :show-overflow-tooltip="true" :header-cell-style="tableHeaderStyle" :span-method="handleSpanMethod">
+      <el-table ref="mainTableRef"
+                v-loading="loading"
+                :data="paginatedList"
+                :stripe="true"
+                @row-click="handleRowClick"
+                :row-class-name="tableRowClassName"
+                :show-overflow-tooltip="true"
+                :header-cell-style="tableHeaderStyle"
+                :span-method="handleSpanMethod"
+                highlight-current-row
+                @current-change="handleCurrentChangeTable">
         <!-- 序号列 -->
         <el-table-column
           type="index"
@@ -879,6 +888,7 @@ const currentPage = ref(1)
 const pageSize = ref(10)
 
 const tableRef = ref();
+const mainTableRef = ref(); // 添加表格ref
 
 // 新增响应式变量
 const maintItemsWidth = ref('auto')
@@ -973,9 +983,9 @@ const toggleShowAllMaterials = () => {
 };
 
 // 为表格行添加类名，实现高亮效果
-const tableRowClassName = ({ row }) => {
+/* const tableRowClassName = ({ row }) => {
   return row.isSelected ? 'highlight-row' : '';
-};
+}; */
 
 // 分组合并计算逻辑
 const groupSpans = ref<Record<string, { span: number, index: number }>>({})
@@ -2199,6 +2209,13 @@ const handleSelectMaterial = () => {
   openMaterialForm(currentBomItem.value);
 };
 
+// Element UI表格当前行变化事件
+const handleCurrentChangeTable = (currentRow) => {
+  if (currentRow) {
+    handleBomItemClick(currentRow);
+  }
+};
+
 // 监听分页数据和规则变化 - 重新布局表格
 watch([paginatedList, hasMileageRuleInCurrentPage, hasTimeRuleInCurrentPage, hasDateRuleInCurrentPage], () => {
   nextTick(() => {
@@ -2217,10 +2234,12 @@ watch([paginatedList, currentPage], () => {
 // 监听分页数据变化，自动选中第一条
 watch(() => paginatedList.value, (newList) => {
   if (newList && newList.length > 0) {
-    // 取消之前选中的保养项（如果存在）
-    if (currentBomItem.value) {
-      currentBomItem.value.isSelected = false;
-    }
+    // 使用Element UI的方法设置当前行
+    nextTick(() => {
+      if (mainTableRef.value) {
+        mainTableRef.value.setCurrentRow(newList[0]);
+      }
+    });
 
     // 选中新分页的第一条
     handleBomItemClick(newList[0]);
@@ -2404,24 +2423,6 @@ onMounted(async () => {
             ? item.name.split('->')[0].trim()
             : '';
 
-          // 处理物料数据映射
-          /* if (item.deviceBomMaterials && item.deviceBomMaterials.length > 0) {
-            // 生成唯一键
-            const uniqueKey = `${item.bomNodeId}`;
-
-            // 转换物料字段映射
-            const mappedMaterials = item.deviceBomMaterials.map(material => ({
-              ...material,
-              materialName: material.name, // name -> materialName
-              materialCode: material.code, // code -> materialCode
-              projectDepartment: material.storageLocation, // storageLocation -> projectDepartment
-              totalInventoryQuantity: material.stockQuantity, // stockQuantity -> totalInventoryQuantity
-              deviceId: item.deviceId // 添加 deviceId，从保养项中获取
-            }));
-            // 存储到映射表中
-            bomMaterialsMap.value[uniqueKey] = mappedMaterials;
-          } */
-
           if (item.mileageRule === 0) {
             item.nextMaintenanceKm = calculateNextMaintenanceKm(item);
             item.remainKm = calculateRemainKm(item);
@@ -2523,6 +2524,13 @@ onMounted(async () => {
       const uniqueKey = `${firstItem.bomNodeId}`;
       materialList.value = bomMaterialsMap.value[uniqueKey] || [];
 
+      // 使用Element UI的方法设置当前行
+      nextTick(() => {
+        if (mainTableRef.value) {
+          mainTableRef.value.setCurrentRow(firstItem);
+        }
+      });
+
       handleBomItemClick(firstItem);
     }
     // 页面初始化完成后立即计算费用
@@ -2549,12 +2557,12 @@ onUnmounted(async () => {
 // 处理保养项点击事件
 const handleBomItemClick = (item) => {
   // 移除之前的高亮
-  if (currentBomItem.value) {
+  /* if (currentBomItem.value) {
     currentBomItem.value.isSelected = false;
-  }
+  } */
 
   // 设置当前选中项
-  item.isSelected = true;
+  // item.isSelected = true;
   currentBomItem.value = item;
   // 切换到当前保养项物料视图
   showAllMaterials.value = false;
@@ -2685,7 +2693,7 @@ const handleRowClick = (row) => {
   border-bottom: none; /* 移除默认边框 */
 }
 
-/* 添加选中行高亮样式 - 增强版 */
+/* 添加选中行高亮样式 - 增强版
 :deep(.el-table .highlight-row) {
   background-color: #d1eaff !important;
 }
@@ -2697,13 +2705,14 @@ const handleRowClick = (row) => {
 :deep(.el-table .highlight-row.current-row>td) {
   background-color: #99ccff !important;
   border-bottom: 2px solid #409eff !important;
-}
+} */
 
 /* 增强高亮行样式的特异性，确保覆盖Element UI的默认样式 */
-:deep(.el-table__body tr.highlight-row td) {
+:deep(.el-table__body tr.current-row>td) {
   background-color: #d1eaff !important;
 }
 
+/*
 :deep(.el-table__body tr.highlight-row:hover td) {
   background-color: #d9ecff !important;
 }
@@ -2711,20 +2720,21 @@ const handleRowClick = (row) => {
 :deep(.el-table__body tr.highlight-row.current-row td) {
   background-color: #c6e2ff !important;
   border-bottom: 2px solid #409eff !important;
-}
+} */
 
-/* 针对斑马纹表格的特殊处理 */
+/* 针对斑马纹表格的特殊处理
 :deep(.el-table--striped .el-table__body tr.highlight-row.el-table__row--striped td) {
   background-color: #d1eaff !important;
-}
+} */
 
-:deep(.el-table--striped .el-table__body tr.highlight-row.el-table__row--striped:hover td) {
+:deep(.el-table__body tr.current-row:hover>td) {
   background-color: #b8dfff !important;
 }
 
+/*
 :deep(.el-table--striped .el-table__body tr.highlight-row.el-table__row--striped.current-row td) {
   background-color: #99ccff !important;
-}
+} */
 
 /* 物料列表操作区域样式 */
 .material-list-header {