Browse Source
Merge branch 'milestone-20250728-金币前端三期' of http://39.101.133.168:8807/huangqizhen/gold-vue into zhangyong/feature-20250716164232-金币前端
zhangrenyuan/feature-20250728113353-金币前端三期
Merge branch 'milestone-20250728-金币前端三期' of http://39.101.133.168:8807/huangqizhen/gold-vue into zhangyong/feature-20250716164232-金币前端
zhangrenyuan/feature-20250728113353-金币前端三期
2 changed files with 73 additions and 86 deletions
@ -1,115 +1,99 @@ |
|||||
<script setup lang="ts"> |
|
||||
import {onMounted, ref, watch} from 'vue'; |
|
||||
|
<template> |
||||
|
<div> |
||||
|
<el-button-group> |
||||
|
<el-button |
||||
|
:type="activeTab === 'addBeanRecharge' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('addBeanRecharge')" |
||||
|
:disabled="!hasAdd" |
||||
|
style="width: 120px;" |
||||
|
> |
||||
|
新增充值 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
:type="activeTab === 'beanSystemRecharge' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('beanSystemRecharge')" |
||||
|
:disabled="!hasSystem" |
||||
|
style="width: 120px;" |
||||
|
> |
||||
|
系统充值 |
||||
|
</el-button> |
||||
|
<el-button |
||||
|
:type="activeTab === 'beanOnlineRecharge' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('beanOnlineRecharge')" |
||||
|
:disabled="!hasOnline" |
||||
|
style="width: 120px;" |
||||
|
> |
||||
|
线上充值 |
||||
|
</el-button> |
||||
|
</el-button-group> |
||||
|
<router-view></router-view> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {ref, watch, onMounted} from 'vue'; |
||||
import {useRouter, useRoute} from 'vue-router'; |
import {useRouter, useRoute} from 'vue-router'; |
||||
import {storeToRefs} from "pinia"; |
|
||||
import {useAdminStore} from "@/store/index.js"; |
|
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {useAdminStore} from '@/store/index.js'; |
||||
|
import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js"; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|
||||
const activeTab = ref(route.name === 'beanSystemRecharge' ? 'system' : route.name === 'beanOnlineRecharge' ? 'online' : 'add'); |
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
const adminStore = useAdminStore(); |
const adminStore = useAdminStore(); |
||||
const {menuTree} = storeToRefs(adminStore); |
const {menuTree} = storeToRefs(adminStore); |
||||
const goToAdd = () => { |
|
||||
// 点击按钮时更新 activeTab 为 add |
|
||||
activeTab.value = 'add'; |
|
||||
router.push({name: 'addBeanRecharge'}); |
|
||||
}; |
|
||||
|
|
||||
const goToSystem = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'system'; |
|
||||
router.push({name: 'beanSystemRecharge'}); |
|
||||
}; |
|
||||
const goToOnline = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'online'; |
|
||||
router.push({name: 'beanOnlineRecharge'}); |
|
||||
}; |
|
||||
|
|
||||
|
const activeTab = ref(''); |
||||
|
const hasAdd = ref(false); |
||||
|
const hasSystem = ref(false); |
||||
|
const hasOnline = ref(false); |
||||
// 导航方法 |
// 导航方法 |
||||
const navigateTo = (name) => { |
const navigateTo = (name) => { |
||||
activeTab.value = name; |
activeTab.value = name; |
||||
if (name === 'add') { |
|
||||
router.push({name: 'addBeanRecharge'}); |
|
||||
} else if (name === 'system') { |
|
||||
router.push({name: 'beanSystemRecharge'}); |
|
||||
}else if(name === 'online'){ |
|
||||
router.push({name: 'beanOnlineRecharge'}); |
|
||||
} |
|
||||
}; |
|
||||
// 递归判断某个 menuName 是否存在 |
|
||||
const hasMenuPermission = (tree, targetName) => { |
|
||||
for (const node of tree) { |
|
||||
if (node.menuName === targetName) return true; |
|
||||
if (node.children && hasMenuPermission(node.children, targetName)) return true; |
|
||||
} |
|
||||
return false; |
|
||||
|
router.push({name}); |
||||
}; |
}; |
||||
|
|
||||
// 默认路由判断 |
|
||||
const getDefaultRoute = () => { |
|
||||
if (!menuTree.value) return 'add'; |
|
||||
const hasRecharge = hasMenuPermission(menuTree.value, '提交金豆充值'); |
|
||||
return hasRecharge ? 'add' : 'system'; |
|
||||
|
|
||||
|
// 初始化权限状态 |
||||
|
const initPermissions = () => { |
||||
|
if (!menuTree.value || !menuTree.value.length) return; |
||||
|
|
||||
|
hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Golden_Bean_Recharge); |
||||
|
hasSystem.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_System_Recharge_Details); |
||||
|
hasOnline.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Online_Recharge_Details); |
||||
}; |
}; |
||||
|
|
||||
|
// 默认跳转逻辑 |
||||
|
const getDefaultAuditRoute = () => { |
||||
|
initPermissions(); |
||||
|
if (hasAdd.value) return 'addBeanRecharge'; |
||||
|
if (hasSystem.value) return 'beanSystemRecharge'; |
||||
|
if (hasOnline.value) return 'beanOnlineRecharge'; |
||||
|
return 'addBeanRecharge'; |
||||
|
}; |
||||
|
|
||||
// 监听路由变化更新标签状态 |
// 监听路由变化更新标签状态 |
||||
watch(() => route.name, (newName) => { |
watch(() => route.name, (newName) => { |
||||
if (newName === 'add' || newName === 'system' || newName =='online') { |
|
||||
|
initPermissions() |
||||
|
if (newName=== 'addBeanRecharge' || newName === 'beanSystemRecharge' || newName === 'beanOnlineRecharge') { |
||||
activeTab.value = newName; |
activeTab.value = newName; |
||||
} else if (newName === 'beanRecharge') { |
} else if (newName === 'beanRecharge') { |
||||
const defaultRoute = getDefaultRoute(); |
|
||||
|
// 每次访问 /beanConsume 都进行默认跳转 |
||||
|
const defaultRoute = getDefaultAuditRoute(); |
||||
navigateTo(defaultRoute); |
navigateTo(defaultRoute); |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
// 初始化逻辑 |
// 初始化逻辑 |
||||
onMounted(() => { |
onMounted(() => { |
||||
|
initPermissions() |
||||
if (route.name === 'beanRecharge') { |
if (route.name === 'beanRecharge') { |
||||
const defaultRoute = getDefaultRoute(); |
|
||||
console.log('defaultRoute',defaultRoute); |
|
||||
|
|
||||
|
const defaultRoute = getDefaultAuditRoute(); |
||||
navigateTo(defaultRoute); |
navigateTo(defaultRoute); |
||||
} else { |
} else { |
||||
// 非父路由初始化当前标签状态 |
// 非父路由初始化当前标签状态 |
||||
if (route.name === 'add' || route.name === 'system' || route.name =='online') { |
|
||||
|
if (route.name=== 'addBeanRecharge' || route.name === 'beanSystemRecharge' || route.name === 'beanOnlineRecharge') { |
||||
activeTab.value = route.name; |
activeTab.value = route.name; |
||||
} |
} |
||||
} |
} |
||||
}); |
}); |
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div> |
|
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
|
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
|
||||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|
||||
@click="goToAdd" |
|
||||
> |
|
||||
新增充值 |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
:type="activeTab === 'system' ? 'primary' : 'default'" |
|
||||
@click="goToSystem" |
|
||||
> |
|
||||
系统充值 |
|
||||
</el-button> |
|
||||
<el-button |
|
||||
:type="activeTab === 'online' ? 'primary' : 'default'" |
|
||||
@click="goToOnline" |
|
||||
> |
|
||||
线上充值 |
|
||||
</el-button> |
|
||||
</el-button-group> |
|
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped> |
|
||||
|
|
||||
</style> |
|
||||
|
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue