302 lines
7.9 KiB
Vue
302 lines
7.9 KiB
Vue
|
<template>
|
||
|
|
<div v-if="isShowBreadcrumb" class="layout-navbars-breadcrumb">
|
||
|
|
<div
|
||
|
|
v-if="route.path == '/detail' || route.path == '/detailKua'"
|
||
|
|
style="width: 50px; display: flex; text-align: center; justify-content: center"
|
||
|
|
@click="goBack"
|
||
|
|
>
|
||
|
|
<img :src="iconBack" class="back_icon" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="route.path !== '/detail' || route.path == '/detailKua'" class="r_logo">
|
||
|
|
<img :src="logo_hol" class="logo" />
|
||
|
|
<div class="line"></div>
|
||
|
|
<text>中证智能财保</text>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="route_name" v-if="detailName && route.path == '/detail'" :key="route.path"> {{ detailName }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <el-breadcrumb separator="-" style="margin-left: 30px" v-if="pathTwo">
|
||
|
|
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
|
||
|
|
<el-breadcrumb-item :to="{ path: pathTwo }">{{ nameTwo }}</el-breadcrumb-item>
|
||
|
|
</el-breadcrumb> -->
|
||
|
|
|
||
|
|
<!-- <el-breadcrumb class="layout-navbars-breadcrumb-hide" style="margin-left: 20px">
|
||
|
|
<transition-group name="breadcrumb">
|
||
|
|
<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
|
||
|
|
<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
|
||
|
|
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
|
||
|
|
<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
|
||
|
|
<div v-else>{{ v.meta.tagsViewName }}</div>
|
||
|
|
</span>
|
||
|
|
<a v-else @click.prevent="onBreadcrumbClick(v)">
|
||
|
|
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />{{ $t(v.meta.title) }}
|
||
|
|
</a>
|
||
|
|
</el-breadcrumb-item>
|
||
|
|
</transition-group>
|
||
|
|
</el-breadcrumb> -->
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts" name="layoutBreadcrumb">
|
||
|
|
import { reactive, computed, onMounted, ref, nextTick, watch, defineAsyncComponent } from 'vue';
|
||
|
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||
|
|
import { Local } from '/@/utils/storage';
|
||
|
|
import other from '/@/utils/other';
|
||
|
|
import { storeToRefs } from 'pinia';
|
||
|
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||
|
|
import { useRoutesList } from '/@/stores/routesList';
|
||
|
|
import iconBack from '/@/assets/images/icon_back.png';
|
||
|
|
import { getInfoTitle } from '/@/api/api';
|
||
|
|
import { Session } from '/@/utils/storage';
|
||
|
|
import logo_hol from '/@/assets/logo_hol.png';
|
||
|
|
// import HeadFilter from '/@/components/Filter/HeadFilter.vue';
|
||
|
|
|
||
|
|
// 定义变量内容
|
||
|
|
const stores = useRoutesList();
|
||
|
|
const { routesList } = storeToRefs(stores);
|
||
|
|
|
||
|
|
const storesThemeConfig = useThemeConfig();
|
||
|
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
const state = reactive<BreadcrumbState>({
|
||
|
|
breadcrumbList: [],
|
||
|
|
routeSplit: [],
|
||
|
|
routeSplitFirst: '',
|
||
|
|
routeSplitIndex: 1,
|
||
|
|
menuList: [],
|
||
|
|
});
|
||
|
|
|
||
|
|
const detailName = ref();
|
||
|
|
|
||
|
|
// 角色判断
|
||
|
|
// const roleName = ['Director', 'subCenter', 'CSRC'];
|
||
|
|
// const roleAuth = computed(() => {
|
||
|
|
// return roleName.includes(Session.get('roleName')) && route.path === '/dashboard';
|
||
|
|
// });
|
||
|
|
const nickName = computed(() => {
|
||
|
|
// return Session.get('userData')?.name || Session.get('userData')?.companyName || '';
|
||
|
|
return Session.get('userData')?.companyName || '';
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => route.path,
|
||
|
|
(val) => {
|
||
|
|
getInfo();
|
||
|
|
// if (Session.get("detail_name")) {
|
||
|
|
// detailName.value = Session.get("detail_name")
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
function goBack() {
|
||
|
|
if (route.path == '/detail' || route.path == '/detailKua') {
|
||
|
|
// router.go(-1)
|
||
|
|
router.push(route.query.fromPath);
|
||
|
|
// if (route.query.type == 1) {
|
||
|
|
// router.push('/index');
|
||
|
|
// } else {
|
||
|
|
// router.push('/dashboard');
|
||
|
|
// }
|
||
|
|
} else {
|
||
|
|
router.go(-1);
|
||
|
|
}
|
||
|
|
// router.go(-1)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 动态设置经典、横向布局不显示
|
||
|
|
const isShowBreadcrumb = computed(() => {
|
||
|
|
initRouteSplit(route.path);
|
||
|
|
const { layout, isBreadcrumb } = themeConfig.value;
|
||
|
|
if (layout === 'classic' || layout === 'transverse') return false;
|
||
|
|
else return isBreadcrumb ? true : false;
|
||
|
|
});
|
||
|
|
// 面包屑点击时
|
||
|
|
const onBreadcrumbClick = (v: RouteItem) => {
|
||
|
|
const { redirect, path } = v;
|
||
|
|
if (redirect) router.push(redirect);
|
||
|
|
else router.push(path);
|
||
|
|
};
|
||
|
|
// 展开/收起左侧菜单点击
|
||
|
|
const onThemeConfigChange = () => {
|
||
|
|
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
||
|
|
setLocalThemeConfig();
|
||
|
|
};
|
||
|
|
// 存储布局配置
|
||
|
|
const setLocalThemeConfig = () => {
|
||
|
|
Local.remove('themeConfig');
|
||
|
|
Local.set('themeConfig', themeConfig.value);
|
||
|
|
};
|
||
|
|
// 处理面包屑数据
|
||
|
|
const getBreadcrumbList = (arr: RouteItems) => {
|
||
|
|
arr.forEach((item: RouteItem) => {
|
||
|
|
state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
|
||
|
|
if (state.routeSplitFirst === item.path) {
|
||
|
|
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
|
||
|
|
state.breadcrumbList.push(item);
|
||
|
|
state.routeSplitIndex++;
|
||
|
|
if (item.children) getBreadcrumbList(item.children);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 当前路由字符串切割成数组，并删除第一项空内容
|
||
|
|
const initRouteSplit = (path: string) => {
|
||
|
|
if (!themeConfig.value.isBreadcrumb) return false;
|
||
|
|
state.breadcrumbList = [routesList.value[0]];
|
||
|
|
state.routeSplit = path.split('/');
|
||
|
|
state.routeSplit.shift();
|
||
|
|
state.routeSplitFirst = `/${state.routeSplit[0]}`;
|
||
|
|
state.routeSplitIndex = 1;
|
||
|
|
getBreadcrumbList(routesList.value);
|
||
|
|
if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
|
||
|
|
if (state.breadcrumbList.length > 0)
|
||
|
|
state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
|
||
|
|
};
|
||
|
|
|
||
|
|
async function getInfo() {
|
||
|
|
if (route.query?.id && route.path == '/detail') {
|
||
|
|
let { code, data } = await getInfoTitle({
|
||
|
|
id: route.query.id,
|
||
|
|
type: 2,
|
||
|
|
}).catch((e) => {});
|
||
|
|
if (code == 200) detailName.value = data;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const pathTwo = ref();
|
||
|
|
const nameTwo = ref();
|
||
|
|
|
||
|
|
// 页面加载时
|
||
|
|
onMounted(() => {
|
||
|
|
initRouteSplit(route.path);
|
||
|
|
|
||
|
|
// if (Session.get("detail_name")) {
|
||
|
|
// detailName.value = Session.get("detail_name")
|
||
|
|
// }
|
||
|
|
// state.menuList = filterRoutesFun(routesList.value);
|
||
|
|
|
||
|
|
if (route.path != '/home') {
|
||
|
|
pathTwo.value = route.path;
|
||
|
|
nameTwo.value = route.meta.title;
|
||
|
|
}
|
||
|
|
|
||
|
|
getInfo();
|
||
|
|
});
|
||
|
|
// 路由更新时
|
||
|
|
onBeforeRouteUpdate((to) => {
|
||
|
|
initRouteSplit(to.path);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.layout-navbars-breadcrumb {
|
||
|
|
// flex: 1;
|
||
|
|
height: inherit;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.layout-navbars-breadcrumb-icon {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 18px;
|
||
|
|
color: var(--next-bg-topBarColor);
|
||
|
|
height: 100%;
|
||
|
|
width: 40px;
|
||
|
|
opacity: 0.8;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-navbars-breadcrumb-span {
|
||
|
|
display: flex;
|
||
|
|
opacity: 0.7;
|
||
|
|
color: var(--next-bg-topBarColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layout-navbars-breadcrumb-iconfont {
|
||
|
|
font-size: 14px;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-breadcrumb__separator) {
|
||
|
|
opacity: 0.7;
|
||
|
|
color: var(--next-bg-topBarColor);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link) {
|
||
|
|
font-weight: unset !important;
|
||
|
|
color: var(--next-bg-topBarColor);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: var(--el-color-primary) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.route_name {
|
||
|
|
// color: #2d3643;
|
||
|
|
// font-family: 'PingFang SC';
|
||
|
|
// font-size: 14px;
|
||
|
|
// font-style: normal;
|
||
|
|
// font-weight: 600;
|
||
|
|
// line-height: 22px;
|
||
|
|
margin-left: 10px;
|
||
|
|
color: #000000;
|
||
|
|
font-family: 'Noto Sans CJK SC';
|
||
|
|
font-size: 18px;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 26px;
|
||
|
|
letter-spacing: 0.56px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back_icon {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.r_logo {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-left: 20px;
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
width: 140px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.line {
|
||
|
|
width: 1px;
|
||
|
|
height: 15px;
|
||
|
|
background-color: #ccc;
|
||
|
|
margin-left: 12px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
text {
|
||
|
|
color: #000000;
|
||
|
|
font-family: 'Noto Sans CJK SC';
|
||
|
|
font-size: 18px;
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 26px;
|
||
|
|
letter-spacing: 0.56px;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// .head-filter {
|
||
|
|
// margin-left: 24px;
|
||
|
|
// }
|
||
|
|
</style>
|