WanZai_School/src/layout/sidebar/SidevarItem.vue

<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      text-color="rgba(88, 109, 133, 1)"
      active-color="#fff"
      :default-active="activeIndex"
      :collapse="menuClose"
      @select="handleSelect"
      :router="true"
    >
      <!-- :default-openeds="[34]" -->
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/logo.png" style="width: 30px; height: 24px"
        /></el-icon>
      </div>
      <!-- 菜单项 -->
      <div v-for="item in roles" class="items">
        <!-- 系统首页 -->
        <el-menu-item
          v-if="item.name == 'home'"
          :index="`/wanzai/${item.name}`"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/home'"
            iconName="home_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="home" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 用户管理 -->
        <el-menu-item
          :index="`/wanzai/${item.name}`"
          v-if="item.name == 'user'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/user'"
            iconName="user_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="user" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 身份管理 -->
        <el-menu-item
          v-if="item.name == 'identity'"
          :index="`/wanzai/${item.name}`"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/identity'"
            iconName="identity_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="identity" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 年级管理 -->
        <el-sub-menu :index="item.name" v-if="item.name == 'classGrade'">
          <template #title>
            <svg-icon
              v-if="
                activeIndex == '/wanzai/class' ||
                activeIndex == '/wanzai/grades' ||
                activeIndex == '/wanzai/post' ||
                activeIndex == '/wanzai/subject' ||
                activeIndex == '/wanzai/semester'
              "
              iconName="classGrade_s"
              class="iconClass"
            ></svg-icon>
            <svg-icon v-else iconName="classGrade" class="iconClass"></svg-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 应用管理 -->
        <el-menu-item
          :index="`/wanzai/${item.name}`"
          v-if="item.name == 'apply'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/apply'"
            iconName="apply_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="apply" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 能耗管理 -->
        <el-menu-item
          v-if="item.name == 'energy'"
          :index="`/wanzai/${item.name}`"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/energy'"
            iconName="energy_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="energy" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 校园安全 -->
        <el-menu-item
          :index="`/wanzai/${item.name}`"
          v-if="item.name == 'safety'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/safety'"
            iconName="safety_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="safety" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 访客预约 -->
        <el-menu-item
          :index="`/wanzai/${item.name}`"
          v-if="item.name == 'caller'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/caller'"
            iconName="caller_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="caller" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 成绩管理 -->
        <el-menu-item
          :index="`/wanzai/${item.name}`"
          v-if="item.name == 'grade'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/grade'"
            iconName="grade_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="grade" class="iconClass"></svg-icon>
          <span>{{ item.meta.title }}</span>
        </el-menu-item>
        <!-- 综合素质评价 -->
        <el-sub-menu :index="item.name" v-if="item.name == 'evaluate'">
          <template #title>
            <svg-icon
              v-if="
                activeIndex == '/wanzai/teacher' ||
                activeIndex == '/wanzai/student'
              "
              iconName="evaluate_s"
              class="iconClass"
            ></svg-icon>
            <svg-icon v-else iconName="evaluate" class="iconClass"></svg-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 数据交换 -->
        <el-sub-menu :index="item.name" v-if="item.name == 'dataExchange'">
          <template #title>
            <svg-icon
              v-if="
                activeIndex == '/wanzai/source' ||
                activeIndex == '/wanzai/task' ||
                activeIndex == '/wanzai/log'
              "
              iconName="data_s"
              class="iconClass"
            ></svg-icon>
            <svg-icon v-else iconName="data" class="iconClass"></svg-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 系统通知 -->
        <el-sub-menu :index="item.name" v-if="item.name == 'system'">
          <template #title>
            <svg-icon
              v-if="
                activeIndex == '/wanzai/info' ||
                activeIndex == '/wanzai/screenShot' ||
                activeIndex == '/wanzai/roles'
              "
              iconName="system_s"
              class="iconClass"
            ></svg-icon>
            <svg-icon v-else iconName="system" class="iconClass"></svg-icon>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/wanzai/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </div>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
import { useStore } from "vuex";

import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

const menuClose = ref(false);
const activeIndex = ref(1);
const acitveItems = reactive({ list: [] });
const roles = ref();
const roleList = ref();

watch(
  () => store.state.user.collapse,
  (newValue, oldValue) => {
    menuClose.value = newValue;
  }
);
// watch(
//   () => store.state.user.activeIndex,
//   (newValue, oldValue) => {
//     console.log(newValue);
//     activeIndex.value = newValue;
//   }
// );
watch(
  () => router.currentRoute.value.fullPath,
  (newValue, oldValue) => {
    console.log(newValue);
    store.commit("indexUp", newValue);
    activeIndex.value = newValue;
  }
);

