onlinenew_manage/src/layout/SidevarItem1.vue

<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#293749"
      text-color="#fff"
      active-text-color="#fff"
      :default-active="sidevarItem"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
    >
      <div class="logo el-menu-item">
        <el-icon :size="20"
          ><img src="@/assets/img/logo.png" style="width: 40px; height: 40px"
        /></el-icon>
      </div>
      <div v-for="i in roles.list" :key="i.path">
        <el-sub-menu
          v-if="i.name == '房源管理' || i.name == '权限管理'"
          :index="i.index"
          popper-class="ceshi"
          :teleported="true"
        >
          <template #title>
            <SvgIcon :name="i.icon" color="#fff" size="22"></SvgIcon>
            <span>{{ i.name }}</span>
          </template>
          <el-menu-item
            v-for="item in i.children"
            :index="item.path"
            :key="item.paht"
          >
            <template #title>{{ item.name }}</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="i.path">
          <SvgIcon :name="i.icon" color="#fff" size="22"></SvgIcon>
          <template #title>{{ i.name }}</template>
        </el-menu-item>
      </div>

      <!-- <el-menu-item index="/dataOverview">
        <SvgIcon name="dataOverview" color="#fff" size="22"></SvgIcon>
        <template #title>数据总览</template>
      </el-menu-item>

      <el-menu-item index="/studentInfo">
        <SvgIcon name="studentInfo" color="#fff" size="22"></SvgIcon>
        <template #title>学生信息管理</template>
      </el-menu-item>

      <el-sub-menu index="1" popper-class="ceshi" :teleported="true">
        <template #title>
          <SvgIcon name="building" color="#fff" size="22"></SvgIcon>
          <span>房源管理</span>
        </template>
        <el-menu-item index="/building">
          <template #title>楼栋信息管理</template>
        </el-menu-item>
        <el-menu-item index="/dormitory">
          <template #title>寝室信息管理</template>
        </el-menu-item>
        <el-menu-item index="/bed">
          <template #title>床位信息管理</template>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="/student">
        <SvgIcon name="student" color="#fff" size="22"></SvgIcon>
        <template #title>学生住宿信息</template>
      </el-menu-item>
      <el-menu-item index="/quarterage">
        <SvgIcon name="quarterage" color="#fff" size="22"></SvgIcon>
        <template #title>住宿信息统计</template>
      </el-menu-item>
      <el-menu-item index="/caller">
        <SvgIcon name="caller" color="#fff" size="22"></SvgIcon>
        <template #title>访客信息管理</template>
      </el-menu-item>
      <el-sub-menu index="2" popper-class="ceshi" :teleported="true">
        <template #title>
          <SvgIcon name="role" color="#fff" size="22"></SvgIcon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="/user">
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item index="/role">
          <template #title>角色管理</template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/system">
        <SvgIcon name="system" color="#fff" size="22"></SvgIcon>
        <template #title>系统设置</template>
      </el-menu-item> -->
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive } from "vue";
import {
  Fold,
  Expand,
  Service,
  Position,
  View,
  Open,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/index";

const store = useCounterStore();
const { isCollapse, sidevarItem, roleList } = storeToRefs(store);

const router = useRouter();
const roles = reactive({
  list: [],
});

const acitveItems = reactive({ list: [] });

const handleSelect = (key) => {
  console.log(key);

  store.setItem(key);
  router.push({
    path: `${key}`,
  });
};
const handleOpen = () => {};
const handleClose = () => {};
onMounted(() => {
  console.log(roleList.value);
  roleList.value.forEach((i) => {
    if (i.path == "/building" || i.path == "/dormitory" || i.path == "/bed") {
      const exists = roles.list.some((item) => item.name === "房源管理");
      if (exists) {
        roles.list.forEach((j) => {
          if (j.name == "房源管理") {
            j.children.push({
              name: i.name,
              path: i.path,
              icon: i.icon,
            });
          }
        });
      } else {
        roles.list.push({
          name: "房源管理",
          index: 1,
          icon: "building",
          children: [
            {
              name: i.name,
              path: i.path,
              icon: i.icon,
            },
          ],
        });
      }
    } else if (i.path == "/user" || i.path == "/role") {
      const exists = roles.list.some((item) => item.name === "权限管理");
      if (exists) {
        roles.list.forEach((j) => {
          if (j.name == "权限管理") {
            j.children.push({
              name: i.name,
              path: i.path,
              icon: i.icon,
            });
          }
        });
      } else {
        roles.list.push({
          name: "权限管理",
          index: 2,
          icon: "role",
          children: [
            {
              name: i.name,
              path: i.path,
              icon: i.icon,
            },
          ],
        });
      }
    } else {
      roles.list.push({
        name: i.name,
        path: i.path,
        icon: i.icon,
      });
    }
  });
  console.log(roles.list);
});
onBeforeMount(() => {
  // console.log("SidevarItem/onBeforeMount");
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
  user-select: none;
}
.box-item {
  height: 100vh;
}
:deep(.el-menu--vertical) {
  height: 100%;
  overflow: auto;
  background-color: rgba(48, 65, 86, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);

  .logo {
    height: 65px;
    color: rgb(255, 255, 255);
    cursor: default;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0 !important;
  }
  .logo:hover {
    background-color: transparent !important;
  }

  .el-sub-menu {
    padding: 0 14px;
    margin-bottom:20px ;
    .el-sub-menu__title {
      height: 40px;
      // margin: 0 0 20px 0;
      margin: 0;
      border-radius: 10px;
    }
    .el-menu-item {
      height: 40px;
      margin: 20px 0 !important;
      border-radius: 10px;
      .el-menu-tooltip__trigger {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &:last-child {
        margin: 20px 0 0 0 !important;
      }
      &.is-active {
        background: linear-gradient(
          90deg,
          rgba(38, 151, 255, 1) 0%,
          rgba(102, 182, 255, 1) 100%
        );
      }
    }
    .el-menu.el-menu--inline {
      box-shadow: none;
      background-color: rgba(48, 65, 86, 1);
    }
    &.is-active.is-opened {
      .el-sub-menu__title {
        background: linear-gradient(
          90deg,
          rgba(38, 151, 255, 1) 0%,
          rgba(102, 182, 255, 1) 100%
        );
      }
    }
  }

  .el-menu-item {
    height: 40px;
    margin: 20px 14px;
    border-radius: 10px;
    .el-menu-tooltip__trigger {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &.is-active {
      background: linear-gradient(
        90deg,
        rgba(38, 151, 255, 1) 0%,
        rgba(102, 182, 255, 1) 100%
      );
    }
  }
}
:deep(.el-menu--collapse) {
  .el-sub-menu {
    padding: 0;
    margin: 20px 10px;
    .el-sub-menu__title {
      span {
        display: none;
      }
      .el-icon {
        margin-right: 0;
      }
      .el-sub-menu__icon-arrow {
        display: none;
      }
    }
  }
  .el-sub-menu.is-active {
    .el-sub-menu__title {
      background: linear-gradient(
        90deg,
        rgba(38, 151, 255, 1) 0%,
        rgba(102, 182, 255, 1) 100%
      );
      span {
        display: none;
      }
    }
  }
  .el-sub-menu {
    padding: 0;
    margin: 0 10px 20px !important;
    .el-sub-menu__title {
      width: 40px;
      padding: 0 20px;
      // margin: 0 0 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .el-sub-menu {
    .el-menu-item {
      border: 1px solid red;
    }
  }
  .el-menu-item {
    width: 40px;
    margin: 20px 10px;
    .el-menu-tooltip__trigger {
      .el-icon {
        margin-right: 0;
      }
    }
  }
}
</style>

<style lang="scss">
.ceshi {
  &.is-light {
    border: none !important;
  }
  .el-menu-item.is-active {
    background: linear-gradient(
      90deg,
      rgba(38, 151, 255, 1) 0%,
      rgba(102, 182, 255, 1) 100%
    );
  }
}
</style>