fj-dc-ui/.svn/pristine/d7/d7bd6af085fc3933a57d644915e6f7df8124ce6f.svn-base

<template>
  <div id="systemMenuBar" ref="systemMenuBar">
    <div
      class="systemMenuItem"
      v-for="(menuItem,index) in menuInfos"
      :key="index"
      v-if="menuItem.menuName !== '登录'">
      <p
        style="flex-basis: 90%;margin: 0px;line-height: 60px;"
        @mouseover="focusToMenuItem(menuItem,$event)"
        @mouseout="disAppearSubMenuLayerlazy()"
        @click="menuItemClick(menuItem)">
        <span :class="{systemMenuItemActive:focusMenuItem==menuItem,'light_back': themeName == 'light','dark_back': themeName == 'dark'}">{{menuItem.menuName}}</span>
      </p>
    </div>
      <div
        class="systemMenuItem moreMenu"
        key="newIndex"
        @mouseover="focusToMenuItem(moreMenuItem,$event)"
        @mouseout="popMoseOut()"
        v-if="menuMore.length>0">
        <p style="flex-basis: 90%;margin: 0px;line-height: 60px;">
          <el-popover
            placement="bottom"
            popper-class="menuPop"
            transition="el-zoom-in-top"
            trigger="hover">
            <div class="moreContent">
              <ul class="moreContentUl">
                 <li v-for="(menuObj,index) in menuMore" @click="showSubMenu(menuObj,index)" :class="moreActive==index ? 'moreActive' : 'moreNormal'" >{{menuObj.menuName}}<i style="color:#434343;position: absolute;z-index: 500;top:10px;right:5px;" v-if="menuObj.menuList && menuObj.menuList.length>0" class="el-icon-caret-right"/></li>
              </ul>
              <div v-if="popVisible" class="subMain">
                <ul class="subMenuList">
                  <li v-for="item in menuMoreObj.menuList">
                     <span class="subMenuTitle"><em/>{{item.menuName}}</span>
                     <div class="subMenuContent" v-for="item1 in item.menuList" :title="item1.menuName" @click="menuItemClick(item1)">{{item1.menuName}}</div>
                  </li>
                </ul>
              </div>
            </div>
            <span slot="reference" :class="{systemMenuItemActive:focusMenuItem==moreMenuItem,'light_back': themeName == 'light','dark_back': themeName == 'dark'}"><i style="color:white !important;" class="el-icon-menu"/> {{moreMenuItem.menuLabel}}</span>
          </el-popover>
        </p>
    </div>
    <transition name="el-zoom-in-center">
      <div
        class="systemMenuItemDownLine"
        :style="{'margin-left':activeTriangleWidth+'px'}"
        v-show="showSubMenuLayer"
        @mouseover="keepMenuOpen()"
      ></div>
    </transition>
    <transition name="el-zoom-in-bottom">
      <div
        style="position: absolute;top:60px;width:100%;height:calc(100% - 60px);z-index:500;left:0px;"
        v-show="showSubMenuLayer"
        @mouseover="disAppearSubMenuLayer()"
      ></div>
    </transition>
    <transition name="el-zoom-in-top">
      <div
        class="systemSubMenuLayer"
        v-show="showSubMenuLayer"
        @mouseover="keepMenuOpen()"
        :style="{'left':activeTriangleWidth - 83 +'px'}"
      >
        <div
          class="systemSubMenuContainer"
          v-if="!focusMenuItem.href"
          v-for="(subMenu,index) in focusMenuItem.menuList"
          :key="subMenu.menuName+index"
          @mouseover="focusToMenuItem()"
        >
          <div class="systemSubMenuTitle" @click="menuItemClick(subMenu)">
            <p>
              <i v-if="subMenu.icon" class="icon iconfont" v-html="subMenu.icon"></i>
              <i class="icon iconfont watericon1-tongyongleiyelianjie" style="font-size: 16px !important;"></i>{{subMenu.menuName}}
            </p>
          </div>
          <div class="systemSubMenuContent">
            <div
              class="systemSubMenuLabel"
              v-if="!subMenu.href"
              v-for="(threeMenuItem,index) in subMenu.menuList"
              @click="menuItemClick(threeMenuItem)"
              :key="threeMenuItem.menuName+index"
            >
              <p :title="threeMenuItem.menuName">{{threeMenuItem.menuName}}</p>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="backToLeveLayer" v-show="showSubMenuLayer" @mouseover="disAppearSubMenuLayer()"></div>
  </div>
