File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
04-04
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content-zone full-page">
<div class="content">
<div class="setting-box h_100">
<div class="node-zone">
<div class="tree">
<draggable tag="ul" class="tree-node" :list="menuList" :group="{ name: 'menu' }" item-key="id"
handle=".handle" ghost-class="ghost">
<template #item="{ element, index }">
<Hierachy :tasks="element" :icon="iconPath" :selectedNode="selectedMenuId" :isLastNode="element.childList && index === element.childList.length - 1"
@changeSelected="fnViewDetail" />
</template>
</draggable>
</div>
<div class="btn-zone" v-if="pageAuth.mdfcnAuthrt == 'Y'">
<button class="btn top sm secondary" @click="fnTopAdd">
TOP+
</button>
<button class="btn top sm secondary" @click="fnSubAdd">
SUB+
</button>
<button class="btn save sm" @click="fnListUpdate">
메뉴 저장
</button>
</div>
</div>
<div class="setting-zone">
<div class="form-box sch-full">
<div class="form-box-title">
<p>메뉴 정보</p>
<p><span>*</span>필수입력</p>
</div>
<div class="form-content" style="grid-template-rows: auto auto auto auto 1fr auto auto;">
<div class="layout">
<label class="form-title">상위 메뉴명 </label>
<input type="text" class="form-control sm" v-model="viewMenu.upMenuNm" disabled />
</div>
<div class="layout">
<label class="form-title"><span>*</span>메뉴명</label>
<input type="text" class="form-control sm" ref="menuNm" v-model="viewMenu.menuNm"
:disabled="!editMode || viewMenu.sysPvsnYn == 0" placeholder="메뉴명을 입력해주세요"/>
</div>
<div class="grid-column layout">
<label class="form-title"><span>*</span>메뉴 타입</label>
<div class="input-group">
<select class="form-select sm" ref="menuType" v-model="viewMenu.menuType" :disabled="!editMode || viewMenu.sysPvsnYn == 0">
<option value="">선택</option>
<option v-for="(code, index) in codeList" :key="index" :value="code.cd">
{{ code.cdNm }}
</option>
</select>
<template v-if="viewMenu.menuType == 'bbs' ||
viewMenu.menuType == 'conts'
">
<select class="form-select sm" ref="menuTypeCtgry" v-model="viewMenu.menuTypeCtgry"
:disabled="!editMode || viewMenu.sysPvsnYn == 0">
<option value="">선택</option>
<option v-for="(ctgry, index) of ctgryList" :key="index" :value="ctgry.id">
{{ ctgry.name }}
</option>
</select>
</template>
<template v-if="viewMenu.menuType == 'link'">
<input type="text" class="form-control sm" ref="linkUrl" v-model="viewMenu.linkUrl"
:disabled="!editMode || viewMenu.sysPvsnYn == 0" :style="{ width: inputWidth + 'px' }" placeholder="링크를 입력해주세요"/>
</template>
</div>
</div>
<div class="layout">
<label class="form-title"><span>*</span>메뉴 사용자</label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="menuUser" id="menuUserAdm" v-model="viewMenu.menuUser"
value="A" :disabled="!editMode" />
<label for="menuUserAdm">관리자용</label>
</div>
<div class="form-check">
<input type="radio" name="menuUser" id="menuUserUser" v-model="viewMenu.menuUser"
value="U" :disabled="!editMode" />
<label for="menuUserUser">사용자용</label>
</div>
</div>
</div>
<div class="layout">
<label class="form-title"><span>*</span>링크유형 </label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="linkType" id="linkTypeY" v-model="viewMenu.linkType"
value="0" :disabled="!editMode" />
<label for="linkTypeY">현재창</label>
</div>
<div class="form-check">
<input type="radio" name="linkType" id="linkTypeN" v-model="viewMenu.linkType"
value="1" :disabled="!editMode" />
<label for="linkTypeN">새창</label>
</div>
</div>
</div>
<div class="layout">
<label for="" class="form-title"><span>*</span>만족도 조사 사용 여부 </label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="dgstfnExmnUseYn" id="dgstfnExmnUseY"
v-model="viewMenu.dgstfnExmnUseYn" value="Y" :disabled="!editMode" />
<label for="dgstfnExmnUseY">사용</label>
</div>
<div class="form-check">
<input type="radio" name="dgstfnExmnUseYn" id="dgstfnExmnUseN"
v-model="viewMenu.dgstfnExmnUseYn" value="N" :disabled="!editMode" />
<label for="dgstfnExmnUseN">미사용</label>
</div>
</div>
</div>
<div class="layout">
<label class="form-title"><span>*</span>메뉴 노출 여부</label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="menuExpsrYn" id="menuExpsrY"
v-model="viewMenu.menuExpsrYn" value="Y" :disabled="!editMode" />
<label for="menuExpsrY">사용</label>
</div>
<div class="form-check">
<input type="radio" name="menuExpsrYn" id="menuExpsrN"
v-model="viewMenu.menuExpsrYn" value="N" :disabled="!editMode" />
<label for="menuExpsrN">미사용</label>
</div>
</div>
</div>
<div class="grid-column layout">
<label class="form-title">메뉴 설명</label>
<textarea v-model="viewMenu.menuExpln" :disabled="!editMode" class="form-control sm area" style="height: 100%;" placeholder="메뉴에 대한 설명을 입력해주세요"></textarea>
</div>
<div class="layout">
<label class="form-title">등록자</label>
<input type="text" class="form-control sm" v-model="viewMenu.rgtrNm" disabled />
</div>
<div class="layout">
<label class="form-title">등록일</label>
<input type="text" class="form-control sm" v-model="viewMenu.regDt" disabled />
</div>
<div class="layout">
<label class="form-title">수정자</label>
<input type="text" class="form-control sm" v-model="viewMenu.mdfrNm" disabled />
</div>
<div class="layout">
<label class="form-title">수정일</label>
<input type="text" class="form-control sm" v-model="viewMenu.mdfcnDt" disabled />
</div>
</div>
</div>
<div class="btn-wrap">
<button class="btn sm main" @click="fnInsert" :disabled="!editMode" v-if="
selectedMenuId != null &&
editMode == true &&
pageAuth.mdfcnAuthrt == 'Y'
">
수정
</button>
<button class="btn sm main" @click="fnInsert" :disabled="!editMode"
v-else-if="editMode == true && pageAuth.regAuthrt == 'Y'">
등록
</button>
<button :class="{
'btn sm red': true,
// 'red-border-btn': editMode,
}" :disabled="isFormDisabled" @click="fnDelete" v-if="pageAuth.delAuthrt == 'Y' && selectedMenuId != null">
삭제
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import draggable from "vuedraggable";
import Hierachy from "../../../../component/hierachy/HierachyDraggable.vue";
// Api
import {
menuFindAll,
menuSave,
menuFindByMenu,
menuUpdate,
menuDelete,
updateListProc,
} from "../../../../../resources/api/menu";
import { findAllByExpsr } from "../../../../../resources/api/contsType";
import { findAllByMenuMng } from "../../../../../resources/api/bbsMng";
import pageAuthMixin from "../../../../common/pageAuthMixin.js";
export default {
mixins: [pageAuthMixin],
data() {
return {
// 페이지 권한 객체
// pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,
// 글 작성 모드
// false - 없음 (기본)
// true - 등록/수정
editMode: false,
iconPath: 'ico_folder_3d',
menuList: [], // 메뉴 목록
newMenu: {}, // 신규 메뉴
viewMenu: {
menuType: "",
menuTypeCtgry: "",
}, // 사용자에게 보여질 메뉴 목록
selectedMenuId: null, // 선택된 메뉴
codeList: [], // 메뉴 타입 목록
ctgryList: [], // 메뉴 타입 항목
bbsList: [], // 메뉴 타입 게시판 목록
contsTypeList: [], // 메뉴 타입 콘텐츠 목록
inputWidth: 0,
};
},
created() {
this.fnViewList();
this.axiosBbsList(); // 메뉴 타입 게시판 목록 조회
this.axiosContsTypeList(); // 메뉴 타입 콘텐츠 목록 조회
// pageId 확인
if (this.pageId != null) {
this.editMode = "true";
}
},
methods: {
// 등록
fnInsert() {
// 유효성검사
if (this.valiadtion() == false) {
return;
}
let data = this.viewMenu;
if (data["menuType"] == "") {
data.menuType = "";
data.menuTypeCtgry = "";
data.linkUrl = "";
} else if (data["menuType"] == "bbs" || data["menuType"] == "conts") {
data["linkUrl"] == null;
} else if (data["menuType"] == "link") {
data["menuTypeCtgry"] == null;
}
if (this.selectedMenuId == null) {
this.axiosInsert(data);
} else {
this.axiosUpdate(data);
}
},
// 조회(목록)
fnViewList() {
this.axiosViewList();
},
// 조회(상세)
fnViewDetail(menuId) {
this.selectedMenuId = menuId;
const data = {
menuId: menuId,
};
this.axiosViewDetail(data);
},
// 삭제
fnDelete() {
if (Object.keys(this.viewMenu).length === 0) {
alert("삭제 대상을 선택해주세요.");
return false;
}
if (this.viewMenu.sysPvsnYn == 0) {
alert("시스템에서 제공하는 정보는 삭제할 수 없습니다.");
return;
}
const isDelete = confirm(
"메뉴를 삭제하시겠습니까?\n삭제 시 하위메뉴 항목도 제거됩니다."
);
if (isDelete) {
const data = { menuId: this.selectedMenuId };
this.axiosDelete(data);
}
},
// 최상위 신규 객체 생성
fnTopAdd() {
if (this.selectedMenuId != null) {
if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
return;
}
}
this.editMode = true;
this.viewMenu = JSON.parse(JSON.stringify(this.newMenu));
this.selectedMenuId = this.viewMenu.deptId;
},
// 하위 신규 객체 생성
fnSubAdd() {
if (this.viewMenu.menuId == null) {
alert("상위 메뉴를 지정해주세요.");
return;
} else {
if (!confirm("작성 중인 메뉴정보는 저장되지 않습니다.\n계속 하시겠습니까?")) {
return;
}
}
const upMenuId = this.viewMenu.menuId;
const upMenuNm = this.viewMenu.menuNm;
this.viewMenu = JSON.parse(JSON.stringify(this.newMenu));
this.viewMenu.upMenuId = upMenuId;
this.viewMenu.upMenuNm = upMenuNm;
this.selectedMenuId = null;
},
// 메뉴관리 유효성 검사
valiadtion() {
console.log("this.viewMenu: ", this.viewMenu);
// 메뉴명 입력 여부
if (!this.viewMenu["menuNm"] || this.viewMenu["menuNm"].trim() === "") {
alert("메뉴명을 입력하세요.");
this.$refs.menuNm.focus();
return false;
}
// 메뉴 타입 입력 여부
if (!this.viewMenu["menuType"]) {
alert("메뉴 타입을 선택하세요.");
return false;
}
// 메뉴 타입 하위 입력 여부
if (this.viewMenu["menuType"] == "bbs" || this.viewMenu["menuType"] == "conts") {
if (!this.viewMenu["menuTypeCtgry"]) {
alert("메뉴 타입 항목을 선택하세요.");
this.$refs.menuTypeCtgry.focus();
return false;
}
} else if (this.viewMenu["menuType"] == "link") {
if (!this.viewMenu["linkUrl"]) {
alert("링크 주소를 입력하세요.");
this.$refs.linkUrl.focus();
return false;
}
}
// 메뉴 사용자
if (!this.viewMenu["menuUser"]) {
alert("메뉴 사용자를 선택하세요.");
return false;
}
// 링크 유형
if (!this.viewMenu["linkType"]) {
alert("링크 유형을 선택하세요.");
return false;
}
// 만족도 조사 사용여부
if (!this.viewMenu["dgstfnExmnUseYn"]) {
alert("만족도 조사 사용여부를 선택하세요.");
return false;
}
// 메뉴 노출 여부
if (!this.viewMenu["menuExpsrYn"]) {
alert("메뉴 노출 여부를 선택하세요.");
return false;
}
},
// axios: 등록
async axiosInsert(data) {
try {
const res = await menuSave(data);
if (res.status == 200) {
alert(res.data.message);
this.fnViewList(); // 목록 새로고침
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 조회(목록)
async axiosViewList() {
try {
const res = await menuFindAll();
if (res.status == 200) {
this.menuList = res.data.data.hierachyList; // 메뉴 목록
if (this.menuList.length > 0 && this.selectedMenuId == null) {
this.fnViewDetail(this.menuList[0].id); // 최상위 메뉴 조회
}
this.codeList = res.data.data.codeList; // 메뉴 타입 목록
this.newMenu = res.data.data.newMenu; // 메뉴 빈 객체
this.newMenu.useYn = "Y";
this.newMenu.linkType = "0"; // 링크 유형
this.newMenu.dgstfnExmnUseYn = "Y"; // 만족도 조사 사용 여부
this.newMenu.menuExpsrYn = "Y"; // 메뉴 노출 여부
this.newMenu.menuType = "";
this.newMenu.menuTypeCtgry = "";
this.newMenu.linkUrl = "";
this.newMenu.menuUser = "A"
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 조회(상세)
async axiosViewDetail(data) {
if (this.selectedMenuId == null) return;
try {
const res = await menuFindByMenu(data);
if (res.status == 200) {
this.editMode = true;
this.viewMenu = res.data.data; // 메뉴 정보
this.selectedMenuId = this.viewMenu.menuId;
if (this.viewMenu.menuType == null) {
this.viewMenu.menuType = "";
}
if (this.viewMenu.menuType == "bbs") {
this.ctgryList = this.bbsList;
} else if (this.viewMenu.menuType == "conts") {
this.ctgryList = this.contsTypeList;
}
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 수정
async axiosUpdate(data) {
try {
const res = await menuUpdate(data);
if (res.status == 200) {
alert(res.data.message);
this.fnViewList(); // 목록 새로고침
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 삭제
async axiosDelete(data) {
try {
const res = await menuDelete(data);
if (res.status == 200) {
this.fnViewList(); // 목록 새로고침
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 조회(목록) - 게시판
async axiosBbsList() {
// 실행
try {
const res = await findAllByMenuMng();
if (res.status == 200) {
let items = [];
for (let item of res.data.data) {
items.push({
id: item["bbsMngId"],
name: item["bbsNm"],
});
}
this.bbsList = items;
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// axios: 조회(목록) - 콘텐츠
async axiosContsTypeList() {
// 데이터 삽입
const data = { sysPvsnYn: "1" }; // 현재 사용X
// 실행
try {
const res = await findAllByExpsr(data);
if (res.status == 200) {
let items = [];
for (let item of res.data.data) {
items.push({
id: item["contsId"],
name: item["contsKornNm"],
});
}
this.contsTypeList = items;
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 드래그앤드롭
// axios: 목록 수정
async fnListUpdate() {
try {
if (!confirm("메뉴 목록을 저장하시겠습니까?\n 작성 중인 메뉴정보는 저장되지 않습니다.")) {
return;
}
const res = await updateListProc(this.menuList);
alert(res.data.message);
if (res.status == 200) {
this.fnViewList(); // 목록 새로고침
const data = {
menuId: this.selectedMenuId,
};
this.axiosViewDetail(data);
}
} catch (error) {
alert(error.res.data.message);
}
},
updateInputWidth() {
this.$nextTick(() => {
const containerEl = this.$el; // 부모 컨테이너 전체 너비
const selectEl = this.$refs.menuType; // select 요소
if (containerEl && selectEl) {
const containerWidth = containerEl.clientWidth; // 부모 요소의 전체 너비 (100%)
const selectWidth = selectEl.offsetWidth; // select 요소의 실제 너비
const gap = 10; // 선택적으로 간격 조정
this.inputWidth = containerWidth - selectWidth - gap; // 전체에서 select 너비를 뺀 값 적용
}
});
},
},
watch: {
"viewMenu.menuType"() {
const menuType = this.viewMenu["menuType"];
// 초기화
this.ctgryList = [];
this.viewMenu["menuTypeCtgry"] == "";
this.viewMenu["linkUrl"] == null;
// 데이터 삽입
if (menuType == "bbs") {
this.ctgryList = this.bbsList;
} else if (menuType == "conts") {
this.ctgryList = this.contsTypeList;
}
},
},
computed: {},
components: {
draggable: draggable,
Hierachy: Hierachy,
},
mounted() {
this.updateInputWidth();
window.addEventListener("resize", this.updateInputWidth);
},
beforeUnmount() {
window.removeEventListener("resize", this.updateInputWidth);
},
};
</script>
<!-- <style scoped>
.tree-node {
height: 100%;
}
.ghost {
height: 15px;
color: transparent;
border: 1px dashed var(--blue);
}
.ghost * {
display: none;
}
</style> -->