zhgdyun/src/components/layout.vue

<template>
  <div class="fullHeight pages">
    <vhead showR="true"></vhead>
    <!-- 点击标题跳转项目概况首页，菜单导航栏渲染的数据是vuex中的projectManageMenuList -->
    <div v-if="tabsShow && $route.path.indexOf('/firm/') != -1" class="menuBox" :class="{ big: $route.path.indexOf('/firm/') != -1 }">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        :class="{'isIframe': isIframe}"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
        <div class="wrapper" ref="wrapper">
          <div class="cont" ref="cont">
            <div
              v-for="(item, index) in $store.state.projectManageMenuList"
              :key="index"
              @click='clickItem(item)'
              class="menuInnerBox" v-if="company != 'xingxuan' && item.target != '_blank' && (item.menuName != 'LED大屏显示器' || company != 'nanchang')"
            >
              <el-menu-item class="firstLevelMenu"
                v-if="!hasSubMenu(item.menuList)"
                :index="item.modulePath ? item.modulePath : item.path"
              >
                {{ item.moduleName ? item.moduleName : item.menuName }}
              </el-menu-item>
              <el-submenu
                :index="item.modulePath ? item.modulePath : item.path"
                v-else
              >
                <template slot="title">{{
                  item.moduleName ? item.moduleName : item.menuName
                }}</template>
                <el-menu-item
                  :index="data.path"
                  v-for="(data, i) in item.menuList"
                  :key="i"
                  >{{ data.menuName }}</el-menu-item
                >
              </el-submenu>
            </div>
          </div>
        </div>
      </el-menu>

      <el-button
        v-show="$store.state.isShowBackIndex"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
    </div>
    <div v-else class="menuBox" :class="{ big: $route.path.indexOf('/firm/') != -1 }">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        :class="{'isIframe': isIframe}"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
        <div class="wrapper" ref="wrapper">
          <div class="cont" ref="cont">
            <div
              v-for="(item, index) in $store.state.menuList"
              :key="index"
              @click='clickItem(item)'
              class="menuInnerBox" v-if="company != 'xingxuan' && item.target != '_blank' && (item.menuName != 'LED大屏显示器' || company != 'nanchang')"
            >
              <el-menu-item class="firstLevelMenu"
                v-if="!hasSubMenu(item.menuList)"
                :index="item.modulePath ? item.modulePath : item.path"
              >
                {{ item.moduleName ? item.moduleName : item.menuName }}
              </el-menu-item>
              <el-submenu
                :index="item.modulePath ? item.modulePath : item.path"
                v-else
              >
                <template slot="title">{{
                  item.moduleName ? item.moduleName : item.menuName
                }}</template>
                <el-menu-item
                  :index="data.path"
                  v-for="(data, i) in item.menuList"
                  :key="i"
                  >{{ data.menuName }}</el-menu-item
                >
              </el-submenu>
            </div>
          </div>
        </div>
        <!-- <el-menu-item v-show="item.target!='_blank'" :index="item.modulePath?item.modulePath:item.path" v-for="(item,index) in $store.state.menuList" :key="index">
          {{item.moduleName?item.moduleName:item.menuName}}
          </el-menu-item> -->
        <!-- <el-submenu :index="item.modulePath?item.modulePath:item.path" v-show="item.target!='_blank'" v-for="(item,index) in $store.state.menuList" :key="index">
            <template slot="title">{{item.moduleName?item.moduleName:item.menuName}}</template>
            <el-menu-item v-if="item.menuList" :index="data.path" v-for="(data,i) in item.menuList" :key="i">{{data.menuName}}</el-menu-item>

          </el-submenu> -->
      </el-menu>

      <el-button
        v-show="$store.state.isShowBackIndex"
        class="backtoIndex"
        type="primary"
        plain
        @click="backtoIndex()"
        size="mini"
        >返回主菜单</el-button
      >
    </div>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <router-view></router-view>
      </div>
    </div>
    <!-- <el-backtop target=".pages"></el-backtop> -->
  </div>