</template>

<script>
/*
  to-do List:
  1,样式适配问题 太小尺寸还是有问题
*/
import theme from '../../store/theme'
import request from '../../utils/gw_ajax_request.js';
import {getCookie,setCookie} from '../../utils/gw_cookie.js'
export default {
  name: "systemMenuBar",
  props:['changeSystem'],
  data() {
    return {
      showSubMenuLayer: false,
      keepMenuShow: false,
      focusMenuItem: {
        menuLabel: "首页",
        haveSubMenu: false,
        haveView: true,
        viewParamter: {}
      },
      moreMenuItem: {
          href:"more",
          menuLabel: "更多",
          haveSubMenu: false,
          haveView: true,
          viewParamter: {}
      },
      activeTriangleWidth: 0,
      menuInfo: {},
      menuInfos: [],
      menuMore:[],
      menuMoreObj:null,
      moreActive:null,
      themeName:'light',
      popVisible:false
    };
  },
  computed: {
    viewMenu: function() {
      console.log(this.$store.state.permission.routers);
      return this.$store.state.permission.routers;
    },
    isAdmin() {
      return localStorage.getItem("isAdmin") == 1 ? true : false;
    },
    userId(){
      return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
    },
    msg(){
      return theme.state.testMsg
    }
  },
  mounted() {
    this.getPrivData();
  },
  methods: {
    showSubMenu(menuItem,index){
       this.moreActive = index;
       this.menuMoreObj = menuItem;
       if(menuItem.menuList && menuItem.menuList.length>0){
           this.popVisible = true;
       }else{
           this.popVisible = false;
           if (menuItem.href) {
               this.$emit("addSystemMenuView", { viewItem: menuItem });
           }
       }
    },
    popMoseOut(){
        this.popVisible = false;
        this.moreActive = null;
    },
    popMoseOver(){
        this.popVisible = true;
    },
    focusToMenuItem: function(menuItem, event) {
      if (menuItem) {
        this.focusMenuItem = menuItem;
        if (!menuItem.href) {
          this.showSubMenuLayer = true;
          this.keepMenuShow = true;
        }
      }
      if (event) {
        var target = event.target;
        var elementLeft = target.offsetLeft - this.$refs.systemMenuBar.parentElement.scrollLeft + target.offsetWidth / 2 - 8;
        this.activeTriangleWidth = elementLeft;
      }
    },
    disAppearSubMenuLayer: function() {
      this.showSubMenuLayer = false;
    },
    keepMenuOpen: function() {
      this.keepMenuShow = true;
    },
    disAppearSubMenuLayerlazy: function() {
      let _self = this;
      this.keepMenuShow = false;
      setTimeout(() => {
        if (!_self.keepMenuShow) {
          _self.showSubMenuLayer = false;
        }
      }, 10);
    },
    menuItemClick: function(menuItem) {

      if (menuItem.href) {
        this.$emit("addSystemMenuView", { viewItem: menuItem });
      }
    },
    getPrivData() {
      let ownApp = localStorage.getItem('ownApp')
      let paramsObj = {
        userId: this.userId,
        ownApp: ownApp
      };
      request
        .post("sys/privs/getPrivByUserId", paramsObj)
        .then(res => {
          if (res.success) {
              this.menuInfos = []
              this.menuMore = []
              res.data.menu.forEach((item,index)=>{
                  if(index<8){
                      if(getCookie("sdUrl") && item.href && item.href=="/home"){
                          item.menuName = "督查情况统计"
                      }
                      this.menuInfos.push(item);
                  }
                  if(index>=8){
                      this.menuMore.push(item);
                  }
              })
            // this.menuInfos = res.data.menu;
            this.$store.commit("privData", res.data.priv);
            console.log(this.$store.state.permission.privOfUser);
            sessionStorage.setItem(
              "privCollect",
              JSON.stringify(res.data.priv)
            );
            if(getCookie("sdUrl") && getCookie("sdUrl")=="/home"){
                this.$emit("addSystemMenuView", {
                    viewItem: {
                        menuName: "督查情况年度统计",
                        name: "督查情况年度统计",
                        id: 500,
                        href: "/home",
                        path: "/home",
                        haveView: true
                    }
                });
                return false;
            }
            if(getCookie("sdUrl") && getCookie("sdUrl")=="/planCheckYear"){
                this.$emit("addSystemMenuView", {
                    viewItem: {
                        menuName: "年度检查计划",
                        name: "年度检查计划",
                        id: 500,
                        href: "/planCheckYear",
                        path: "/planCheckYear",
                        haveView: true
                    }
                });
                return false;
            }
            let hasHomePage = false
            // this.menuInfos.forEach(ele=>{
                if(this.menuInfos[0].flagLeaf){
                  this.$emit("addSystemMenuView", {
                    viewItem: {
                      menuName: this.menuInfos[0].menuName,
                      name: this.menuInfos[0].menuName,
                      id: 500,
                      href: this.menuInfos[0].href,
                      path: this.menuInfos[0].href,
                      haveView: true
                    }
                  });
                }else{
                  this.$emit("addSystemMenuView", {
                    viewItem: {
                        menuName: this.menuInfos[0].menuList[0].menuList[0].menuName,
                        name: this.menuInfos[0].menuList[0].menuList[0].menuName,
                        id: 500,
                        href: this.menuInfos[0].menuList[0].menuList[0].href,
                        path: this.menuInfos[0].menuList[0].menuList[0].href,
                        haveView: true
                    }
                  });
                }
              // if( ele.flagLeaf && ele.menuName == '首页' ){
              //   hasHomePage = true
              //   this.$emit("addSystemMenuView", {
              //     viewItem: {
              //       menuName: "首页",
              //       name: "首页",
              //       id: 500,
              //       href: "/home",
              //       path: "/home",
              //       haveView: true
              //     }
              //   });
              // }else if( ele.flagLeaf && ele.menuName == '稽察首页' ){
              //   hasHomePage = true
              //   this.$emit("addSystemMenuView", {
              //     viewItem: {
              //       menuName: "稽察首页",
              //       name: "稽察首页",
              //       id: 500,
              //       href: "/jchome",
              //       path: "/jchome",
              //       haveView: true
              //     }
              //   });
              // }
              // if( hasHomePage ) return
              // if( ele.flagLeaf && ele.menuName == '综合展示' ){
              //   this.$emit("addSystemMenuView", {
              //     viewItem: {
              //       menuName: "综合展示",
              //       name: "综合展示",
              //       id: 100,
              //       href: "/zhxx",
              //       path: "/zhxx",
              //       haveView: true
              //     }
              //   });
              // }
            // })
            this.$emit('initFinish');
          }
        })
        // .catch(error => {
        //   this.$message.error(error);
        // });
    },
    //格式化树形数据
    getTrees(list, pId) {
      let items = {};
      // 获取每个节点的直属子节点，*记住是直属，不是所有子节点
      for (let i = 0; i < list.length; i++) {
        let key = list[i].parentId;
        if (items[key]) {
          items[key].push(list[i]);
        } else {
          items[key] = [];
          items[key].push(list[i]);
        }
      }
      return this.formatTree(items, pId);
    },
    /**利用递归格式化每个节点**/
    formatTree(items, pId) {
      let result = [];
      if (!items[pId]) {
        return result;
      }
      for (let t of items[pId]) {
        t.children = this.formatTree(items, t.id);
        result.push(t);
      }
      return result;
    }
  },
  watch:{
    msg(n,o){
      if(n == 'dark'){
        this.themeName = 'dark';
      }else{
        this.themeName = 'light';
      }
    },
    changeSystem(){
      this.getPrivData()
    }
  }
};
</script>

