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>