11 changed files with 690 additions and 471 deletions
-
10src/main.ts
-
152src/router/index.js
-
45src/store/index.js
-
61src/utils/menuUtils.js
-
127src/views/audit/audit.vue
-
126src/views/consume/coinConsume.vue
-
238src/views/home.vue
-
53src/views/login.vue
-
120src/views/recharge/coinRecharge.vue
-
120src/views/refund/coinRefund.vue
-
109src/views/usergold/clientCount.vue
@ -0,0 +1,45 @@ |
|||||
|
// src/store/index.js
|
||||
|
import { defineStore } from 'pinia' |
||||
|
|
||||
|
export const useAdminStore = defineStore('admin', { |
||||
|
state: () => ({ |
||||
|
adminData: null, // 用户信息
|
||||
|
menuTree: null, // 菜单权限树
|
||||
|
}), |
||||
|
actions: { |
||||
|
// 设置用户信息并同步到localStorage
|
||||
|
setAdminData(info) { |
||||
|
this.adminData = info |
||||
|
localStorage.setItem('adminData', JSON.stringify(info)) |
||||
|
}, |
||||
|
|
||||
|
// 设置菜单树并同步到localStorage
|
||||
|
setMenuTree(tree) { |
||||
|
this.menuTree = tree |
||||
|
localStorage.setItem('menuTree', JSON.stringify(tree)) |
||||
|
}, |
||||
|
|
||||
|
// 从localStorage初始化数据
|
||||
|
initFromLocalStorage() { |
||||
|
const adminData = localStorage.getItem('adminData') |
||||
|
const menuTree = localStorage.getItem('menuTree') |
||||
|
|
||||
|
if (adminData) { |
||||
|
this.adminData = JSON.parse(adminData) |
||||
|
} |
||||
|
|
||||
|
if (menuTree) { |
||||
|
this.menuTree = JSON.parse(menuTree) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清空状态并移除localStorage数据
|
||||
|
clearState() { |
||||
|
this.adminData = null |
||||
|
this.menuTree = null |
||||
|
localStorage.removeItem('adminData') |
||||
|
localStorage.removeItem('menuTree') |
||||
|
// localStorage.removeItem('token')
|
||||
|
} |
||||
|
} |
||||
|
}) |
@ -0,0 +1,61 @@ |
|||||
|
// 菜单树过滤 (展示的? )
|
||||
|
export function filterMenu(menuList) { |
||||
|
return menuList |
||||
|
// 过滤不是4级的 123 为菜单
|
||||
|
.filter(menu => menu.menuType !== 4) |
||||
|
.map(menu => ({ |
||||
|
...menu, |
||||
|
children: menu.children ? filterMenu(menu.children) : [] |
||||
|
})) |
||||
|
.sort((a, b) => a.priority - b.priority); // 按 id 升序
|
||||
|
} |
||||
|
|
||||
|
// 辅助函数:查找第一个可访问的菜单项
|
||||
|
export function findFirstAccessibleMenu(menuList) { |
||||
|
if (!menuList || menuList.length === 0) return null |
||||
|
|
||||
|
for (const menu of menuList) { |
||||
|
if (menu.menuType === 1) { // 根
|
||||
|
const childResult = findFirstAccessibleMenu(menu.children) |
||||
|
if (childResult) return childResult |
||||
|
} else if (menu.menuType === 2) { // 目录
|
||||
|
return menu |
||||
|
} else if (menu.menuType === 3) { // 菜单
|
||||
|
return menu |
||||
|
} |
||||
|
} |
||||
|
return null |
||||
|
} |
||||
|
|
||||
|
// 路由映射
|
||||
|
export const getRoutePath = (menu) => { |
||||
|
// 路由映射表:key为接口menuName,value为对应路由路径
|
||||
|
const routeMap = { |
||||
|
'工作台': '/workspace', |
||||
|
|
||||
|
'审核页面': '/audit', |
||||
|
'财务审核': '/audit', |
||||
|
|
||||
|
'充值审核': '/audit/rechargeAudit', |
||||
|
'退款审核': '/audit/refundAudit', |
||||
|
|
||||
|
'汇率管理': '/rate', |
||||
|
|
||||
|
'消耗管理': '/coinConsume', |
||||
|
'消耗页面': '/coinConsume', |
||||
|
|
||||
|
'权限管理': '/permissions', |
||||
|
|
||||
|
'充值管理': '/coinRecharge', |
||||
|
'充值页面': '/coinRecharge', |
||||
|
|
||||
|
'退款管理': '/coinRefund', |
||||
|
'退款页面': '/coinRefund', |
||||
|
|
||||
|
'客户账户明细': '/usergold', |
||||
|
}; |
||||
|
|
||||
|
// 未匹配的菜单默认使用id作为路由(可根据实际需求调整)
|
||||
|
return routeMap[menu.menuName] || '/noPermissionPage' |
||||
|
|
||||
|
} |
@ -1,66 +1,117 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
<el-button-group> |
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
<el-button |
||||
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" |
:type="activeTab === 'rechargeAudit' ? 'primary' : 'default'" |
||||
@click="goRechargeAudit" |
|
||||
|
@click="navigateTo('rechargeAudit')" |
||||
|
:disabled="!hasRechargePermission" |
||||
> |
> |
||||
充值审核 |
充值审核 |
||||
</el-button> |
</el-button> |
||||
<el-button |
<el-button |
||||
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" |
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" |
||||
@click="goRefundAudit" |
|
||||
|
@click="navigateTo('refundAudit')" |
||||
|
:disabled="!hasRefundPermission" |
||||
> |
> |
||||
退款审核 |
退款审核 |
||||
</el-button> |
</el-button> |
||||
</el-button-group> |
</el-button-group> |
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup > |
|
||||
import {onMounted, ref, watch} from 'vue'; |
|
||||
import { useRouter, useRoute } from 'vue-router'; |
|
||||
|
<script setup> |
||||
|
import {ref, watch, onMounted, computed} from 'vue'; |
||||
|
import {useRouter, useRoute} from 'vue-router'; |
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {useAdminStore} from '@/store/index.js'; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|
||||
const activeTab = ref(route.name === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit'); |
|
||||
//也就是说如果当前在clientCountBalance页面,那么就是balance,否则默认情况都展示detail页面 |
|
||||
//此时获取到的路由信息是clientCountDetail,所以默认是detail |
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
const adminStore = useAdminStore(); |
||||
|
const {menuTree} = storeToRefs(adminStore); |
||||
|
|
||||
|
const activeTab = ref(''); |
||||
|
|
||||
const goRechargeAudit = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'rechargeAudit'; |
|
||||
router.push({ name: 'rechargeAudit' }); |
|
||||
}; |
|
||||
|
// 充值审核权限判断 |
||||
|
const hasRechargePermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '充值审核' || menu.menuName === '财务审核' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
const goRefundAudit = () => { |
|
||||
// 点击按钮时更新 activeTab 为balance |
|
||||
activeTab.value = 'refundAudit'; |
|
||||
router.push({ name: 'refundAudit' }); |
|
||||
}; |
|
||||
|
// 退款审核权限判断 |
||||
|
const hasRefundPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '退款审核' || menu.menuName === '财务审核' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
// 监听路由变化,更新 activeTab |
|
||||
watch(() => route.name, (newName) => { |
|
||||
if (newName === 'rechargeAudit') { |
|
||||
activeTab.value = 'rechargeAudit'; |
|
||||
} else if (newName === 'refundAudit') { |
|
||||
activeTab.value = 'refundAudit'; |
|
||||
}}); |
|
||||
|
// 导航方法 |
||||
|
const navigateTo = (name) => { |
||||
|
// 检查对应权限,无权限则不执行跳转 |
||||
|
if ((name === 'rechargeAudit' && !hasRechargePermission.value) || |
||||
|
(name === 'refundAudit' && !hasRefundPermission.value)) { |
||||
|
return; |
||||
|
} |
||||
|
activeTab.value = name; |
||||
|
router.push({name}); |
||||
|
}; |
||||
|
|
||||
// 当进入父路由时,默认跳转到金币明细页面 |
|
||||
// if (route.name === 'usergold') { |
|
||||
// router.push({ name: 'clientCountDetail' }); |
|
||||
// } |
|
||||
|
// 检查权限并返回默认路由 |
||||
|
const getDefaultAuditRoute = () => { |
||||
|
// 优先检查充值审核权限 |
||||
|
if (hasRechargePermission.value) return 'rechargeAudit'; |
||||
|
// 其次检查退款审核权限 |
||||
|
if (hasRefundPermission.value) return 'refundAudit'; |
||||
|
// 无任何权限时返回null |
||||
|
return null; |
||||
|
}; |
||||
|
|
||||
|
// 监听路由变化 |
||||
|
watch(() => route.path, (newPath) => { |
||||
|
// 当路径变更为 /audit 时执行跳转逻辑 |
||||
|
if (newPath === '/audit') { |
||||
|
const defaultRoute = getDefaultAuditRoute(); |
||||
|
if (defaultRoute) { |
||||
|
navigateTo(defaultRoute); |
||||
|
} else { |
||||
|
console.warn('用户没有充值审核和退款审核的权限'); |
||||
|
// router.push({ name: 'noPermission' }); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
onMounted(async function () { |
|
||||
console.log("@@@@@@@@@@@@",route.name) |
|
||||
|
// 监听路由变化更新标签状态 |
||||
|
watch(() => route.name, (newName) => { |
||||
|
// 只有在有权限的情况下才更新标签状态 |
||||
|
if (newName === 'rechargeAudit' && hasRechargePermission.value) { |
||||
|
activeTab.value = newName; |
||||
|
} else if (newName === 'refundAudit' && hasRefundPermission.value) { |
||||
|
activeTab.value = newName; |
||||
|
} |
||||
}); |
}); |
||||
|
|
||||
</script> |
|
||||
|
// 初始化逻辑 - 保留原有逻辑处理首次加载 |
||||
|
onMounted(() => { |
||||
|
// 父路由默认跳转 |
||||
|
if (route.path === '/audit') { |
||||
|
const defaultRoute = getDefaultAuditRoute(); |
||||
|
if (defaultRoute) { |
||||
|
navigateTo(defaultRoute); |
||||
|
} else { |
||||
|
// console.warn('用户没有充值审核和退款审核的权限'); |
||||
|
router.push({ name: 'noPermission' }); |
||||
|
} |
||||
|
} else { |
||||
|
// 非父路由初始化当前标签状态(带权限校验) |
||||
|
if (route.name === 'rechargeAudit' && hasRechargePermission.value) { |
||||
|
activeTab.value = route.name; |
||||
|
} else if (route.name === 'refundAudit' && hasRefundPermission.value) { |
||||
|
activeTab.value = route.name; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
@ -1,61 +1,121 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
<el-button-group> |
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
<el-button |
||||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|
||||
@click="goToAdd" |
|
||||
|
:type="activeTab === 'add' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('add')" |
||||
|
:disabled="!hasAddPermission" |
||||
> |
> |
||||
新增消耗 |
|
||||
|
新增消耗 |
||||
</el-button> |
</el-button> |
||||
<el-button |
<el-button |
||||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|
||||
@click="goToDetail" |
|
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('detail')" |
||||
|
:disabled="!hasDetailPermission" |
||||
> |
> |
||||
金币消耗明细 |
|
||||
|
金币消耗明细 |
||||
</el-button> |
</el-button> |
||||
</el-button-group> |
</el-button-group> |
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue'; |
|
||||
import { useRouter, useRoute } from 'vue-router'; |
|
||||
|
import {ref, watch, onMounted, computed} from 'vue'; // 新增computed导入 |
||||
|
import {useRouter, useRoute} from 'vue-router'; |
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {useAdminStore} from '@/store/index.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 activeTab = ref(''); |
||||
|
|
||||
const goToAdd = () => { |
|
||||
// 点击按钮时更新 activeTab 为 add |
|
||||
activeTab.value = 'add'; |
|
||||
router.push({ name: 'addCoinConsume' }); |
|
||||
|
// 路由名称映射 |
||||
|
const routeMap = { |
||||
|
add: 'addCoinConsume', |
||||
|
detail: 'coinConsumeDetail' |
||||
}; |
}; |
||||
|
|
||||
const goToDetail = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'detail'; |
|
||||
router.push({ name: 'coinConsumeDetail' }); |
|
||||
|
// 新增消耗权限判断(与其他页面保持一致的computed写法) |
||||
|
const hasAddPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '新增消耗' || menu.menuName === '消耗管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 金币消耗明细权限判断(补充明细权限逻辑) |
||||
|
const hasDetailPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '金币消耗明细' || menu.menuName === '消耗管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 导航方法(补充权限校验) |
||||
|
const navigateTo = (tab) => { |
||||
|
// 检查对应权限,无权限则不执行跳转 |
||||
|
if ((tab === 'add' && !hasAddPermission.value) || |
||||
|
(tab === 'detail' && !hasDetailPermission.value)) { |
||||
|
return; |
||||
|
} |
||||
|
activeTab.value = tab; |
||||
|
router.push({name: routeMap[tab]}); |
||||
|
}; |
||||
|
|
||||
|
// 检查权限并返回默认路由(优化权限判断逻辑) |
||||
|
const getDefaultConsumeRoute = () => { |
||||
|
// 优先检查新增消耗权限 |
||||
|
if (hasAddPermission.value) return 'add'; |
||||
|
// 其次检查明细权限 |
||||
|
if (hasDetailPermission.value) return 'detail'; |
||||
|
// 无任何权限时返回null |
||||
|
return null; |
||||
}; |
}; |
||||
|
|
||||
// 监听路由变化,更新 activeTab |
|
||||
|
// 监听路由变化更新标签状态(增加权限校验) |
||||
watch(() => route.name, (newName) => { |
watch(() => route.name, (newName) => { |
||||
if (newName === 'addCoinConsume') { |
|
||||
|
if (newName === routeMap.add && hasAddPermission.value) { |
||||
activeTab.value = 'add'; |
activeTab.value = 'add'; |
||||
} else if (newName === 'coinConsumeDetail') { |
|
||||
|
} else if (newName === routeMap.detail && hasDetailPermission.value) { |
||||
activeTab.value = 'detail'; |
activeTab.value = 'detail'; |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
// 当进入父路由时,默认跳转到新增消耗页面 |
|
||||
// if (route.name === 'coinConsume') { |
|
||||
// router.push({ name: 'addCoinConsume' }); |
|
||||
// } |
|
||||
</script> |
|
||||
|
// 监听路径变化,处理直接访问父路由的情况 |
||||
|
watch(() => route.path, (newPath) => { |
||||
|
if (newPath === '/coinConsume') { // 假设父路由路径为/coinConsume |
||||
|
const defaultRoute = getDefaultConsumeRoute(); |
||||
|
if (defaultRoute) { |
||||
|
navigateTo(defaultRoute); |
||||
|
} else { |
||||
|
console.warn('用户没有新增消耗和金币消耗明细的权限'); |
||||
|
// router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化逻辑(完善权限校验和状态同步) |
||||
|
onMounted(() => { |
||||
|
// 父路由默认跳转 |
||||
|
if (route.path === '/coinConsume') { // 假设父路由路径为/coinConsume |
||||
|
const defaultRoute = getDefaultConsumeRoute(); |
||||
|
if (defaultRoute) { |
||||
|
navigateTo(defaultRoute); |
||||
|
} else { |
||||
|
// console.warn('用户没有新增消耗和金币消耗明细的权限'); |
||||
|
router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
||||
|
} |
||||
|
} else { |
||||
|
// 子路由直接进入时同步状态(带权限校验) |
||||
|
if (route.name === routeMap.add && hasAddPermission.value) { |
||||
|
activeTab.value = 'add'; |
||||
|
} else if (route.name === routeMap.detail && hasDetailPermission.value) { |
||||
|
activeTab.value = 'detail'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
@ -1,61 +1,119 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
<el-button-group> |
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
<el-button |
||||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|
||||
@click="goToAdd" |
|
||||
|
:type="activeTab === 'add' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('add')" |
||||
|
:disabled="!hasAddPermission" |
||||
> |
> |
||||
新增充值 |
新增充值 |
||||
</el-button> |
</el-button> |
||||
<el-button |
<el-button |
||||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|
||||
@click="goToDetail" |
|
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('detail')" |
||||
|
:disabled="!hasDetailPermission" |
||||
> |
> |
||||
金币充值明细 |
金币充值明细 |
||||
</el-button> |
</el-button> |
||||
</el-button-group> |
</el-button-group> |
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue'; |
|
||||
import { useRouter, useRoute } from 'vue-router'; |
|
||||
|
import {ref, watch, onMounted, computed} from 'vue'; |
||||
|
import {useRouter, useRoute} from 'vue-router'; |
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {useAdminStore} from '@/store/index.js'; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add'); |
|
||||
//也就是说如果当前在coinRechargeDetail页面,那么就是detail,否则默认情况都展示add页面 |
|
||||
//此时获取到的路由信息是coinRecharge,所以默认是add |
|
||||
//此时获取到的路由信息是coinRecharge,所以默认是add |
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
const adminStore = useAdminStore(); |
||||
|
const {menuTree} = storeToRefs(adminStore); |
||||
|
|
||||
|
// 路由名称映射表 |
||||
|
const routeMap = { |
||||
|
add: 'addCoinRecharge', |
||||
|
detail: 'coinRechargeDetail' |
||||
|
}; |
||||
|
|
||||
|
// 激活的标签 |
||||
|
const activeTab = ref(''); |
||||
|
|
||||
|
// 检查新增权限 |
||||
|
const hasAddPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '新增充值' || menu.menuName === '充值管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 检查明细权限 |
||||
|
const hasDetailPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '金币充值明细' || menu.menuName === '充值管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
const goToAdd = () => { |
|
||||
// 点击按钮时更新 activeTab 为 add |
|
||||
activeTab.value = 'add'; |
|
||||
router.push({ name: 'addCoinRecharge' }); |
|
||||
|
// 统一导航方法 |
||||
|
const navigateTo = (tab) => { |
||||
|
// 检查权限后再跳转 |
||||
|
if ((tab === 'add' && !hasAddPermission.value) || |
||||
|
(tab === 'detail' && !hasDetailPermission.value)) { |
||||
|
return; |
||||
|
} |
||||
|
activeTab.value = tab; |
||||
|
router.push({name: routeMap[tab]}); |
||||
}; |
}; |
||||
|
|
||||
const goToDetail = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'detail'; |
|
||||
router.push({ name: 'coinRechargeDetail' }); |
|
||||
|
// 获取默认路由 |
||||
|
const getDefaultRoute = () => { |
||||
|
if (hasAddPermission.value) return 'add'; |
||||
|
if (hasDetailPermission.value) return 'detail'; |
||||
|
return null; |
||||
}; |
}; |
||||
|
|
||||
// 监听路由变化,更新 activeTab |
|
||||
|
// 监听路由变化更新标签 |
||||
watch(() => route.name, (newName) => { |
watch(() => route.name, (newName) => { |
||||
if (newName === 'addCoinRecharge') { |
|
||||
|
if (newName === routeMap.add && hasAddPermission.value) { |
||||
activeTab.value = 'add'; |
activeTab.value = 'add'; |
||||
} else if (newName === 'coinRechargeDetail') { |
|
||||
|
} else if (newName === routeMap.detail && hasDetailPermission.value) { |
||||
activeTab.value = 'detail'; |
activeTab.value = 'detail'; |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
// 当进入父路由时,默认跳转到新增消耗页面 |
|
||||
// if (route.name === 'coinRecharge') { |
|
||||
// router.push({ name: 'addCoinRecharge' }); |
|
||||
// } |
|
||||
</script> |
|
||||
|
// 监听路径变化,处理直接访问父路由路径的情况 |
||||
|
watch(() => route.path, (newPath) => { |
||||
|
if (newPath === '/coinRecharge') { // 假设父路由路径为/coinRecharge |
||||
|
const defaultTab = getDefaultRoute(); |
||||
|
if (defaultTab) { |
||||
|
navigateTo(defaultTab); |
||||
|
} else { |
||||
|
console.warn('用户没有新增充值和金币充值明细的权限'); |
||||
|
// router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
// 父路由默认跳转(同时处理路径和名称两种判断方式) |
||||
|
if (route.name === 'coinRecharge' || route.path === '/coinRecharge') { |
||||
|
const defaultTab = getDefaultRoute(); |
||||
|
if (defaultTab) { |
||||
|
navigateTo(defaultTab); |
||||
|
} else { |
||||
|
// console.warn('用户没有新增充值和金币充值明细的权限'); |
||||
|
router.push({ name: 'noPermission' }); // 可根据实际需求启用 |
||||
|
} |
||||
|
} else { |
||||
|
// 子路由直接进入时同步状态(增加权限校验) |
||||
|
if (route.name === routeMap.add && hasAddPermission.value) { |
||||
|
activeTab.value = 'add'; |
||||
|
} else if (route.name === routeMap.detail && hasDetailPermission.value) { |
||||
|
activeTab.value = 'detail'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
@ -1,61 +1,119 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
<el-button-group> |
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
<el-button |
||||
:type="activeTab === 'add' ? 'primary' : 'default'" |
|
||||
@click="goToAdd" |
|
||||
|
:type="activeTab === 'add' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('add')" |
||||
|
:disabled="!hasAddPermission" |
||||
> |
> |
||||
新增退款 |
新增退款 |
||||
</el-button> |
</el-button> |
||||
<el-button |
<el-button |
||||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|
||||
@click="goToDetail" |
|
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('detail')" |
||||
|
:disabled="!hasDetailPermission" |
||||
> |
> |
||||
金币退款明细 |
金币退款明细 |
||||
</el-button> |
</el-button> |
||||
</el-button-group> |
</el-button-group> |
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue'; |
|
||||
import { useRouter, useRoute } from 'vue-router'; |
|
||||
|
import {ref, watch, onMounted, computed} from 'vue'; |
||||
|
import {useRouter, useRoute} from 'vue-router'; |
||||
|
import {storeToRefs} from 'pinia'; |
||||
|
import {useAdminStore} from '@/store/index.js'; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|
||||
const activeTab = ref(route.name === 'coinRefundDetail' ? 'detail' : 'add'); |
|
||||
//也就是说如果当前在coinRefundDetail页面,那么就是detail,否则默认情况都展示add页面 |
|
||||
//此时获取到的路由信息是coinRefund,所以默认是add |
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
const adminStore = useAdminStore(); |
||||
|
const {menuTree} = storeToRefs(adminStore); |
||||
|
|
||||
|
// 路由名称映射表 |
||||
|
const routeMap = { |
||||
|
add: 'addCoinRefund', |
||||
|
detail: 'coinRefundDetail' |
||||
|
}; |
||||
|
|
||||
|
// 激活的标签 |
||||
|
const activeTab = ref(''); |
||||
|
|
||||
|
// 检查新增权限 |
||||
|
const hasAddPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '新增退款' || menu.menuName === '退款管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 检查明细权限 |
||||
|
const hasDetailPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '金币退款明细' || menu.menuName === '退款管理' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
const goToAdd = () => { |
|
||||
// 点击按钮时更新 activeTab 为 add |
|
||||
activeTab.value = 'add'; |
|
||||
router.push({ name: 'addCoinRefund' }); |
|
||||
|
// 统一导航方法 |
||||
|
const navigateTo = (tab) => { |
||||
|
// 检查权限后再跳转 |
||||
|
if ((tab === 'add' && !hasAddPermission.value) || |
||||
|
(tab === 'detail' && !hasDetailPermission.value)) { |
||||
|
return; |
||||
|
} |
||||
|
activeTab.value = tab; |
||||
|
router.push({name: routeMap[tab]}); |
||||
}; |
}; |
||||
|
|
||||
const goToDetail = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'detail'; |
|
||||
router.push({ name: 'coinRefundDetail' }); |
|
||||
|
// 获取默认路由 |
||||
|
const getDefaultRoute = () => { |
||||
|
if (hasAddPermission.value) return 'add'; |
||||
|
if (hasDetailPermission.value) return 'detail'; |
||||
|
return null; |
||||
}; |
}; |
||||
|
|
||||
// 监听路由变化,更新 activeTab |
|
||||
|
// 监听路由变化更新标签 |
||||
watch(() => route.name, (newName) => { |
watch(() => route.name, (newName) => { |
||||
if (newName === 'addCoinRefund') { |
|
||||
|
if (newName === routeMap.add && hasAddPermission.value) { |
||||
activeTab.value = 'add'; |
activeTab.value = 'add'; |
||||
} else if (newName === 'coinRefundDetail') { |
|
||||
|
} else if (newName === routeMap.detail && hasDetailPermission.value) { |
||||
activeTab.value = 'detail'; |
activeTab.value = 'detail'; |
||||
} |
} |
||||
}); |
}); |
||||
|
|
||||
// 当进入父路由时,默认跳转到新增消耗页面 |
|
||||
// if (route.name === 'coinRefund') { |
|
||||
// router.push({ name: 'addCoinRefund' }); |
|
||||
// } |
|
||||
</script> |
|
||||
|
// 监听路径变化,处理父路由直接访问的情况 |
||||
|
watch(() => route.path, (newPath) => { |
||||
|
if (newPath === '/coinRefund') { |
||||
|
const defaultTab = getDefaultRoute(); |
||||
|
if (defaultTab) { |
||||
|
navigateTo(defaultTab); |
||||
|
} else { |
||||
|
console.warn('用户没有新增退款和金币退款明细的权限'); |
||||
|
// router.push({ name: 'noPermission' }); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
// 父路由默认跳转 |
||||
|
if (route.path === '/coinRefund') { |
||||
|
const defaultTab = getDefaultRoute(); |
||||
|
if (defaultTab) { |
||||
|
navigateTo(defaultTab); |
||||
|
} else { |
||||
|
// console.warn('用户没有新增退款和金币退款明细的权限'); |
||||
|
router.push({ name: 'noPermission' }); |
||||
|
} |
||||
|
} else { |
||||
|
// 子路由直接进入时同步状态 |
||||
|
if (route.name === routeMap.add && hasAddPermission.value) { |
||||
|
activeTab.value = 'add'; |
||||
|
} else if (route.name === routeMap.detail && hasDetailPermission.value) { |
||||
|
activeTab.value = 'detail'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
@ -1,61 +1,104 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<!-- 这里放置标签切换的按钮 --> |
|
||||
<el-button-group> |
<el-button-group> |
||||
<!-- 切换后状态显示 primary 样式否则是默认样式 --> |
|
||||
<el-button |
|
||||
:type="activeTab === 'detail' ? 'primary' : 'default'" |
|
||||
@click="goToDetail" |
|
||||
|
<el-button |
||||
|
:type="activeTab === 'detail' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('detail')" |
||||
|
:disabled="!hasDetailPermission" |
||||
> |
> |
||||
金币明细 |
金币明细 |
||||
</el-button> |
</el-button> |
||||
<el-button |
|
||||
:type="activeTab === 'balance' ? 'primary' : 'default'" |
|
||||
@click="goToBalance" |
|
||||
|
<el-button |
||||
|
:type="activeTab === 'balance' ? 'primary' : 'default'" |
||||
|
@click="navigateTo('balance')" |
||||
|
:disabled="!hasBalancePermission" |
||||
> |
> |
||||
金币余额 |
金币余额 |
||||
</el-button> |
</el-button> |
||||
</el-button-group> |
</el-button-group> |
||||
|
|
||||
<!-- 渲染子路由组件 --> |
|
||||
<router-view></router-view> |
<router-view></router-view> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref, watch } from 'vue'; |
|
||||
|
import { ref, watch, onMounted, computed } from 'vue'; |
||||
import { useRouter, useRoute } from 'vue-router'; |
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
import { useAdminStore } from '@/store/index.js'; |
||||
|
|
||||
const router = useRouter();// 获取路由实例 |
|
||||
const route = useRoute();// 获取当前路由信息 |
|
||||
// 定义响应式变量 activeTab 来跟踪当前激活的标签 |
|
||||
const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail'); |
|
||||
//也就是说如果当前在clientCountBalance页面,那么就是balance,否则默认情况都展示detail页面 |
|
||||
//此时获取到的路由信息是clientCountDetail,所以默认是detail |
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
const adminStore = useAdminStore(); |
||||
|
const { menuTree } = storeToRefs(adminStore); |
||||
|
|
||||
|
// 路由名称映射表 |
||||
|
const routeMap = { |
||||
|
detail: 'clientCountDetail', |
||||
|
balance: 'clientCountBalance' |
||||
|
}; |
||||
|
|
||||
|
// 激活的标签 |
||||
|
const activeTab = ref(''); |
||||
|
|
||||
|
// 检查金币明细权限 |
||||
|
const hasDetailPermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '金币明细' || menu.menuName === '客户账户明细' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 检查金币余额权限 |
||||
|
const hasBalancePermission = computed(() => { |
||||
|
if (!menuTree.value) return false; |
||||
|
return menuTree.value.some(menu => |
||||
|
menu.menuName === '金币余额' || menu.menuName === '客户账户明细' |
||||
|
); |
||||
|
}); |
||||
|
|
||||
const goToDetail = () => { |
|
||||
// 点击按钮时更新 activeTab 为 detail |
|
||||
activeTab.value = 'detail'; |
|
||||
router.push({ name: 'clientCountDetail' }); |
|
||||
|
// 统一导航方法 |
||||
|
const navigateTo = (tab) => { |
||||
|
// 检查权限后再跳转 |
||||
|
if ((tab === 'detail' && !hasDetailPermission.value) || |
||||
|
(tab === 'balance' && !hasBalancePermission.value)) { |
||||
|
return; |
||||
|
} |
||||
|
activeTab.value = tab; |
||||
|
router.push({ name: routeMap[tab] }); |
||||
}; |
}; |
||||
|
|
||||
const goToBalance = () => { |
|
||||
// 点击按钮时更新 activeTab 为balance |
|
||||
activeTab.value = 'balance'; |
|
||||
router.push({ name: 'clientCountBalance' }); |
|
||||
|
// 获取默认路由 |
||||
|
const getDefaultRoute = () => { |
||||
|
if (hasDetailPermission.value) return 'detail'; |
||||
|
if (hasBalancePermission.value) return 'balance'; |
||||
|
return null; |
||||
}; |
}; |
||||
|
|
||||
// 监听路由变化,更新 activeTab |
|
||||
|
// 监听路由变化更新标签 |
||||
watch(() => route.name, (newName) => { |
watch(() => route.name, (newName) => { |
||||
if (newName === 'clientCountDetail') { |
|
||||
|
if (newName === routeMap.detail && hasDetailPermission.value) { |
||||
activeTab.value = 'detail'; |
activeTab.value = 'detail'; |
||||
} else if (newName === 'clientCountBalance') { |
|
||||
|
} else if (newName === routeMap.balance && hasBalancePermission.value) { |
||||
activeTab.value = 'balance'; |
activeTab.value = 'balance'; |
||||
}}); |
|
||||
|
} |
||||
|
}); |
||||
|
|
||||
// 当进入父路由时,默认跳转到金币明细页面 |
|
||||
// if (route.name === 'usergold') { |
|
||||
// router.push({ name: 'clientCountDetail' }); |
|
||||
// } |
|
||||
</script> |
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
// 父路由默认跳转 |
||||
|
if (route.name === 'usergold') { |
||||
|
const defaultTab = getDefaultRoute(); |
||||
|
if (defaultTab) { |
||||
|
navigateTo(defaultTab); |
||||
|
} |
||||
|
} else { |
||||
|
// 子路由直接进入时同步状态 |
||||
|
if (route.name === routeMap.detail) { |
||||
|
activeTab.value = 'detail'; |
||||
|
} else if (route.name === routeMap.balance) { |
||||
|
activeTab.value = 'balance'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
</script> |
Write
Preview
Loading…
Cancel
Save
Reference in new issue