refactor：通过映射id 判断页面

src/utils/menuTreePermission.js

@@ -33,14 +33,19 @@ export const permissionMapping = {
     Refund_Approval: 14,           // 退款审批
     Exchange_Rate_View: 15,        // 汇率查看
     Exchange_Rate_Modification: 16, // 汇率修改
-    Submit_Gold_Coin_Recharge: 17,  // 提交金币充值
-    View_Gold_Coin_Recharge_Details: 18, // 查看金币充值明细
-    Submit_Gold_Coin_Consumption: 19, // 提交金币消耗
-    View_Gold_Coin_Consumption_Details: 20, // 查看金币消耗明细
-    Submit_Gold_Coin_Refund: 21,    // 提交金币退款
-    View_Gold_Coin_Refund_Details: 22, // 查看金币退款明细
-    View_Gold_Coin_Details: 23,     // 查看金币明细
-    View_Gold_Coin_Balance: 24,     // 查看金币余额
+
+    Submit_Gold_Coin_Recharge: 17,  // 提交金币充值  // coinRecharge页面
+    View_Gold_Coin_Recharge_Details: 18, // 查看金币充值明细 // coinRecharge页面
+
+    Submit_Gold_Coin_Consumption: 19, // 提交金币消耗 // coinConsume页面
+    View_Gold_Coin_Consumption_Details: 20, // 查看金币消耗明细  // coinConsume页面
+
+    Submit_Gold_Coin_Refund: 21,    // 提交金币退款 // coinRefund页面
+    View_Gold_Coin_Refund_Details: 22, // 查看金币退款明细 // coinRefund页面
+
+    View_Gold_Coin_Details: 23,     // 查看金币明细 //usergold页面
+    View_Gold_Coin_Balance: 24,     // 查看金币余额 //usergold页面
+
     View_Permission: 25,            // 查看权限
     Add_User: 26,                   // 新增用户
     Change_Status: 27,              // 改变状态
@@ -49,8 +54,8 @@ export const permissionMapping = {
     View_Role: 30,                  // 查看角色
     Edit_Role: 36,                  // 编辑角色
 
-    Recharge_Audit: 31,             // 充值审核
-    Refund_Audit: 32,               // 退款审核
+    Recharge_Audit: 31,             // 充值审核(金币) // audit页面
+    Refund_Audit: 32,               // 退款审核(金币) // audit页面
 };
 
 // 递归查找菜单中是否存在目标id
@@ -66,4 +71,14 @@ export const findMenuById = (menuList, targetId) => {
         }
     }
     return false;
+};
+
+// 递归判断某个 menuId 是否存在
+export const hasMenuPermission = (tree, targetId) => {
+    for (const node of tree) {
+        console.log(node.id)
+        if (node.id === targetId) return true;
+        if (node.children && hasMenuPermission(node.children, targetId)) return true;
+    }
+    return false;
 };

src/views/audit/gold/audit.vue

@@ -25,7 +25,7 @@ import {ref, watch, onMounted} from 'vue';
 import {useRouter, useRoute} from 'vue-router';
 import {storeToRefs} from 'pinia';
 import {useAdminStore} from '@/store/index.js';
-import {permissionMapping} from "@/utils/menuTreePermission.js";
+import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
@@ -41,34 +41,26 @@ const navigateTo = (name) => {
   router.push({name});
 };
 
-// 递归判断某个 menuId 是否存在
-const hasMenuPermission = (tree, targetId) => {
-  for (const node of tree) {
-    console.log(node.id)
-    if (node.id === targetId) return true;
-    if (node.children && hasMenuPermission(node.children, targetId)) return true;
-  }
-  return false;
-};
 
-// 默认路由判断 - 使用 ID 匹配
-const getDefaultAuditRoute = () => {
-  if (!menuTree.value || !menuTree.value.length) return 'rechargeAudit';
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
 
-  // 使用 ID
   hasRecharge.value = hasMenuPermission(menuTree.value, permissionMapping.Recharge_Audit);
   hasRefund.value = hasMenuPermission(menuTree.value, permissionMapping.Refund_Audit);
+};
 
