k_online_ui/src/stores/modules/breadCrumb.ts

import { defineStore } from 'pinia'
import { collapseTextChangeRangesAcrossMultipleVersions } from 'typescript'

interface Route {
  label: string
  path: string
  query?: string
}
interface BreadCrumb {
  routeList: Route[]
}
// 需要添加多级菜单的页面，值为route的name
const whiteList = [
  'Booking Detail',
  'Tracking Detail',
  'Add VGM',
  'Public Tracking Detail',
  'Create New Rule',
  'System Message Detail',
  'Destination Delivery',
  'Configurations',
  'Destination Create New Rule',
]

export const useBreadCrumb = defineStore('breadCrumb', {
  state: (): BreadCrumb => ({
    routeList: JSON.parse(localStorage.getItem('routeList')) || []
  }),
  getters: {},
  actions: {
    setRouteList(toRoute: any) {
      const index = this.routeList.findIndex((item) => item.label === toRoute.name)
      if (index !== -1) {
        this.routeList.splice(index + 1)
        if (toRoute.name === 'Destination Delivery') {
          this.routeList = [
            {
              label: 'Destination Delivery',
              path: '/booking',
              query: ''
            },
            {
              label: 'Configurations',
              path: '/Booking/DestinationDelivery',
              query: toRoute.query
            }
          ]
        }
      } else if (toRoute.name === 'Public Tracking Detail') {
        this.routeList = [
          {
            label: 'Public Tracking',
            path: '/public-tracking',
            query: ''
          },
          {
            label: 'Public Tracking Detail',
            path: '/public-tracking/detail',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'System Message Detail') {
        this.routeList = [
          {
            label: 'System Message',
            path: '/system-message',
            query: ''
          },
          {
            label: 'System Message Detail',
            path: '/system-message/detail',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'Shipment Detail') {
        this.routeList = [
          {
            label: 'System Settings',
            path: '/SystemSettings',
            query: ''
          },
          {
            label: 'Shipment Detail',
            path: '/shipment/detail',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'Modify Booking') {
        this.routeList = [
          {
            label: 'Destination Delivery',
            path: '/destination-delivery',
            query: ''
          },
          {
            label: 'Modify Booking',
            path: '/destination-delivery/modify-booking',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'Configurations') {
        this.routeList = [
          {
            label: 'Destination Delivery',
            path: '/booking',
            query: ''
          },
          {
            label: 'Configurations',
            path: '/Booking/DestinationDelivery',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name === 'Destination Create New Rule') {
        this.routeList = [
          {
            label: 'Destination Delivery',
            path: '/booking',
            query: ''
          },
          {
            label: 'Configurations',
            path: '/Booking/DestinationDelivery',
            query: ''
          },
          {
            label: 'Create New Rule',
            path: '/Booking/DestinationDelivery/CreateNewRule',
            query: toRoute.query
          }
        ]
      } else if (toRoute.name && whiteList.includes(toRoute.name)) {
        this.routeList.push({
          label: toRoute?.meta?.breadName || toRoute.name,
          path: toRoute.path,
          query: toRoute.query
        })
      } else {
        this.routeList = [
          {
            label: toRoute.name,
            path: toRoute.path,
            query: toRoute.query
          }
        ]
      }
      localStorage.setItem('routeList', JSON.stringify(this.routeList))
    },
    getUpperRoute() {
      return this.routeList[this.routeList.length - 2]
    }
  }
})