From 46714da87c83031f89df6ba1b0f635516485eb7b Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Fri, 25 Jul 2025 14:05:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/consume/coinConsume.vue | 122 ++++++++++----------------------------
 1 file changed, 31 insertions(+), 91 deletions(-)

diff --git a/src/views/consume/coinConsume.vue b/src/views/consume/coinConsume.vue
index 90040f8..4b8ac1f 100644
--- a/src/views/consume/coinConsume.vue
+++ b/src/views/consume/coinConsume.vue
@@ -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';
-    }
-  }
-});
-</script>
\ No newline at end of file
+// 当进入父路由时，默认跳转到新增消耗页面
+// if (route.name === 'coinConsume') {
+//   router.push({ name: 'addCoinConsume' });
+// }
+</script>