gin
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import Logo from "./logo.vue";
|
|
import { useRoute } from "vue-router";
|
|
import SidebarItem from "./sidebarItem.vue";
|
|
import leftCollapse from "./leftCollapse.vue";
|
|
import { useNav } from "@/layout/hooks/useNav";
|
|
import { isAllEmpty } from "@pureadmin/utils";
|
|
import { findRouteByPath, getParentPaths } from "@/router/utils";
|
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
|
import { ref, computed, watch, onMounted } from "vue";
|
|
|
|
const route = useRoute();
|
|
const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
|
|
|
|
const subMenuData = ref([]);
|
|
|
|
const menuData = computed(() => {
|
|
return pureApp.layout === "mix" && device.value !== "mobile"
|
|
? subMenuData.value
|
|
: usePermissionStoreHook().wholeMenus;
|
|
});
|
|
|
|
const loading = computed(() =>
|
|
pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
|
|
);
|
|
|
|
const defaultActive = computed(() =>
|
|
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
|
|
);
|
|
|
|
function getSubMenuData() {
|
|
const path = defaultActive.value;
|
|
subMenuData.value = [];
|
|
const parentPathArr = getParentPaths(
|
|
path,
|
|
usePermissionStoreHook().wholeMenus
|
|
);
|
|
const parentRoute = findRouteByPath(
|
|
parentPathArr[0] || path,
|
|
usePermissionStoreHook().wholeMenus
|
|
);
|
|
if (!parentRoute?.children) return;
|
|
subMenuData.value = parentRoute.children;
|
|
}
|
|
|
|
watch(
|
|
() => [route.path, usePermissionStoreHook().wholeMenus],
|
|
() => {
|
|
if (route.path.includes("/redirect")) return;
|
|
getSubMenuData();
|
|
menuSelect(route.path);
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
getSubMenuData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-loading="loading" :class="['sidebar-container', 'has-logo']">
|
|
<Logo :collapse="isCollapse" />
|
|
<el-scrollbar
|
|
wrap-class="scrollbar-wrapper"
|
|
:class="[device === 'mobile' ? 'mobile' : 'pc']"
|
|
>
|
|
<el-menu
|
|
router
|
|
unique-opened
|
|
mode="vertical"
|
|
class="outer-most select-none"
|
|
:collapse="isCollapse"
|
|
:default-active="defaultActive"
|
|
:collapse-transition="false"
|
|
>
|
|
<sidebar-item
|
|
v-for="routes in menuData"
|
|
:key="routes.path"
|
|
:item="routes"
|
|
:base-path="routes.path"
|
|
class="outer-most select-none"
|
|
/>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<leftCollapse
|
|
v-if="device !== 'mobile'"
|
|
:is-active="pureApp.sidebar.opened"
|
|
@toggleClick="toggleSideBar"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.el-loading-mask) {
|
|
opacity: 0.45;
|
|
}
|
|
</style>
|