<style>
@import url("/src/assets/iconsfont/iconfont.css");
#systemMenuBar {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 499;
  margin-left: 0px;
}
.moreMenuText{
  cursor: pointer;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  font-size: 18px;
  color: rgba(255,255,255,1);
  padding: 8px;
  border-radius: 4px;
}
.moreContent{
  display: flex;
  overflow: auto;
}
.moreContent div.subMain{
  max-width: 300px;
}
.moreContentUl{
  width: 130px;
  list-style: none;
}
.moreContentUl li{
  position: relative;
  width: calc(100% - 7px);
  line-height: 35px;
  text-align: center;
  font-size: 17px;
  font-family:MicrosoftYaHei;
  letter-spacing: 3px;
  font-weight: bold;
  border-bottom: 1px solid #ece8e8;
  background: white;
  cursor: pointer;
  border-right: 3px solid #f7f7f7;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid transparent;
  transition: all .25s ease-in;
}
.moreContentUl li:hover{
  color: #2fa6ff;
  border-right: 5px solid #2fa6ff !important;
  border-top: 1px solid #2fa6ff !important;
  border-left: 1px solid #2fa6ff !important;
  border-bottom: 1px solid #2fa6ff !important;
  transform: translateY(-3px);
}
.moreContentUl li:hover i{
  color: #2fa6ff !important;
}
.subMenuList{
   list-style: none;
   padding: 0;
   display: flex;
   margin-bottom: 5px;
}
.subMenuList li{
   width: 130px;
   float:left;
   margin-left: 10px;
   box-shadow: 0 5px 12px 0 rgb(0 0 0 / 10%);
   text-indent: 10px;
}
.subMenuList li span{
  width: 100%;
  display: block;
  font-size: 15px;
  line-height: 25px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #1b75ff;
}
.subMenuList li span em{
  height:15px;
  background: #1b75ff;
  padding-right: 5px;
  margin-right: 5px;
}

