11.16

<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>