zhgdyun/src/views/infoCenter/layout.vue

<template>
  <div class="fullHeight pages">
    <div class="title">
      <div class="title_l flex">
        <!-- <img v-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="icon" />
        <span>{{$t('message.companyDiagram.pageTitle')}}</span> -->
        <img v-if="systemInfo.platformLogo" :src="systemInfo.platformLogo" class="logo" height="25" />
        <img v-else-if="LOGO_white" :src="'./img/logo/'+LOGO_white+'.png'" class="logo" height="25" />
        <span v-if="company != 'nanchang'" style="cursor: pointer" @click="back">{{systemInfo.platformName}} </span>
        <span v-if="company != 'nanchang'"> - </span>
        <span v-if="company != 'nanchang'">{{$t('message.companyDiagram.pageTitle')}}</span>
        <!-- 南昌地铁头部样式 -->
        <span v-if="company == 'nanchang'" style="cursor: pointer" @click="back">{{$t('message.companyDiagram.pageTitle')}}</span>
      </div>
      <div class="title_near flex" v-if="![11,1,2].includes($store.state.userInfo.accountType)">
        <userChange></userChange>
      </div>
      <div class="title_near-tow flex" v-if="![11,1,2].includes($store.state.userInfo.accountType)">
        <div class="divider-line"></div>
        <centerChange></centerChange>
      </div>
      <div
        class="title_r flex"
      >
        <account></account>
      </div>
    </div>
    <div class="menuBox">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#5181F6"
        router
      >
      <div
          v-for="(item, index) in menuList"
          :key="index"
          class="menuInnerBox"
        >
          <el-menu-item class="firstLevelMenu"
            v-if="!hasSubMenu(item.menuList)"
            :index="item.modulePath"
          >
            {{ item.moduleName}}
          </el-menu-item>
          <el-submenu
            :index="item.modulePath"
            v-else
          >
            <template slot="title">{{
              item.moduleName
            }}</template>
            <el-menu-item
              :index="data.path"
              v-for="(data, i) in item.menuList"
              :key="i"
              >{{ data.menuName }}</el-menu-item
            >
          </el-submenu>
        </div>
        <!-- <el-menu-item :index="item.modulePath" v-for="(item,index) in menuList" :key="index">{{item.moduleName}}</el-menu-item> -->
      </el-menu>
    </div>
    <div class="pageContainer">
      <div class="pageDataContainer">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import account from "@/components/account.vue";
import userChange from "@/components/userChange.vue";
import centerChange from "@/components/centerChange.vue";
export default {
  data() {
    return {
      LOGO_white:LOGO_white,
      currentUrl:'',
      menuList:[
        { moduleName: '全部消息', modulePath: "/infoCenter/allInfo" },
        { moduleName: '未读消息', modulePath: "/infoCenter/notRead" },
        { moduleName: '已读消息', modulePath: "/infoCenter/hadRead" }
      ],
        systemInfo:{
            "loginBackgroundImage": "",
            "loginLogo": "",
            "platformLogo": "",
            "platformName": "智慧工地云平台"
        }
    };
  },
  components:{
    account,
    userChange,
    centerChange
  },
  created() {
    this.company = COMPANY;
    console.log(COMPANY)
  },
  mounted(){
    // this.getAllModule()
    if(localStorage.getItem('systemInfo')){
      this.systemInfo=JSON.parse(localStorage.getItem('systemInfo'))
    }
    document.title='企业后台'
    console.log('mounted',this.$route.path)
    
  },
  methods: {
    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;
    },
    getAllModule(){
            var half = this.$store.state.userInfo.menuAuthority.moduleList
            half.forEach(element => {
                if(element.moduleType==3){
                    this.menuList.push(element)
                }
            });
    //   getAllModuleApi({moduleType:4}).then(res => {
    //       if (res.success) {
    //           var all = res.result
    //           all.forEach((element,index) => {
    //             all[index].operation=false
    //             half.forEach(element2 => {
    //               if(element2.moduleId==element.moduleId){
    //                 all[index].operation=true
    //                 all[index].menuList=element2.menuList
    //               }
    //             });
    //           });
    //           this.menuList=all
    //       }
    //   })
    },
    handleSelect(url) {
      // this.$store.commit('setCurrentUrl',url)
      // this.$store.dispatch('currentUrl',url)
    },
    back() {
      this.$router.push("/firm/projectManage")
    }
  },
};
</script>
<style lang="less" scoped>
.el-menu.el-menu--horizontal {
  box-sizing: border-box;
  padding: 0 30px 4px;
  border-bottom: none;
}
.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;
}
// .el-menu.el-menu--horizontal {
//   box-sizing: border-box;
//   padding: 0 162px 4px;
//   border-bottom: none;
// }
// .el-menu--horizontal > .el-menu-item {
//   font-family: PingFangSC-Medium;
//   font-size: 14px;
//   letter-spacing: 0;
//   height: 44px;
//   line-height: 44px;
//   padding: 0;
//   margin-right: 70px;
// }
// .el-menu--horizontal > .el-menu-item.is-active {
//   border-bottom: 3px solid #409eff;
// }
// /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;
}
.title {
  width: 100%;
  color: #fff;
  background-image: linear-gradient(#262d47, #343d5f);
  box-sizing: border-box;
  padding: 0 23px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: flex-end
}
.title_l {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;
  margin-right: 50px;
  img {
    margin-right: 14px;
  }
}
.title_near{
  margin-right: 50px;
}
.title_near-tow{
  .divider-line{
    width: 1px;
    height: 16px;
    background: #FFFFFF;
    margin-right: 50px;
  }
}
.title_r {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>