-
-  // 优先判断充值权限，没有则判断退款权限
-  if (hasRecharge) return 'rechargeAudit';
-  if (hasRefund) return 'refundAudit';
-
-  return 'rechargeAudit'; // 默认回退选项
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasRecharge.value) return 'rechargeAudit';
+  if (hasRefund.value) return 'refundAudit';
+  return 'rechargeAudit';
 };
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
+  initPermissions()
   if (newName === 'rechargeAudit' || newName === 'refundAudit') {
     activeTab.value = newName;
   } else if (newName === 'audit') {
@@ -80,6 +72,7 @@ watch(() => route.name, (newName) => {
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'audit') {
     const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);

src/views/consume/gold/coinConsume.vue

@@ -4,14 +4,16 @@
     <el-button-group>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'add' ? 'primary' : 'default'"
-          @click="goToAdd"
+          :type="activeTab === 'addCoinConsume' ? 'primary' : 'default'"
+          @click="navigateTo('addCoinConsume')"
+          :disabled="!hasAdd"
       >
         新增消耗
       </el-button>
       <el-button
-          :type="activeTab === 'detail' ? 'primary' : 'default'"
-          @click="goToDetail"
+          :type="activeTab === 'coinConsumeDetail' ? 'primary' : 'default'"
+          @click="navigateTo('coinConsumeDetail')"
+          :disabled="!hasDetail"
       >
         金币消耗明细
       </el-button>
@@ -23,79 +25,65 @@
 
 <script setup>
 import {onMounted, ref, watch} from 'vue';
-import {useRouter, useRoute} from 'vue-router';
+import {useRoute, useRouter} 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();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const router = useRouter();
+const route = useRoute();
 const adminStore = useAdminStore();
 const {menuTree} = storeToRefs(adminStore);
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({name: 'addCoinConsume'});
-};
-
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({name: 'coinConsumeDetail'});
-};
-
+const activeTab = ref('');
+const hasAdd = ref(false);
+const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  if (name === 'add') {
-    router.push({name: 'addCoinConsume'});
-  } else if (name === 'detail') {
-    router.push({name: 'coinConsumeDetail'});
-  }
+  router.push({name});
 };
 
-// 递归判断某个 menuName 是否存在
-const hasMenuPermission = (tree, targetName) => {
-  for (const node of tree) {
-    if (node.menuName === targetName) return true;
-    if (node.children && hasMenuPermission(node.children, targetName)) return true;
-  }
-  return false;
-};
 
-// 默认路由判断
-const getDefaultRoute = () => {
-  if (!menuTree.value) return 'add';
-  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币消耗');
-  return hasRecharge ? 'add' : 'detail';
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
+
+  hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Gold_Coin_Consumption);
+  hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Consumption_Details);
 };
 
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasAdd.value) return 'addCoinConsume';
+  if (hasDetail.value) return 'coinConsumeDetail';
+  return 'addCoinConsume';
+};
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'add' || newName === 'detail') {
+  initPermissions()
+  if (newName === 'addCoinConsume' || newName === 'coinConsumeDetail') {
     activeTab.value = newName;
   } else if (newName === 'coinConsume') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /coinConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'coinConsume') {
-    const defaultRoute = getDefaultRoute();
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'add' || route.name === 'detail') {
+    if (route.name === 'addCoinConsume' || route.name === 'coinConsumeDetail') {
       activeTab.value = route.name;
     }
   }
 });
-
-</script>
+</script>

src/views/recharge/gold/coinRecharge.vue

@@ -4,14 +4,16 @@
     <el-button-group>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'add' ? 'primary' : 'default'"
-          @click="goToAdd"
+          :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'"
+          @click="navigateTo('addCoinRecharge')"
+          :disabled="!hasAdd"
       >
         新增充值
       </el-button>
       <el-button
-          :type="activeTab === 'detail' ? 'primary' : 'default'"
-          @click="goToDetail"
+          :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'"
+          @click="navigateTo('coinRechargeDetail')"
+          :disabled="!hasDetail"
       >
         金币充值明细
       </el-button>
@@ -23,79 +25,65 @@
 
 <script setup>
 import {onMounted, ref, watch} from 'vue';
