163 lines
3.0 KiB
Vue
163 lines
3.0 KiB
Vue
<script lang="js" setup>
|
|
import { loadDataApi } from "@/request/api";
|
|
import MenuItem from "./menu-item.vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const title = ref("G3后台管理系统");
|
|
const route = useRoute();
|
|
|
|
const router = useRouter();
|
|
|
|
onMounted(() => {
|
|
loadDataApi("s_keyvalue", `b_key='bodycaption'`, ``, ["b_value"]).then((res) => {
|
|
if (res.success) {
|
|
title.value = res.data[0].b_value;
|
|
}
|
|
});
|
|
});
|
|
|
|
const menuList = ref([
|
|
{
|
|
label: "首页",
|
|
path: "/",
|
|
icon: "lucide:house",
|
|
},
|
|
{
|
|
label: "业务管理",
|
|
icon: "lucide:briefcase-business",
|
|
children: [
|
|
{
|
|
label: "海运管理",
|
|
path: "/business",
|
|
},
|
|
{
|
|
label: "装箱统计",
|
|
path: "/business/field",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "系统管理",
|
|
icon: "lucide:settings",
|
|
children: [
|
|
{
|
|
label: "字段配置",
|
|
path: "/system/field",
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
|
|
const selectedKey = computed(() => route.fullPath);
|
|
|
|
function handleMenuChange(val) {
|
|
router.push(val);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="g3-menu">
|
|
<div class="g3-logo">
|
|
<div class="logo-inner">
|
|
<img src="@/assets/logo.png" alt="logo" />
|
|
<div class="title">{{ title }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-menu
|
|
class="el-menu-vertical"
|
|
:collapse-transition="false"
|
|
:default-active="selectedKey"
|
|
@select="handleMenuChange"
|
|
>
|
|
<MenuItem
|
|
v-for="(item, idx) in menuList"
|
|
:key="item.path || idx"
|
|
:item="item"
|
|
:parent-index="idx.toString()"
|
|
/>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.g3-menu {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.g3-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 42px;
|
|
padding: 16px 4px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
|
|
.logo-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
height: 24px;
|
|
width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 10px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #70cfb1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: calc(100% - 90px);
|
|
}
|
|
}
|
|
|
|
.el-menu-vertical {
|
|
overflow-y: auto;
|
|
border: none;
|
|
margin: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
:deep(.el-sub-menu__title) {
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
:deep(.el-menu-item) {
|
|
height: 36px !important;
|
|
line-height: 36px !important;
|
|
border-radius: 6px;
|
|
|
|
&.is-active {
|
|
background-color: var(--el-color-primary-light-8);
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
:deep(.el-sub-menu) {
|
|
.el-sub-menu__title {
|
|
border-radius: 6px;
|
|
}
|
|
.el-menu-item {
|
|
padding-left: 48px !important;
|
|
}
|
|
&.is-active {
|
|
.el-sub-menu__title {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|