You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

98 lines
2.9 KiB

<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>