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 " 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>