</template>
<script>
import vhead from "./header";
import BScroll from 'better-scroll'
export default {
  components: { vhead },
  inject:['reload'],
  data() {
    return {
      tabsShow,
      // menuList: [{ name: "企业注册审核", url: "/registerAudit" }],
      currentUrl: "",
      scroll: '',
      company:COMPANY,
      isIframe: false
    };
  },
  mounted() {
    // console.log("mounted", this.$route.path);
    this.$nextTick(() => {
      let timer = setTimeout(() => {
        if (timer) {
          clearTimeout(timer)
          this.verScroll()
        }
      }, 0)
    })
    if(window.localStorage.getItem('isIframe')){
      if(window.localStorage.getItem('isIframe') == '1'){
        this.isIframe = true
        // this.$nextTick(()=>{
        //   setOffset(2180,360)
        // })
        
      }
      console.log(window.localStorage.getItem('isIframe'))
    }
  },
  methods: {
    clickItem(item){
      console.log(item)
      window._paq.push(['trackEvent', '点击', item.moduleName?item.moduleName:item.menuName,'切换到'+(item.moduleName?item.moduleName:item.menuName) ]);
    },
    hasSubMenu(list) {
      //用于判断有没有下级菜单
      let onoff = false;
      // console.log("list", list);
      if (list && list.length > 0) {
        list.forEach((element) => {
          if (element.menuName) {
            onoff = true;
            return;
          }
        });
      }
      // console.log("onoff", onoff);
      return onoff;
    },
    backtoIndex() {
      // window._paq.push(['trackEvent', '点击', '返回主菜单','返回主菜单' ])
      var url = window.location.href;
      if (url.indexOf("equipmentCenter.html") != -1) {
        this.$router.push("/equipmentCenterIndx");
      } else {
        this.$router.push("/projectIndex");
      }
    },

    handleSelect(key,keyPath) {
      console.log(key)
      console.log(keyPath)
      // console.log(index)
      // this.$store.commit('setCurrentUrl',url)
      // this.$store.dispatch('currentUrl',url)
    },
    verScroll () {
      // console.log(this.$route.path)
      if(this.$route.path.indexOf('/firm/') != -1) {
        this.$refs.cont.style.width = "100%";
        return;
      } else {
        let width = this.$store.state.menuList.length * 136// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
        this.$refs.cont.style.width = width + 'px'
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.wrapper, {
              startX: 0,
              click: true,
              mouseWheel: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            console.log(this.scroll.refresh())
            this.scroll.refresh() //如果dom结构发生改变调用该方法
          }
          console.log(this.scroll)
        })
      }
      this.reload;
    }
  },
};
</script>
<style lang="less" scoped>
// .el-menu.el-menu--horizontal {
//   box-sizing: border-box;
//   padding: 0 100px 4px;
//   border-bottom: none;
// }
.el-menu.el-menu--horizontal {
  box-sizing: border-box;
  // padding: 0 !important;
  border-bottom: none;
  margin-left: 50px;
  margin-right: 120px;
  white-space: nowrap;
  overflow: hidden;
}
.isIframe{
  /deeep/.el-menu.el-menu--horizontal{
    margin: 0;
  }
}
.el-menu--horizontal {
  .el-menu-item,
  /deep/.el-submenu__title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    letter-spacing: 0;
    height: 44px;
    line-height: 44px;
    padding: 0;
    margin-right: 80px;
    &:hover,
    &:focus {
      background-color: transparent;
    }
    &:hover {
      color: #5181f6;
    }
  }
}
/deep/.el-submenu__title{
  padding-right: 20px!important;
  .el-submenu__icon-arrow{
    right: 0px;
  }
}
.el-menu--horizontal .firstLevelMenu.is-active,/deep/.is-active .el-submenu__title {
  border-bottom: 3px solid #409eff;
}
.menuInnerBox {
  display: inline-block;
}
.menuBox {
  position: relative;
  &.big {
    .el-menu.el-menu--horizontal {
      padding: 0;
      display: flex;
      .cont{
        display: flex;
      }
      .menuInnerBox {
        width: 100%;
        // flex: 1;
      }
      .el-menu-item {
        flex: 1;
        margin-right: 0;
        text-align: center;
        border-bottom: none;
        height: 48px;
        line-height: 48px;
        &.is-active,
        &:hover {
          background-color: @--color-primary;
          color: #fff !important;
        }
      }
    }
  }
}
.backtoIndex {
  position: absolute;
  right: 20px;
  top: 12px;
  font-size: 14px;
  padding: 4px 5px;
}
.toOverview {
  right: 120px;
}
@media screen and (max-width: 1500px) {
  .el-menu.el-menu--horizontal {
    padding: 0 40px 4px;
  }
}

.big{
  .el-menu.el-menu--horizontal {
    margin: 0;
    width: 100%;
    .wrapper{
      width: 100%;
    }
    .cont{
      width: 100%;
    }
  }
}
</style>