gold-vue/src/views/consume/bean/beanConsume.vue

<template>
  <div>
    <el-button-group>
      <el-button
          :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'"
          @click="navigateTo('addBeanConsume')"
          :disabled="!hasAdd"
          style="width: 120px;"
      >
        新增消耗
      </el-button>
      <el-button
          :type="activeTab === 'liveStream' ? 'primary' : 'default'"
          @click="navigateTo('liveStream')"
          :disabled="!hasLive"
          style="width: 120px;"
      >
        直播
      </el-button>
      <el-button
          :type="activeTab === 'dieHardFan' ? 'primary' : 'default'"
          @click="navigateTo('dieHardFan')"
          :disabled="!hasFan"
          style="width: 120px;"
      >
        铁粉
      </el-button>
      <el-button
          :type="activeTab === 'articleVideo' ? 'primary' : 'default'"
          @click="navigateTo('articleVideo')"
          :disabled="!hasArticleVideo"
          style="width: 120px;"
      >
        文章/视频
      </el-button>
    </el-button-group>
  </div>
  <div class="content">
    <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 {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";

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

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;
  router.push({name});
};


// 初始化权限状态
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) => {
  initPermissions()
  if (newName=== 'addBeanConsume' || newName === 'liveStream' || newName === 'dieHardFan' || newName === 'articleVideo') {
    activeTab.value = newName;
  } else if (newName === 'beanConsume') {
    // 每次访问 /beanConsume 都进行默认跳转
    const defaultRoute = getDefaultAuditRoute();
    navigateTo(defaultRoute);
  }
});

// 初始化逻辑
onMounted(() => {
  initPermissions()
  if (route.name === 'beanConsume') {
    const defaultRoute = getDefaultAuditRoute();
    navigateTo(defaultRoute);
  } else {
    // 非父路由初始化当前标签状态
    if (route.name=== 'addBeanConsume' || route.name === 'liveStream' || route.name === 'dieHardFan' || route.name === 'articleVideo') {
      activeTab.value = route.name;
    }
  }
});
</script>
<style scoped>
.content{
  width: 90%;
  height: 90%;
}
</style>