- <template>
- <div
- :class="{ 'has-logo': showLogo }"
- :style="{
- backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
- }"
- >
- <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
- <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
- <el-menu
- :default-active="activeMenu"
- :collapse="isCollapse"
- :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
- :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
- :unique-opened="true"
- :active-text-color="theme"
- :collapse-transition="false"
- mode="vertical"
- >
- <sidebar-item v-for="(item, index) in sidebarRouters" :key="item.path + index" :item="item" :base-path="item.path" />
- </el-menu>
- </el-scrollbar>
- </div>
- </template>
- <script setup>
- import Logo from './Logo';
- import SidebarItem from './SidebarItem';
- import variables from '@/assets/styles/variables.module.scss';
- import useAppStore from '@/store/modules/app';
- import useSettingsStore from '@/store/modules/settings';
- import usePermissionStore from '@/store/modules/permission';
- import useUserStore from '@/store/modules/user';
- import bus from '@/utils/mitt';
- const route = useRoute();
- const appStore = useAppStore();
- const settingsStore = useSettingsStore();
- const permissionStore = usePermissionStore();
- const router = useRouter();
- const pinias = useUserStore();
- const sidebarRouters = ref([]);
- const { proxy } = getCurrentInstance();
- const showLogo = computed(() => settingsStore.sidebarLogo);
- const sideTheme = computed(() => settingsStore.sideTheme);
- const theme = computed(() => settingsStore.theme);
- const isCollapse = computed(() => !appStore.sidebar.opened);
- const activeMenu = computed(() => {
- const { meta, path } = route;
- // if set path, the sidebar will highlight the path you set
- if (meta.activeMenu) {
- return meta.activeMenu;
- }
- return path;
- });
- // 菜单切换设置
- function setMenuData() {
- let key = localStorage.getItem('routerPartKFC');
- let routeArr = JSON.parse(JSON.stringify(permissionStore.sidebarRouters));
- routeArr = routeArr.filter(item => item.path != '/index');
- let paths = '';
- let newArr = [];
- routeArr.map(item => {
- if (key == item.name) {
- newArr.push(item);
- }
- });
- // 默认打开子系统的第一个页面
- if (localStorage.getItem('fromDoorKFC') == 'chengguanweiScreen') {
- console.log(newArr, 'newArr');
- if (newArr.length == 0) {
- proxy.$modal.msgError('暂无权限查看该系统');
- return;
- }
- if (!!!newArr[0].children[0].children) {
- // 二级
- paths = newArr[0].path + '/' + newArr[0].children[0].path;
- } else if (!!!newArr[0].children[0].children[0].children) {
- // 三级
- paths = newArr[0].path + '/' + newArr[0].children[0].path + '/' + newArr[0].children[0].children[0].path;
- } else {
- // 四级
- paths =
- newArr[0].path +
- '/' +
- newArr[0].children[0].path +
- '/' +
- newArr[0].children[0].children[0].path +
- '/' +
- newArr[0].children[0].children[0].children[0].path;
- }
- } else {
- paths = route.path; //当前的路由
- }
- // console.log('路由跳转位置--', paths);
- router.push(paths); //重定向打开路由
- sidebarRouters.value = newArr; //添加子菜单
- // 海绵综合一张图,不显示左侧菜单列表
- setTimeout(() => {
- if (paths == '/sponeScreen/HaiMianScreen') {
- bus.emit('HaiMianScreenMenu', true);
- } else {
- bus.emit('HaiMianScreenMenu', false);
- }
- });
- }
- onMounted(() => {
- setMenuData();
- bus.on('selfMenuXG', e => {
- setMenuData();
- });
- });
- onBeforeUnmount(() => {
- bus.off('selfMenuXG');
- });
- </script>