.subMenuList li div{
  width: 100%;
  font-size: 13px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 25px;
  cursor: pointer;
  transition: all .25s ease-in;
}
.subMenuList li div:hover{
   color: #1b75ff;
   transform: translateY(-2px);
   text-decoration: underline;
}
.moreActive{
  background: white !important;
  border-right: 5px solid #2fa6ff !important;
  border-top: 1px solid #2fa6ff !important;
  border-left: 1px solid #2fa6ff !important;
  border-bottom: 1px solid #2fa6ff !important;
}
.moreNormal{
  background: #f7f7f7;
}
.moreMenuText:hover{
  cursor: pointer;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  color: rgba(255,255,255,1);
  background: #007ef6;
}

.systemMenuItem {
  min-width: 90px;
  height: 100%;
  flex-basis: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 499;
  cursor: pointer;
  font-family:MicrosoftYaHei;
  font-weight:bold;
  font-size: 17px;
  color:rgba(255,255,255,1);
}
.systemMenuItemActive {
  color: rgb(255, 255, 255);
  padding: 8px;
  border-radius:4px;
}
.systemMenuItemActive.light_back{
  background:#007ef6;
}
.systemMenuItemActive.dark_back{
    background: #36A2FC;
}
.systemMenuItemDownLine {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  z-index: 3000;
  top: 45px;
  left: 0;
  margin-top: -18px;
}
.systemSubMenuLayer {
  background-color: #fff;
  color: aliceblue;
  position: fixed;
  left: 240px;
  /* width: 100%; */
  min-height: 1px;
  top: 43px;
  z-index: 2001;
  display: flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  padding: 5px;
  border-radius: 2px;
  max-height: 85%;
  max-width: 60%;
  overflow: auto;
}
.backToLeveLayer {
  margin-left: -5px;
  /* background-color: #d30505ad; */
  color: aliceblue;
  position: fixed;
  width: 100%;
  height: 100%;
  /* top: 100px; */
  z-index: 498;
}
.systemSubMenuContainer {
  min-width: 200px;
  padding: 5px;
  /* margin-left: 2%; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width:200px;
}
.systemSubMenuContainer:first-of-type {
  /* margin-left: 7%; */
}
.systemSubMenuTitle {
  /* flex-basis: 11%; */
}
.systemSubMenuTitle p {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: solid 1px #5aaaff;
  margin-left: 6px;
  padding-right: 5px;
  padding-left: 2px;
  color: rgb(0, 110, 255);
  font-size: normal;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}
.systemSubMenuLabel {
  margin: 5px;
}
.systemSubMenuContent {
  display: flex;
  flex-direction: column;
  /* margin:5px; */
}
.systemSubMenuContent p {
  font-size: normal;
  font-weight: thin;
  /* color: rgb(104, 104, 104); */
  color: #333;
  font-weight: lighter;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.systemSubMenuContent p:hover {
  color: rgb(0, 4, 255);
  cursor: pointer;
  text-decoration: underline;
}
.systemSubMenuLayer .iconfont {
  color: rgb(0, 110, 255) !important;
  font-size: 18px !important;
  margin-right: 5px;
  font-weight: 600;
}
@media screen and (max-width: 1679px) {
  .systemMenuItem {
    min-width: 90px;
  }
}
@media screen and (max-width: 1366px) {
  .systemMenuItem {
    min-width: 85px;
  }
}
</style>
<style>
  .menuPop{
    width: auto !important;
    min-width: 120px !important;
  }
</style>