You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.1 KiB
108 lines
3.1 KiB
<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>
|