<template>
<el-container>
<el-header class="d-flex align-items-center border-bottom shadow-sm">
<!-- Logo -->
<!-- 顶部导航菜单 -->
<el-menu
default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
background-color="#304156"
text-color="#fff"
active-text-color="#ff0000"
>
<!-- 用户操作菜单 -->
<el-menu-item index="100">
<i class="el-icon-user"></i>
<span>用户操作</span>
</el-menu-item>
<el-menu-item index="100-1" @click="logout">退出</el-menu-item>
</el-menu>
</el-header>
<el-container>
<el-aside width="200px">
<el-menu class="el-menu-vertical-demo"
background-color="#fff"
active-text-color="#ff0000"
default-active="2"
@open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-user"></i>
<span>用户管理</span>
</template>
<el-menu-item index="1-1">
<router-link to="/UserList">用户列表</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/UserManage">权限分配</router-link>
</el-menu-item>
<el-menu-item index="1-3"><router-link to="/UserExam">用户考核</router-link></el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-tickets"></i>
<span>订单管理</span>
</template>
<el-menu-item index="4-1"> <router-link to="/OrderView">订单</router-link></el-menu-item>
</el-submenu>
<el-submenu index="7">
<template slot="title">
<i class="el-icon-office-building"></i>
<span>班组管理</span>
</template>
<el-menu-item index="7-1"> <router-link to="/CrewData">班组交接数据</router-link></el-menu-item>
<el-menu-item index="7-2"> <router-link to="/CrewMonitor">班组监控</router-link></el-menu-item>
<el-menu-item index="7-2"> <router-link to="/CeramicCoreCrew ">陶瓷芯班组管理</router-link></el-menu-item>
<el-menu-item index="7-2"> <router-link to="/WaxCastingCrew">射蜡班组管理</router-link></el-menu-item>
<el-menu-item index="7-2"> <router-link to="/WaxRepairCrew">修蜡班组管理</router-link></el-menu-item>
<el-menu-item index="7-2"> <router-link to="/TreeAssemblyCrew">组树班组管理</router-link></el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-goods"></i>
<span>生产管理</span>
</template>
<el-menu-item index="2-1"> <router-link to="/productview">生产数据采集</router-link></el-menu-item>
<el-menu-item index="2-2"><router-link to="productinfo">产品信息</router-link></el-menu-item>
<el-menu-item index="2-3"><router-link to="ProductReception">产品接收</router-link></el-menu-item>
<el-menu-item index="2-4"><router-link to="ProductionPreparation">生产流程</router-link></el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-s-operation"></i>
<span>模具</span>
</template>
<el-menu-item index="3-1"> <router-link to="/modelview">模具</router-link></el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title">
<i class="el-icon-user"></i>
<span>客源</span>
</template>
<el-menu-item index="5-1"> <router-link to="/CustomerView">选项</router-link></el-menu-item>
</el-submenu>
<el-submenu index="6">
<template slot="title">
<i class="el-icon-data-line"></i>
<span>报表</span>
</template>
<el-menu-item index="6-1"> <router-link to="/dataview">数据报表</router-link></el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main style="height: 100%;">
<!-- 主内容区域高度也设置为100% -->
<router-view></router-view> <!-- 这里将渲染子路由 -->
</el-main>
</el-container>
</el-container>
</el-container>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
logout() {
// 实现退出登录的逻辑
}
}
}
</script>
<style>
.el-header {
background-color: #304156;
text-align: center;
line-height: 60px;
}
</style>