influence/components/common/leftMenu.vue

<template>
  <section class="left-menu" :class="[shortType ? 'short' : '']">
    <div class="left-menu-user">
      <h1 class="logo"><span style="cursor: pointer" @click="fnMoveHome()">P5G</span></h1>
      <div class="user">
        <i class="ico"></i>
        <span class="type">{{ useAuthStore().getAccountId }}</span>
        <!-- <span class="name">{{ useAuthStore().getAccountName }}</span> -->
      </div>
    </div>
    <nav class="left-navi">
      <ul class="depth1" v-if="shortType == false">
        <li
          v-for="(item, index) in arrMenuLists"
          :key="index"
          :id="'menu_' + item.menu_seq"
          :class="item.menu_url.indexOf(currentTopMenuLocation) > -1 ? 'active' : ''"
        >
          <span class="menu-name" @click="fnMenuEvent(item)"
            ><i :class="'ico ico' + (index + 1)"></i>{{ item.menu_nm }}</span
          >
          <div
            class="depth2"
            :style="
              item.menu_url.indexOf(currentTopMenuLocation) > -1
                ? 'display: block'
                : 'display: none'
            "
          >
            <ul>
              <li
                v-for="(itemSub, indexSub) in item.sub"
                :key="indexSub"
                @click="fnMenuEvent(itemSub)"
                :class="currentMenuLocation == itemSub.menu_url ? 'active' : ''"
              >
                {{ itemSub.menu_nm }}
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <!-- <ul class="depth1" v-else>
        <li v-for="(item, index) in arrMenuLists" :key="index" :id="'menu_'+item.menu_seq" :class="item.menu_url.indexOf(currentTopMenuLocation) > -1 ? 'active' : ''">
          <span class="menu-name" @click="focusIn(index)"><i :class="'ico ico'+(index+1)"></i></span>
          <div class="depth2">
            <strong>{{item.menu_nm}}</strong>
            <ul>
              <li v-for="(itemSub, indexSub) in item.sub" :key="indexSub" @click="fnMenuEvent(itemSub)" :class="currentMenuLocation == itemSub.menu_url ? 'active' : ''">{{itemSub.menu_nm}}</li>
            </ul>
          </div>
        </li>
      </ul> -->
      <ul class="depth1" v-else>
        <li
          v-for="(item, index) in arrMenuLists"
          style="width: 62px"
          :key="index"
          @mouseover="focusIn(index)"
          @mouseleave="twoDept = null"
          :id="'menu_' + item.menu_seq"
          :class="item.menu_url.indexOf(currentTopMenuLocation) > -1 ? 'active' : ''"
        >
          <span class="menu-name"><i :class="'ico ico' + (index + 1)"></i></span>
          <div
            v-if="twoDept == index"
            class="depth2"
            @mouseover="focusIn(index)"
            style="display: block"
          >
            <strong>{{ item.menu_nm }}</strong>
            <ul>
              <li
                v-for="(itemSub, indexSub) in item.sub"
                :key="indexSub"
                @click="fnMenuEvent(itemSub)"
                :class="currentMenuLocation == itemSub.menu_url ? 'active' : ''"
              >
                {{ itemSub.menu_nm }}
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
    <div class="left-btm">
      <v-btn
        class="custom-btn btn-white"
        v-if="shortType == false"
        @click="logoutPop = true"
        >로그아웃</v-btn
      >
      <button
        style="visibility: hidden"
        class="btn-logout"
        v-else
        @click="logoutPop = true"
      ></button>
      <v-btn
        class="custom-btn btn-white btn-back"
        @click="shortType = !shortType"
      ></v-btn>
    </div>
  </section>
  <v-dialog v-model="logoutPop" persistent width="350">
    <div class="v-common-dialog-wrapper custom-dialog">
      <strong class="modal-tit"> </strong>
      <div class="v-common-dialog-content">
        <p class="modal-txt">시스템에서 로그아웃 하시겠습니까?</p>
      </div>
      <div class="btn-wrap">
        <v-btn class="custom-btn btn-white" @click="logoutPop = false"> 취소 </v-btn>
        <v-btn @click="fnLogout()" class="custom-btn btn-purple"> 확인 </v-btn>
      </div>
    </div>
  </v-dialog>
