角色权限的完善
This commit is contained in:
parent
b5bdf3b548
commit
4b04a694e3
@ -1,3 +1,4 @@
|
|||||||
|
import { baseUrlHost } from '../baseUrlHost';
|
||||||
import request from '/@/utils/request';
|
import request from '/@/utils/request';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -12,11 +13,11 @@ import request from '/@/utils/request';
|
|||||||
*/
|
*/
|
||||||
export function useMenuApi() {
|
export function useMenuApi() {
|
||||||
return {
|
return {
|
||||||
getAdminMenu: (params?: object) => {
|
getAdminMenu: (id: number) => {
|
||||||
return request({
|
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',
|
method: 'get',
|
||||||
params,
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getTestMenu: (params?: object) => {
|
getTestMenu: (params?: object) => {
|
||||||
|
@ -3,19 +3,23 @@
|
|||||||
<el-aside class="layout-aside" :class="setCollapseStyle">
|
<el-aside class="layout-aside" :class="setCollapseStyle">
|
||||||
<Logo v-if="setShowLogo" />
|
<Logo v-if="setShowLogo" />
|
||||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
|
<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-scrollbar>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="layoutAside">
|
<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 { storeToRefs } from 'pinia';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import mittBus from '/@/utils/mitt';
|
import mittBus from '/@/utils/mitt';
|
||||||
|
import {useMenuApi} from '/@/api/menu'
|
||||||
|
|
||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
|
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
|
||||||
@ -34,6 +38,10 @@ const state = reactive<AsideState>({
|
|||||||
clientWidth: 0,
|
clientWidth: 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const useMenuapi = useMenuApi();
|
||||||
|
|
||||||
|
const isDataReady = ref(false)
|
||||||
|
|
||||||
// 设置菜单展开/收起时的宽度
|
// 设置菜单展开/收起时的宽度
|
||||||
const setCollapseStyle = computed(() => {
|
const setCollapseStyle = computed(() => {
|
||||||
const { layout, isCollapse, menuBar } = themeConfig.value;
|
const { layout, isCollapse, menuBar } = themeConfig.value;
|
||||||
@ -87,6 +95,23 @@ const setFilterRoutes = () => {
|
|||||||
if (themeConfig.value.layout === 'columns') return false;
|
if (themeConfig.value.layout === 'columns') return false;
|
||||||
state.menuList = filterRoutesFun(routesList.value);
|
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[] => {
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
||||||
return arr
|
return arr
|
||||||
@ -97,6 +122,7 @@ const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
|||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 设置菜单导航是否固定(移动端)
|
// 设置菜单导航是否固定(移动端)
|
||||||
const initMenuFixed = (clientWidth: number) => {
|
const initMenuFixed = (clientWidth: number) => {
|
||||||
state.clientWidth = clientWidth;
|
state.clientWidth = clientWidth;
|
||||||
@ -113,6 +139,7 @@ const onAsideEnterLeave = (bool: Boolean) => {
|
|||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
initMenuFixed(document.body.clientWidth);
|
initMenuFixed(document.body.clientWidth);
|
||||||
setFilterRoutes();
|
setFilterRoutes();
|
||||||
|
// await getmenulist();
|
||||||
// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
|
// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
|
||||||
// 因为切换布局时有的监听需要使用,取消了监听,某些操作将不生效
|
// 因为切换布局时有的监听需要使用,取消了监听,某些操作将不生效
|
||||||
mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
|
mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
|
||||||
@ -138,6 +165,11 @@ onBeforeMount(() => {
|
|||||||
closeLayoutAsideMobileMode();
|
closeLayoutAsideMobileMode();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
onMounted(async() =>{
|
||||||
|
await getmenulist();
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
// 监听 themeConfig 配置文件的变化,更新菜单 el-scrollbar 的高度
|
// 监听 themeConfig 配置文件的变化,更新菜单 el-scrollbar 的高度
|
||||||
watch(
|
watch(
|
||||||
() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
|
() => [themeConfig.value.isShowLogoChange, themeConfig.value.isShowLogo, themeConfig.value.layout, themeConfig.value.isClassicSplitMenu],
|
||||||
|
@ -6,8 +6,9 @@
|
|||||||
:collapse="state.isCollapse"
|
:collapse="state.isCollapse"
|
||||||
:unique-opened="getThemeConfig.isUniqueOpened"
|
:unique-opened="getThemeConfig.isUniqueOpened"
|
||||||
:collapse-transition="false"
|
: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">
|
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||||
<template #title>
|
<template #title>
|
||||||
<SvgIcon :name="val.meta.icon" />
|
<SvgIcon :name="val.meta.icon" />
|
||||||
@ -26,16 +27,31 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</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>
|
</el-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="navMenuVertical">
|
<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 { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import other from '/@/utils/other';
|
import other from '/@/utils/other';
|
||||||
|
import {useMenuApi} from '/@/api/menu'
|
||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
||||||
@ -61,12 +77,25 @@ const state = reactive({
|
|||||||
|
|
||||||
// 获取父级菜单数据
|
// 获取父级菜单数据
|
||||||
const menuLists = computed(() => {
|
const menuLists = computed(() => {
|
||||||
return <RouteItems>props.menuList;
|
return props.menuList || [];
|
||||||
});
|
});
|
||||||
// 获取布局配置信息
|
// 获取布局配置信息
|
||||||
const getThemeConfig = computed(() => {
|
const getThemeConfig = computed(() => {
|
||||||
return themeConfig.value;
|
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 setParentHighlight = (currentRoute: RouteToFrom) => {
|
||||||
const { path, meta } = currentRoute;
|
const { path, meta } = currentRoute;
|
||||||
@ -78,9 +107,18 @@ const setParentHighlight = (currentRoute: RouteToFrom) => {
|
|||||||
const onALinkClick = (val: RouteItem) => {
|
const onALinkClick = (val: RouteItem) => {
|
||||||
other.handleOpenLink(val);
|
other.handleOpenLink(val);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 页面加载时
|
// 页面加载时
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
state.defaultActive = setParentHighlight(route);
|
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) => {
|
onBeforeRouteUpdate((to) => {
|
||||||
@ -99,4 +137,21 @@ watch(
|
|||||||
immediate: true,
|
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>
|
</script>
|
||||||
|
@ -106,7 +106,8 @@ const onSignIn = async () => {
|
|||||||
// 存储 token 到浏览器缓存
|
// 存储 token 到浏览器缓存
|
||||||
Session.set('token', res.data.token);
|
Session.set('token', res.data.token);
|
||||||
// usertype判断登录角色
|
// 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) {
|
if (!themeConfig.value.isRequestRoutes) {
|
||||||
// 前端控制路由,2、请注意执行顺序
|
// 前端控制路由,2、请注意执行顺序
|
||||||
const isNoPower = await initFrontEndControlRoutes();
|
const isNoPower = await initFrontEndControlRoutes();
|
||||||
@ -116,7 +117,13 @@ const onSignIn = async () => {
|
|||||||
// 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
|
// 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
|
||||||
const isNoPower = await initBackEndControlRoutes();
|
const isNoPower = await initBackEndControlRoutes();
|
||||||
// 执行完 initBackEndControlRoutes,再执行 signInSuccess
|
// 执行完 initBackEndControlRoutes,再执行 signInSuccess
|
||||||
signInSuccess(isNoPower);
|
// signInSuccess(isNoPower);
|
||||||
|
if (isNoPower) {
|
||||||
|
// 根据实际需求处理登录成功后的操作
|
||||||
|
signInSuccess(false); // 假设 signInSuccess 接收布尔值表示是否有权限问题
|
||||||
|
} else {
|
||||||
|
throw new Error('权限不足或路由加载失败');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
ElMessage.error(res.errorMsg||res.message);
|
ElMessage.error(res.errorMsg||res.message);
|
||||||
|
@ -197,10 +197,6 @@ const onSubmit = async() => {
|
|||||||
if(valid){
|
if(valid){
|
||||||
state.ruleForm.show = state.ruleForm.show ? 1 : 0;
|
state.ruleForm.show = state.ruleForm.show ? 1 : 0;
|
||||||
state.ruleForm.grouptypeid = 1;
|
state.ruleForm.grouptypeid = 1;
|
||||||
let body = {
|
|
||||||
actions:tree.value.getCheckedKeys(true, false),
|
|
||||||
groupid:state.ruleForm.id
|
|
||||||
}
|
|
||||||
if (state.dialog.type === 'add') {
|
if (state.dialog.type === 'add') {
|
||||||
try{
|
try{
|
||||||
const param = {
|
const param = {
|
||||||
@ -209,12 +205,7 @@ const onSubmit = async() => {
|
|||||||
}
|
}
|
||||||
const res = await roleapi.addRole(param);
|
const res = await roleapi.addRole(param);
|
||||||
if (res?.success) {
|
if (res?.success) {
|
||||||
try{
|
|
||||||
const data = await roleactionapi.setUprolePermission(body)
|
|
||||||
console.log(5555555,data);
|
|
||||||
}catch(error){
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
emit('reset');
|
emit('reset');
|
||||||
closeDialog();
|
closeDialog();
|
||||||
ElMessage.success('角色新建成功!');
|
ElMessage.success('角色新建成功!');
|
||||||
@ -234,6 +225,10 @@ const onSubmit = async() => {
|
|||||||
ElMessage.error('角色新建失败!')
|
ElMessage.error('角色新建失败!')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
let body = {
|
||||||
|
actions:tree.value.getCheckedKeys(true, false),
|
||||||
|
groupid:state.ruleForm.id
|
||||||
|
}
|
||||||
try{
|
try{
|
||||||
const res = await roleapi.updateRole(state.ruleForm);
|
const res = await roleapi.updateRole(state.ruleForm);
|
||||||
if(res?.success){
|
if(res?.success){
|
||||||
|
Loading…
Reference in New Issue
Block a user