feat: 实现点击消息抽屉中各种选项后会自动关闭抽屉，以及相同页面路由数据不同时仍会刷新页面功能

src/components/NotificationMessageCard/src/NotificationMessageCard.vue

@@ -20,7 +20,7 @@ const props = withDefaults(
 
 const pageData = ref<any[]>([])
 
-const emit = defineEmits<{ seeAll: []; hasCardRead: [] }>()
+const emit = defineEmits<{ seeAll: []; hasCardRead: []; viewMore: []; jumpTracking: [] }>()
 const handleSeeAll = () => {
   emit('seeAll')
 }
@@ -144,6 +144,10 @@ onUnmounted(() => {
     clearInterval(timer)
   }
 })
+
+const handleViewMore = () => {
+  emit('viewMore')
+}
 </script>
 
 <template>
@@ -154,9 +158,18 @@ onUnmounted(() => {
     v-for="item in pageData"
     :key="item.info.id || Math.random()"
   >
-    <EventCard @seeAll="handleSeeAll" v-if="item.notificationType === 'event'" :data="item.info" />
+    <EventCard
+      @seeAll="handleSeeAll"
+      @jump-tracking="emit('jumpTracking')"
+      v-if="item.notificationType === 'event'"
+      :data="item.info"
+    />
     <PasswordCard v-else-if="item.notificationType === 'password'" :data="item.info" />
-    <FeatureUpdateCard v-else-if="item.notificationType === 'feature'" :data="item.info" />
+    <FeatureUpdateCard
+      @view-more="handleViewMore"
+      v-else-if="item.notificationType === 'feature'"
+      :data="item.info"
+    />
     <slot></slot>
   </div>
 </template>

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

@@ -45,7 +45,7 @@ const props = defineProps<{
   data: EventCardPropsData
 }>()
 
-const emit = defineEmits<{ seeAll: [] }>()
+const emit = defineEmits<{ seeAll: []; jumpTracking: [] }>()
 const handleSeeAll = (data: EventCardPropsData) => {
   emit('seeAll')
   router.push({
@@ -59,6 +59,7 @@ const handleSeeAll = (data: EventCardPropsData) => {
 }
 
 const jumpTracking = (data: EventCardPropsData) => {
+  emit('jumpTracking')
   router.push({
     path: '/tracking/detail',
     query: { a: data.serial_no, _schemas: data.order_from }

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

@@ -16,6 +16,9 @@ const props = defineProps<{
   data: FeatureUpdateCardPropsData
 }>()
 
+const emit = defineEmits<{
+  viewMore: []
+}>()
 const handleViewMore = () => {
   router.push({
     name: 'System Message Detail',
@@ -25,6 +28,7 @@ const handleViewMore = () => {
       id: props.data.id
     }
   })
+  emit('viewMore')
 }
 </script>
 

src/components/NotificationMessageCard/src/components/PasswordCard.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import ChangePasswordDialog from '@/views/Layout/src/components/Header/components/ChangePasswordDialog.vue'
+
 interface PasswordCardPropsData {
   title: string
-  isExpiration: boolean
+  isExpiration: boolean // true为红色，false为绿色
   header: string
   isRead: boolean
   content: string
@@ -9,6 +11,11 @@ interface PasswordCardPropsData {
 const props = defineProps<{
   data: PasswordCardPropsData
 }>()
+
+const changePasswordDialogRef = ref()
+const handleChangePassword = () => {
+  changePasswordDialogRef.value.openDialog()
+}
 </script>
 
 <template>
@@ -26,12 +33,13 @@ const props = defineProps<{
         {{ data.content }}
       </div>
       <div class="change-btn" style="text-align: center">
-        <el-button class="el-button--main" style="height: 40px">
+        <el-button @click="handleChangePassword" class="el-button--main" style="height: 40px">
           <span class="font_family icon-icon_edit_b" style="margin-right: 4px"></span>
           <span>Change Password</span></el-button
         >
       </div>
     </div>
+    <ChangePasswordDialog ref="changePasswordDialogRef"></ChangePasswordDialog>
   </div>
 </template>
 

src/router/index.ts

@@ -138,7 +138,6 @@ router.beforeEach(async (to, from, next) => {
     !(from.name === 'System Message Detail' || from.name === 'System Message' || !from.name) ||
     !(to.name === 'System Message' || to.name === 'System Message Detail')
   ) {
-    console.log(from, 'router', to)
     sessionStorage.removeItem('activeCardTypeName')
   }
 

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

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import NotificationMessageCard from '@/components/NotificationMessageCard/src/NotificationMessageCard.vue'
 import { useRouter } from 'vue-router'
+import { useNotificationMessage } from '@/stores/modules/notificationMessage'
 
 const router = useRouter()
+const notificationMsgStore = useNotificationMessage()
+
 const loading = ref(false)
 
 const notificationType = ref('all')
@@ -65,6 +68,7 @@ const handleSettingMessage = () => {
 const closeDrawer = () => {
   notificationList.value = []
   notificationType.value = 'all'
+  notificationMsgStore.markMessageAsRead()
 }
 
 const notificationListRef = ref<HTMLElement | null>(null)
@@ -119,7 +123,12 @@ const notificationListRef = ref<HTMLElement | null>(null)
           </div>
         </div>
         <div class="notification-content" ref="notificationListRef">
-          <NotificationMessageCard @see-all="drawerRef.handleClose()" :data="notificationList" />
+          <NotificationMessageCard
+            @see-all="drawerRef.handleClose()"
+            @view-more="drawerRef.handleClose()"
+            @jump-tracking="drawerRef.handleClose()"
+            :data="notificationList"
+          />
         </div>
       </el-scrollbar>
     </template>

src/views/Layout/src/components/Menu/MenuView.vue

@@ -22,49 +22,6 @@ const getMenuList = () => {
       menuList.value = res.data
     }
   })
-  // menuList.value = [
-  //   {
-  //     index: '1',
-  //     label: 'Dashboard',
-  //     icon: 'icon_data_fill_b',
-  //     path: '/dashboard'
-  //   },
-  //   {
-  //     index: '2',
-  //     label: 'Booking',
-  //     icon: 'icon_booking__fill_b',
-  //     path: '/booking'
-  //   },
-  //   {
-  //     index: '3',
-  //     label: 'Tracking',
-  //     icon: 'icon_tracking__fill_b',
-  //     path: '/tracking'
-  //   },
-  //   {
-  //     index: '4',
-  //     label: 'System Management',
-  //     icon: 'icon_system__management_fill_b',
-  //     type: 'list',
-  //     children: [
-  //       {
-  //         index: '4-1',
-  //         label: 'System Message',
-  //         path: '/system-message'
-  //       },
-  //       {
-  //         index: '4-2',
-  //         label: 'System Settings',
-  //         path: '/SystemSettings'
-  //       },
-  //       {
-  //         index: '4-3',
-  //         label: 'Operation Log',
-  //         path: '/Operationlog'
-  //       }
-  //     ]
-  //   }
-  // ]
 }
 getMenuList()
 //监听窗口大小

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

@@ -18,9 +18,8 @@ const loading = ref(false)
 if (route.query.type === 'feature') {
   loading.value = true
 }
-const getNotificationList = () => {
-  loading.value = true
-  $api
+const getNotificationList = async () => {
+  await $api
     .getNotificationDetails({
       rules_type: route.query.rules_type,
       frequency_type: route.query.frequency_type,
@@ -36,15 +35,31 @@ const getNotificationList = () => {
       loading.value = false
     })
 }
-const init = () => {
+
+const iframeUrl = ref()
+const init = async () => {
+  loading.value = true
   if (route.query.type === 'feature') {
     notificationData.value.title = (route.query.title as string) || ''
+    iframeUrl.value = `${import.meta.env.VITE_API_HOST}/main_new_version.php?action=feature_update&id=${route.query.id}`
   } else {
-    getNotificationList()
+    await getNotificationList()
   }
 }
-onMounted(() => {
-  init()
+// onMounted(() => {
+//   init()
+// })
+const watchScope = watch(
+  () => route.query,
+  () => {
+    init()
+  },
+  {
+    immediate: true
+  }
+)
+onUnmounted(() => {
+  watchScope()
 })
 
 const iframeRef = ref(null)
@@ -53,8 +68,6 @@ const handleIframeLoaded = () => {
     loading.value = false
   })
 }
-
-const iframeUrl = `${import.meta.env.VITE_API_HOST}/main_new_version.php?action=feature_update&id=${route.query.id}`
 </script>
 
 <template>

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -109,7 +109,15 @@ const getData = () => {
       loading.value = false
     })
 }
-getData()
+watch(
+  () => route.query,
+  () => {
+    getData()
+  },
+  {
+    immediate: true
+  }
+)
 
 const originRef = ref()
 const destinationRef = ref()