refactor(beanConsume): 金豆消耗跳转

src/views/consume/beanConsume.vue

@@ -1,137 +1,106 @@
 <template>
   <div>
-    <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'add' ? 'primary' : 'default'"
-          @click="goToAdd"
-          class="uniform-btn"
+          :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'"
+          @click="navigateTo('addBeanConsume')"
+          :disabled="!hasAdd"
       >
         新增消耗
       </el-button>
       <el-button
-          :type="activeTab === 'live' ? 'primary' : 'default'"
-          @click="goToLive"
-          class="uniform-btn"
+          :type="activeTab === 'liveStream' ? 'primary' : 'default'"
+          @click="navigateTo('liveStream')"
+          :disabled="!hasLive"
       >
         直播
       </el-button>
       <el-button
-          :type="activeTab === 'fan' ? 'primary' : 'default'"
-          @click="goToFan"
-          class="uniform-btn"
+          :type="activeTab === 'dieHardFan' ? 'primary' : 'default'"
+          @click="navigateTo('dieHardFan')"
+          :disabled="!hasFan"
       >
         铁粉
       </el-button>
       <el-button
-          :type="activeTab === 'article' ? 'primary' : 'default'"
-          @click="goToArticle"
-          class="uniform-btn"
+          :type="activeTab === 'articleVideo' ? 'primary' : 'default'"
+          @click="navigateTo('articleVideo')"
+          :disabled="!hasArticleVideo"
       >
         文章/视频
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
     <router-view></router-view>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from 'vue';
+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 === 'liveStream' ? 'live' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const router = useRouter();
+const route = useRoute();
 const adminStore = useAdminStore();
 const {menuTree} = storeToRefs(adminStore);
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({name: 'addBeanConsume'});
-};
-
-const goToLive = () => {
-  // 点击按钮时更新 activeTab 为 live
-  activeTab.value = 'live';
-  router.push({name: 'liveStream'});
-};
-const goToFan = () => {
-  // 点击按钮时更新 activeTab 为 fan
-  activeTab.value = 'fan';
-  router.push({name: 'dieHardFan'});
-};
-const goToArticle = () => {
-  // 点击按钮时更新 activeTab 为 article
-  activeTab.value = 'article';
-  router.push({name: 'articleVideo'});
-};
-
+const activeTab = ref('');
+const hasAdd = ref(false);
+const hasLive = ref(false);
+const hasFan = ref(false);
+const hasArticleVideo = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  if (name === 'add') {
-    router.push({name: 'addBeanConsume'});
-  } else if (name === 'live') {
-    router.push({name: 'liveStream'});
-  } else if (name === 'fan') {
-    router.push({name: 'dieHardFan'});
-  } else if (name === 'article') {
-    router.push({name: 'articleVideo'});
-  }
+  router.push({name});
 };
 
-// 递归判断某个 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;
-};
 
-// 默认路由判断
-const getDefaultRoute = () => {
-  if (!menuTree.value) return 'add';
-  const hasRecharge = hasMenuPermission(menuTree.value, '提交金豆消耗');
-  return hasRecharge ? 'add' : 'live';
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
+
+  hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Golden_Bean_Consumption);
+  hasLive.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Live_Consumption_Details);
+  hasFan.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Fan_Consumption_Details);
+  hasArticleVideo.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Article_Video_Consumption_Details);
 };
 
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasAdd.value) return 'addBeanConsume';
+  if (hasLive.value) return 'liveStream';
+  if (hasFan.value) return 'dieHardFan';
+  if (hasArticleVideo.value) return 'articleVideo';
+  return 'addBeanConsume';
+};
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'add' || newName === 'live') {
+  initPermissions()
+  if (newName=== 'addBeanConsume' || newName === 'liveStream' || newName === 'dieHardFan' || newName === 'articleVideo') {
     activeTab.value = newName;
   } else if (newName === 'beanConsume') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /beanConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'beanConsume') {
-    const defaultRoute = getDefaultRoute();
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'add' || route.name === 'live') {
+    if (route.name=== 'addBeanConsume' || route.name === 'liveStream' || route.name === 'dieHardFan' || route.name === 'articleVideo') {
       activeTab.value = route.name;
     }
   }
 });
-
 </script>
-
-<style scoped>
-.uniform-btn {
-  width: 120px;
-}
-</style>