SaaS-lib/lib/saas/view/system/layout/breadcrumb.vue

<template>
  <div class="NsBreadcrumb">
    <a-breadcrumb v-if="initBreadcrumbList && initBreadcrumbList.length">
      <a-breadcrumb-item v-for="item in initBreadcrumbList" :key="item.name"
        ><a @click="redirectByName(item)">{{ item.meta?.title }}</a></a-breadcrumb-item
      >
    </a-breadcrumb>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
  export default defineComponent({
    props: {
      isCheck: {
        type: Boolean,
        default: () => true,
      },
      breadcrumbList: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const router = useRouter();
      const initBreadcrumbList = ref<object[]>([]);
      initBreadcrumbList.value = props.breadcrumbList as object[];
      const configStore = appConfigStore();
      const dealBreadcrumbList = () => {
        if (initBreadcrumbList.value.length) {
          let info = initBreadcrumbList.value[initBreadcrumbList.value.length - 2];
          let finalInfo = initBreadcrumbList.value[initBreadcrumbList.value.length - 1];
          if (info.meta && info.meta.hideChildren && `${info.name}Index` === finalInfo.name) {
            initBreadcrumbList.value = initBreadcrumbList.value.slice(
              0,
              initBreadcrumbList.value.length - 1,
            );
          }
        }
      };
      dealBreadcrumbList();
      watch(
        () => props.breadcrumbList,
        (val) => {
          initBreadcrumbList.value = val;
          if (props.isCheck) {
            dealBreadcrumbList();
          }
        },
        { deep: true },
      );
      const redirectByName = (menuInfo: object) => {
        if (configStore.resourceName) {
          menuInfo.name = menuInfo.name.replace(configStore.resourceName, '');
        }

        if (props.isCheck) {
          router.push({ name: menuInfo.name });
        } else {
          if (menuInfo.menus && menuInfo.menus.length) {
            if (menuInfo.type === 'noChildrenMenu') {
              router.push({ name: `${menuInfo.name}Index` });
            } else {
              let code = menuInfo.menus[0].code;
              if (configStore.resourceName) {
                code = code.replace(configStore.resourceName, '');
              }
              router.push({ name: code });
            }
          } else {
            router.push({ name: menuInfo.name });
          }
        }
      };
      return {
        initBreadcrumbList,
        redirectByName,
      };
    },
  });
</script>

<style lang="less" scoped>
  .NsBreadcrumb {
    width: 100%;
    padding: 0 @ns-gap;
    min-height: @ns-nav-shutters-height;
    background: @white;
    display: flex;
    align-items: center;
    position: fixed;
    top: calc(@layout-header-height + @ns-nav-shutters-height);
    z-index: 5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
</style>