1 changed files with 31 additions and 91 deletions
@ -1,121 +1,61 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 这里放置标签切换的按钮 --> |
|||
<el-button-group> |
|||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|||
<el-button |
|||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|||
@click="navigateTo('add')" |
|||
:disabled="!hasAddPermission" |
|||
@click="goToAdd" |
|||
> |
|||
新增消耗 |
|||
新增消耗 |
|||
</el-button> |
|||
<el-button |
|||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|||
@click="navigateTo('detail')" |
|||
:disabled="!hasDetailPermission" |
|||
@click="goToDetail" |
|||
> |
|||
金币消耗明细 |
|||
金币消耗明细 |
|||
</el-button> |
|||
</el-button-group> |
|||
<!-- 渲染子路由组件 --> |
|||
<router-view></router-view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import {ref, watch, onMounted, computed} from 'vue'; // 新增computed导入 |
|||
import {useRouter, useRoute} from 'vue-router'; |
|||
import {storeToRefs} from 'pinia'; |
|||
import {useAdminStore} from '@/store/index.js'; |
|||
import { ref, watch } from 'vue'; |
|||
import { useRouter, useRoute } from 'vue-router'; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
const adminStore = useAdminStore(); |
|||
const {menuTree} = storeToRefs(adminStore); |
|||
const router = useRouter();// 获取路由实例 |
|||
const route = useRoute();// 获取当前路由信息 |
|||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|||
const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add'); |
|||
//也就是说如果当前在coinConsumeDetail页面,那么就是detail,否则默认情况都展示add页面 |
|||
//此时获取到的路由信息是coinConsume,所以默认是add |
|||
|
|||
const activeTab = ref(''); |
|||
|
|||
// 路由名称映射 |
|||
const routeMap = { |
|||
add: 'addCoinConsume', |
|||
detail: 'coinConsumeDetail' |
|||
const goToAdd = () => { |
|||
// 点击按钮时更新 activeTab 为 add |
|||
activeTab.value = 'add'; |
|||
router.push({ name: 'addCoinConsume' }); |
|||
}; |
|||
|
|||
// 新增消耗权限判断(与其他页面保持一致的computed写法) |
|||
const hasAddPermission = computed(() => { |
|||
if (!menuTree.value) return false; |
|||
return menuTree.value.some(menu => |
|||
menu.menuName === '新增消耗' || menu.menuName === '消耗管理' |
|||
); |
|||
}); |
|||
|
|||
// 金币消耗明细权限判断(补充明细权限逻辑) |
|||
const hasDetailPermission = computed(() => { |
|||
if (!menuTree.value) return false; |
|||
return menuTree.value.some(menu => |
|||
menu.menuName === '金币消耗明细' || menu.menuName === '消耗管理' |
|||
); |
|||
}); |
|||
|
|||
// 导航方法(补充权限校验) |
|||
const navigateTo = (tab) => { |
|||
// 检查对应权限,无权限则不执行跳转 |
|||
if ((tab === 'add' && !hasAddPermission.value) || |
|||
(tab === 'detail' && !hasDetailPermission.value)) { |
|||
return; |
|||
} |
|||
activeTab.value = tab; |
|||
router.push({name: routeMap[tab]}); |
|||
}; |
|||
|
|||
// 检查权限并返回默认路由(优化权限判断逻辑) |
|||
const getDefaultConsumeRoute = () => { |
|||
// 优先检查新增消耗权限 |
|||
if (hasAddPermission.value) return 'add'; |
|||
// 其次检查明细权限 |
|||
if (hasDetailPermission.value) return 'detail'; |
|||
// 无任何权限时返回null |
|||
return null; |
|||
const goToDetail = () => { |
|||
// 点击按钮时更新 activeTab 为 detail |
|||
activeTab.value = 'detail'; |
|||
router.push({ name: 'coinConsumeDetail' }); |
|||
}; |
|||
|
|||
// 监听路由变化更新标签状态(增加权限校验) |
|||
// 监听路由变化,更新 activeTab |
|||
watch(() => route.name, (newName) => { |
|||
if (newName === routeMap.add && hasAddPermission.value) { |
|||
if (newName === 'addCoinConsume') { |
|||
activeTab.value = 'add'; |
|||
} else if (newName === routeMap.detail && hasDetailPermission.value) { |
|||
} else if (newName === 'coinConsumeDetail') { |
|||
activeTab.value = 'detail'; |
|||
} |
|||
}); |
|||
|
|||
// 监听路径变化,处理直接访问父路由的情况 |
|||
watch(() => route.path, (newPath) => { |
|||
if (newPath === '/coinConsume') { // 假设父路由路径为/coinConsume |
|||
const defaultRoute = getDefaultConsumeRoute(); |
|||
if (defaultRoute) { |
|||
navigateTo(defaultRoute); |
|||
} else { |
|||
console.warn('用户没有新增消耗和金币消耗明细的权限'); |
|||
// router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
|||
} |
|||
} |
|||
}); |
|||
|
|||
// 初始化逻辑(完善权限校验和状态同步) |
|||
onMounted(() => { |
|||
// 父路由默认跳转 |
|||
if (route.path === '/coinConsume') { // 假设父路由路径为/coinConsume |
|||
const defaultRoute = getDefaultConsumeRoute(); |
|||
if (defaultRoute) { |
|||
navigateTo(defaultRoute); |
|||
} else { |
|||
// console.warn('用户没有新增消耗和金币消耗明细的权限'); |
|||
router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
|||
} |
|||
} else { |
|||
// 子路由直接进入时同步状态(带权限校验) |
|||
if (route.name === routeMap.add && hasAddPermission.value) { |
|||
activeTab.value = 'add'; |
|||
} else if (route.name === routeMap.detail && hasDetailPermission.value) { |
|||
activeTab.value = 'detail'; |
|||
} |
|||
} |
|||
}); |
|||
// 当进入父路由时,默认跳转到新增消耗页面 |
|||
// if (route.name === 'coinConsume') { |
|||
// router.push({ name: 'addCoinConsume' }); |
|||
// } |
|||
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue