project_process_manage/src/layout/sidebar/SidevarItem.vue

<template>
  <div class="box-item">
    <el-menu
      class="el-menu-vertical-demo"
      text-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/images/logo.png"
            style="width: 40px; height: 40px"
        /></el-icon>
      </div>
      <el-menu-item
        :index="`/process/${item.name}`"
        v-for="item in roleList"
        :key="item.name"
      >
        <div class="itemSon">
          <SvgIcon :icon="item.meta.icon" :size="22" />
          <span>{{ item.meta.title }}</span>
        </div>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, watch, reactive, nextTick } from "vue";
import axios from "axios";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { genFileId, ElMessage, ElMessageBox } from "element-plus";

const store = useStore();
const router = useRouter();
const roleList = ref();// 菜单权限
const btnList=ref() //按钮权限

const menuClose = ref(false);
const activeIndex = ref("");
const acitveItems = reactive({ list: [] });
const api = ref();

watch(
  () => store.state.user.collapse,
  (newValue, oldValue) => {
    menuClose.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: `/jianguanCloud/order`,
  //   });
  // }
};
const roleChange = async () => {
  nextTick(async () => {
    let res = await axios({
      method: "post",
      url: api.value + "/api/sysUser/queryOwn",
      headers: {
        tokenP: sessionStorage.getItem("tokenP"),
        user_head: sessionStorage.getItem("userhead"),
      },
    });
    console.log(res, "获取个人信息");
    if (res.data.code == 200) {
      sessionStorage.setItem('id',res.data.data.id)
      sessionStorage.setItem('userName',res.data.data.userName)
      let data = new FormData();
      data.append("roleId", res.data.data.roleId);
      let role = await axios({
        method: "post",
        url: api.value + "/api/sysRole/queryMenuByRole",
        headers: {
          tokenP: sessionStorage.getItem("tokenP"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(role, "查询角色菜单权限");
      if (role.data.code == 200) {
        roleList.value = [];// 菜单权限
        btnList.value=[]
        let resdata=role.data.data
        resdata=resdata.filter(i=>{
          return i.state==1
        })
        resdata.forEach((item) => {
          // let modules = import.meta.glob("../views/**/*.vue");
          if (item.state == 1) {
            let arr = {
              path: item.url,
              name: item.url,
              meta: { title: item.menuName, icon: item.url },
              component: () =>
                import(`../../views/${item.url}/${item.url}.vue`),
            };
            // state[0].roleList.children.push(arr);
            roleList.value.push(arr);
          }
          if(item.menuLists){
            item.menuLists.forEach(i=>{
            if(i.state==1){
              btnList.value.push(i.url)
            }
          })
          }
        });
        sessionStorage.setItem("roleList", JSON.stringify(resdata));
        sessionStorage.setItem("btnList", JSON.stringify(btnList.value));
        let roles = JSON.parse(sessionStorage.getItem("roleList"));
        if (roles) {
          store.commit("ROLELIST", "");
        }
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: role.data.message,
          center: true,
        });
      }
    } else {
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  });
};
onBeforeMount(() => {
  api.value = store.state.user.api;
  roleChange();
  activeIndex.value = sessionStorage.getItem("sidevarItem");
  // roleList.value = sessionStorage.getItem("roleList");
  // roleList.value = store.state.user.roleList;
});
</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%;
  overflow: auto;
  // background: rgba(55, 105, 173, 1);
  background: rgba(46, 64, 89, 1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);
  border: none;
  .logo {
    height: 64px;
    color: rgb(255, 255, 255);
    cursor: default;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .logo:hover {
    background-color: transparent !important;
  }
  .itemSon {
    width: 180px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    // background: linear-gradient(
    //   90deg,
    //   rgba(38, 151, 255, 1) 0%,
    //   rgba(102, 182, 255, 1) 100%
    // );
    .svg-icon {
      margin: 0 15px;
    }
  }
  .el-sub-menu {
    padding: 8px 0;
    .el-menu-item {
      padding: 0;
      background: rgba(46, 64, 89, 1);
      color: #fff;
      display: flex;
      justify-content: center;
      .img {
        width: 18px;
        margin: 0 20px;
      }
      .itemSon:hover {
        background: rgba(55, 105, 173, 1);
        color: rgba(99, 180, 255, 1);
      }
    }
    .el-menu-item:hover {
      background: rgba(46, 64, 89, 1);
      color: #fff;
      .itemSon {
        background: rgba(55, 105, 173, 1);
        color: rgba(99, 180, 255, 1);
      }
    }
    .el-menu-item.is-active {
      .itemSon {
        background: rgba(55, 105, 173, 1);
        color: rgba(99, 180, 255, 1);
      }
    }
    // 系统设置栏样式
    :deep(.el-sub-menu__title) {
      padding: 0;
      margin: 0 auto;
      width: 180px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      background: rgba(55, 105, 173, 1);
      color: #fff;
      .el-icon {
        width: 18px;
      }
    }
  }
  .el-sub-menu.is-active {
    :deep(.el-sub-menu__title) {
      background: linear-gradient(
        90deg,
        rgba(38, 151, 255, 1) 0%,
        rgba(102, 182, 255, 1) 100%
      );
      color: fff;
    }
  }

  // 单个菜单项样式
  .el-menu-item {
    padding: 10px 0 !important;
    display: flex;
    justify-content: center;
  }

  .el-menu-item:hover {
    background: rgba(46, 64, 89, 1);
    .itemSon {
      background: rgba(55, 105, 173, 1);
      color: rgba(99, 180, 255, 1);
    }
  }
  .el-menu-item.is-active {
    .itemSon {
      background: linear-gradient(
        90deg,
        rgba(38, 151, 255, 1) 0%,
        rgba(102, 182, 255, 1) 100%
      );
      color: #fff;
    }
  }
}
</style>