-import {useRouter, useRoute} from 'vue-router';
+import {useRoute, useRouter} 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();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add');
-//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
-//此时获取到的路由信息是coinConsume，所以默认是add
+const router = useRouter();
+const route = useRoute();
 const adminStore = useAdminStore();
 const {menuTree} = storeToRefs(adminStore);
 
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({name: 'addCoinRecharge'});
-};
-
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({name: 'coinRechargeDetail'});
-};
-
+const activeTab = ref('');
+const hasAdd = ref(false);
+const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  if (name === 'add') {
-    router.push({name: 'addCoinRecharge'});
-  } else if (name === 'detail') {
-    router.push({name: 'coinRechargeDetail'});
-  }
+  router.push({name});
 };
 
-// 递归判断某个 menuName 是否存在
-const hasMenuPermission = (tree, targetName) => {
-  for (const node of tree) {
-    if (node.menuName === targetName) return true;
-    if (node.children && hasMenuPermission(node.children, targetName)) return true;
-  }
-  return false;
-};
 
-// 默认路由判断
-const getDefaultRoute = () => {
-  if (!menuTree.value) return 'add';
-  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币充值');
-  return hasRecharge ? 'add' : 'detail';
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
+
+  hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Gold_Coin_Recharge);
+  hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Recharge_Details);
 };
 
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasAdd.value) return 'addCoinRecharge';
+  if (hasDetail.value) return 'coinRechargeDetail';
+  return 'addCoinRecharge';
+};
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'add' || newName === 'detail') {
+  initPermissions()
+  if (newName === 'addCoinRecharge' || newName === 'coinRechargeDetail') {
     activeTab.value = newName;
   } else if (newName === 'coinRecharge') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /coinConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'coinRecharge') {
-    const defaultRoute = getDefaultRoute();
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'add' || route.name === 'detail') {
+    if (route.name === 'addCoinRecharge' || route.name === 'coinRechargeDetail') {
       activeTab.value = route.name;
     }
   }
 });
-
-</script>
+</script>

src/views/refund/gold/coinRefund.vue

@@ -4,14 +4,16 @@
     <el-button-group>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'add' ? 'primary' : 'default'"
-          @click="goToAdd"
+          :type="activeTab === 'addCoinRefund' ? 'primary' : 'default'"
+          @click="navigateTo('addCoinRefund')"
+          :disabled="!hasAdd"
       >
         新增退款
       </el-button>
       <el-button
-          :type="activeTab === 'detail' ? 'primary' : 'default'"
-          @click="goToDetail"
+          :type="activeTab === 'coinRefundDetail' ? 'primary' : 'default'"
+          @click="navigateTo('coinRefundDetail')"
+          :disabled="!hasDetail"
       >
         金币退款明细
       </el-button>
@@ -23,79 +25,65 @@
 
 <script setup>
 import {onMounted, ref, watch} from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import {useAdminStore} from "@/store/index.js";
+import {useRoute, useRouter} 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 router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'coinRefundDetail' ? 'detail' : 'add');
-
-
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'add';
-  router.push({ name: 'addCoinRefund' });
-};
-
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'detail';
-  router.push({ name: 'coinRefundDetail' });
-};
-
+const activeTab = ref('');
+const hasAdd = ref(false);
+const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  if (name === 'add') {
-    router.push({name: 'addCoinRefund'});
-  } else if (name === 'detail') {
-    router.push({name: 'coinRefundDetail'});
-  }
+  router.push({name});
 };
 
 
-// 递归判断某个 menuName 是否存在
-const hasMenuPermission = (tree, targetName) => {
-  for (const node of tree) {
-    if (node.menuName === targetName) return true;
-    if (node.children && hasMenuPermission(node.children, targetName)) return true;
-  }
-  return false;
-};
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
 
-// 默认路由判断
-const getDefaultRoute = () => {
-  if (!menuTree.value) return 'add';
-  const hasRecharge = hasMenuPermission(menuTree.value, '提交金币退款');
-  return hasRecharge ? 'add' : 'detail';
+  hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.Submit_Gold_Coin_Refund);
+  hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Refund_Details);
 };
 
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasAdd.value) return 'addCoinRefund';
+  if (hasDetail.value) return 'coinRefundDetail';
+  return 'addCoinRefund';
+};
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'add' || newName === 'detail') {
+  initPermissions()
+  if (newName === 'addCoinRefund' || newName === 'coinRefundDetail') {
     activeTab.value = newName;
   } else if (newName === 'coinRefund') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /coinConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'coinRefund') {
-    const defaultRoute = getDefaultRoute();
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'add' || route.name === 'detail') {
+    if (route.name === 'addCoinRefund' || route.name === 'coinRefundDetail') {
       activeTab.value = route.name;
     }
   }
 });
