gold-vue/src/views/consume/coinConsume.vue

<template>
  <div>
    <el-button-group>
      <el-button
          :type="activeTab === 'add' ? 'primary' : 'default'"
          @click="navigateTo('add')"
          :disabled="!hasAddPermission"
      >
      新增消耗
      </el-button>
      <el-button
          :type="activeTab === 'detail' ? 'primary' : 'default'"
          @click="navigateTo('detail')"
          :disabled="!hasDetailPermission"
      >
      金币消耗明细
      </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';

const router = useRouter();
const route = useRoute();
const adminStore = useAdminStore();
const {menuTree} = storeToRefs(adminStore);

const activeTab = ref('');

// 路由名称映射
const routeMap = {
  add: 'addCoinConsume',
  detail: 'coinConsumeDetail'
};

// 新增消耗权限判断（与其他页面保持一致的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;
};

// 监听路由变化更新标签状态（增加权限校验）
watch(() => route.name, (newName) => {
  if (newName === routeMap.add && hasAddPermission.value) {
    activeTab.value = 'add';
  } else if (newName === routeMap.detail && hasDetailPermission.value) {
    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>