对接口

MrShi

2 天以前 39fc2d6754953e41a7334a2166347baacfcfb40a

 admin/src/components/common/Menu.vue

@@ -1,18 +1,23 @@
<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>
@@ -28,7 +33,7 @@
  computed: {
    ...mapState(['menuData']),
    // 选中的菜单index
    activeIndex () {
    activeIndex() {
      let path = this.$route.path
      if (path.endsWith('/')) {
        path = path.substring(0, path.length - 1)
@@ -43,39 +48,48 @@
      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 === 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
@@ -88,6 +102,49 @@
        }
      }
      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
    }
  }
}
@@ -107,46 +164,49 @@
.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;
    // 自定义图标