spfm-market-front/src/pages/main/achievements/achievementsIndex.vue

<template>
  <div class="inner-container">
    <div class="box">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
        <el-tab-pane
          v-for="(item, index) in menuList"
          :key="index"
          :name="item.path"
          :label="item.label"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-row>
      <div style="height: 100%;padding-left:15px">
        <router-view />
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "budget",
      userNo: JSON.parse(window.sessionStorage.userInfo).loginNo,
      showList: [],
      routerList: [
        {
          label: "集团绩效",
          path: "/recallJt",
          name: "recallJt",
        },
        {
          label: "部门绩效",
          path: "/recallBm",
          name: "recallBm",
        },
        {
          label: "副总GS",
          path: "/recallGs",
          name: "recallGs",
        },
        // {
        // 	label: "绩效回复列表",
        // 	path: "/kpiRecall",
        // 	name: "kpiRecall"
        // },
        {
          label: "绩效模板管理",
          path: "/kpiMuban",
          name: "kpiMuban",
        },
        {
          label: "下发管理",
          path: "/kpiIssueList",
          name: "kpiIssueList",
        },
        {
          label: "科室绩效",
          path: "/recallkpi",
          name: "recallkpi",
        },
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      let list = []
      this.routerList.map((item) => {
        this.showList.map((row) => {
          if (item.path == row) {
            arr.push(item);
            list  = [...new Set(arr)]
          }
        });
      });
      return list;
    },
  },
  methods: {
    handleClick(val) {
      if (this.$route.path != this.activeName) {
        this.$router.push(this.activeName);
      }
    },
  },
  mounted() {
    this.activeName = this.$route.path;
  },
  created() {
    JSON.parse(sessionStorage.childrenMenus).map((item) => {
      this.showList.push(item.jspUrl);
    });
  },
  watch: {
    $route(to, from) {
      this.activeName = this.$route.path;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tabs__content {
  display: none;
}
.box {
  border-bottom: 1px solid #e1e1e1;
  height: 55px;
  margin-top:10px ;
}
::v-deep .el-tabs__item {
  width: 166px;
  text-align: center;
  border-left: 10px solid #ffffff;
  border-right: 10px solid #ffffff;
}
::v-deep .el-tabs__header {
  margin: 0px;
  background: #d8eaf6;
  color: black;
  border:0;
  margin-left: 20px;
  display: inline-block;
}

::v-deep .is-active {
  background: #0583cd;
  color: white;
}

::v-deep .el-tabs__item:hover {
  color: black;
}
::v-deep .is-active:hover {
  background: #0583cd;
  color: white;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border:0px
}
</style>