WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/Manager/LeftBar.vue
View File

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

22
src/Manager/MainSection.vue
View File

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