Browse Source

fix: 恢复

zhangrenyuan/feature-20250714163943-金币前端二期
lihui 3 weeks ago
parent
commit
46714da87c
  1. 116
      src/views/consume/coinConsume.vue

116
src/views/consume/coinConsume.vue

@ -1,121 +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'; // computed
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');
//coinConsumeDetaildetailadd
//coinConsumeadd
const activeTab = ref('');
//
const routeMap = {
add: 'addCoinConsume',
detail: '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 goToAdd = () => {
// activeTab add
activeTab.value = 'add';
router.push({ name: 'addCoinConsume' });
}; };
//
const getDefaultConsumeRoute = () => {
//
if (hasAddPermission.value) return 'add';
//
if (hasDetailPermission.value) return 'detail';
// null
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 === '/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';
}
}
});
//
// if (route.name === 'coinConsume') {
// router.push({ name: 'addCoinConsume' });
// }
</script> </script>
Loading…
Cancel
Save