|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="menu" :class="{collapse: menuData.collapse}"> | 
 |  |  |   <div class="menu" :class="{ collapse: menuData.collapse }"> | 
 |  |  |     <scrollbar> | 
 |  |  |       <el-menu | 
 |  |  |         ref="menu" | 
 |  |  |         :default-active="activeIndex" | 
 |  |  |         text-color="#fff" | 
 |  |  |         active-text-color="#fff" | 
 |  |  |         text-color="#333333" | 
 |  |  |         active-text-color="#207FF7" | 
 |  |  |         :collapse="menuData.collapse" | 
 |  |  |         :default-openeds="defaultOpeneds" | 
 |  |  |         :collapse-transition="false" | 
 |  |  |         unique-opened | 
 |  |  |         @select="handleSelect" | 
 |  |  |       > | 
 |  |  |         <MenuItems v-for="menu in menuData.list" :key="menu.index" :menu="menu" :is-root-menu="true"/> | 
 |  |  |         <MenuItems | 
 |  |  |           v-for="menu in menuData.list" | 
 |  |  |           :key="menu.index" | 
 |  |  |           :menu="menu" | 
 |  |  |           :is-root-menu="true" | 
 |  |  |         /> | 
 |  |  |       </el-menu> | 
 |  |  |     </scrollbar> | 
 |  |  |   </div> | 
 |  |  | 
 |  |  |   computed: { | 
 |  |  |     ...mapState(['menuData']), | 
 |  |  |     // 选中的菜单index | 
 |  |  |     activeIndex () { | 
 |  |  |     activeIndex() { | 
 |  |  |       let path = this.$route.path | 
 |  |  |       if (path.endsWith('/')) { | 
 |  |  |         path = path.substring(0, path.length - 1) | 
 |  |  | 
 |  |  |       return menuConfig.index | 
 |  |  |     }, | 
 |  |  |     // 默认展开的菜单index | 
 |  |  |     defaultOpeneds () { | 
 |  |  |     defaultOpeneds() { | 
 |  |  |       // return this.menuData.list.map(menu => menu.index) | 
 |  |  |  | 
 |  |  |       return [this.menuData.list[0].index] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   watch: { | 
 |  |  |    /* $route (to, from) { | 
 |  |  |       var that =this | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         setTimeout(function(){ that.computeTableHeight()},1000) | 
 |  |  |       }) | 
 |  |  |     }*/ | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     // 处理菜单选中 | 
 |  |  |     handleSelect (menuIndex) { | 
 |  |  |     handleSelect(menuIndex) { | 
 |  |  |       const menuConfig = this.__getMenuConfig(menuIndex, 'index', this.menuData.list) | 
 |  |  |       // 找不到页面 | 
 |  |  |       try { | 
 |  |  |           require('@/views' + menuConfig.url) | 
 |  |  |         require('@/views' + menuConfig.url) | 
 |  |  |       } catch (e) { | 
 |  |  |         this.$tip.error('未找到页面文件@/views' + menuConfig.url + '.vue,请检查菜单路径是否正确') | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       // 点击当前菜单不做处理 | 
 |  |  |       if (menuConfig.url === this.$route.path && (menuConfig.params ==null || menuConfig.params==undefined || menuConfig.params=='' ||  menuConfig.params === this.$route.query.param)) { | 
 |  |  |       if (menuConfig.url === this.$route.path && (menuConfig.params == null || menuConfig.params == undefined || menuConfig.params == '' || menuConfig.params === this.$route.query.param)) { | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if (menuConfig.url == null || menuConfig.url.trim().length === 0) { | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       if(menuConfig.params!=null && menuConfig.params!=''){ | 
 |  |  |         this.$router.push({path:menuConfig.url,query:{index:menuConfig.index,param:menuConfig.params}}) | 
 |  |  |       }else{ | 
 |  |  |         this.$router.push(menuConfig.url) | 
 |  |  |       if (menuConfig.params != null && menuConfig.params != '') { | 
 |  |  |         // this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params } }) | 
 |  |  |       } else { | 
 |  |  |         // this.$router.push(menuConfig.url) | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       this.$router.push({ path: menuConfig.url, query: { index: menuConfig.index, param: menuConfig.params, time: (Math.random().toString()) } }) | 
 |  |  |       this.$store.commit('pushtags', menuConfig) | 
 |  |  |     }, | 
 |  |  |     // 获取菜单配置 | 
 |  |  |     __getMenuConfig (value, key, menus) { | 
 |  |  |     __getMenuConfig(value, key, menus) { | 
 |  |  |       for (const menu of menus) { | 
 |  |  |         if (menu[key] === value) { | 
 |  |  |           return menu | 
 |  |  | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |       return null | 
 |  |  |     }, | 
 |  |  |     computeTableHeight () { | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         const height = window.innerHeight | 
 |  |  |         // console.log('main_app========================:'+height) | 
 |  |  |         const height13 = this.getEleHeghtByClassName('common-header',0) | 
 |  |  |         const height5 = document.getElementsByTagName( 'thead') && document.getElementsByTagName('thead')[0] ? document.getElementsByTagName('thead')[0].clientHeight : 0 | 
 |  |  |         if (document.getElementsByClassName('main_app') && document.getElementsByClassName('main_app')[0]) { | 
 |  |  |           // console.log('main_app========================') | 
 |  |  |           // alert(height) | 
 |  |  |           const height3 = this.getEleHeghtByClassName('main-header',0) | 
 |  |  |           const height4 = this.getEleHeghtByClassName('table-pagination',0) | 
 |  |  |           const height2 = this.getEleHeghtByClassName('toolbar',0) | 
 |  |  |           const height6 = this.getEleHeghtByClassName('doumee-filter',0,16) | 
 |  |  |           const height7 = this.getEleHeghtByClassName('pt16',0,0) | 
 |  |  |           const height9 = this.getEleHeghtByClassName('static_wrap',0) | 
 |  |  |           const height10 = this.getEleHeghtByClassName('query_btns',0) | 
 |  |  |           const height11 = this.getEleHeghtByClassName('el-tabs-ele',0) | 
 |  |  |           const height12 = this.getEleHeghtByClassName('platgroup_tabs',0) | 
 |  |  |           this.$router.app.$store.commit('setTableHeightNew', height - height13- height3 - height5 - height6 - height2 - height7 - height4 - height9 - height10 - height11 - height12) | 
 |  |  |           // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew) | 
 |  |  |         } else { | 
 |  |  |           // console.log('tableLayout========================') | 
 |  |  |           const height1 = this.getEleHeghtByClassName('table-search-form', 40,16) | 
 |  |  |           const height3 = this.getEleHeghtByClassName('main-header', 0) | 
 |  |  |           const height4 = this.getEleHeghtByClassName('table-pagination', 0) | 
 |  |  |           const height2 = this.getEleHeghtByClassName('toolbar', 0) | 
 |  |  |           // console.log('defualtlength', document.getElementsByClassName('table-search-form').length) | 
 |  |  |           this.$router.app.$store.commit('setTableHeightNew', height - height4 - height3 - height2 - height1 - height5 - height13) | 
 |  |  |           // console.log('gableHeightNew', this.$router.app.$store.state.tableHeightNew) | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     getEleHeghtByClassName (name, dv,margin) { | 
 |  |  |       if ((document.getElementsByClassName(name) && document.getElementsByClassName(name)[0])) { | 
 |  |  |         let t = 0 | 
 |  |  |         document.getElementsByClassName(name).forEach(e => { | 
 |  |  |           // console.log(name+'========================' + t + ':' + e.clientHeight) | 
 |  |  |           t++ | 
 |  |  |         }) | 
 |  |  |         return document.getElementsByClassName(name)[document.getElementsByClassName(name).length - 1].clientHeight+(margin||0) | 
 |  |  |       } | 
 |  |  |       return dv || 0 | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | 
 |  |  | .el-menu { | 
 |  |  |   border-right: 0 !important; | 
 |  |  |   user-select: none; | 
 |  |  |   background: $primary-color !important; | 
 |  |  |   background: #fff !important; | 
 |  |  |   .el-menu-item { | 
 |  |  |     background: $primary-color; | 
 |  |  |     background: #fff; | 
 |  |  |     height: 48px; | 
 |  |  |     line-height: 48px; | 
 |  |  |     // 选中状态 | 
 |  |  |     &.is-active { | 
 |  |  |       background: $primary-color-sel !important; | 
 |  |  |       background: #eff5fe !important; | 
 |  |  |     } | 
 |  |  |     // 悬浮 | 
 |  |  |     &:hover { | 
 |  |  |       background-color: $primary-color-hover; | 
 |  |  |       background-color: #eff5fe; | 
 |  |  |     } | 
 |  |  |     &:focus { | 
 |  |  |       background: $primary-color; | 
 |  |  |       background: #eff5fe; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   // 子菜单 | 
 |  |  |   .el-submenu { | 
 |  |  |     .el-submenu__title{ | 
 |  |  |       background-color: $primary-color; | 
 |  |  |     .el-submenu__title { | 
 |  |  |       background-color: #fff; | 
 |  |  |     } | 
 |  |  |     &.is-active { | 
 |  |  |       .el-submenu__title{ | 
 |  |  |         background-color: $icon-background-color; | 
 |  |  |       .el-submenu__title { | 
 |  |  |         background-color: #fff; | 
 |  |  |       } | 
 |  |  |       .el-menu .el-menu-item{ | 
 |  |  |         background-color: $icon-background-color; | 
 |  |  |       .el-menu .el-menu-item { | 
 |  |  |         background-color: #fff; | 
 |  |  |         // 悬浮 | 
 |  |  |         &:hover { | 
 |  |  |           background-color: $icon-background-color; | 
 |  |  |           background-color: #eff5fe; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |     // 菜单上下箭头 | 
 |  |  |     .el-submenu__title i { | 
 |  |  |       color: #f7f7f7; | 
 |  |  |       color: #979797; | 
 |  |  |       font-size: 14px; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |   // 菜单图标 | 
 |  |  |   i:not(.el-submenu__icon-arrow) { | 
 |  |  |     color: #f7f7f7 !important; | 
 |  |  |     color: #333333 !important; | 
 |  |  |     position: relative; | 
 |  |  |     top: -1px; | 
 |  |  |     // 自定义图标 |