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 == 'leave'"
        >
          <svg-icon
            v-if="activeIndex == '/wanzai/leave'"
            iconName="leave_s"
            class="iconClass"
          ></svg-icon>
          <svg-icon v-else iconName="leave" 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-sub-menu :index="item.name" v-if="item.name == 'track'">
          <template #title>
            <svg-icon
              v-if="
                activeIndex == '/wanzai/trackSearch' ||
                activeIndex == '/wanzai/trafficRecord' ||
                activeIndex == '/wanzai/attendanceRecord' ||
                activeIndex == '/wanzai/faceRecord'
              "
              iconName="track_s"
              class="iconClass"
            ></svg-icon>
            <svg-icon v-else iconName="track" 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 == '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,
  onUnmounted,
  watch,
  reactive,
  nextTick,
} from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
const store = useStore();
const router = useRouter();

const api = ref();
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`,
  //   });
  // }
};
const roleListData = async () => {};
const roleListChange = async () => {
  const formDatas = new FormData();
  nextTick(async () => {
    formDatas.append("userId", "");
    let resData = await axios({
      method: "post",
      url: api.value + "/wanzai/api/smartAuthorGroup/queryUserAuthor",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: formDatas,
    });
    // console.log(resData, "查看当前用户权限");
    if (resData.data.code == 200) {
      let roleList = resData.data.data[0].treAuthor;
      roleList.value = resData.data.data[0].treAuthor;
      roleList.forEach((item) => {
        let list = item.route.split("/");
        item.routeName = list[2];
      });
      let flag = roleList.some((item) => {
        return item.route == "/wanzai/home";
      });
      let address = roleList[0].route;
      console.log(flag, address);
      sessionStorage.setItem("roleList", JSON.stringify(roleList));
      store.commit("ROLELIST", "");
      console.log("能监听到", roleList.value);
      {
        let classArr = [];
        let trackArr = [];
        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 == "trackSearch" ||
            item.routeName == "trafficRecord" ||
            item.routeName == "attendanceRecord" ||
            item.routeName == "faceRecord"
          ) {
            trackArr.push({
              name: item.routeName,
              meta: { isAuth: true, title: item.name },
            });
          }
           else if (
            item.routeName == "teacher" ||
            item.routeName == "student" ||
            item.routeName == "grade"
          ) {
            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.splice(3, 0, {
            name: "classGrade",
            meta: { isAuth: true, title: "年级管理" },
            children: classArr,
          });
        }
        if (trackArr.length != 0) {
          arr.splice(9, 0, {
            name: "track",
            meta: { isAuth: true, title: "轨迹管理" },
            children: trackArr,
          });
        }
        
        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, "1111111111111111111111111111111");
      }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: resData.data.message,
        center: true,
      });
    }
  });
};
onBeforeMount(() => {
  activeIndex.value = sessionStorage.getItem("sidevarItem");
  api.value = store.state.user.api;
  roleListChange();
});
onMounted(() => {
  window.addEventListener("storage", roleListChange);
});

onUnmounted(() => {
  window.removeEventListener("storage", roleListChange);
});
</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>