feat: 项目详情路由调整
This commit is contained in:
parent
17b0871ab5
commit
0a062cb564
@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<div class="breadcrumb-container">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item
|
||||
v-for="(item, index) in breadcrumbList"
|
||||
:key="index"
|
||||
:class="{ 'is-link': index < breadcrumbList.length - 1 }"
|
||||
@click="handleBreadcrumbClick(item, index)"
|
||||
>
|
||||
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index"
|
||||
:class="{ 'is-link': index < breadcrumbList.length - 1 }" @click="handleBreadcrumbClick(item, index)">
|
||||
{{ item.title }}
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
|
||||
<!-- 关闭按钮组 -->
|
||||
<div class="breadcrumb-actions" v-if="breadcrumbList.length > 1">
|
||||
<el-dropdown trigger="click" @command="handleCloseAction">
|
||||
<el-button type="text" size="small" class="close-btn">
|
||||
<el-icon><Close /></el-icon>
|
||||
<el-icon>
|
||||
<Close />
|
||||
</el-icon>
|
||||
关闭
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
@ -23,7 +21,8 @@
|
||||
<el-dropdown-item command="close-current">关闭当前页</el-dropdown-item>
|
||||
<el-dropdown-item command="close-other" :disabled="breadcrumbList.length <= 2">关闭其他页</el-dropdown-item>
|
||||
<el-dropdown-item command="close-left" :disabled="currentIndex === 0">关闭左侧</el-dropdown-item>
|
||||
<el-dropdown-item command="close-right" :disabled="currentIndex === breadcrumbList.length - 1">关闭右侧</el-dropdown-item>
|
||||
<el-dropdown-item command="close-right"
|
||||
:disabled="currentIndex === breadcrumbList.length - 1">关闭右侧</el-dropdown-item>
|
||||
<el-dropdown-item command="close-all" :disabled="breadcrumbList.length <= 1">全部关闭</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@ -56,7 +55,7 @@ const currentIndex = ref(0)
|
||||
// 生成面包屑数据
|
||||
const generateBreadcrumb = () => {
|
||||
const matched = route.matched.filter(item => item.meta && item.meta.breadcrumb !== false)
|
||||
|
||||
|
||||
// 基础面包屑：首页
|
||||
breadcrumbList.value = [
|
||||
{
|
||||
@ -65,9 +64,9 @@ const generateBreadcrumb = () => {
|
||||
name: 'Home'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const currentPath = route.path
|
||||
|
||||
|
||||
// 特殊处理：驻地台账页面（响应预警的子页面）
|
||||
if (currentPath.includes('/ledgerManagement')) {
|
||||
// 添加响应预警（父级）
|
||||
@ -77,7 +76,7 @@ const generateBreadcrumb = () => {
|
||||
name: 'warningManagement',
|
||||
meta: { title: '响应预警' }
|
||||
})
|
||||
|
||||
|
||||
// 添加驻地台账（当前页）
|
||||
breadcrumbList.value.push({
|
||||
title: '驻地台账',
|
||||
@ -94,7 +93,7 @@ const generateBreadcrumb = () => {
|
||||
name: 'projectManagement',
|
||||
meta: { title: '项目管理' }
|
||||
})
|
||||
|
||||
|
||||
// 添加项目填报（当前页）
|
||||
breadcrumbList.value.push({
|
||||
title: '项目填报',
|
||||
@ -102,15 +101,33 @@ const generateBreadcrumb = () => {
|
||||
name: 'projectAdd',
|
||||
meta: { title: '项目填报' }
|
||||
})
|
||||
} else {
|
||||
} else if (currentPath.includes('/projectDetail')) {
|
||||
// 特殊处理：项目详情页面（项目管理的子页面）
|
||||
// 添加项目管理（父级）
|
||||
breadcrumbList.value.push({
|
||||
title: '项目管理',
|
||||
path: '/projectManagement',
|
||||
name: 'projectManagement',
|
||||
meta: { title: '项目管理' }
|
||||
})
|
||||
|
||||
// 添加项目填报（当前页）
|
||||
breadcrumbList.value.push({
|
||||
title: '项目详情',
|
||||
path: currentPath,
|
||||
name: 'projectDetail',
|
||||
meta: { title: '项目详情' }
|
||||
})
|
||||
}
|
||||
else {
|
||||
// 普通路由处理
|
||||
matched.forEach((record, index) => {
|
||||
// 跳过根路径（已经在上面添加了首页）
|
||||
if (record.path === '/') return
|
||||
|
||||
|
||||
if (record.meta && record.meta.title) {
|
||||
let fullPath = record.path
|
||||
|
||||
|
||||
// 处理相对路径
|
||||
if (!fullPath.startsWith('/') && index > 0) {
|
||||
const parentPath = breadcrumbList.value[breadcrumbList.value.length - 1]?.path || ''
|
||||
@ -118,7 +135,7 @@ const generateBreadcrumb = () => {
|
||||
fullPath = parentPath + (parentPath.endsWith('/') ? '' : '/') + record.path
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
breadcrumbList.value.push({
|
||||
title: record.meta.title,
|
||||
path: fullPath,
|
||||
@ -128,7 +145,7 @@ const generateBreadcrumb = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 更新当前索引
|
||||
const currentIndexInList = breadcrumbList.value.findIndex(item => item.path === currentPath)
|
||||
currentIndex.value = currentIndexInList >= 0 ? currentIndexInList : breadcrumbList.value.length - 1
|
||||
@ -165,10 +182,10 @@ const handleCloseAction = (command) => {
|
||||
// 关闭当前页
|
||||
const closeCurrentPage = () => {
|
||||
if (breadcrumbList.value.length <= 1) return
|
||||
|
||||
|
||||
const currentPath = route.path
|
||||
const currentIndex = breadcrumbList.value.findIndex(item => item.path === currentPath)
|
||||
|
||||
|
||||
if (currentIndex > 0) {
|
||||
// 跳转到前一个页面
|
||||
const prevPage = breadcrumbList.value[currentIndex - 1]
|
||||
@ -180,16 +197,16 @@ const closeCurrentPage = () => {
|
||||
// 关闭其他页
|
||||
const closeOtherPages = () => {
|
||||
if (breadcrumbList.value.length <= 2) return
|
||||
|
||||
|
||||
const currentPath = route.path
|
||||
const currentItem = breadcrumbList.value.find(item => item.path === currentPath)
|
||||
|
||||
|
||||
if (currentItem) {
|
||||
breadcrumbList.value = [
|
||||
breadcrumbList.value[0], // 保留首页
|
||||
currentItem
|
||||
]
|
||||
|
||||
|
||||
// 触发路由跳转逻辑
|
||||
emit('breadcrumb-change', breadcrumbList.value)
|
||||
}
|
||||
@ -198,15 +215,15 @@ const closeOtherPages = () => {
|
||||
// 关闭左侧页
|
||||
const closeLeftPages = () => {
|
||||
if (currentIndex.value <= 1) return
|
||||
|
||||
|
||||
const currentItem = breadcrumbList.value[currentIndex.value]
|
||||
breadcrumbList.value = [
|
||||
breadcrumbList.value[0], // 保留首页
|
||||
currentItem
|
||||
]
|
||||
|
||||
|
||||
// 如果当前不在首页，需要重新构建路径
|
||||
let targetPath = '/'
|
||||
let targetPath = '/'
|
||||
if (currentItem.path !== '/') {
|
||||
targetPath = currentItem.path
|
||||
}
|
||||
@ -216,9 +233,9 @@ const closeLeftPages = () => {
|
||||
// 关闭右侧页
|
||||
const closeRightPages = () => {
|
||||
if (currentIndex.value >= breadcrumbList.value.length - 1) return
|
||||
|
||||
|
||||
breadcrumbList.value = breadcrumbList.value.slice(0, currentIndex.value + 1)
|
||||
|
||||
|
||||
// 跳转到最后一个保留的页面
|
||||
const lastItem = breadcrumbList.value[breadcrumbList.value.length - 1]
|
||||
router.push(lastItem.path)
|
||||
@ -260,23 +277,23 @@ defineExpose({
|
||||
|
||||
:deep(.el-breadcrumb) {
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
.el-breadcrumb__item {
|
||||
.el-breadcrumb__inner {
|
||||
color: #606266;
|
||||
font-weight: 400;
|
||||
|
||||
|
||||
&.is-link {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:last-child .el-breadcrumb__inner {
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
@ -288,7 +305,7 @@ defineExpose({
|
||||
.breadcrumb-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -298,12 +315,12 @@ defineExpose({
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
|
||||
.el-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user