72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<template>
|
|
<div id="guide" class="menu" :style="{
|
|
width: '203px',
|
|
height: '100%',
|
|
color: themeConfig.textColor,
|
|
}">
|
|
<div class="logo">
|
|
<img src="../../assets/logo2.jpg" alt="" style="margin-right: 5px" /> 工资核算系统系统
|
|
</div>
|
|
|
|
<el-scrollbar style="height: 100%">
|
|
<el-menu :default-active="activeMenu" :router="true" :collapse="false" :collapse-transition="false"
|
|
:unique-opened="true" :background-color="themeConfig.backgroundColor" :text-color="themeConfig.textColor"
|
|
:active-text-color="themeConfig.primary">
|
|
<menuItems :menuList="menuList"></menuItems>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onMounted, reactive, ref } from "vue";
|
|
import store from "../../store/index.js";
|
|
import menuItems from "./components/menuItems.vue";
|
|
// 引入本地路由表渲染导航栏
|
|
// import menuTable from "./menuTable.js";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { generateMenu } from "../../router/generateMenu.js"
|
|
import routerList from "../../router/originalRoutingTable.js";
|
|
const route = useRoute();
|
|
const activeMenu = computed(() => {
|
|
return route.path;
|
|
});
|
|
const menuList = ref([]);
|
|
const handleOpen = (key, keyPath) => {
|
|
console.log(key, keyPath);
|
|
};
|
|
const handleClose = (key, keyPath) => {
|
|
console.log(key, keyPath);
|
|
};
|
|
const themeConfig = store.getters.themeConfig;
|
|
|
|
// 菜单表存在后端的操作方式
|
|
onMounted(() => {
|
|
// 权限检查
|
|
const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
|
|
const menuTable = generateMenu(routerList, userInfo.role)
|
|
// 获取本地菜单表渲染
|
|
menuList.value = menuTable;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.menu {
|
|
|
|
// width: 200px;
|
|
.logo {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
padding: 0 20px;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 25px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
</style>
|