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 " style="height: 100%;">
<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 lists" :key="idx" @click="findData(item.authorCode)">
<td :class="{ 'selected': selectedAuthor == item.authorCode, 'muted': item.useAt === 'N' }" style="border-radius: 0 0 1rem 1rem;">{{ item.authorNm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="right-zone">
<div class="d-flex justify-between align-center mb20">
<h3 class="sub-title">권한 정보</h3>
<div class="d-flex gap10">
<button class="btn sm tertiary" @click="fnResetForm">신규</button>
<button class="btn sm secondary" v-if="!isEditMode" @click="fnSave">등록</button>
<button class="btn sm secondary" v-else @click="fnUpdate">수정</button>
<button class="btn sm btn-red" v-if="isEditMode" @click="fnDelete">삭제</button>
</div>
</div>
<div class="tbl-wrap" style="height: calc(100% - 60px);">
<table class="tbl data grid-table" style="border: none; width: 100%;height: 100%;">
<!-- <colgroup>
<col style="width: 20%;">
<col style="width: 80%;">
</colgroup> -->
<tbody>
<tr>
<th scope="row" style="border-radius: 1rem 0 0 0;">
권한코드 <sup>*</sup>
</th>
<td style="border-radius: 0 1rem 0 0;">
<input type="text" class="form-control sm" id="authorCode" v-model="data.authorCode" />
</td>
</tr>
<tr>
<th scope="row" >
권한명 <sup>*</sup>
</th>
<td>
<input type="text" class="form-control sm" id="authorNm" v-model="data.authorNm" />
</td>
</tr>
<tr>
<th scope="row">
사용여부 <sup>*</sup>
</th>
<td>
<div class="chk-area">
<div class="form-check" style="display: inline-block; margin-right: 1rem;">
<input type="radio" name="useAt" id="useAtTrue" value="Y" v-model="data.useAt" :disabled="!hasAuthorCode">
<label for="useAtTrue">사용</label>
</div>
<div class="form-check" style="display: inline-block;">
<input type="radio" name="useAt" id="useAtFalse" value="N" v-model="data.useAt" :disabled="!hasAuthorCode">
<label for="useAtFalse">미사용</label>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row" style="border-radius: 0 0 0 1rem;">
권한설명
</th>
<td style="border-radius: 0 0 1rem 0;">
<textarea name="dc" id="dc" class="form-control" v-model="data.dc" style="height: 100%;"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="tbl-wrap" style="border: none;">
<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>