This commit is contained in:
GUjiYN 2024-01-27 14:53:32 +08:00
parent 09dd1d0d87
commit 420fc0298a
2 changed files with 110 additions and 117 deletions

View File

@ -1,124 +1,103 @@
<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>
<a-menu
id="dddddd"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
style="width: 256px"
mode="inline"
:items="items"
@click="handleClick"
></a-menu>
</template>
<script setup>
import { h, reactive } from 'vue';
import { reactive, ref, h } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
import router from "@/router/index.js";
const selectedKeys = ref(['1']);
const openKeys = ref(['sub1']);
function getItem(label, key, icon, children, type) {
return {
key,
icon,
children,
label,
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('信息管理', 'sub4', () => h(SettingOutlined), [
getItem('项目信息管理', '12'),
getItem('团队信息管理', '13'),
getItem('新闻信息管理', '14'),
], 'submenu'),
getItem('首页', 'sub1'),
getItem('系统管理', 'sub2', () => h(MailOutlined), [
getItem('用户管理', '1'),
getItem('角色管理', '2'),
getItem('权限管理', '3'),
getItem('日志管理', '4'),
getItem('日报管理', '5'),
getItem('消息管理', '6'),
]),
getItem('首页管理', 'sub3', () => h(AppstoreOutlined), [
getItem('轮播图管理', '7'),
getItem('团队简介', '8'),
getItem('项目推荐', '9'),
getItem('新闻展示', '10'),
getItem('用户推荐', '11'),
]),
getItem('信息管理', 'sub4', () => h(SettingOutlined), [
getItem('项目信息管理', '12'),
getItem('团队信息', '13'),
getItem('新闻信息', '14'),
]),
]);
const state = reactive({
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
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;
}
};
const handleClick = (e) => {
console.log("点击成功");
const key = e.key;
console.log(e.key);
switch (key) {
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>

View File

@ -1,9 +1,23 @@
<template>
<div style="display: flex;flex-direction: row" >
<div class="container">
<LeftBar></LeftBar>
<router-view></router-view>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script setup>
import LeftBar from "@/Manager/LeftBar.vue";
</script>
</script>
<style scoped>
.container {
display: flex;
flex-direction: row;
}
.content {
flex: 1; /* 让内容部分占据剩余空间 */
}
</style>