</template>

<script setup>
/************************
 *    import
 ************************/
import { useRoute } from "vue-router";
import useAxios from "~/composables/useAxios";
import useErrorHandler from "~/composables/useErrorHandler";

/************************
 *    plugins inject
 ************************/
const { $dayjs, $log, $eventBus, $toast } = useNuxtApp();
const route = useRoute();

/************************
 *    data & created
 ************************/
let pageId = "leftMenu";
let logoutPop = ref(false);
let arrMenuLists = ref([]);
let currentTopMenuLocation = ref("");
let currentMenuLocation = ref("");
let shortType = ref(false);
let twoDept = ref(null);

/***********
 *    watch
 ***********/
watch(
  route,
  (newv, oldv) => {
    let arrPaths = newv.path.split("/").filter((str) => str !== "");
    currentTopMenuLocation.value = `/${arrPaths[0]}`;
    currentMenuLocation.value = `/${arrPaths[0]}/${arrPaths[1]}`;
  },
  { deep: true, immediate: true }
);

/************************
 *    Methods
 ************************/
// 메뉴 목록 조회하기
function fnGetMenu() {
  console.log("%c [print][]", "color:#10cdbc", "좌측메뉴 조회하기");
  useAxios()
    .post("/menu/selectMenuList")
    .then((res) => {
      $log.debug("[leftMenu][fnGetMenu][success]");

      let arrRes = res.data.data;

      arrRes.forEach((item, index) => {
        if (item.p_menu_seq == 0) {
          item.sub = [];
          arrMenuLists.value.push(item);
        }
      });
      arrMenuLists.value.forEach((item, index) => {
        arrRes.forEach((itemSub, indexSub) => {
          if (item.menu_seq == itemSub.p_menu_seq) {
            if (arrMenuLists.value[index].menu_url == "") {
              arrMenuLists.value[index].menu_url = itemSub.menu_url;
            }
            arrMenuLists.value[index].sub.push(itemSub);
          }
        });
      });
    })
    .catch((error) => {
      $log.debug("[leftMenu][fnGetMenu][error]");
      useErrorHandler().fnSetCommErrorHandle(error, fnGetMenu);
    })
    .finally(() => {
      $log.debug("[leftMenu][fnGetMenu][finished]");
    });
}

// 메뉴 이벤트 처리
function fnMenuEvent(obj) {
  if (obj.p_menu_seq == 0) {
    // top menu
    $(".depth1 > li").removeClass("active");
    $(".depth2").hide();

    let elTopMenu = $("#menu_" + obj.menu_seq);
    if (elTopMenu.hasClass("active")) {
      elTopMenu.removeClass("active");
      elTopMenu.find(".depth2").hide();
    } else {
      elTopMenu.addClass("active");
      if (obj.sub && obj.sub.length > 0) {
        elTopMenu.find(".depth2").show();
      }
    }
  } else {
    // sub menu
    useUtil.setPageMove(obj.menu_url);
  }
}

function focusIn(idx) {
  /*for(let i = 0; i < document.getElementsByClassName("depth2").length; i++){
      document.getElementsByClassName("depth2")[i].style.display = "none"
    }*/

  // if(document.getElementsByClassName("depth2")[idx].style.display == 'block'){
  //   document.getElementsByClassName("depth2")[idx].style.display = "none"
  // }else{
  //   for(let i = 0; i < document.getElementsByClassName("depth2").length; i++){
  //     document.getElementsByClassName("depth2")[i].style.display = "none"
  //   }
  //   document.getElementsByClassName("depth2")[idx].style.display = "block"
  // }
  twoDept.value = idx;
}
// 메인 화면으로 이동
function fnMoveHome() {
  useUtil.setPageMove(useAuthStore().getRedirectPage);
}
// 로그아웃
function fnLogout() {
  localStorage.removeItem("authStore");
  useAuthStore().setLogout();
  useUtil.setPageMove("/");
}
</script>

<style lang="scss" scoped></style>