hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

角色权限的完善

Browse Source
This commit is contained in:
夕阳微笑1 2024-12-26 19:12:44 +08:00
parent b5bdf3b548
commit 4b04a694e3
5 changed files with 111 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/menu/index.ts
View File

@ -1,3 +1,4 @@
import { baseUrlHost } from '../baseUrlHost';
import request from '/@/utils/request';
/**
@ -12,11 +13,11 @@ import request from '/@/utils/request';
*/
export function useMenuApi() {
return {
getAdminMenu: (params?: object) => {
getAdminMenu: (id: number) => {
return request({
url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json',
// url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json',
url:baseUrlHost + `/acGrouptype/findByUserMenu/${id}`,
method: 'get',
params,
});
},
getTestMenu: (params?: object) => {

36
src/layout/component/aside.vue
View File

@ -3,19 +3,23 @@
<el-aside class="layout-aside" :class="setCollapseStyle">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
<Vertical :menuList="state.menuList" />
<div v-if="isDataReady">
<Vertical :menuList="Menulist" />
</div>
</el-scrollbar>
</el-aside>
</div>
</template>
<script setup lang="ts" name="layoutAside">
import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import mittBus from '/@/utils/mitt';
import {useMenuApi} from '/@/api/menu'
// 引入组件
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
@ -34,6 +38,10 @@ const state = reactive<AsideState>({
clientWidth: 0,
});
const useMenuapi = useMenuApi();
const isDataReady = ref(false)
// 设置菜单展开/收起时的宽度
const setCollapseStyle = computed(() => {
const { layout, isCollapse, menuBar } = themeConfig.value;
@ -87,6 +95,23 @@ const setFilterRoutes = () => {
if (themeConfig.value.layout === 'columns') return false;
state.menuList = filterRoutesFun(routesList.value);
};
let Menulist = ref([]);
// const defaultOpeneds =reactive([])
const getmenulist = async() =>{
try{
const res = await useMenuapi.getAdminMenu(1);
// console.log('菜单数据',res);
Menulist.value = res.data;
isDataReady.value = true
// for(let i = 0; i < Menulist.value.length; i++){
// defaultOpeneds.push(i + '')
// }
}catch(error){
console.error(error)
}
};
// 路由过滤递归函数
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
return arr
@ -97,6 +122,7 @@ const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
return item;
});
};
// 设置菜单导航是否固定（移动端）
const initMenuFixed = (clientWidth: number) => {
state.clientWidth = clientWidth;
@ -113,6 +139,7 @@ const onAsideEnterLeave = (bool: Boolean) => {
onBeforeMount(() => {
initMenuFixed(document.body.clientWidth);
setFilterRoutes();
// await getmenulist();
// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
@ -138,6 +165,11 @@ onBeforeMount(() => {
closeLayoutAsideMobileMode();
});
});
onMounted(async() =>{
await getmenulist();
})
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
watch(
() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],

61
src/layout/navMenu/vertical.vue
View File

@ -6,8 +6,9 @@
:collapse="state.isCollapse"
:unique-opened="getThemeConfig.isUniqueOpened"
:collapse-transition="false"
:default-openeds="defaultOpeneds"
>
<template v-for="val in menuLists">
<!-- <template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
<template #title>
<SvgIcon :name="val.meta.icon" />
@ -26,16 +27,31 @@
</template>
</el-menu-item>
</template>
</template> -->
<el-sub-menu :index="index.toString()" v-for="(item,index) in menuLists" :key="index" >
<template #title>
<span>{{ item.modulename }}</span>
</template>
<el-menu-item-group>
<font-awesome-icon :icon="['fas',item.actions[0].icon]" size="lg" class="edtIcon" />
<el-menu-item :index="item1.link" v-for="(item1, index1) in item.actions" :key="index1">
<SvgIcon :name="item1.icon" />
{{ item1.actionname }}
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</template>
<script setup lang="ts" name="navMenuVertical">
import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
import { defineAsyncComponent, reactive, computed, onMounted, watch,ref ,onBeforeMount} from 'vue';
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
import {useMenuApi} from '/@/api/menu'
// 引入组件
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
@ -61,12 +77,25 @@ const state = reactive({
// 获取父级菜单数据
const menuLists = computed(() => {
return <RouteItems>props.menuList;
return props.menuList || [];
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
return themeConfig.value;
});
// 默认全展开的实现
// const defaultOpeneds = computed(() => {
// if (menuLists.value.length === 0) {
// console.log(111111111111);
// return []; // 没有菜单时返回空数组
// }
// console.log(22222222222);
// return menuLists.value.map((_, index) => index.toString());
// });
const defaultOpeneds = ref<string[]>([]);
// 菜单高亮（详情时，父级高亮）
const setParentHighlight = (currentRoute: RouteToFrom) => {
const { path, meta } = currentRoute;
@ -78,9 +107,18 @@ const setParentHighlight = (currentRoute: RouteToFrom) => {
const onALinkClick = (val: RouteItem) => {
other.handleOpenLink(val);
};
// 页面加载时
onMounted(() => {
state.defaultActive = setParentHighlight(route);
// 每次加载页面，初始化默认展开项
// const storedOpeneds = localStorage.getItem('defaultOpeneds');
// if (storedOpeneds) {
// console.log('Loaded from localStorage:', JSON.parse(storedOpeneds));
// } else {
// // 如果没有存储记录，设置为全部展开
// localStorage.setItem('defaultOpeneds', JSON.stringify(defaultOpeneds.value));
// }
});
// 路由更新时
onBeforeRouteUpdate((to) => {
@ -99,4 +137,21 @@ watch(
immediate: true,
}
);
// // 监听默认展开状态，并存储到 localStorage
// // 保存状态到 localStorage，每次更改时更新存储
// watch(defaultOpeneds, (newVal) => {
// localStorage.setItem('defaultOpeneds', JSON.stringify(newVal));
// });
// 监控 props 的变化，确保 defaultOpeneds 始终正确
watch(
() => props.menuList,
(newMenuList) => {
defaultOpeneds.value = newMenuList.map((_, index) => index.toString());
},
{
immediate: true,
deep: true,
}
);
</script>

11
src/views/login/component/account.vue
View File

@ -106,7 +106,8 @@ const onSignIn = async () => {
// 存储 token 到浏览器缓存
Session.set('token', res.data.token);
// usertype判断登录角色
Cookies.set('userName', res.data.user.usertype === 1 ? 'admin' : 'user');
// Cookies.set('userName', res.data.user.usertype === 1 ? 'admin' : 'user');
Cookies.set('userName', 'admin');
if (!themeConfig.value.isRequestRoutes) {
// 前端控制路由，2、请注意执行顺序
const isNoPower = await initFrontEndControlRoutes();
@ -116,7 +117,13 @@ const onSignIn = async () => {
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
const isNoPower = await initBackEndControlRoutes();
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
signInSuccess(isNoPower);
// signInSuccess(isNoPower);
if (isNoPower) {
// 根据实际需求处理登录成功后的操作
signInSuccess(false); // 假设 signInSuccess 接收布尔值表示是否有权限问题
} else {
throw new Error('权限不足或路由加载失败');
}
}
}else{
ElMessage.error(res.errorMsg||res.message);

15
src/views/usermanage/role/dialog.vue
View File

@ -197,10 +197,6 @@ const onSubmit = async() => {
if(valid){
state.ruleForm.show = state.ruleForm.show ? 1 : 0;
state.ruleForm.grouptypeid = 1;
let body = {
actions:tree.value.getCheckedKeys(true, false),
groupid:state.ruleForm.id
}
if (state.dialog.type === 'add') {
try{
const param = {
@ -209,12 +205,7 @@ const onSubmit = async() => {
}
const res = await roleapi.addRole(param);
if (res?.success) {
try{
const data = await roleactionapi.setUprolePermission(body)
console.log(5555555,data);
}catch(error){
console.error(error)
}
emit('reset');
closeDialog();
ElMessage.success('角色新建成功！');
@ -234,6 +225,10 @@ const onSubmit = async() => {
ElMessage.error('角色新建失败！')
}
} else {
let body = {
actions:tree.value.getCheckedKeys(true, false),
groupid:state.ruleForm.id
}
try{
const res = await roleapi.updateRole(state.ruleForm);
if(res?.success){