ihotel-manage/src/layout/sidebar/SidevarItem copy.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 roleData" class="items">
        <!-- 房态管理 -->
        <el-menu-item
          v-if="item.name == 'roomStatus'"
          index="/hotel/roomStatus"
        >
          <img
            v-if="activeIndex == '/hotel/roomStatus'"
            src="@/assets/icons/roomStatusS.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/icons/roomStatus.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>房态管理</span>
        </el-menu-item>
        <!-- 房型管理 -->
        <el-sub-menu index="roomTypes" v-if="item.name == 'roomTypes'">
          <template #title>
            <img
              v-if="
                activeIndex == '/hotel/roomType' ||
                activeIndex == '/hotel/roomPrice'
              "
              src="@/assets/icons/roomTypeS.png"
              style="width: 20px; height: 20px; margin: 0 20px 0 18px"
              alt=""
            />
            <img
              v-else
              src="@/assets/icons/roomType.png"
              style="width: 20px; height: 20px; margin: 0 20px 0 18px"
              alt=""
            />
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 订单管理 -->
        <el-menu-item v-if="item.name == 'order'" index="/hotel/order">
          <img
            v-if="activeIndex == '/hotel/order'"
            src="@/assets/icons/orderS.png"
            alt=""
            style="width: 24px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/icons/order.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>订单管理</span>
        </el-menu-item>
        <!-- 授权管理 -->
        <el-sub-menu index="classs" v-if="item.name == 'classs'">
          <template #title>
            <img
              v-if="
                activeIndex == '/hotel/class' || activeIndex == '/hotel/process'
              "
              src="@/assets/icons/classS.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <img
              v-else
              src="@/assets/icons/class.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 统计报表 -->
        <el-menu-item v-if="item.name == 'statement'" index="/hotel/statement">
          <img
            v-if="activeIndex == '/hotel/statement'"
            src="@/assets/icons/statementS.png"
            alt=""
            style="width: 24px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/icons/statement.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>统计报表</span>
        </el-menu-item>
        <!-- 设备管理 -->
        <el-sub-menu index="doorLocks" v-if="item.name == 'doorLocks'">
          <template #title>
            <img
              v-if="
                activeIndex == '/hotel/doorLock' ||
                activeIndex == '/hotel/meter'
              "
              src="@/assets/icons/doorLockS.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <img
              v-else
              src="@/assets/icons/doorLock.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 组织架构 -->
        <el-sub-menu index="users" v-if="item.name == 'users'">
          <template #title>
            <img
              v-if="
                activeIndex == '/hotel/user' ||
                activeIndex == '/hotel/userRoles'
              "
              src="@/assets/icons/userS.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <img
              v-else
              src="@/assets/icons/user.png"
              style="width: 22px; height: 22px; margin: 0 18px 0 18px"
              alt=""
            />
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item v-for="i in item.children" :index="`/hotel/${i.name}`">
            <template #title>
              <span>{{ i.meta.title }}</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <!-- 账号管理 -->
        <el-menu-item v-if="item.name == 'account'" index="/hotel/account">
          <img
            v-if="activeIndex == '/hotel/account'"
            src="@/assets/icons/accountS.png"
            alt=""
            style="width: 24px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/icons/account.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>账号管理</span>
        </el-menu-item>
        <!-- 系统通知 -->
        <el-menu-item v-if="item.name == 'system'" index="/hotel/system">
          <img
            v-if="activeIndex == '/hotel/system'"
            src="@/assets/icons/systemS.png"
            alt=""
            style="width: 24px; height: 22px; margin: 0 18px"
          />
          <img
            v-else
            src="@/assets/icons/system.png"
            alt=""
            style="width: 22px; height: 22px; margin: 0 18px"
          />
          <span>系统设置</span>
        </el-menu-item>
      </div>

      <!-- 民宿管理 -->
      <!-- <el-sub-menu :index="56">
        <template #title>
          <img v-if="activeIndex == '/seniorCelebrity/houseInfo' ||
            activeIndex == '/seniorCelebrity/houseType' ||
            activeIndex == '/seniorCelebrity/houseList'
            " src="@/assets/houseS.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
          <img v-else src="@/assets/house.png" style="width: 22px; height: 22px; margin: 0 20px 0 18px" alt="" />
          <span>民宿管理</span>
        </template>
        <el-menu-item index="/seniorCelebrity/houseInfo">
          <template #title>
            <span>民宿信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/houseType">
          <template #title>
            <span>房型管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/seniorCelebrity/houseList">
          <template #title>
            <span>房源信息</span>
          </template>
        </el-menu-item>
      </el-sub-menu> -->
    </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();
