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.

117 lines
3.5 KiB

  1. <template>
  2. <div>
  3. <el-button-group>
  4. <el-button
  5. :type="activeTab === 'addBeanConsume' ? 'primary' : 'default'"
  6. @click="navigateTo('addBeanConsume')"
  7. :disabled="!hasAdd"
  8. style="width: 120px;"
  9. >
  10. 新增消耗
  11. </el-button>
  12. <el-button
  13. :type="activeTab === 'liveStream' ? 'primary' : 'default'"
  14. @click="navigateTo('liveStream')"
  15. :disabled="!hasLive"
  16. style="width: 120px;"
  17. >
  18. 直播
  19. </el-button>
  20. <el-button
  21. :type="activeTab === 'dieHardFan' ? 'primary' : 'default'"
  22. @click="navigateTo('dieHardFan')"
  23. :disabled="!hasFan"
  24. style="width: 120px;"
  25. >
  26. 铁粉
  27. </el-button>
  28. <el-button
  29. :type="activeTab === 'articleVideo' ? 'primary' : 'default'"
  30. @click="navigateTo('articleVideo')"
  31. :disabled="!hasArticleVideo"
  32. style="width: 120px;"
  33. >
  34. 文章/视频
  35. </el-button>
  36. </el-button-group>
  37. </div>
  38. <div class="content">
  39. <router-view></router-view>
  40. </div>
  41. </template>
  42. <script setup>
  43. import {ref, watch, onMounted} from 'vue';
  44. import {useRouter, useRoute} from 'vue-router';
  45. import {storeToRefs} from 'pinia';
  46. import {useAdminStore} from '@/store/index.js';
  47. import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
  48. const router = useRouter();
  49. const route = useRoute();
  50. const adminStore = useAdminStore();
  51. const {menuTree} = storeToRefs(adminStore);
  52. const activeTab = ref('');
  53. const hasAdd = ref(false);
  54. const hasLive = ref(false);
  55. const hasFan = ref(false);
  56. const hasArticleVideo = ref(false);
  57. // 导航方法
  58. const navigateTo = (name) => {
  59. activeTab.value = name;
  60. router.push({name});
  61. };
  62. // 初始化权限状态
  63. const initPermissions = () => {
  64. if (!menuTree.value || !menuTree.value.length) return;
  65. hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Golden_Bean_Consumption);
  66. hasLive.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Live_Consumption_Details);
  67. hasFan.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Fan_Consumption_Details);
  68. hasArticleVideo.value = hasMenuPermission(menuTree.value, permissionMapping.View_Golden_Bean_Article_Video_Consumption_Details);
  69. };
  70. // 默认跳转逻辑
  71. const getDefaultAuditRoute = () => {
  72. initPermissions();
  73. if (hasAdd.value) return 'addBeanConsume';
  74. if (hasLive.value) return 'liveStream';
  75. if (hasFan.value) return 'dieHardFan';
  76. if (hasArticleVideo.value) return 'articleVideo';
  77. return 'addBeanConsume';
  78. };
  79. // 监听路由变化更新标签状态
  80. watch(() => route.name, (newName) => {
  81. initPermissions()
  82. if (newName=== 'addBeanConsume' || newName === 'liveStream' || newName === 'dieHardFan' || newName === 'articleVideo') {
  83. activeTab.value = newName;
  84. } else if (newName === 'beanConsume') {
  85. // 每次访问 /beanConsume 都进行默认跳转
  86. const defaultRoute = getDefaultAuditRoute();
  87. navigateTo(defaultRoute);
  88. }
  89. });
  90. // 初始化逻辑
  91. onMounted(() => {
  92. initPermissions()
  93. if (route.name === 'beanConsume') {
  94. const defaultRoute = getDefaultAuditRoute();
  95. navigateTo(defaultRoute);
  96. } else {
  97. // 非父路由初始化当前标签状态
  98. if (route.name=== 'addBeanConsume' || route.name === 'liveStream' || route.name === 'dieHardFan' || route.name === 'articleVideo') {
  99. activeTab.value = route.name;
  100. }
  101. }
  102. });
  103. </script>
  104. <style scoped>
  105. .content{
  106. width: 90%;
  107. height: 90%;
  108. }
  109. </style>