File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<nav class="gd gd1 pd1 sub-nav">
<input type="text" placeholder="메뉴검색" class="mb2">
<ul>
<li v-if="selectedItem">
<div v-for="(sidetitle) in selectedItem.subMenuBox" :key="sidetitle.pathName" class="side-wrap">
<p @click="toggleMenu(sidetitle)" :class="{ active: sidetitle.show }">{{ sidetitle.pathName }}</p>
<!-- <img src="../../../resources/img/component/chevron-down.svg" alt=""> -->
<ul class="sidemenu-wrap">
<li v-for="(subMenu, idx) in sidetitle.subList" :key="idx">
<router-link v-show="sidetitle.show" :to="subMenu.path" class="mb2"
@click="selectSubMenu(subMenu)" :class="{ 'active-text': subMenu.isActive }">{{
subMenu.pathName
}}</router-link>
</li>
</ul>
</div>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: {
selectedId: {
type: Number,
default: null,
},
},
data() {
return {
selectedId: 1,
selectedSubMenu: false,
menuList: [
{
// 인사/급여관리
id: 0,
subMenuBox: [
{
pathName: "기준정보",
show: false,
subList: [
{ path: "/", pathName: "(회계)공통코드 등록", isActive: false },
{ path: "/", pathName: "거래처 정보 등록", isActive: false },
{ path: "/", pathName: "계정과목 등록", isActive: false },
{ path: "/", pathName: "재무제표 양식 등록", isActive: false },
{ path: "/", pathName: "재무제표 계정 설정 등록", isActive: false },
{ path: "/", pathName: "은행 계좌 등록", isActive: false },
],
},
{
pathName: "전표관리",
show: false,
subList: [
{ path: "/", pathName: "(회계)공통코드 등록" },
{ path: "/", pathName: "거래처 정보 등록" },
{ path: "/", pathName: "계정과목 등록" },
{ path: "/", pathName: "재무제표 양식 등록" },
{ path: "/", pathName: "재무제표 계정 설정 등록" },
{ path: "/", pathName: "은행 계좌 등록" },
],
},
{
pathName: "기준정보",
show: false,
subList: [
{ path: "/", pathName: "(회계)공통코드 등록" },
{ path: "/", pathName: "거래처 정보 등록" },
{ path: "/", pathName: "계정과목 등록" },
{ path: "/", pathName: "재무제표 양식 등록" },
{ path: "/", pathName: "재무제표 계정 설정 등록" },
{ path: "/", pathName: "은행 계좌 등록" },
],
},
]
},
{
// 회계관리
id: 1,
subMenuBox: [
{
pathName: "기준정보",
show: true,
subList: [
{ path: "/Bi001.page", pathName: "(회계)공통코드 등록"},
{ path: "/Bi002.page", pathName: "거래처 정보 등록" },
{ path: "/Bi003.page", pathName: "계정과목 등록"},
{ path: "/Bi004.page", pathName: "재무제표 양식 등록"},
{ path: "/Bi005.page", pathName: "재무제표 계정 설정 등록"},
{ path: "/Bi006.page", pathName: "은행 계좌 등록" },
{ path: "/Bi007.page", pathName: "거래처 대장"},
],
},
{
pathName: "전표관리",
show: false,
subList: [
{ path: "/Cm001.page", pathName: "잔액 이월 전표등록" },
{ path: "/Cm002.page", pathName: "전표 작성 (일반)" },
{ path: "/", pathName: "전표 작성 (계산서)" },
{ path: "/", pathName: "전표 작성 (법인카드)" },
{ path: "/", pathName: "전표 작성 (어음분할 발행)" },
{ path: "/", pathName: "전표 작성 (포장매출)" },
{ path: "/", pathName: "미전송 전표 조회" },
{ path: "/", pathName: "전표 확정 (일반)" },
{ path: "/", pathName: "전표 확정 (계산서)" },
{ path: "/", pathName: "전표 확정 (법인카드)" },
{ path: "/", pathName: "전표 확정 (포장매출)" },
{ path: "/", pathName: "전표 승인 및 반려등록" },
{ path: "/", pathName: "전표 조회" },
{ path: "/", pathName: "전표 조회 (부서별)" },
{ path: "/", pathName: "분개장 (전표기준)" },
{ path: "/", pathName: "계정별 명세서" },
{ path: "/", pathName: "계정별 명세서(부서별)" },
{ path: "/", pathName: "거래처별 명세서" },
{ path: "/", pathName: "거래처별 채원/채무리스트" },
{ path: "/", pathName: "미수금 관리 (제품)" },
],
},
{
pathName: "채권채무관리",
show: false,
subList: [
{ path: "/", pathName: "월 채권채무 마감 작업" },
{ path: "/", pathName: "채무 연령표" },
{ path: "/", pathName: "채권 연령표" },
],
},
{
pathName: "법인카드관리",
show: false,
subList: [
{ path: "/", pathName: "법인카드 관리 대장" },
{ path: "/", pathName: "법인카드 일자별 사용 명세" },
{ path: "/", pathName: "법인카드 일자별 사용 명세 (계정)" },
{ path: "/", pathName: "월별 사용액 현황(카드별)" },
{ path: "/", pathName: "월별 사용액 현황(상세)" },
{ path: "/", pathName: "계정과목별 사용액 현황(월)" },
{ path: "/", pathName: "월별 사용액 현황(요약)" },
],
},
{
pathName: "자금관리",
show: false,
subList: [
{ path: "/", pathName: "분개장" },
{ path: "/", pathName: "현금출납장" },
{ path: "/", pathName: "일계표" },
{ path: "/", pathName: "자금 일일 원장" },
{ path: "/", pathName: "일 자금 마감 작업" },
{ path: "/", pathName: "잔액 이월 작업" },
{ path: "/", pathName: "기초 잔액 등록" },
],
},
{
pathName: "어음관리",
show: false,
subList: [
{ path: "/", pathName: "받을어음 등록" },
{ path: "/", pathName: "받을어음 수탁 등록" },
{ path: "/", pathName: "받을어음 결제 및 반환 등록" },
{ path: "/", pathName: "받을어음 할인 등록" },
{ path: "/", pathName: "지급어음 결제 및 반환 등록" },
{ path: "/", pathName: "어음 용지 관리" },
{ path: "/", pathName: "받을어음 잔액 명세서" },
{ path: "/", pathName: "받을어음 수탁 명세서" },
{ path: "/", pathName: "받을어음 할인 명세서" },
{ path: "/", pathName: "지급어음 잔액 명세서" },
],
},
{
pathName: "차입금관리",
show: false,
subList: [
{ path: "/", pathName: "차입금 등록" },
{ path: "/", pathName: "차입금 및 이자 상환 등록" },
{ path: "/", pathName: "차입금 잔액 명세서" },
{ path: "/", pathName: "차입금 상환 명세서" },
{ path: "/", pathName: "이자 지급 명세서" },
],
},
{
pathName: "결산조정관리",
show: false,
subList: [
{ path: "/", pathName: "선급비용 발생 등록" },
{ path: "/", pathName: "선급비용 계상 전표 작성" },
{ path: "/", pathName: "선급비용 명세서" },
{ path: "/", pathName: "미지급이자 전표 작성" },
{ path: "/", pathName: "미지급이자 명세서" },
{ path: "/", pathName: "이자 비용 명세서" },
],
},
{
pathName: "결산관리",
show: false,
subList: [
{ path: "/", pathName: "합계잔액시산표" },
{ path: "/", pathName: "재무상태표" },
{ path: "/", pathName: "손익계산서" },
{ path: "/", pathName: "제조원가명세서" },
{ path: "/", pathName: "결산 기초 정보 등록" },
{ path: "/", pathName: "월 결산 마감 작업" },
],
},
{
pathName: "세무관리",
show: false,
subList: [
{ path: "/", pathName: "부가세 명세서" },
{ path: "/", pathName: "부가세 집계표(세금 및 계산서)" },
{ path: "/", pathName: "부가세 집계표(법인카드)" },
{ path: "/", pathName: "부가세 신고서 작성(세금 및 계산서)" },
{ path: "/", pathName: "부가세 신고서 작성(법인카드)" },
{ path: "/", pathName: "수출 실적 신고서 작성" },
],
},
{
pathName: "담보관리",
show: false,
subList: [
{ path: "/", pathName: "담보 등록" },
{ path: "/", pathName: "담보 현황" },
],
},
]
}
]
}
},
methods: {
toggleMenu(menu) {
menu.show = !menu.show;
},
selectSubMenu(subMenu) {
// 이전에 선택된 메뉴가 있다면 비활성화
if (this.selectedSubMenu) {
this.selectedSubMenu.isActive = false;
}
// 새로 선택된 메뉴를 활성화하고 저장
subMenu.isActive = true;
this.selectedSubMenu = subMenu;
},
},
watch: {
},
computed: {
selectedItem() {
console.log('Selected ID:', this.selectedId); // 선택된 ID를 콘솔에 출력
const item = this.menuList.find(item => item.id === this.selectedId);
console.log('Found Item:', item); // 찾은 항목을 콘솔에 출력
return item;
},
},
mounted() {
}
}
</script>
<style scoped>
nav {
height: 100%;
position: relative;
overflow-y: scroll;
background-color: var(--sidenavgray);
width: 100%;
}
nav::-webkit-scrollbar{
width: 2px;
}
nav::-webkit-scrollbar-thumb{
background-color: var(--navbarblue);
}
input {
width: 100%;
margin-bottom: 5%;
}
.side-wrap p {
font-family: 'Pretendard';
font-weight: 600;
color: #333;
}
.sidemenu-wrap li {
padding-left: 15%;
font-family: 'Pretendard';
font-weight: 600;
color: #333;
}
</style>