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="flex align-top">
<div class="sch-form-wrap search">
<div class="tbl-wrap table-scroll">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>권한목록</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 }">{{ item.authorNm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 100%;">
<div class="tbl-wrap chk-area">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>메뉴명</th>
<th>전체</th>
<th>읽기</th>
<th>쓰기</th>
<th>수정</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<template v-if="menuAuthorLists.length > 0">
<tr v-for="(item, idx) in menuAuthorLists" :key="idx">
<td>{{ 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>
<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">조회된 정보가 없습니다.</td>
</tr>
</template>
</tbody>
</table>
</div>
<div>
<button type="button" class="btn sm secondary" @click="fnUpdate">저장</button>
</div>
</div>
</div>
</div>
</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);
};
},
// 개별 권한 업데이트
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;
}
</style>