<script setup>
|
import {computed, ref} from "vue";
|
import usePageMenuStore from "@/store/usePageMenuStore";
|
import {
|
Menu as IconMenu,
|
Setting,
|
} from '@element-plus/icons-vue'
|
const pageMenuStore = usePageMenuStore();
|
|
const isCollapse = computed(()=>{
|
return pageMenuStore.isCollapse;
|
});
|
|
const menuActive = ref("/");
|
const menuData = ref([]);
|
menuData.value = [
|
{
|
title: "首页",
|
path: "/",
|
},
|
{
|
title: "客户管理",
|
path: "/customer",
|
children: [
|
{
|
title: "客户档案",
|
path: "/customer/customer"
|
},
|
{
|
title: "拜访记录",
|
path: "/customer/visit"
|
},
|
]
|
},
|
{
|
title: "修养预约",
|
path: "business",
|
children: [
|
{
|
title: "预约信息",
|
path: "/business/appointment"
|
},
|
{
|
title: "服务项",
|
path: "/business/service"
|
},
|
{
|
title: "结算单",
|
path: "/business/statement"
|
},
|
]
|
},
|
{
|
title: "流程管理",
|
path: "/flow",
|
children: [
|
{
|
title: "审核流程定义",
|
path: "/flow/definition"
|
},
|
],
|
}
|
];
|
|
const handleOpen = ()=>{};
|
const handleClose = ()=>{};
|
</script>
|
|
<template>
|
<div class="menu-wrapper">
|
<el-menu
|
:router="true"
|
text-color="#4ba1fa"
|
active-text-color="#00fefe"
|
background-color="#021a64"
|
:default-active="menuActive"
|
:unique-opened="true"
|
class="el-menu-vertical"
|
:collapse="isCollapse"
|
@open="handleOpen"
|
@close="handleClose">
|
<template v-for="menu in menuData" :key="menu.path">
|
<el-sub-menu :index="menu.path" v-if="menu.children">
|
<template #title>
|
<el-icon><icon-menu /></el-icon>
|
<span>{{menu.title}}</span>
|
</template>
|
<el-menu-item
|
v-for="children in menu.children"
|
:key="children.path"
|
:index="children.path">{{children.title}}</el-menu-item>
|
</el-sub-menu>
|
<el-menu-item :index="menu.path" v-else>
|
<el-icon><icon-menu /></el-icon>
|
<template #title>{{menu.title}}</template>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.menu-wrapper {
|
height: 100%;
|
overflow-y: auto;
|
background-color: #021a64;
|
&.min-width {
|
min-width: 240px;
|
}
|
}
|
.el-menu-vertical {
|
border-right: 0;
|
.el-menu-item.is-active{
|
background-color: rgb(4, 32, 119);
|
}
|
}
|
|
.el-menu-vertical:not(.el-menu--collapse) {
|
width: 200px;
|
min-height: 400px;
|
}
|
</style>
|
