<template>
|
<div class="menu" :style="{ width: isCollapse ? '60px' : '195px' }">
|
<div class="menu-control" @click="menuStore.setCollapse()">
|
<el-icon class="collapse-icon">
|
<component :is="isCollapse ? 'expand' : 'fold'"></component>
|
</el-icon>
|
</div>
|
<el-scrollbar wrapClass="scrollbar-wrapper" :style="{'height': '78vh !important'}">
|
<el-menu
|
mode="vertical"
|
:collapse="isCollapse"
|
:default-active="activeIndex"
|
background-color="#374768"
|
text-color="#fff"
|
active-text-color="#90a3ff"
|
class="el-menu-vertical-demo"
|
router
|
>
|
<sidebar-item
|
v-for="menu in menus"
|
:item="menu"
|
:key="menu.id"
|
></sidebar-item>
|
</el-menu>
|
</el-scrollbar>
|
<!-- :unique-opened="false" <div class="menu-control" @click="menuStore.setCollapse()">
|
<el-icon class="collapse-icon">
|
<component :is="isCollapse ? 'expand' : 'fold'"></component>
|
</el-icon>
|
</div>
|
:show-timeout="200" -->
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
// import { menusList } from './config.ts'
|
import SidebarItem from './SidebarItem.vue'
|
import { formatTree } from '@/utils/common'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import { getMenus,getPerms } from '@/api/userInfo'
|
import { useCommonInfo } from '@/stores/modules/common' // 状态管理器
|
import { useMenu } from '@/stores/modules/menu';
|
import {usePermissionStoreHook} from '@/stores/modules/permission'
|
const commonStore = useCommonInfo()
|
const menuStore = useMenu();
|
// 菜单列表数组
|
const activeIndex = ref<string>()
|
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
|
interface Props {
|
menuState: boolean
|
}
|
|
const setCurrentActive = () => {
|
activeIndex.value = commonStore.getActiveMenu
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
menuState: false,
|
})
|
|
const isCollapse = computed((): boolean => menuStore.isCollapse);
|
// 菜单列表数组
|
let menus: Menu[] = reactive([{
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2a',
|
icon: 'local-device',
|
name: '积分管理',
|
url: '/points',
|
parentId: null,
|
sort: '11',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536629fb0",
|
"icon": "",
|
"name": "积分设置",
|
"url": "/points/ruleList",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "1"
|
},
|
{
|
"id": "14a70ce4-7ce0-40d4-8480-2e590f146002",
|
"icon": "",
|
"name": "个人积分",
|
"url": "/points/personal",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "3"
|
},
|
{
|
"id": "21522938-38d3-404e-afea-387c178505ar",
|
"icon": "",
|
"name": "单位积分",
|
"url": "/points/unit",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "4"
|
}]
|
},{
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2b',
|
icon: 'local-device',
|
name: '交易管理',
|
url: '/trade',
|
parentId: null,
|
sort: '12',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536629fb2",
|
"icon": "",
|
"name": "买家中心",
|
"url": "/trade/buyer",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2b",
|
"sort": "1"
|
},
|
{
|
"id": "21522938-38d3-404e-afea-388c178505a4",
|
"icon": "",
|
"name": "卖家中心",
|
"url": "/trade/seller",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2b",
|
"sort": "3"
|
}]
|
},{
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2c',
|
icon: 'local-device',
|
name: '审核管理',
|
url: '/approval',
|
parentId: null,
|
sort: '13',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536729fb2",
|
"icon": "",
|
"name": "交易审核",
|
"url": "/approval/tradeList",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2c",
|
"sort": "1"
|
}]
|
},{
|
id: '266e3ff1-ca98-4946-8975-7526ef83cd5c',
|
icon: 'local-device',
|
name: '定价管理',
|
url: '/producePrice',
|
parentId: null,
|
sort: '13',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe516729fa2",
|
"icon": "",
|
"name": "定价管理",
|
"url": "/producePrice/list",
|
"parentId": "266e3ff1-ca98-4946-8975-7526ef83cd5c",
|
"sort": "1"
|
},{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe546729da2",
|
"icon": "",
|
"name": "产品订单",
|
"url": "/producePrice/order",
|
"parentId": "266e3ff1-ca98-4946-8975-7526ef83cd5c",
|
"sort": "2"
|
},{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536723fa2",
|
"icon": "",
|
"name": "查看报价",
|
"url": "/producePrice/priceViewer",
|
"parentId": "266e3ff1-ca98-4946-8975-7526ef83cd5c",
|
"sort": "3"
|
}]
|
},{
|
id: '266e3ff1-ca98-4946-8975-7526ef83cd5c',
|
icon: 'local-device',
|
name: '产品管理',
|
url: '/productPrice',
|
parentId: null,
|
sort: '13',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe516729fa2",
|
"icon": "",
|
"name": "产品列表",
|
"url": "/product/list",
|
"parentId": "266e3ff1-ca98-4946-8975-7526ef83cd5c",
|
"sort": "1"
|
}]
|
}])
|
|
// 获取菜单列表
|
const getMenuList = () => {
|
// 判断缓存中是否有菜单列表，如果有则从缓存中获取，若没有则请求接口获取
|
// if (userStore.menuList && userStore.menuList.length != 0) {
|
// menus.push(...formatTree(userStore.menuList))
|
// return
|
// }
|
|
getMenus().then((res) => {
|
|
if (res.code == 200) {
|
// menus.push({
|
// id: '266e3ff1-ca98-4946-8975-8526ef83cd2b',
|
// icon: 'local-device',
|
// name: '个人工作台',
|
// url: '/home',
|
// parentId: null,
|
// sort: '0',
|
// children: [],
|
// })
|
menus.push(...formatTree(res.data.sysMenusList))
|
menus.push({
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2a',
|
icon: 'local-device',
|
name: '积分管理',
|
url: '/points',
|
parentId: null,
|
sort: '11',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536629fb1",
|
"icon": "",
|
"name": "积分设置",
|
"url": "/points/settings",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "1"
|
},
|
{
|
"id": "14a70ce4-7ce0-40d4-8480-2e590f146002",
|
"icon": "",
|
"name": "个人积分",
|
"url": "/points/personal",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "2"
|
},
|
{
|
"id": "21522938-38d3-404e-afea-387c178505ar",
|
"icon": "",
|
"name": "单位积分",
|
"url": "/points/unit",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "3"
|
}]
|
})
|
// 将整合后的数据存储到store中
|
userStore.updateMenuList(menus)
|
}
|
}).catch((error) => {
|
console.warn('获取菜单列表失败:', error)
|
// 如果获取菜单失败，使用默认菜单
|
const defaultMenus = [
|
{
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2b',
|
icon: 'local-device',
|
name: '个人工作台',
|
url: '/home',
|
parentId: null,
|
sort: '0',
|
children: [],
|
},
|
{
|
id: '266e3ff1-ca98-4946-8975-8526ef83cd2a',
|
icon: 'local-device',
|
name: '积分管理',
|
url: '/points',
|
parentId: null,
|
sort: '11',
|
children: [
|
{
|
"id": "4fa90aab-2e3c-4bc4-abbf-fbe536629fb1",
|
"icon": "",
|
"name": "积分设置",
|
"url": "/points/settings",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "1"
|
},
|
{
|
"id": "14a70ce4-7ce0-40d4-8480-2e590f146002",
|
"icon": "",
|
"name": "个人积分",
|
"url": "/points/personal",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "2"
|
},
|
{
|
"id": "21522938-38d3-404e-afea-387c178505ar",
|
"icon": "",
|
"name": "单位积分",
|
"url": "/points/unit",
|
"parentId": "266e3ff1-ca98-4946-8975-8526ef83cd2a",
|
"sort": "3"
|
}
|
]
|
}
|
]
|
userStore.updateMenuList(defaultMenus)
|
})
|
}
|
const getPermsList = () => {
|
getPerms().then((res) => {
|
if (res.code == 200) {
|
// 将整合后的数据存储到store中
|
usePermissionStoreHook().setPerms(res.data.sysPermsList)
|
}
|
}).catch((error) => {
|
console.warn('获取权限列表失败:', error)
|
// 如果获取权限失败，使用空权限列表
|
usePermissionStoreHook().setPerms([])
|
})
|
}
|
getMenuList()
|
getPermsList()
|
onMounted(() => {
|
// 暂定为在此处进行菜单列表的获取
|
// getMenuList()
|
})
|
|
watchEffect(() => {
|
setCurrentActive()
|
})
|
</script>
|
<style lang="scss" scoped>
|
:deep(.el-menu) {
|
border: none;
|
width: 100% !important;
|
// min-height: 500px !important;
|
}
|
|
// .el-menu-vertical-demo:not(.el-menu--collapse) {
|
// width: 220px;
|
// min-height: 400px;
|
// height: 93vh;
|
// }
|
|
.hideSidebar {
|
.sidebar-container {
|
width: 36px !important;
|
}
|
|
.main-container {
|
margin-left: 36px;
|
}
|
|
.submenu-title-noDropdown {
|
padding-left: 10px !important;
|
position: relative;
|
|
.el-tooltip {
|
padding: 0 10px !important;
|
}
|
}
|
|
.el-submenu {
|
& > .el-submenu__title {
|
padding-left: 10px !important;
|
|
& > span {
|
height: 0;
|
width: 0;
|
overflow: hidden;
|
visibility: hidden;
|
display: inline-block;
|
}
|
|
.el-submenu__icon-arrow {
|
display: none;
|
}
|
}
|
}
|
}
|
|
::deep ::-webkit-scrollbar-track-piece {
|
background: #d3dce6;
|
}
|
|
::deep ::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
::deep ::-webkit-scrollbar-thumb {
|
background: #99a9bf;
|
border-radius: 20px;
|
}
|
.menu {
|
position: relative;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-height: 500px !important;
|
background-color: #fff;
|
transition: all 0.3s ease;
|
overflow: hidden;
|
overflow-y: auto;
|
border-top: 1px solid #566f9c;
|
}
|
.menu-control {
|
margin: 10px 10px 8px 5px;
|
display: flex;
|
justify-content: center;
|
font-size: 20px;
|
cursor: pointer;
|
color: #fff;
|
}
|
</style>
|
