icore-pass/src/components/default.vue

<template>
  <div class="icore-default">
    <div class="icore-default-title">
      <i class="el-icon-menu" style="font-size: 16px; color:#20a0ff; margin-right: 6px; position: relative; top: 1px;"></i>功能导航
    </div>
    <div class="icore-default-content">
      <ul class="icore-default-ul">
        <li class="icore-default-li"
          :class="'icore-default-li' + (index + 1)"
          @click="goto(item)" :key="index" v-for="(item, index) in setData">
          <div class="icore-default-li-c"></div>
          <div class="icore-default-li-t">
            <span class="icore-nav-icons icore-default-li-i icore-defaultault"
                  :class="item.pTarget && item.pTarget.menuIcon ? item.pTarget.menuIcon : 'icore-default-li-i' + (item.pIndex + 1)"></span>
            <p>{{item.preTarget && item.preTarget.name ? item.preTarget.name : ''}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { proPath } from '@/config/config.js';
export default {
  props: ['menuData'],
  data () {
    return {
      setData: [],
      companyId: '' // 选择公司Id
    }
  },
  mounted: function () {
    let that = this;
    window.top.localStorage.setItem('activeMenu','default')
   this.companyId = window.top.localStorage.getItem('companyId');
    that.getTop10();
  },
  methods: {
    goto (item) {
      let that = this;
      that.axios.get('pass/v1/sysuserroles/checkUserAuthorize?userId='+ this.$store.state.userInfo.userId +'&menuId='+ item.menuId).then((res) => {
        if(res.data.code === '0'){
            if(res.data.data){
                that.$emit('gotoSetPage', item);
            }else {
                that.$message.error('无权限访问')
            }
        }else {
            that.$message.error(res.data.message)
        }
    }).catch((err) =>{
        window.top.localStorage.setItem('activeMenu',item.menuId)
        that.$emit('gotoSetPage', item);
    })
    },
    getTop10 () {
      let that = this;
      that.axios.get(proPath + 'v1/sysmenus/getTop10', {
        params: {
          userId: that.$store.state.userInfo.userId,
          companyId: that.companyId
        }
      }
      ).then(function (response) {
        if (response) {
          let data = response.data;
          var tempData = [];
          for (let i = 0; i < data.length; i++) {
            tempData.push(that.getLabelbyMenuId(data[i].menuId));
          }
          that.setData = tempData;
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    getLabelbyMenuId (menuId) {
      let that = this;
      var returnObj = {};
      for (let i = 0; i < that.menuData.length; i++) {
        if (that.menuData[i].menuType !== '4' && that.menuData[i].menuType !== '1' ) {
          continue;
        }
        if (!that.menuData[i].children) {
          continue;
        }
        for (let j = 0; j < that.menuData[i].children.length; j++) {
          if (that.menuData[i].children[j].menuType !== '4' && that.menuData[i].children[j].menuType !== '1') {
            continue;
          }
          if (that.menuData[i].children[j].menuId === menuId) {
            returnObj = {
              'pTarget': that.menuData[i],
              'pIndex': i,
              'pageBreadcrumb': [{menuId: 1, menuLabel: that.menuData[i].name}, {menuId: 2, menuLabel: that.menuData[i].children[j].name}],
              'preTarget': that.menuData[i].children[j],
              'menuId': that.menuData[i].children[j].menuId
            }
            break;
          } else if (that.menuData[i].children[j].children) {
            for (let k = 0; k < that.menuData[i].children[j].children.length; k++) {
              if (that.menuData[i].children[j].children[k].menuType !== '4' && that.menuData[i].children[j].children[k].menuType !== '1') {
                continue;
              }
              if (that.menuData[i].children[j].children[k].menuId === menuId) {
                returnObj = {
                  'pTarget': that.menuData[i],
                  'pIndex': i,
                  'pageBreadcrumb': [{menuId: 1, menuLabel: that.menuData[i].name},
                    {menuId: 2, menuLabel: that.menuData[i].children[j].name},
                    {menuId: 3, menuLabel: that.menuData[i].children[j].children[k].name}],
                  'preTarget': that.menuData[i].children[j].children[k],
                    'menuId': that.menuData[i].children[j].children[k].menuId
                }
                break;
              } else if (that.menuData[i].children[j].children[k].children) {
                for (let l = 0; l < that.menuData[i].children[j].children[k].children.length; l++) {
                  if (that.menuData[i].children[j].children[k].children[l].menuType !== '4' && that.menuData[i].children[j].children[k].children[l].menuType !== '1') {
                    continue;
                  }
                  if (that.menuData[i].children[j].children[k].children[l].menuId === menuId) {
                    returnObj = {
                      'pTarget': that.menuData[i],
                      'pIndex': i,
                      'pageBreadcrumb': [{menuId: 1, menuLabel: that.menuData[i].name},
                        {menuId: 2, menuLabel: that.menuData[i].children[j].name},
                        {menuId: 3, menuLabel: that.menuData[i].children[j].children[k].name},
                        {menuId: 4, menuLabel: that.menuData[i].children[j].children[k].children[l].name}],
                      'preTarget': that.menuData[i].children[j].children[k].children[l],
                        'menuId': that.menuData[i].children[j].children[k].children[l].menuId
                    }
                    break;
                  }
                }
              }
            }
          }
        }
      }
      return returnObj;
    }
  }
}
</script>
<style scoped>
  .icore-default { height: 100%; position: relative; }
  .icore-default-title {
    position: absolute; top: 0; left: 5%;
    width: 90%; height: 60px; line-height: 60px;
    border-bottom: 1px solid #ddd;
    font-size: 14px; color: #666;
  }
  .icore-default-content {
    position: relative;
    padding-top: 60px;
    min-width: 1200px; height: 100%;
    background: url(../assets/img/default-bg.png) center bottom no-repeat;
  }
  .icore-default-ul {
    position: absolute; top: 50%; left: 50%;
    margin-left: -560px; margin-top: -250px;
    width: 1100px; height: 440px;
    overflow: hidden;
  }
  .icore-default-li {
    cursor: pointer;
    position: relative; float: left;
    width: 200px; height: 200px;
    margin: 10px;
    -webkit-transition: transform .4s ease-out; transition: transform .4s ease-out;
  }
  .icore-default-li1 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .7s both; }
  .icore-default-li2 { background-color: #45e3e6; animation: fadeInLeft .5s ease-out .6s both; }
  .icore-default-li3 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .5s both; }
  .icore-default-li4 { background-color: #f2d830; animation: fadeInLeft .5s ease-out .4s both; }
  .icore-default-li5 { background-color: #4fa9ee; animation: fadeInLeft .5s ease-out .3s both; }
  .icore-default-li6 { background-color: #f26199; animation: fadeInRight .5s ease-out .3s both;}
  .icore-default-li7 { background-color: #4fa9ee; animation: fadeInRight .5s ease-out .5s both;}
  .icore-default-li8 { background-color: #4cd995; animation: fadeInRight .5s ease-out .7s both;}
  .icore-default-li9 { background-color: #4fa9ee; animation: fadeInRight .5s ease-out .9s both;}
  .icore-default-li10 { background-color: #f29e55; animation: fadeInRight .5s ease-out 1.1s both;}
  .icore-default-li-c {
    opacity: 0;
    position: absolute; top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    background-color: #000;
    -webkit-transition: opacity .4s ease-out; transition: opacity .4s ease-out;
  }
  .icore-default-li:hover { transform: scale(1.1, 1.1); }
  .icore-default-li:hover > .icore-default-li-c { opacity: .3; box-shadow: 0 0 5px #000; }

  .icore-default-li-t {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 100%; height: 100%;
    font-size: 14px; color: #fff; text-align: center;
  }
  .icore-default-li-i {
    margin-bottom: -40px;
    width: 180px; height: 180px;
    cursor: default;
  }
  .icore-default-li-i1 { background-position: -1080px 0px !important;cursor: pointer; }
  .icore-default-li-i2 { background-position: -900px 0px !important;cursor: pointer; }
  .icore-default-li-i3 { background-position: -1440px 0px !important;cursor: pointer; }
  .icore-default-li-i4 { background-position: -1260px 0px !important;cursor: pointer; }
  .icore-default-li-i5 { background-position: -720px 0px !important;cursor: pointer; }
  .icore-default-li-i6 { background-position: -180px 0px !important;cursor: pointer; }
  .icore-default-li-i7 { background-position: 0px 0px !important;cursor: pointer; }
  .icore-default-li-i8 { background-position: -540px 0px !important;cursor: pointer; }
  .icore-default-li-i9 { background-position: -360px 0px !important;cursor: pointer; }
</style>