const handleSelect = (key, keyPath) => {
  // store.commit("indexUp", key);
  // activeIndex.value = key;
  // sessionStorage.setItem("sidevarItem", key);
  console.log(key, keyPath);

  router.push({
    path: `${key}`,
  });

  activeIndex.value = key;
  store.commit("indexUp", key);
  sessionStorage.setItem("sidevarItem", key);
  // if (activeIndex.value == 1) {
  //   router.push({
  //     path: `/seniorCelebrity/order`,
  //   });
  // }
};
onBeforeMount(() => {
  activeIndex.value = sessionStorage.getItem("sidevarItem");
  roleList.value = JSON.parse(sessionStorage.getItem("roleList"));
  let classArr = [];
  let evaluateArr = [];
  let dataExchangeArr = [];
  let systemArr = [];
  let arr = [];
  roleList.value.forEach((item) => {
    if (
      item.routeName == "class" ||
      item.routeName == "grades" ||
      item.routeName == "post" ||
      item.routeName == "subject" ||
      item.routeName == "semester" ||
      item.routeName == "exam"
    ) {
      classArr.push({
        name: item.routeName,
        meta: { isAuth: true, title: item.name },
      });
    } else if (item.routeName == "teacher" || item.routeName == "student") {
      evaluateArr.push({
        name: item.routeName,
        meta: { isAuth: true, title: item.name },
      });
    } else if (
      item.routeName == "source" ||
      item.routeName == "task" ||
      item.routeName == "log"
    ) {
      dataExchangeArr.push({
        name: item.routeName,
        meta: { isAuth: true, title: item.name },
      });
    } else if (
      item.routeName == "info" ||
      item.routeName == "screenShot" ||
      item.routeName == "roles"
    ) {
      systemArr.push({
        name: item.routeName,
        meta: { isAuth: true, title: item.name },
      });
    } else {
      arr.push({
        name: item.routeName,
        meta: { isAuth: true, title: item.name },
      });
    }
  });
  console.log(classArr, "年级管理");
  console.log(evaluateArr, "综合素质评价");
  console.log(dataExchangeArr, "数据交换");
  console.log(systemArr, "系统设置");

  if (classArr.length != 0) {
    // arr.push({
    //   name: "classGrade",
    //   meta: { isAuth: true, title: "年级管理" },
    //   children: classArr,
    // });
    arr.splice(3, 0, {
      name: "classGrade",
      meta: { isAuth: true, title: "年级管理" },
      children: classArr,
    });
  }
  if (evaluateArr.length != 0) {
    arr.push({
      name: "evaluate",
      meta: { isAuth: true, title: "综合素质评价" },
      children: evaluateArr,
    });
  }
  if (dataExchangeArr.length != 0) {
    arr.push({
      name: "dataExchange",
      meta: { isAuth: true, title: "数据交换" },
      children: dataExchangeArr,
    });
  }
  if (systemArr.length != 0) {
    arr.push({
      name: "system",
      meta: { isAuth: true, title: "系统设置" },
      children: systemArr,
    });
  }
  roles.value = arr;
  // roles.value = store.state.user.roles;
  console.log(roles.value);
});
</script>

<style lang="scss" scoped>
.iconClass {
  width: 1.5em;
  height: 1.5em;
  margin: 0 20px !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 220px;
  // min-height: 400px;
}
.box-item {
  width: 220px !important;
  height: calc(100vh);
}
.el-menu {
  width: 220px;
  height: 100%;
  background: rgba(24, 51, 82, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
  // background: rgba(24, 51, 82, 1);
  overflow: auto;

  .logo {
    height: 65px;
    color: rgb(255, 255, 255);
    cursor: default;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .logo:hover {
    background-color: transparent !important;
  }

  .el-sub-menu {
    .el-menu-item {
      // background-color: rgba(255, 255, 255, 1);
      color: rgba(88, 109, 133, 1);
      padding: 0 20px 0 78px;
    }

    :deep(.el-tooltip__trigger) {
      padding: 0 20px;
    }

    :deep(.el-sub-menu__title):hover {
      color: rgba(18, 38, 61, 1);
      background-color: rgba(18, 38, 61, 1);

      span {
        color: #fff;
      }
    }

    .el-menu--inline {
      background-color: rgba(9, 101, 98, 1);
    }
  }

  .el-menu {
    .el-menu-item {
      background-color: rgba(24, 51, 82, 1);
      // padding-left: 30px;
    }

    .el-menu-item:hover {
      color: #fff;
      background-color: rgba(18, 38, 61, 1);
    }
  }

  .el-sub-menu:hover {
    color: #fff;
  }

  .el-menu-item:hover {
    background-color: rgba(18, 38, 61, 1);
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: rgba(18, 38, 61, 1);
    color: #fff;
  }
}

// .el-menu-item.is-active {
//   box-sizing: border-box;
//   // background-color: #fff;
//   background-color: rgba(111, 182, 184, 1);
//   color: #fff;
// }
.el-sub-menu.is-active {
  :deep(.el-sub-menu__title) {
    // border: 1px solid red;
    color: #fff !important;
    background-color: rgba(18, 38, 61, 1);
  }
}
</style>