huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 恢复：权限不重新到页面

zhangrenyuan/feature-20250714163943-金币前端二期
lihui 3 weeks ago
parent
0f3c0ae813
commit
752c6f86dd
4 changed files with 99 additions and 266 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 127
      src/views/audit/audit.vue
  2. 120
      src/views/recharge/coinRecharge.vue
  3. 116
      src/views/refund/coinRefund.vue
  4. 2
      stats.html

127
src/views/audit/audit.vue
View File

@ -1,117 +1,66 @@
<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="navigateTo('rechargeAudit')"
:disabled="!hasRechargePermission"
@click="goRechargeAudit"
> >
充值审核 充值审核
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'refundAudit' ? 'primary' : 'default'" :type="activeTab === 'refundAudit' ? 'primary' : 'default'"
@click="navigateTo('refundAudit')"
:disabled="!hasRefundPermission"
@click="goRefundAudit"
> >
退款审核 退款审核
</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 {ref, watch, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
<script setup >
import {onMounted, ref, watch} from 'vue';
import { useRouter, useRoute } from 'vue-router';
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 === 'rechargeAudit' ? 'rechargeAudit' : 'refundAudit');
//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
//此时获取到的路由信息是clientCountDetail，所以默认是detail
const activeTab = ref('');
// 充值审核权限判断
const hasRechargePermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '充值审核' || menu.menuName === '财务审核'
);
});
// 退款审核权限判断
const hasRefundPermission = computed(() => {
if (!menuTree.value) return false;
return menuTree.value.some(menu =>
menu.menuName === '退款审核' || menu.menuName === '财务审核'
);
});
// 导航方法
const navigateTo = (name) => {
// 检查对应权限，无权限则不执行跳转
if ((name === 'rechargeAudit' && !hasRechargePermission.value) ||
(name === 'refundAudit' && !hasRefundPermission.value)) {
return;
}
activeTab.value = name;
router.push({name});
const goRechargeAudit = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'rechargeAudit';
router.push({ name: 'rechargeAudit' });
}; };
// 检查权限并返回默认路由
const getDefaultAuditRoute = () => {
// 优先检查充值审核权限
if (hasRechargePermission.value) return 'rechargeAudit';
// 其次检查退款审核权限
if (hasRefundPermission.value) return 'refundAudit';
// 无任何权限时返回null
return null;
const goRefundAudit = () => {
// 点击按钮时更新 activeTab 为balance
activeTab.value = 'refundAudit';
router.push({ name: 'refundAudit' });
}; };
// 监听路由变化
watch(() => route.path, (newPath) => {
// 当路径变更为 /audit 时执行跳转逻辑
if (newPath === '/audit') {
const defaultRoute = getDefaultAuditRoute();
if (defaultRoute) {
navigateTo(defaultRoute);
} else {
console.warn('用户没有充值审核和退款审核的权限');
// router.push({ name: 'noPermission' });
}
}
});
// 监听路由变化更新标签状态
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
// 只有在有权限的情况下才更新标签状态
if (newName === 'rechargeAudit' && hasRechargePermission.value) {
activeTab.value = newName;
} else if (newName === 'refundAudit' && hasRefundPermission.value) {
activeTab.value = newName;
}
});
if (newName === 'rechargeAudit') {
activeTab.value = 'rechargeAudit';
} else if (newName === 'refundAudit') {
activeTab.value = 'refundAudit';
}});
// 当进入父路由时，默认跳转到金币明细页面
// if (route.name === 'usergold') {
// router.push({ name: 'clientCountDetail' });
// }
// 初始化逻辑 - 保留原有逻辑处理首次加载
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;
}
}
onMounted(async function () {
console.log("@@@@@@@@@@@@",route.name)
}); });
</script>
</script>

120
src/views/recharge/coinRecharge.vue
View File