const roleData = 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("activeItem", key);
  // console.log(key, keyPath);
  router.push({
    path: `${key}`,
  });

  // activeIndex.value = key;
  // console.log(key);

  // store.commit("indexUp", key);
  // sessionStorage.setItem("activeItem", key);
  // if (activeIndex.value == 1) {
  //   router.push({
  //     path: `/seniorCelebrity/order`,
  //   });
  // }
};
onBeforeMount(() => {
  activeIndex.value = sessionStorage.getItem("sidevarItem");
  let arr = JSON.parse(sessionStorage.getItem("roleList"));
  let roles = [];
  arr.forEach((i) => {
    // 房态管理
    if (i.path == "roomStatus") {
      roles.push({
        name: "roomStatus",
        meta: { isAuth: true, title: "房态管理" },
      });
    }
    // 房型管理
    else if (i.path == "roomType" || i.path == "roomPrice") {
      let flag=roles.some(item=>{
        return item.name=='roomTypes'
      })
      if(!flag){
        roles.push({
          name: "roomTypes",
          meta: { isAuth: true, title: "房型管理", sign: "roomTypes" },
          children: [
            // {
            //   name: "roomType",
            //   meta: { isAuth: true, title: "房型管理" },
            // },
            // {
            //   name: "roomPrice",
            //   meta: { isAuth: true, title: "房价管理" },
            // },
          ],
        });
      }
    }
    // 订单管理
    else if (i.path == "order") {
      roles.push({
        name: "order",
        meta: { isAuth: true, title: "订单管理" },
      });
    }
    // 授权管理
    else if (i.path == "class"  || i.path == "process") {
      let flag=roles.some(item=>{
        return item.name=='classs'
      })
      if(!flag){
        roles.push({
          name: "classs",
          meta: { isAuth: true, title: "授权管理", sign: "classs" },
          children: [
            // {
            //   name: "class",
            //   meta: { isAuth: true, title: "课表管理" },
            // },
            // {
            //   name: "process",
            //   meta: { isAuth: true, title: "流程管理" },
            // },
          ],
        });
      }
    }
    // 统计报表
    else if (i.path == "statement") {
      roles.push({
        name: "statement",
        meta: { isAuth: true, title: "统计报表" },
      });
    }
    // 设备管理
    else if (i.path == "doorLock" || i.path == "meter") {
      let flag=roles.some(item=>{
        return item.name=='doorLocks'
      })
      if(!flag){
        roles.push({
          name: "doorLocks",
          meta: { isAuth: true, title: "设备管理", sign: "doorLocks" },
          children: [
            // {
            //   name: "doorLock",
            //   meta: { isAuth: true, title: "门锁管理" },
            // },
            // {
            //   name: "meter",
            //   meta: { isAuth: true, title: "水电表管理" },
            // },
          ],
        });
      }
    }
    // 组织架构 
    else if (i.path == "user" || i.path == "userRoles") {
      let flag=roles.some(item=>{
        return item.name=='users'
      })
      if(!flag){
        roles.push({
          name: "users",
          meta: { isAuth: true, title: "组织架构", sign: "roomTypes" },
          children: [
            // {
            //   name: "user",
            //   meta: { isAuth: true, title: "用户管理" },
            // },
            // {
            //   name: "userRoles",
            //   meta: { isAuth: true, title: "用户角色" },
            // },
          ],
        });
      }
    }
    // 账号管理
    else if (i.path == "account") {
      roles.push({
        name: "account",
        meta: { isAuth: true, title: "账号管理" },
      });
    }
    // 系统管理
    else if (i.path == "system") {
      roles.push({
        name: "system",
        meta: { isAuth: true, title: "系统管理" },
      });
    }
  });
  let roleArr=[]
  arr.forEach(i=>{
    //房型管理  房型管理
    if(i.path == "roomType"){
      roles.forEach(item=>{
        if(item.name=='roomTypes'){
          item.children.push( {
            name: "roomType",
            meta: { isAuth: true, title: "房型管理" },
          },)
        }
      })
    }
    //房型管理  房价管理
    else if(i.path == "roomPrice"){
      roles.forEach(item=>{
        if(item.name=='roomTypes'){
          item.children.push( {
            name: "roomPrice",
            meta: { isAuth: true, title: "房价管理" },
          },)
        }
      })
    }
    //授权管理  课表管理
    else if(i.path == "class"){
      roles.forEach(item=>{
        if(item.name=='classs'){
          item.children.push( {
            name: "class",
            meta: { isAuth: true, title: "课表管理" },
          },)
        }
      })
    }
    //授权管理  流程管理
    else if(i.path == "process"){
      roles.forEach(item=>{
        if(item.name=='classs'){
          item.children.push( {
            name: "process",
            meta: { isAuth: true, title: "流程管理" },
          },)
        }
      })
    }
    //设备管理  门锁管理
    else if(i.path == "doorLock"){
      roles.forEach(item=>{
        if(item.name=='doorLocks'){
          item.children.push( {
            name: "doorLock",
            meta: { isAuth: true, title: "门锁管理" },
          },)
        }
      })
    }
    //设备管理  水电表管理
    else if(i.path == "meter"){
      roles.forEach(item=>{
        if(item.name=='doorLocks'){
          item.children.push( {
            name: "meter",
            meta: { isAuth: true, title: "水电表管理" },
          },)
        }
      })
    }
    //组织架构  用户管理
    else if(i.path == "user"){
      roles.forEach(item=>{
        if(item.name=='users'){
          item.children.push( {
            name: "user",
            meta: { isAuth: true, title: "用户管理" },
          },)
        }
      })
    }
    //组织架构  用户角色
    else if(i.path == "userRoles"){
      roles.forEach(item=>{
        if(item.name=='users'){
          item.children.push( {
            name: "userRoles",
            meta: { isAuth: true, title: "用户角色" },
          },)
        }
      })
    }
  })
  roleData.value = roles;
  console.log(roleData.value,"整理后的路由");
});
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 220px;
  // min-height: 400px;
}
.box-item {
  width: 220px;
  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>