123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <template>
- <div class="nav">
- <!-- <el-button v-if="!isCollapse" icon="el-icon-arrow-left" circle @click="open"></el-button> -->
- <!-- <el-button v-if="isCollapse" icon="el-icon-arrow-right" circle @click="open"></el-button> -->
- <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
- <el-radio-button :label="false">展开</el-radio-button>
- <el-radio-button :label="true">收起</el-radio-button>
- </el-radio-group> -->
- <el-menu
- default-active="1-4-1"
- :collapse="isCollapse"
- class="el-menu-vertical-demo"
- background-color="#545c64"
- text-color="#fff"
- active-text-color="#ffd04b"
- :router="true"
- @select="handleSelect"
- >
- <el-menu-item index="/manage/query">
- <i class="el-icon-search"></i>
- <span slot="title">经营数据查询</span>
- </el-menu-item>
- <el-menu-item index="/manage/cost">
- <i style="font-style:normal">成本</i>
- <span slot="title">经营数据成本</span>
- </el-menu-item>
- <el-menu-item index="/manage/index">
- <i style="font-style:normal">收入</i>
- <span slot="title">经营数据收入</span>
- </el-menu-item>
- <el-menu-item index="/team/index">
- <i style="font-style:normal">部门</i>
- <span slot="title">部门管理</span>
- </el-menu-item>
- <el-menu-item index="/project/index">
- <i style="font-style:normal">项目</i>
- <span slot="title">项目管理</span>
- </el-menu-item>
- <el-menu-item index="/product/index">
- <i style="font-style:normal">产品</i>
- <span slot="title">产品管理</span>
- </el-menu-item>
- <el-menu-item index="/costType/index">
- <i style="font-style:normal">类型</i>
- <span slot="title">成本类型管理</span>
- </el-menu-item>
- <!--
- <el-menu-item index="/costTeam/index">
- <span slot="title">成本部门/单位/人管理</span>
- </el-menu-item>
- -->
- </el-menu>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- isCollapse: true
- };
- },
- methods: {
- open() {
- this.isCollapse = !this.isCollapse;
- },
- handleSelect(key, keyPath) {
- console.log(key, keyPath);
- switch(key){
- case '/manage/query':
- Vue.prototype.$navTitle = '经营数据查询'
- break;
- }
- }
- }
- };
- </script>
- <style>
- .nav {
- transition: width 0.28s;
- width: 180px !important;
- height: 100%;
- position: fixed;
- font-size: 0px;
- top: 0;
- bottom: 0;
- left: 0;
- z-index: 1001;
- overflow: hidden;
- }
- .el-menu {
- height: 100%;
- }
- </style>
|