gdy_pc_8/src/performance/views/performanceIndex.vue

<template>
  <el-container>
    <LoadingAll :isType="3">
      <el-container>
        <el-aside>
          <div style="padding: 20px;padding-left: 20px;font-weight: 600;border-bottom: 1px solid #f1f1f1;font-size: 16px;">绩效系统</div>
          <el-menu :default-active="activeIndex" 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-menu-item :index="returnIndex(index, 0)" :route="item.children[0].path" :ref="item.children[0].path"  v-if="item.label=='工作台' || item.label=='我的绩效'">
                  <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].label }}</span>
                  </div>
                </el-menu-item>
                <el-submenu :index="index.toString()" :key="index" v-else>
                  <template slot="title">
                    <div class="flex-box-ce">
                      <svg-icon :icon-class="item.icon" class="svgIcon"></svg-icon>
                      <span style="margin-left: 5px;">{{ item.label }}</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.label }}
                        <span :class="item2.label=='考核明细'? 'tio2':'tio'" v-if="getRole && (item2.label=='考核明细' || item2.label=='考核表设置')">
                          {{item2.label=='考核明细' ? '再发起' : '先配置'}}
                        </span>
                      </span>
                    </el-menu-item>
                  </template>
                </el-submenu>
              </div>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <keep-alive :include="keepAliveView"><router-view/></keep-alive>
        </el-main>
      </el-container>
    </LoadingAll>

    <el-dialog :visible.sync="usingTheStrategy" width="680px" :before-close="navDialog" :close-on-click-modal="false">
      <div>
        <img style="width: 100%;" :src="'static/images/' + navList[navNew].image + '.png'" alt="" />
        <div class="flex-box flex-d-center">
          <el-button @click="navPath(navList[navNew].paths)" type="primary" plain>{{ navList[navNew].name }}</el-button>
          <div>
            <el-button v-if="navNew > 0" @click="navNew--">上一页</el-button>
            <el-button v-if="navNew < 3" @click="navNew++" type="primary">下一页</el-button>
            <el-button v-if="navNew == 3" type="primary" @click="usingTheStrategy = false">开始使用</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapGetters} from 'vuex';
