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
File name
Commit message
Commit date
<template>
<div class="card">
<div class="card-body">
<h2 class="card-title">접근제어관리</h2>
<div class="d-flex align-stretch gap30">
<div class="left-zone">
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th style="border-radius: 1rem 1rem 0 0;">권한목록</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) of authorLists" :key="idx" @click="findMenuAuthorList(item.authorCode)" >
<td v-if="item.useAt === 'Y'" :class="{ 'selected': selectedAuthor == item.authorCode }" style="border-radius: 0 0 1rem 1rem;">{{ item.authorNm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="right-zone">
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th style="border-radius: 1rem 0 0 0;">메뉴명</th>
<th>전체</th>
<th>읽기</th>
<th>쓰기</th>
<th>수정</th>
<th style="border-radius: 0 1rem 0 0;">삭제</th>
</tr>
</thead>
<tbody>
<template v-if="menuAuthorLists.length > 0">
<tr v-for="(item, idx) in menuAuthorLists" :key="idx">
<td :style="getMenuStyle(item)" style="border-radius: 0 0 0 1rem;"> {{ item.menuNm }} </td>
<td>
<div class="form-check">
<input type="checkbox" :id="`all_${idx}`" :checked="isAllChecked(item)" @change="toggleAll(idx)" />
<label :for="`all_${idx}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input type="checkbox" :id="`redng_${idx}`" :checked="item.redng === 'Y'" @change="updatePermission(idx, 'redng', $event)" />
<label :for="`redng_${idx}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input type="checkbox" :id="`write_${idx}`" :checked="item.write === 'Y'" @change="updatePermission(idx, 'write', $event)" />
<label :for="`write_${idx}`"></label>
</div>
</td>
<td>
<div class="form-check">
<input type="checkbox" :id="`updt_${idx}`" :checked="item.updt === 'Y'" @change="updatePermission(idx, 'updt', $event)" />
<label :for="`updt_${idx}`"></label>
</div>
</td>
<td style="border-radius: 0 0 1rem 0;">
<div class="form-check">
<input type="checkbox" :id="`delete_${idx}`" :checked="item.delete === 'Y'" @change="updatePermission(idx, 'delete', $event)" />
<label :for="`delete_${idx}`"></label>
</div>
</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="6" style="border-radius: 0 0 1rem 1rem;text-align: center;">조회된 정보가 없습니다.</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-between align-center">
<div></div>
<button type="button" class="btn sm secondary" @click="fnUpdate">저장</button>
</div>
</template>
<script>
// API
import { findAuthorsProc } from '../../../../resources/api/author'
import { findMenuAuthorsProc, updateMenuAuthorsProc } from '../../../../resources/api/menuAuthor'
export default {
data() {
return {
selectedAuthor: null,
authorLists: [], // 권한 목록 정보
menuAuthorLists: [], // 메뉴 권한 목록 정보
}
},
mounted() {
this.findAuthorList(); // 권한 목록 조회
},
methods: {
// 권한 목록 조회
async findAuthorList() {
try {
const response = await findAuthorsProc();
const result = response.data.data;
this.authorLists = result.authors;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 메뉴 권한 목록 조회
async findMenuAuthorList(code) {
try {
this.selectedAuthor = code;
const response = await findMenuAuthorsProc(this.selectedAuthor);
const result = response.data.data;
this.menuAuthorLists = result.menuAuthors;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 메뉴 스타일 계산 (들여쓰기)
getMenuStyle(item) {
const depth = item.dp || 1;
return {
paddingLeft: (depth - 1) * 20 + 'px'
};
},
// 개별 권한 업데이트
updatePermission(index, permission, event) {
this.menuAuthorLists[index][permission] = event.target.checked ? 'Y' : 'N';
},
// 전체 선택/해제
toggleAll(index) {
const item = this.menuAuthorLists[index];
const allChecked = this.isAllChecked(item);
const newValue = allChecked ? 'N' : 'Y';
// 모든 권한을 동일하게 설정
item.redng = newValue;
item.write = newValue;
item.updt = newValue;
item.delete = newValue;
},
// 전체 선택 상태 확인 (모든 권한이 'Y'인지 체크)
isAllChecked(item) {
return item.redng === 'Y' && item.write === 'Y' && item.updt === 'Y' && item.delete === 'Y';
},
// 수정 (모든 메뉴 권한 저장)
async fnUpdate() {
try {
let data = [];
for (let menuAuthor of this.menuAuthorLists) {
data.push({
authorCode: menuAuthor.authorCode,
menuId: menuAuthor.menuId,
redng: menuAuthor.redng,
write: menuAuthor.write,
updt: menuAuthor.updt,
delete: menuAuthor.delete,
});
}
const response = await updateMenuAuthorsProc(data);
const result = response.data.data;
alert("수정되었습니다.");
this.findMenuAuthorList(this.selectedAuthor); // 목록 조회
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
}
}
</script>
<style scoped>
tr {
cursor: pointer;
}
.tbl-wrap #myTable .selected {
color: #FFFFFF;
background-color: #213F9A;
}
.menu-indent {
color: #6c757d;
margin-right: 5px;
}
</style>