1 <template> 2 <!-- 菜单栏 --> 3 <!-- default-openeds参数为默认展开：default-openeds="['1', '2']" --> 4 <el-menu :default-openeds="['']" 5 style="min-height: 100%; overflow-x: hidden; white-space: nowrap;" 6 background-color="#545c64" 7 text-color="#fff" 8 active-text-color="#ffd04b" 9 :collapse-transition="false" 10 :collapse="isCollapse" 11 default-active="/home" 12 router 13 > 14 <!-- background-color="rgb(48, 65, 86)"--> 15 16 <!-- 标题部分 --> 17 <div style="height: 60px; line-height: 60px; text-align: center"> 18 <!-- 左上角Logo和标题 --> 19 <img src="../resources/MyBatis-Plus.jpg" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px"> 20 <b style="color: white" v-show="logoTextShow">进销存管理系统</b> 21 </div> 22 23 <!-- 首页 --> 24 <el-menu-item index="/home"> 25 <i class="el-icon-s-home"></i> 26 <span slot="title">首页</span> 27 </el-menu-item> 28 29 <!-- 用户管理 --> 30 <el-menu-item index="/user"> 31 <i class="el-icon-user-solid"></i> 32 用户管理 33 </el-menu-item> 34 35 <!-- 第二大模块（示例） --> 36 <el-menu-item index="/customer"> 37 <i class="el-icon-s-custom"></i> 38 客户管理 39 </el-menu-item> 40 41 <el-submenu index="2"> 42 <template slot="title"> 43 <i class="el-icon-s-finance"></i> 44 <span slot="title">销售管理</span> 45 </template> 46 <el-menu-item index="/order"><i class="el-icon-s-marketing"></i>订单管理</el-menu-item> 47 </el-submenu> 48 49 <el-menu-item index="/supplier"> 50 <i class="el-icon-s-shop"></i> 51 供应商管理 52 </el-menu-item> 53 54 <el-menu-item index="/commodity"> 55 <i class="el-icon-s-goods"></i> 56 商品管理 57 </el-menu-item> 58 59 <el-submenu index="3"> 60 <template slot="title"> 61 <i class="el-icon-office-building"></i> 62 <span slot="title">仓库管理</span> 63 </template> 64 <el-menu-item index="/inventory"><i class="el-icon-s-release"></i>库存管理</el-menu-item> 65 <el-menu-item index="/inventory"><i class="el-icon-sell"></i>入库管理</el-menu-item> 66 <el-menu-item index="/inventory"><i class="el-icon-sold-out"></i>出库管理</el-menu-item> 67 </el-submenu> 68 69 <el-submenu index="4"> 70 <template slot="title"> 71 <i class="el-icon-coin"></i> 72 <span slot="title">财务管理</span> 73 </template> 74 <el-menu-item index="/operating_state"><i class="el-icon-pie-chart"></i>图表分析</el-menu-item> 75 </el-submenu> 76 77 </el-menu> 78 79 </template> 80 81 <script> 82 83 export default { 84 name: "Aside", 85 props: { 86 isCollapse: Boolean, 87 logoTextShow: Boolean 88 }, 89 methods: { 90 handleSelect(index) { 91 }, 92 } 93 } 94 </script> 95 96 <style scoped> 97 98 </style>