import LoadingAll from '@/components/LoadingAll';
export default {
  components:{LoadingAll},
  data() {
    return {
      usingTheStrategy: false,
      tutorialsvisible: false,
      navList: [
        { name: '去"新建考核模板"', image: 'nav_jx_1', paths: 'evaluate' },
        { name: '去"发起考核"', image: 'nav_jx_2', paths: 'sponsorAssess' },
        { name: '看"考核管理"', image: 'nav_jx_3', paths: 'assessManagement' },
        { name: '看"绩效报表"', image: 'nav_jx_4', paths: 'statement' }
      ],
      navNew: 0,

      activeIndex: '0-0',
      routers: [],
      url: '',
      profile: this.$store.getters.user_info,
      getRole: this.$getRole(1),
      keepAliveView:['job','management','score','assessManagement','assessDetails','statement','set'],  //需要缓存的组件名称列表，用逗号分隔
      keepAliveView2:['job','management','score','assessManagement','assessDetails','statement','set'],  //需要缓存的组件名称列表，用逗号分隔

      userInfo: this.$userInfo(), //绩效接口人员信息
    };
  },
  watch: {
    $route(to,form) {
      // console.log(to.name,form.name)
       // 缓存页面，达到缓存页面条件的效果
      if(to.name=='job'&&form.name=='assessManagement'){//首页
        this.returnArr('job')
      }else if(to.name=='management'&&form.name=='job'){//我管理的-更多
        this.returnArr('management')
      }else if(to.name=='score'&&form.name=='job'){//我评分的-更多
        this.returnArr('score')
      }else if(to.name=='assessManagement'&&form.name=='myPerformance'){//考核管理
        this.returnArr('assessManagement')
      }else if(to.name=='assessDetails'&&form.name=='assessManagement'){//考核管理2
        this.returnArr('assessDetails')
      }else if(to.name=='assessDetails'&&form.name=='sponsorAssess'){//发起考核进入-考核管理
        this.returnArr('assessDetails')
      }else if(to.name=='assessDetails'&&form.name=='analyse'){//结果分析-考核管理
         this.returnArr('assessDetails')
      }else if(to.name=='statement'&&form.name=='myPerformance'){//绩效报表
        this.returnArr('statement')
      }else if(to.name=='set'&&form.name=='statement'){//设置
        this.returnArr('set')
      }else if(to.name=='set'&&form.name=='job'){//设置
        this.returnArr('set')
      }else{
        this.keepAliveView=JSON.parse(JSON.stringify(this.keepAliveView2));
      }
      var str = to.path;
      this.routers.map((item, index) => {
        if (item.path == str) {
          this.activeIndex = index + '-' + index;
          this.$setCache('performance_path', index + '-' + index);
        }
        item.children.map((item2, index2) => {
          if (item2.path == str) {
            this.activeIndex = index + '-' + index2;
            this.$setCache('performance_path', index + '-' + index2);
          }
        });

      });
    }
  },
  computed: {
    ...mapGetters(['site_info'])
  },
  created() {
    this.setRouters();
  },
  mounted() {
    this.getRole=this.$getRole(1);
    // this.$nextTick(() => {
    //   if (!this.$getCache('newNav') && this.getRole) {
    //     this.usingTheStrategy = true;
    //     this.$setCache('newNav', true);
    //   }
    // });
  },
  methods: {
    returnArr(str){
      this.keepAliveView=this.keepAliveView.filter(item=>{
        return item!=str;
      })
      setTimeout(()=>{
        this.keepAliveView=JSON.parse(JSON.stringify(this.keepAliveView2));
      },1000)
    },
    returnIndex(str, str2) {
      return str + '-' + str2;
    },
    //当刷新页面是控制左边导航栏的选中
    activeRouter(index, indexPath) {
      this.$setCache('setUrlName', null); //清空set页面的保存展示页面
      this.$setCache('performance_path', indexPath[1] ? indexPath[1] : indexPath[0]);
    },
    navPath(paths) {
      this.usingTheStrategy = false;
      this.$router.push({ name: paths });
    },
    strategys() {
      this.usingTheStrategy = true;
      this.tutorialsvisible = false;
    },
    navDialog(done) {
      done();
      this.tutorialsvisible = true;
    },
    openHome() {
      this.$router.push({ path: '/job' });
    },
    returnRoutersArr(str,routers) {
      var routersArr = [];
      routers.forEach(item => {
        if (item.meta.groupCode == str) {
          //获取对应模块的路由
          routersArr.push(item);
        }
      });
      return routersArr;
    },
    setRouters() {
      // 刚进入来清除一些缓存
      this.$removeCache(['isVariationJx', 'assessDetails', 'cache_s_m', 'indexSet', 'staffAssDet']);

      let main = this.userInfo.per_permission.main;
      let per_role = this.userInfo.per_permission.per_role; //用户的身份

      let childrenRouter = [];
      let routers=[];
      this.$router.options.routes[0].children.some((item, i) => {
        if (item.name == 'performanceIndex') {
          childrenRouter = item.children.filter(e => {
            if (e.meta) {
              return e;
            }
          });
          return true;
        }
      });

      if (per_role == 'manager') {
        if (main == 1) {//主管理员
          this.setRole('masterAdministrator');
          routers=childrenRouter
        } else {//子管理员
          this.setRole('childAdministrator');
          routers = this.getChildRouter(childrenRouter, 'childAdministrator');
        }
      } else {
        //员工||部门管理员
        if (this.userInfo.employee_detail.manage_dept_ids.length > 0) {
          this.setRole('deptManager');
          routers = this.getChildRouter(childrenRouter, 'deptManager');
        } else {
          this.setRole('employee');
          routers = this.getChildRouter(childrenRouter, 'employee');
        }
      }
      let routersArr = [
         { label: '工作台', children: this.returnRoutersArr('job',routers), icon: '#icon-gongzuotai1'},
         { label: '绩效管理', children: this.returnRoutersArr('assessManagement',routers), icon: '#icon-tongxunlu_tianjiabumen'},
         { label: '绩效报表', children: this.returnRoutersArr('statement',routers), icon: '#icon-shezhi_jiaose'},
         { label: '我的绩效', children: this.returnRoutersArr('myPerformance',routers), icon: '#icon-yonghu'},
         { label: '设置', children: this.returnRoutersArr('set',routers), icon: '#icon-shezhi_jichushezhi'},
      ];
      this.$setCache('performance_routers',routersArr);
      this.routers=routersArr
      let performance_path=this.$getCache('performance_path');
      if (performance_path) {
        this.activeIndex =performance_path;
        if(performance_path=='0-0'){
          this.$router.push({ path:'/job'});
        }
      }
      let performanceIndex=this.$getCache('performanceIndex');
      if (performanceIndex) {
        this.$router.push({ path:performanceIndex});
        this.$removeCache('performanceIndex')
      }
    },
    setRole(str) {
      this.$setCache('role', str);
    },
    //获取路由
    getChildRouter(routerChildren, str) {
      let permission = this.userInfo.per_permission.permission; //用户的权限
      let routers = {}; //过滤后的路由,顺便去重
      routerChildren.forEach(item => {
        let role = item.meta.role;
        let jurisdiction = item.meta.jurisdiction;
        if (item.meta) {
          //当没设置meta时不显示在导航栏上
          if (role.indexOf(str) >= 0) {
            if (str == 'employee' || str == 'deptManager') {
              //当是员工||创始人||部门主管时，不需要验证权限
              routers[item.name] = item;
              return;
            }
            //当登录人是7.0部门管理者时写死显示绩效报表
            if (item.name == 'statement' && this.$userInfo().employee_detail.manage_dept_ids.length > 0) {
              routers[item.name] = item;
              return;
            }
            permission.forEach(roleItem => {
              if (jurisdiction) {
                if (jurisdiction.indexOf(roleItem.id) >= 0) {
                  routers[item.name] = item;
                }
              }
            });
          }
        }
      });
      let routersArr = [];
      for (let s in routers) {
        routersArr.push(routers[s]);
      }
      return routersArr;
    },


  }
};
</script>
<style scoped="scoped" lang="scss">
.tio{
  font-size: 12px;
  background-color: #FFF2CC;
  border-radius: 5px;
  color: #98683C;
  padding: 0 2px;
}
.tio2{
  font-size: 12px;
  background-color: #D4E4FF;
  border-radius: 5px;
  color: #409EFF;
  padding: 0 2px;
}
.appImg {
  width: 200px;
  height: 200px;
}
.data-all {
  margin-bottom: 10%;
  color: #595959;
  text-align: center;
}
 ::v-deep .el-dialog__header {
      border-bottom: none;
}
.svgIcon {
  font-size: 20px;
  color: #99a9bf;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
}
.el-header {
  background-color: #fff;
  padding: 0 !important;
  border-bottom: 1px solid #f1f1f1;
  position: relative;
  box-sizing: border-box;
  height: 60px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
}
.el-menu {
  overflow: hidden;
  border: none;
}
.el-aside {
  transition: width 0.28s;
  width: 180px !important;
  background-color: #fff;
  height: calc(100vh - 80px);
  border-radius: 5px;
}
.el-aside::-webkit-scrollbar {
  width: 0px;
  background-color: #fff;
}

.el-aside::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.container-all {
  background-color: #f4f6f9;
  height: 100%;
  overflow: hidden;
}
.el-main {
  height: calc(100vh - 80px);
  overflow-y: scroll;
  padding: 0 10px;
  min-width: 1100px;
}
.logo-box {
  max-width: 400px;
  min-width: 180px;
}
.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;
}

.PCtutorials {
  width: 100px;
  color: #409EFF;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  box-shadow: 1px 1px 0px 0px #ccc;
  height: 35px;
  line-height: 35px;
  font-weight: 500;
  text-align: center;
  border: 2px solid #409EFF;
  // background-image: linear-gradient(117deg, #00c6fb 0%, #005bea 100%);
}
// .PCtutorials:hover {
//   background-color: #0055ff;
// }
</style>