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="gd-12 pl0 pr0">
<div class="flex justify-between align-center mb10">
<label for="" class="point-font2 mb10">사용자 권한</label>
<div v-show="editMode != 'view'" class="gd-1 pr0">
<button
:class="{
'large-btn': true,
'blue-border-btn': pageRole == 'adm',
'green-border-btn': pageRole == 'portal',
}"
@click="fnAuthAddModalOpen"
>
권한 추가
</button>
</div>
</div>
</div>
<template v-if="mbrVO.authorList != null && mbrVO.authorList != []">
<template v-for="(auth, index) of mbrVO.authorList" :key="index">
<div
:class="{
'flex align-center border radius pd10 inline-block': true,
ml10: index != 0,
}"
>
<span>{{ auth.authrtNm }}</span>
<button
v-show="editMode != 'view'"
class="icon-btn"
@click="fnAuthDelete(index)"
>
<svg-icon type="mdi" :width="15" :height="15" :path="path"></svg-icon>
</button>
</div>
</template>
</template>
<template>
<p class="data-none">등록된 정보가 존재하지 않습니다.</p>
</template>
<Modal :showModal="editMode != 'view' && isOpen">
<template v-slot:header>
<div class="modal-title">
<p>사용자 권한 목록</p>
</div>
<button class="close-btn" @click="fnAuthAddModalClose">X</button>
</template>
<table class="form-table2 mb10">
<colgroup>
<col style="width: 70%" />
<col style="width: 30%" />
</colgroup>
<thead>
<tr>
<th>권한명</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<template v-if="userAuthorList.length > 0">
<tr v-for="(authrt, index) of userAuthorList" :key="index">
<td>{{ authrt["authrtNm"] }}</td>
<td>
<button
type="button"
:class="{
'large-btn': true,
'blue-btn': pageRole == 'adm',
'green-btn': pageRole == 'portal',
}"
@click="fnAuthSelect(authrt)"
>
선택
</button>
</td>
</tr>
</template>
<template v-else>
<tr>
<td colspan="2" class="text-ct data-none">
등록된 정보가 존재하지 않습니다.
</td>
</tr>
</template>
</tbody>
</table>
<template v-slot:footer></template>
</Modal>
</template>
<script>
import { mdiClose } from "@mdi/js";
// COMPONENT
import Modal from "../modal/Modal.vue";
// API
import { findAllSystem } from "../../../resources/api/author";
export default {
components: { Modal },
props: {
mbrVO: {
type: Object,
},
editMode: {
type: String,
default: "insert",
},
},
data() {
return {
path: mdiClose,
pageRole: this.$store.state.userType, // 유저 권한
isOpen: false,
originalList: [],
userAuthorList: [],
};
},
created() {
this.fnAuthViewList();
},
methods: {
// axios: 사용자권한 목록 조회
async fnAuthViewList() {
try {
const response = await findAllSystem();
this.originalList = response.data.data;
} catch (error) {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
},
// 사용자권한 선택
fnAuthSelect(authrt) {
this.mbrVO.authorList.push({
mbrId: this.mbrVO.mbrId,
authrtNm: authrt.authrtNm,
authrtCd: authrt.authrtCd,
rgtr: null,
regDt: null,
});
this.fnAuthAddModalClose();
},
// 사용자 권한 추가 모달 열기
fnAuthAddModalOpen() {
this.fnAuthFilter();
this.isOpen = true;
},
// 사용자권한 제거
fnAuthFilter() {
let list = this.originalList;
for (let authrt of this.mbrVO.authorList) {
list = list.filter((item) => item.authrtCd !== authrt.authrtCd);
}
this.userAuthorList = list;
},
// 사용자권한 추가 모달 닫기
fnAuthAddModalClose() {
this.isOpen = false;
},
// 사용자권한 삭제
fnAuthDelete(index) {
if (this.mbrVO.authorList.length < 2) {
alert("사용자 권한은 최소 1개 이상 존재해야 합니다.");
return;
}
this.mbrVO.authorList.splice(index, 1);
},
},
};
</script>