fix: 修改抽屉消息滚动加载bug，修改表格选中后和hover背景颜色错误bug，消息详情使用路由传值而非接口传递

src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -214,7 +214,7 @@ const loadMore = async () => {
 
 const onScroll = () => {
   const el = scrollContainerRef.value
-  if (!el || loading.value || finished.value) return
+  if (!el || loading.value || finished.value || el.scrollTop === 0) return
 
   prevScrollTop.value = el.scrollTop + 50
 

src/components/NotificationMessageCard/src/components/EventCard.vue

@@ -47,14 +47,15 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{ seeAll: []; jumpTracking: [] }>()
-const handleSeeAll = (data: EventCardPropsData) => {
+const handleSeeAll = (data: EventCardPropsData, numData) => {
   emit('seeAll')
   router.push({
     name: 'System Message Detail',
     query: {
       frequency_type: data.frequency_type,
       insert_date_format: data.insert_date_format,
-      rules_type: data.rules_type
+      rules_type: data.rules_type,
+      ...numData
     }
   })
 }
@@ -80,7 +81,14 @@ const jumpTracking = (data: EventCardPropsData) => {
         v-if="(data.type === 'milestone' || data.type === 'container') && data.numericRecords"
       >
         <span>Latest Status Updates ({{ data.numericRecords }}) </span>
-        <el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
+        <el-button
+          @click="
+            handleSeeAll(data, {
+              numericRecords: data.numericRecords
+            })
+          "
+          class="see-all-icon el-button--text"
+        >
           See All
           <span class="font_family icon-icon_next_b"></span>
         </el-button>
@@ -101,7 +109,15 @@ const jumpTracking = (data: EventCardPropsData) => {
             }})
           </span>
         </div>
-        <el-button @click="handleSeeAll(data)" class="see-all-icon el-button--text">
+        <el-button
+          @click="
+            handleSeeAll(data, {
+              etdOrdeparturNum: data.info?.etdOrdeparturNum,
+              etaOrarrivalNum: data.info?.etaOrarrivalNum
+            })
+          "
+          class="see-all-icon el-button--text"
+        >
           See All
           <span class="font_family icon-icon_next_b"></span>
         </el-button>

src/components/NotificationMessageCard/src/components/FeatureUpdateCard.vue

@@ -115,7 +115,7 @@ const handleContent = (header) => {
     }
   }
   .card-content {
-    padding: 16px 16px 24px 8px;
+    padding: 16px 16px 16px 8px;
     background: linear-gradient(
       137deg,
       var(--color-feature-card-first-bg) 12.41%,

src/styles/vxeTable.scss

@@ -22,11 +22,17 @@
 }
 .vxe-table--render-default tr.vxe-body--row.row--current,
 .vxe-table--render-default tr.vxe-body--row.row--stripe.row--current {
-  background-color: rgba(255, 117, 0, 0.2);
+  background-color: rgba(255, 117, 0, 0.2) !important;
+  &>.vxe-body--column {
+  background-color: rgba(255, 117, 0, 0.2) !important;
+  }
 }
 .vxe-table--render-default .vxe-body--row.visited-row,
 .vxe-table--render-default .vxe-body--row.row--stripe.visited-row {
   background-color: var(--color-vxe-table-visited-row-bg);
+   &>.vxe-body--column {
+  background-color: var(--color-vxe-table-visited-row-bg);
+  }
 }
 
 .vxe-table--render-default .vxe-body--column.col--ellipsis,
@@ -75,6 +81,9 @@ div.vxe-table--render-default tr.vxe-body--row.row--hover,
 div.vxe-table--render-default tr.vxe-body--row.row--hover.row--current,
 .vxe-table--render-default tr.vxe-body--row.row--stripe.row--hover {
   background-color: var(--color-table-row-hover-bg);
+  &>.vxe-body--column {
+    background-color: var(--color-table-row-hover-bg);
+  }
 }
 div.vxe-table--render-default tr.vxe-body--row.vxe-table-row-clicked-style {
   background-color: var(--border-hover-color);

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -24,7 +24,7 @@ const pageInfo = ref({
   cp: 1,
   ps: 30
 })
-const getNotificationList = () => {
+const getNotificationList = (isChangeType: boolean) => {
   loading.value = true
   $api
     .getNotificationList({
@@ -38,9 +38,6 @@ const getNotificationList = () => {
         if (res.data.length === 0 || res.data.length < pageInfo.value.ps) {
           notificationMessageCardRef.value.finished = true
         }
-        // nextTick(() => {
-        //   init()
-        // })
       }
     })
     .finally(() => {
@@ -48,7 +45,7 @@ const getNotificationList = () => {
       pageInfo.value.cp += 1
       notificationMessageCardRef.value.loading = false
 
-      notificationMessageCardRef.value.adjustScrollTop()
+      notificationMessageCardRef.value.adjustScrollTop(isChangeType ? 0 : undefined)
     })
 }
 
@@ -82,13 +79,12 @@ const handleSettingMessage = () => {
   })
 }
 
-const handleChangeNotificationType = (value: string) => {
-  notificationType.value = value
+const handleChangeNotificationType = async (value: string) => {
   notificationList.value = []
   pageInfo.value.cp = 1
   notificationMessageCardRef.value.adjustScrollTop(0)
   notificationMessageCardRef.value.finished = false
-  getNotificationList()
+  getNotificationList(true)
 }
 
 const closeDrawer = () => {

src/views/Layout/src/components/Header/components/TrainingCard.vue

@@ -136,6 +136,7 @@ const closeMessage = () => {
       v-if="curCard"
       :data="[curCard]"
       :topOffset="0"
+      :isDrawer="true"
     ></NotificationMessageCard>
   </div>
 </template>

src/views/SystemMessage/src/components/SystemMessageDetail.vue

@@ -86,9 +86,7 @@ const init = async () => {
     await getNotificationList()
   }
 }
-// onMounted(() => {
-//   init()
-// })
+
 const watchScope = watch(
   () => route.query,
   () => {
@@ -117,25 +115,31 @@ const handleIframeLoaded = () => {
         <div class="status-icon"></div>
         <div class="title">{{ notificationData.title }}</div>
       </div>
-      <div class="total-tips" v-if="notificationData.numericRecords > -1">
-        Latest Status Updates ({{ notificationData.numericRecords }})
+      <div
+        class="total-tips"
+        v-if="route.query.numericRecords && Number(route.query.numericRecords) > -1"
+      >
+        Latest Status Updates ({{ route.query.numericRecords }})
       </div>
       <div
         class="total-tips"
-        v-else-if="notificationData.etdOrdeparturNum > -1 || notificationData.etaOrarrivalNum > -1"
+        v-else-if="
+          (route.query.etdOrdeparturNum && Number(route.query.etdOrdeparturNum) > -1) ||
+          (route.query.etaOrarrivalNum && Number(route.query.etaOrarrivalNum) > -1)
+        "
       >
         <div>
-          <span v-if="notificationData.etdOrdeparturNum"
+          <span v-if="route.query.etdOrdeparturNum"
             >{{ notificationData.type === 'delay' ? 'Departure Delay' : 'ETD Change' }} ({{
-              notificationData.etdOrdeparturNum
+              route.query.etdOrdeparturNum
             }})</span
           >
-          <span v-if="notificationData.etdOrdeparturNum && notificationData.etaOrarrivalNum">
+          <span v-if="route.query.etdOrdeparturNum && route.query.etaOrarrivalNum">
             &nbsp;&nbsp;|&nbsp;&nbsp;</span
           >
-          <span v-if="notificationData.etaOrarrivalNum">
+          <span v-if="route.query.etaOrarrivalNum">
             {{ notificationData.type === 'delay' ? 'Arrival Delay' : 'ETA Change' }} ({{
-              notificationData.etaOrarrivalNum
+              route.query.etaOrarrivalNum
             }})
           </span>
         </div>