124 lines
3.5 KiB
Vue
124 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<a-menu
|
|
:default-selected-keys="state.selectedKeys"
|
|
style="width: 256px"
|
|
mode="inline"
|
|
:open-keys="state.openKeys"
|
|
:items="items"
|
|
@openChange="onOpenChange"
|
|
@click="HandleClick"
|
|
></a-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { h, reactive } from 'vue';
|
|
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
|
|
function getItem(label, key, icon, children, type) {
|
|
return {
|
|
key,
|
|
icon,
|
|
children,
|
|
label,
|
|
type,
|
|
};
|
|
}
|
|
|
|
const items = reactive([
|
|
getItem('首页', '0'),
|
|
getItem('系统管理', 'sub1', () => h(MailOutlined), [
|
|
getItem('用户管理', '1'),
|
|
getItem('角色管理', '2'),
|
|
getItem('权限管理', '3'),
|
|
getItem('日志管理', '4'),
|
|
getItem('日报管理', '5'),
|
|
getItem('消息管理', '6'),
|
|
], 'submenu'),
|
|
getItem('首页管理', 'sub2', () => h(AppstoreOutlined), [
|
|
getItem('轮播图管理', '7'),
|
|
getItem('团队简介', '8'),
|
|
getItem('项目推荐', '9'),
|
|
getItem('新闻展示', '10'),
|
|
getItem('用户推荐', '11'),
|
|
], 'submenu'),
|
|
getItem('信息管理', 'sub3', () => h(SettingOutlined), [
|
|
getItem('项目信息管理', '12'),
|
|
getItem('团队信息管理', '13'),
|
|
getItem('新闻信息管理', '14'),
|
|
], 'submenu'),
|
|
]);
|
|
|
|
const state = reactive({
|
|
rootSubmenuKeys: ['sub1', 'sub2', 'sub3'],
|
|
openKeys: ['sub1'],
|
|
selectedKeys: [],
|
|
});
|
|
|
|
const onOpenChange = (openKeys) => {
|
|
const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1);
|
|
if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
|
state.openKeys = openKeys;
|
|
} else {
|
|
state.openKeys = latestOpenKey ? [latestOpenKey] : [];
|
|
}
|
|
};
|
|
|
|
const HandleClick = (e) => {
|
|
// console.log("点击成功");
|
|
const key = e.key;
|
|
console.log(e.key);
|
|
switch (key) {
|
|
case '0':
|
|
router.push('/Manager/Main'); // 导航到用户管理界面的路由
|
|
break;
|
|
case '1':
|
|
router.push('/Manager/User'); // 导航到用户管理界面的路由
|
|
break;
|
|
case '2':
|
|
router.push('/Manager/Role');
|
|
break;
|
|
case '3':
|
|
router.push('/Manager/Authority');
|
|
break;
|
|
case '4':
|
|
router.push('/Manager/Log');
|
|
break;
|
|
case '5':
|
|
router.push('/Manager/Daily');
|
|
break;
|
|
case '6':
|
|
router.push('/Manager/Message');
|
|
break;
|
|
case '7':
|
|
router.push('/Manager/Carousel');
|
|
break;
|
|
case '8':
|
|
router.push('/Manager/TeamProfile');
|
|
break;
|
|
case '9':
|
|
router.push('/Manager/ProjectRecommend');
|
|
break;
|
|
case '10':
|
|
router.push('/Manager/NewsDisplay');
|
|
break;
|
|
case '11':
|
|
router.push('/Manager/UserRecommend');
|
|
break;
|
|
case '12':
|
|
router.push('/Manager/ProjectInformation');
|
|
break;
|
|
case '13':
|
|
router.push('/Manager/TeamInformation');
|
|
break;
|
|
case '14':
|
|
router.push('/Manager/NewsInformation');
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
</script> |