|
|
@@ -0,0 +1,129 @@
|
|
|
+<!-- eslint-disable vue/no-deprecated-slot-attribute -->
|
|
|
+<template>
|
|
|
+ <div id="Sidebar">
|
|
|
+ <el-row class="sidebar">
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-menu
|
|
|
+ class="sidebar-el-menu"
|
|
|
+ :default-active="onRoutes"
|
|
|
+ unique-opened
|
|
|
+ router
|
|
|
+ :background-color="styleInfo.backColor"
|
|
|
+ :text-color="styleInfo.textColor"
|
|
|
+ :active-text-color="styleInfo.activeColor"
|
|
|
+ >
|
|
|
+ <template v-for="item in items">
|
|
|
+ <template v-if="item.type === '0'">
|
|
|
+ <el-sub-menu :index="item._id" :key="item._id">
|
|
|
+ <template #title>
|
|
|
+ <i :class="['iconfont', item.icon]"></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ <template v-for="subItem in item.children">
|
|
|
+ <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem._id" :key="subItem._id">
|
|
|
+ <template #title>
|
|
|
+ <i :class="['iconfont', subItem.icon]"></i>
|
|
|
+ <span>{{ subItem.name }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
|
|
|
+ <i :class="['iconfont', threeItem.icon]"></i>
|
|
|
+ <span>{{ threeItem.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-sub-menu>
|
|
|
+ <el-menu-item v-else :index="subItem.path" :key="subItem.path">
|
|
|
+ <i :class="['iconfont', subItem.icon]"></i>
|
|
|
+ <span>{{ subItem.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </el-sub-menu>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-menu-item :index="item.path" :key="item.path">
|
|
|
+ <i :class="['iconfont', item.icon]"></i>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { admin } from '../../../layout/menu'
|
|
|
+import { menuInfo } from '../../../layout/site'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import store from '@/stores/counter'
|
|
|
+import type { Ref } from 'vue'
|
|
|
+import { ref, onMounted, watch } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import { ModuleStore } from '@common/src/stores/system/module' //模块
|
|
|
+import { RoleStore } from '@common/src/stores/system/role' //模块
|
|
|
+import type { IQueryResult } from '@/util/types.util' //
|
|
|
+const module = ModuleStore()
|
|
|
+const role = RoleStore()
|
|
|
+const route = useRoute()
|
|
|
+let onRoutes = route.path
|
|
|
+let user: Ref<any> = ref({})
|
|
|
+const styleInfo: Ref<any> = ref(menuInfo.info)
|
|
|
+let items: Ref<any> = ref(admin)
|
|
|
+onMounted(async () => {
|
|
|
+ user.value = store.state.user
|
|
|
+})
|
|
|
+
|
|
|
+const getMenu = async () => {
|
|
|
+ let name = import.meta.env.VITE_APP_ROUTER
|
|
|
+ const res: IQueryResult = await module.query({ name: name, is_use: '0' })
|
|
|
+ if (res && res.errcode == '0') {
|
|
|
+ if (res.total > 0) {
|
|
|
+ let moduleInfo = res.data[0]
|
|
|
+ let roleInfo: IQueryResult = await role.um()
|
|
|
+ if (roleInfo.errcode == '0') {
|
|
|
+ if (roleInfo.data) {
|
|
|
+ let menus = roleInfo.data[moduleInfo._id]
|
|
|
+ if (menus && menus.length > 0) {
|
|
|
+ items.value = menus
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage({ message: `${res.errmsg}`, type: 'error' })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ user,
|
|
|
+ (newVal) => {
|
|
|
+ if (newVal && newVal._id) {
|
|
|
+ if (newVal && newVal._id) getMenu()
|
|
|
+ else ElMessage({ message: `暂无用户信息，无法获取菜单信息`, type: 'error' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+)
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.sidebar::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+.sidebar-el-menu:not(.el-menu--collapse) {
|
|
|
+ width: 201px;
|
|
|
+}
|
|
|
+.sidebar > ul {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ .one {
|
|
|
+ .iconfont {
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 5px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
