gdy_pc_8/src/point/views/pointIndex.vue

<template>
  <el-container>
      <LoadingAll :isType="2">
      <el-container class="main">
            <div class="main-left">
              <el-aside class="el-main-left-aside">
                <div style="padding: 20px;padding-left: 20px;font-weight: 600;border-bottom: 1px solid #f1f1f1;font-size: 16px;">积分系统</div>
                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" ref="elMenu" :router="true" @select="activeRouter" :unique-opened="true">
                  <template v-for="(item, index) in routers">
                    <div v-if="item.children.length != 0" :key="index">
                      <el-submenu :index="index.toString()" :key="index" v-if="item.children.length >= 1 && item.name != '首页'">
                        <template slot="title">
                          <div class="flex-box-ce">
                            <svg-icon :icon-class="item.icon" class="svgIcon"></svg-icon>
                            <span style="margin-left: 5px;">{{ item.name }}</span>
                          </div>
                        </template>
                        <template v-for="(item2, index2) in item.children">
                          <el-menu-item :index="returnIndex(index, index2)" :ref="item2.path" :route="item2.path" :key="index2" class="font-flex-word">
                            <span slot="title" style="margin-left: 10px;width:120px">{{ item2.name }}</span>
                          </el-menu-item>
                        </template>
                      </el-submenu>
                      <el-menu-item v-else :index="returnIndex(index, index)" :route="item.children[0].path" :ref="item.children[0].path">
                        <div class="flex-box-ce">
                          <svg-icon :icon-class="item.icon" class="svgIcon"></svg-icon>
                          <span slot="title" style="margin-left: 5px;">{{ item.children[0].name }}</span>
                        </div>
                      </el-menu-item>
                    </div>
                  </template>
                </el-menu>
              </el-aside>
            </div>
            <el-main>
              <router-view />
            </el-main>
          </el-container>
      </LoadingAll>
  </el-container>
</template>

