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.
99 lines
2.9 KiB
99 lines
2.9 KiB
7 months ago
|
<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 16px;
|
||
|
min-height: 42px;
|
||
|
background: #ffffff;
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
position: fixed;
|
||
|
top: 48px;
|
||
|
z-index: 505;
|
||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||
|
}
|
||
|
</style>
|