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 lists" :key="idx" @click="findData(item.authorCode)">
<td :class="{ 'selected': selectedAuthor == item.authorCode, 'muted': item.useAt === 'N' }">{{ item.authorNm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">권한 정보</h3>
<div class="buttons">
<button type="button" class="btn sm tertiary" @click="fnResetForm">신규</button>
<button type="button" class="btn sm secondary" v-if="!isEditMode" @click="fnSave">등록</button>
<button type="button" class="btn sm secondary" v-else @click="fnUpdate">수정</button>
<button type="button" class="btn sm btn-red" v-if="isEditMode" @click="fnDelete">삭제</button>
</div>
</div>
<div class="tbl-wrap row g-3 pt-3 needs-validation detail">
<div class="col-12">
<label for="authorCode" class="form-label">
<p>권한코드 <span class="require"><img :src="require" alt=""></span></p>
</label>
<input type="text" class="form-control" id="authorCode" v-model="data.authorCode" />
</div>
<div class="col-12">
<label for="authorNm" class="form-label">
<p>권한명 <span class="require"><img :src="require" alt=""></span></p>
</label>
<input type="text" class="form-control" id="authorNm" v-model="data.authorNm" />
</div>
<div class="col-12 chuljang ">
<label for="prvonsh" class="form-label">권한설명</label>
<textarea name="dc" id="dc" class="form-control" v-model="data.dc"></textarea>
</div>
<div class="col-12 border-x input-radio">
<label for="prvonsh" class="form-label">
<p>사용여부 <span class="require"><img :src="require" alt=""></span></p>
</label>
<div class="chk-area">
<div class="form-check">
<input type="radio" name="useAt" id="useAtTrue" value="Y" v-model="data.useAt" :disabled="!hasAuthorCode">
<label for="useAtTrue">사용</label>
</div>
<div class="form-check">
<input type="radio" name="useAt" id="useAtFalse" value="N" v-model="data.useAt" :disabled="!hasAuthorCode">
<label for="useAtFalse">미사용</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// API
import { findAuthorsProc, saveAuthorProc, findAuthorProc, updateAuthorProc, deleteAuthorProc } from '../../../../resources/api/author'
export default {
data() {
return {
require: "/client/resources/img/require.png",
h3icon: "/client/resources/img/h3icon.png",
isEditMode: false, // 수정 모드 여부
selectedAuthor: null,
initData: {
authorCode: null, // 권한코드
authorNm: null, // 권한명
dc: null, // 권한설명
useAt: "Y", // 사용여부 (Y:사용-기본값 / N:미사용)
},
lists: [], // 권한 목록 정보
data: {}, // 권한 상세 정보
}
},
computed: {
hasAuthorCode() {
return !!(this.data?.authorCode);
}
},
created() {
this.fnReset(); // 데이터 초기화
},
mounted() {
this.findList(); // 목록 조회
},
methods: {
// 목록 조회
async findList() {
try {
const response = await findAuthorsProc();
const result = response.data.data;
this.lists = result.authors;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 상세 조회 (권한 선택 시 실행)
async findData(id) {
try {
this.selectedAuthor = id;
const response = await findAuthorProc(id);
const result = response.data.data;
this.data = result.author;
this.isEditMode = true; // 수정 모드로 변경
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 신규 (리셋)
fnResetForm() {
const isCheck = confirm("신규 등록 화면으로 전환 시, 현재 작업중인 내용이 초기화됩니다.\n전환하시겠습니까?");
if (!isCheck) {
return;
}
this.fnReset(); // 데이터 초기화
},
// 데이터 초기화
fnReset() {
this.data = { ...this.initData };
this.isEditMode = false; // 신규 모드로 변경
},
// 등록
async fnSave() {
try {
const data = {
authorCode: this.data.authorCode,
authorNm: this.data.authorNm,
dc: this.data.dc,
}
const response = await saveAuthorProc(data);
const result = response.data.data;
alert("등록되었습니다.");
this.fnReset(); // 데이터 초기화
this.findList(); // 목록 조회
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 수정
async fnUpdate() {
try {
const data = {
authorCode: this.data.authorCode,
authorNm: this.data.authorNm,
dc: this.data.dc,
useAt: this.data.useAt,
}
const response = await updateAuthorProc(data);
const result = response.data.data;
alert("수정되었습니다.");
this.fnReset(); // 데이터 초기화
this.findList(); // 목록 조회
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 삭제
async fnDelete() {
try {
const isCheck = confirm("삭제 할 경우 삭제된 데이터를 복구할 수 없습니다.\n삭제하시겠습니까?");
if (!isCheck) {
return;
}
const response = await deleteAuthorProc(this.data.authorCode);
const result = response.data.data;
alert("삭제되었습니다.");
this.fnReset(); // 데이터 초기화
this.findList(); // 목록 조회
} 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 .muted {
background-color: rgba(255, 255, 255, 0.3);
}
.tbl-wrap #myTable .selected {
color: #FFFFFF;
background-color: #213F9A;
}
</style>