-</script>
+</script>

src/views/usergold/gold/clientCount.vue

@@ -4,14 +4,16 @@
     <el-button-group>
       <!-- 切换后状态显示 primary 样式否则是默认样式 -->
       <el-button
-          :type="activeTab === 'detail' ? 'primary' : 'default'"
-          @click="goToAdd"
+          :type="activeTab === 'clientCountDetail' ? 'primary' : 'default'"
+          @click="navigateTo('clientCountDetail')"
+          :disabled="!hasDetail"
       >
         金币明细
       </el-button>
       <el-button
-          :type="activeTab === 'balance' ? 'primary' : 'default'"
-          @click="goToDetail"
+          :type="activeTab === 'clientCountBalance' ? 'primary' : 'default'"
+          @click="navigateTo('clientCountBalance')"
+          :disabled="!haBalance"
       >
         金币余额
       </el-button>
@@ -23,79 +25,65 @@
 
 <script setup>
 import {onMounted, ref, watch} from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import {useAdminStore} from "@/store/index.js";
+import {useRoute, useRouter} 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 router = useRouter();// 获取路由实例
-const route = useRoute();// 获取当前路由信息
-// 定义响应式变量 activeTab 来跟踪当前激活的标签
-const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail');
-
-
-const goToAdd = () => {
-  // 点击按钮时更新 activeTab 为 add
-  activeTab.value = 'detail';
-  router.push({ name: 'clientCountDetail' });
-};
-
-const goToDetail = () => {
-  // 点击按钮时更新 activeTab 为 detail
-  activeTab.value = 'balance';
-  router.push({ name: 'clientCountBalance' });
-};
-
+const activeTab = ref('');
+const hasDetail = ref(false);
+const haBalance = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  if (name === 'detail') {
-    router.push({name: 'clientCountDetail'});
-  } else if (name === 'balance') {
-    router.push({name: 'clientCountBalance'});
-  }
+  router.push({name});
 };
 
 
-// 递归判断某个 menuName 是否存在
-const hasMenuPermission = (tree, targetName) => {
-  for (const node of tree) {
-    if (node.menuName === targetName) return true;
-    if (node.children && hasMenuPermission(node.children, targetName)) return true;
-  }
-  return false;
-};
+// 初始化权限状态
+const initPermissions = () => {
+  if (!menuTree.value || !menuTree.value.length) return;
 
-// 默认路由判断
-const getDefaultRoute = () => {
-  if (!menuTree.value) return 'detail';
-  const hasRecharge = hasMenuPermission(menuTree.value, '查看金币明细');
-  return hasRecharge ? 'detail' : 'balance';
+  hasAdd.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Details);
+  haBalance.value = hasMenuPermission(menuTree.value, permissionMapping.View_Gold_Coin_Balance);
 };
 
+// 默认跳转逻辑
+const getDefaultAuditRoute = () => {
+  initPermissions();
+  if (hasAdd.value) return 'clientCountDetail';
+  if (hasDetail.value) return 'clientCountBalance';
+  return 'clientCountDetail';
+};
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
-  if (newName === 'detail' || newName === 'balance') {
+  initPermissions()
+  if (newName === 'clientCountDetail' || newName === 'clientCountBalance') {
     activeTab.value = newName;
   } else if (newName === 'usergold') {
-    const defaultRoute = getDefaultRoute();
+    // 每次访问 /coinConsume 都进行默认跳转
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   }
 });
 
 // 初始化逻辑
 onMounted(() => {
+  initPermissions()
   if (route.name === 'usergold') {
-    const defaultRoute = getDefaultRoute();
+    const defaultRoute = getDefaultAuditRoute();
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'detail' || route.name === 'balance') {
+    if (route.name === 'clientCountDetail' || route.name === 'clientCountBalance') {
       activeTab.value = route.name;
     }
   }
 });
-</script>
+</script>