refactor：优化金豆充值跳转

src/views/recharge/beanRecharge.vue

@@ -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 {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 {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) => {
   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) => {
-  if (newName === 'add' || newName === 'system' || newName =='online') {
+  initPermissions()
+  if (newName=== 'addBeanRecharge' || newName === 'beanSystemRecharge' || newName === 'beanOnlineRecharge') {
     activeTab.value = newName;
   } else if (newName === 'beanRecharge') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /beanConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'beanRecharge') {
-    const defaultRoute = getDefaultRoute();
-    console.log('defaultRoute',defaultRoute);
-    
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } 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;
     }
   }
 });
 </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>