<template>
|
<div class="left">
|
<div class="logoWrap">
|
<img
|
v-if="!isCollapse"
|
class="login-logo"
|
src="../assets/menu-logo.png"
|
/>
|
<img v-if="isCollapse" class="login-logo" src="../assets/logo.png" />
|
</div>
|
<el-menu
|
:default-active="currentMenu"
|
class="el-menu-vertical dayuMenu"
|
@open="handleOpen"
|
@close="handleClose"
|
@select="handleSelect"
|
:collapse="isCollapse"
|
:collapse-transition="false"
|
background-color="#0089FF"
|
text-color="#fff"
|
active-text-color="#fff"
|
unique-opened
|
router
|
>
|
<el-menu-item
|
index="/home"
|
:router="{ name: 'home', query: { text: '首页' } }"
|
>
|
<i class="iconfont icon-shouye"></i>
|
<span slot="title">首页</span>
|
</el-menu-item>
|
|
<el-submenu index="1">
|
<template slot="title">
|
<i class="iconfont icon-shengchanguanli"></i>
|
<span>生产管理</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="/production/order"
|
><i class="el-icon-menu"></i><span>订单管理</span></el-menu-item
|
>
|
<el-menu-item index="/production/schedule"
|
><i class="el-icon-menu"></i><span>排班管理</span></el-menu-item
|
>
|
<el-menu-item index="/production/process"
|
><i class="el-icon-menu"></i><span>生产流程管理</span></el-menu-item
|
>
|
<el-menu-item index="/production/assembly"
|
><i class="el-icon-menu"></i><span>组装任务计划</span></el-menu-item
|
>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="2">
|
<template slot="title">
|
<i class="iconfont icon-weixiu"></i>
|
<span>安装运维</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="/production/installation"
|
><i class="el-icon-menu"></i><span>安装运维任务计划</span></el-menu-item
|
>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="3">
|
<template slot="title">
|
<i class="iconfont icon-pingtaixinxi"></i>
|
<span>平台信息</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="/platform/productionLine"
|
><i class="el-icon-menu"></i><span>生产线管理</span></el-menu-item
|
>
|
<el-menu-item index="/platform/workstation"
|
><i class="el-icon-menu"></i><span>工站管理</span></el-menu-item
|
>
|
<el-menu-item index="/platform/product"
|
><i class="el-icon-menu"></i><span>产品管理</span></el-menu-item
|
>
|
<el-menu-item index="/platform/qualityInspection"
|
><i class="el-icon-menu"></i><span>品质检查项目</span></el-menu-item
|
>
|
<el-menu-item index="/platform/TestCheck"
|
><i class="el-icon-menu"></i><span>测试检查项目</span></el-menu-item
|
>
|
<el-menu-item index="/platform/nonconformity"
|
><i class="el-icon-menu"></i
|
><span>生产不合格原因</span></el-menu-item
|
>
|
<el-menu-item index="/platform/scrap"
|
><i class="el-icon-menu"></i><span>设备报废原因</span></el-menu-item
|
>
|
<el-menu-item index="/platform/encoding"
|
><i class="el-icon-menu"></i><span>编码管理</span></el-menu-item
|
>
|
</el-menu-item-group>
|
</el-submenu>
|
<el-submenu index="4">
|
<template slot="title">
|
<i class="iconfont icon-xitongguanli"></i>
|
<span>系统管理</span>
|
</template>
|
<el-menu-item-group>
|
<el-menu-item index="/system/role"
|
><i class="el-icon-menu"></i><span>角色管理</span></el-menu-item
|
>
|
<el-menu-item index="/system/user"
|
><i class="el-icon-menu"></i><span>用户管理</span></el-menu-item
|
>
|
<el-menu-item index="/system/log"
|
><i class="el-icon-menu"></i><span>系统日志</span></el-menu-item
|
>
|
</el-menu-item-group>
|
</el-submenu>
|
|
<el-menu-item
|
index="/autoTest"
|
:router="{ name: 'autoTest', query: { text: '自动化测试' } }"
|
>
|
<i class="iconfont icon-zidonghuaceshi"></i>
|
<span slot="title">自动化测试</span>
|
</el-menu-item>
|
</el-menu>
|
<div class="blank"></div>
|
</div>
|
</template>
|
|
<script>
|
import util from "../util";
|
export default {
|
name: "Left",
|
props: {
|
params: String,
|
},
|
data() {
|
return {
|
isCollapse: false,
|
currentMenu: null,
|
};
|
},
|
mounted() {
|
var that = this;
|
util.$on("toggleIsCollapse", function(val) {
|
that.isCollapse = val;
|
});
|
},
|
watch: {
|
$route(e) {
|
this.currentMenu = e.path; // e里面的是当前路由的信息
|
},
|
},
|
computed: {},
|
methods: {
|
handleOpen(key, keyPath) {
|
// console.log(key, keyPath);
|
},
|
handleClose(key, keyPath) {
|
// console.log(key, keyPath);
|
},
|
handleSelect(key, keyPath) {
|
// console.log(key, keyPath);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.el-menu-vertical:not(.el-menu--collapse) {
|
width: 207px;
|
min-height: 400px;
|
}
|
.left {
|
width: 100%;
|
height: 100vh;
|
overflow: auto;
|
background-color: #0089ff;
|
display: flex;
|
flex-direction: column;
|
.logoWrap {
|
height: 56px;
|
background-color: #fff;
|
border-bottom: solid 1px #ccc;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.blank {
|
flex-grow: 1;
|
border-right: solid 1px #e6e6e6;
|
}
|
.dayuMenu {
|
.is-active {
|
background-color: rgb(0, 110, 204) !important;
|
}
|
.iconfont {
|
margin-right: 10px;
|
color: #fff;
|
}
|
.el-submenu /deep/ .el-submenu__icon-arrow {
|
color: #fff;
|
}
|
.el-icon-menu {
|
color: #fff;
|
font-size: 8px;
|
}
|
}
|
}
|
</style>
|