@ -1,119 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'add' ? 'primary' : 'default'" :type="activeTab === 'add' ? 'primary' : 'default'"
@click="navigateTo('add')"
:disabled="!hasAddPermission"
@click="goToAdd"
> >
新增充值
新增消耗
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币充值明细
金币消耗明细
</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, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
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 === 'coinConsumeDetail' ? 'detail' : 'add');
//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
//此时获取到的路由信息是coinConsume，所以默认是add
// 路由名称映射表
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 navigateTo = (tab) => {
// 检查权限后再跳转
if ((tab === 'add' && !hasAddPermission.value) ||
(tab === 'detail' && !hasDetailPermission.value)) {
return;
}
activeTab.value = tab;
router.push({name: routeMap[tab]});
const goToAdd = () => {
// 点击按钮时更新 activeTab 为 add
activeTab.value = 'add';
router.push({ name: 'addCoinConsume' });
}; };
// 获取默认路由
const getDefaultRoute = () => {
if (hasAddPermission.value) return 'add';
if (hasDetailPermission.value) return 'detail';
return null;
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'coinConsumeDetail' });
}; };
// 监听路由变化更新标签
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.add && hasAddPermission.value) {
if (newName === 'addCoinConsume') {
activeTab.value = 'add'; activeTab.value = 'add';
} else if (newName === routeMap.detail && hasDetailPermission.value) {
} else if (newName === 'coinConsumeDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} }
}); });
// 监听路径变化，处理直接访问父路由路径的情况
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>
// 当进入父路由时，默认跳转到新增消耗页面
// if (route.name === 'coinConsume') {
// router.push({ name: 'addCoinConsume' });
// }
</script>

116
src/views/refund/coinRefund.vue
View File

@ -1,119 +1,61 @@
<template> <template>
<div> <div>
<!-- 这里放置标签切换的按钮 -->
<el-button-group> <el-button-group>
<!-- 切换后状态显示 primary 样式否则是默认样式 -->
<el-button <el-button
:type="activeTab === 'add' ? 'primary' : 'default'" :type="activeTab === 'add' ? 'primary' : 'default'"
@click="navigateTo('add')"
:disabled="!hasAddPermission"
@click="goToAdd"
> >
新增退款 新增退款
</el-button> </el-button>
<el-button <el-button
:type="activeTab === 'detail' ? 'primary' : 'default'" :type="activeTab === 'detail' ? 'primary' : 'default'"
@click="navigateTo('detail')"
:disabled="!hasDetailPermission"
@click="goToDetail"
> >
金币退款明细 金币退款明细
</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, onMounted, computed} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {storeToRefs} from 'pinia';
import {useAdminStore} from '@/store/index.js';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
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');
//也就是说如果当前在coinRefundDetail页面，那么就是detail，否则默认情况都展示add页面
//此时获取到的路由信息是coinRefund，所以默认是add
// 路由名称映射表
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 navigateTo = (tab) => {
// 检查权限后再跳转
if ((tab === 'add' && !hasAddPermission.value) ||
(tab === 'detail' && !hasDetailPermission.value)) {
return;
}
activeTab.value = tab;
router.push({name: routeMap[tab]});
const goToAdd = () => {
// 点击按钮时更新 activeTab 为 add
activeTab.value = 'add';
router.push({ name: 'addCoinRefund' });
}; };
// 获取默认路由
const getDefaultRoute = () => {
if (hasAddPermission.value) return 'add';
if (hasDetailPermission.value) return 'detail';
return null;
const goToDetail = () => {
// 点击按钮时更新 activeTab 为 detail
activeTab.value = 'detail';
router.push({ name: 'coinRefundDetail' });
}; };
// 监听路由变化更新标签
// 监听路由变化，更新 activeTab
watch(() => route.name, (newName) => { watch(() => route.name, (newName) => {
if (newName === routeMap.add && hasAddPermission.value) {
if (newName === 'addCoinRefund') {
activeTab.value = 'add'; activeTab.value = 'add';
} else if (newName === routeMap.detail && hasDetailPermission.value) {
} else if (newName === 'coinRefundDetail') {
activeTab.value = 'detail'; activeTab.value = 'detail';
} }
}); });
// 监听路径变化，处理父路由直接访问的情况
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>
// 当进入父路由时，默认跳转到新增消耗页面
// if (route.name === 'coinRefund') {
// router.push({ name: 'addCoinRefund' });
// }
</script>

2
stats.html
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save