gold-vue/src/views/usergold/gold/clientCount.vue

<template>
  <div class="main">
    <div style="height: 4vh;">
      <!-- 这里放置标签切换的按钮 -->
      <el-button-group class="custom-button-group">
        <!-- 切换后状态显示 primary 样式否则是默认样式 -->
        <el-button
            class="no-active-btn"
            :class="{ 'active-btn': activeTab === 'clientCountDetail' }"
            @click="navigateTo('clientCountDetail')"
            :disabled="!hasDetail"
            v-if="hasDetail"
        >
          {{ $t('clientCount.clientCountDetail') }}
        </el-button>
        <el-button
            class="no-active-btn"
            :class="{ 'active-btn': activeTab === 'clientCountBalance' }"
            @click="navigateTo('clientCountBalance')"
            :disabled="!hasBalance" v-if="hasBalance"
        >
          {{ $t('clientCount.clientCountBalance') }}
        </el-button>
      </el-button-group>
      <!-- 渲染子路由组件 -->
    </div>

    <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {storeToRefs} from "pinia";
import {useAdminStore} from "@/store/index.js";
import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
// 国际化
import { useI18n } from 'vue-i18n'

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

const activeTab = ref('');
const hasDetail = ref(false);
const hasBalance = ref(false);
// 导航方法
const navigateTo = (name) => {
  activeTab.value = name;
  router.push({name});
};


// 初始化权限状态
const initPermissions = () => {
  if (!menuTree.value || !menuTree.value.length) return;
  hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.gold_coin_customer_bill);
  hasBalance.value = hasMenuPermission(menuTree.value, permissionMapping.gold_coin_customer_balance);
};

// 默认跳转逻辑
const getDefaultAuditRoute = () => {
  initPermissions();
  if (hasDetail.value) return 'clientCountDetail';
  if (hasBalance.value) return 'clientCountBalance';
  return 'clientCountDetail';
};

// 监听路由变化更新标签状态
watch(() => route.name, (newName) => {
  initPermissions()
  if (newName === 'clientCountDetail' || newName === 'clientCountBalance') {
    activeTab.value = newName;
  } else if (newName === 'usergold') {
    // 每次访问 /coinConsume 都进行默认跳转
    const defaultRoute = getDefaultAuditRoute();
    navigateTo(defaultRoute);
  }
});

// 初始化逻辑
onMounted(() => {
  initPermissions()
  if (route.name === 'usergold') {
    const defaultRoute = getDefaultAuditRoute();
    navigateTo(defaultRoute);
  } else {
    // 非父路由初始化当前标签状态
    if (route.name === 'clientCountDetail' || route.name === 'clientCountBalance') {
      activeTab.value = route.name;
    }
  }
});
</script>
<style>
.main{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}


</style>