<script>
import {mapGetters} from 'vuex';
import LoadingAll from '@/components/LoadingAll';
export default {
  components:{LoadingAll},
  data() {
    return {
      routers: [],
      defaultActive: '0-0',
    };
  },
  watch: {
    $route(to, from) {
      var str = to.path;
      this.routers.map((item, index) => {
        if (item.children.length > 0) {
          item.children.map((item2, index2) => {
            if (item2.path == str) {
              this.defaultActive = index + '-' + index2;
              this.$setCache('point_path', index + '-' + index2);
            }
          });
        }
      });
    }
  },
  computed: {
    ...mapGetters(['site_info'])
  },
  created() {
    if(this.site_info.integral&&this.site_info.integral.enable){
      this.initRouter();
    }
  },
  methods: {
    initRouter() {
        setTimeout(()=>{
          this.routers = [
            { name: '首页', children: this.returnRoutersArr('home'), icon: '#icon-shezhi_qiyexinxi' },
            { name: '基础设置', children: this.returnRoutersArr('basics'), icon: '#icon-shezhi_jichushezhi' },
            { name: '积分管理', children: this.returnRoutersArr('integral'), icon: '#icon-PC_gongzuotai_ABfen' },
            { name: '任务管理', children: this.returnRoutersArr('task'), icon: '#icon-tongji_jifenshijian1' },
            { name: '考勤管理', children: this.returnRoutersArr('attendance'), icon: '#icon-kaoqindaka_daka' },
            { name: '排名&统计', children: this.returnRoutersArr('statistics'), icon: '#icon-kaoqindaka_paiming' },
            // { name: 'A分', children: this.returnRoutersArr('aPoints'), icon: '#icon-kaoqin_kaoqinshenpi' },
          ];
          let point_path=this.$getCache('point_path');
          if (point_path) {
            this.defaultActive = point_path;
            if(point_path=='0-0'){
              this.$router.push({ path:'/pointHome'});
            }
          }
          let pointIndex=this.$getCache('pointIndex');
          if (pointIndex) {
            this.$router.push({ path:pointIndex});
            this.$removeCache('pointIndex')
          }
        },500)
    },
    //当刷新页面是控制左边导航栏的选中
    activeRouter(index, indexPath) {
      this.$setCache('point_path', indexPath[1] ? indexPath[1] : indexPath[0]);
    },
    routerAstrict(data) {
      //限制路由
      let obj = [];
      let supAuthority = this.$supremeAuthority(); //$supremeAuthority获取当前登录者的最高权限
      data.forEach(item => {
        if (!item.hidden) {
          if (!item.meta.jurisdiction) {
            obj.push(item);
          } else {
            if (item.meta.jurisdiction.indexOf(supAuthority) >= 0) {
              obj.push(item);
            }
          }
        }
      });
      return obj;
    },
    returnRoutersArr(str, bool) {
      let routers = [];
      this.$router.options.routes[0].children.some((item, i) => {
        if (item.name == 'pointIndex') {
          routers=item.children
          return true;
        }
      });
      var routersArr = [];
      routers.forEach(item => {
        if (item.meta.groupCode == str) {
          //获取对应模块的路由
          routersArr.push(item);
        }
      });
      if (bool) {
        return routersArr;
      }
      return this.routerAstrict(routersArr);
    },
    returnIndex(str, str2) {
      return str + '-' + str2;
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.announDetails {
  ::v-deep img {
    width: 100%;
  }
}
.updateNotice ::v-deep .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    padding: 13px 20px;
    text-align: center;
    background-color: #3193fc;
    border-radius: 8px 8px 0 0;
    .el-dialog__title {
      font-size: 16px;
      color: #fff;
    }
    .el-icon-close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 20px 20px 30px 20px;
  }
  .el-dialog__footer {
    .dialog-footer {
      .is-round {
        padding: 10px 19px;
        border-radius: 15px;
      }
    }
  }
}

/deep/ .el-aside {
  transition: width 0.28s;
  width: 180px !important;
  height: calc(100vh - 80px);
  background-color: #fff;
}
/deep/  .el-aside::-webkit-scrollbar {
  width: 0px;
  background-color: #fff;
}

/deep/  .el-aside::-webkit-scrollbar-thumb {
  background-color: #ccc;
}



.navigation {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 999;
}
.navigationBox {
  background-color: #409eff;
  color: #fff;
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
}
.navigationItem {
  padding: 6px;
  cursor: pointer;
}
.navigationItem:hover {
  background-color: #005bea;
}
.svgIcon {
  font-size: 20px;
  color: #99a9bf;
}
.money {
  line-height: 32px;
  text-align: center;
  height: 32px;
  color: #ff9600;
  width: 88px;
  background: #ffffff;
  border: 1px solid #ff9600;
  opacity: 1;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 20px;
}
.money2 {
  line-height: 32px;
  text-align: center;
  height: 32px;
  color: #409eff;
  width: 120px;
  background: #ffffff;
  border: 1px solid #409eff;
  opacity: 1;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 20px;
  padding-left: 10px;
}
.megData div:nth-child(1) {
  background-image: linear-gradient(to bottom, #5e6e9b 0%, #232d48 100%);
  text-align: center;
  color: #e1bf66;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
}
.megData div:nth-child(2) {
  background-image: linear-gradient(to bottom, #ffeab2 0%, #e1bf66 100%);
  text-align: center;
  color: #232d48;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
}

.routerActive {
  background-color: #199afb !important;
}

.active {
  color: #409eff;
  background-color: rgba(38, 162, 255, 0.1);
}
.right-menu {
  float: right;
  height: 100%;
  display: flex;
  align-items: center;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    margin: 0 8px;
  }

  .screenfull {
    height: 20px;
  }

  .international {
    vertical-align: top;
  }

  .theme-switch {
    vertical-align: 15px;
  }

  .avatar-container {
    height: 60px;
    margin-right: 30px;

    .avatar-wrapper {
      cursor: pointer;
      margin-top: 5px;
      position: relative;

      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
}
.el-header {
  background-color: #fff;
  padding: 0 !important;
  border-bottom: 1px solid #f1f1f1;
  min-width: 1100px;
}
.el-menu {
  overflow: hidden;
  border: none;
}
.con_nav_left {
  background: #fff;
  overflow-y: scroll;
}
.box-all {
  height: 100%;
  overflow: hidden;
}
.el-main {
  background-color: #f0f4fa;
  height: calc(100vh - 80px);
  overflow-y: scroll;
  padding:0 10px;
  min-width: 1100px;
}
.logo-box {
  width: 180px;
  cursor: pointer;
}
.logo-box .logo {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  border-radius: 6px;
}
.logo-box div {
  font-size: 16px;
  font-weight: 600;
}
.wn {
  height: 26px;
  width: 26px;
  margin-right: 12px;
  cursor: pointer;
}
.hea-right {
  padding: 0 20px;
}
.upgrade {
  margin-left: 10px;
  margin-right: 10px;
}
/deep/ .el-menu-item {
  padding-right: 10px !important;
}
/deep/ .el-menu-item.is-active {
  color: #409eff;
  background-color: #ecf5ff;
}
/deep/ .el-submenu .el-menu-item {
  min-width: 180px;
  box-sizing: border-box;
}
.main-left {
  position: relative;
  .el-main-left-aside {
    // padding-bottom: 90px;
  }
  .menu-bot-but {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding-bottom: 30px;

    span {
      width: 86%;
      display: inline-block;
      height: 50px;
      background-color: #ecf5ff;
      line-height: 50px;
      text-align: center;
      color: #409eff;
      border: 1px solid #409eff;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.5s;
    }
    span:hover {
      background-color: #e0eeff;
      color: #2892e2;
    }
  }
}
</style>