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>
<div class="search-wrap mb20">
<select name="searchType" id="searchType" class="form-select sm" v-model="searchParams.searchType">
<option value="">전체</option>
<option v-for="(item, index) of searchOptions" :key="index" :value="item.key"> {{ item.label }} </option>
</select>
<input type="text" class="form-control sm" v-model="searchParams.searchText" @keyup.enter="handleSearch" placeholder="검색어를 입력하세요">
<button class="btn-ico md ico-sch" @click="handleSearch"></button>
</div>
<div class="tbl-wrap">
<table id="codeTable" class="tbl data">
<colgroup>
<col style="width: 18%;">
<col style="width: 18%;">
<col style="width: 18%;">
<col style="width: 18%;">
<col style="width: 18%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr>
<th style="border-radius: 1rem 0 0 0;">상위코드</th>
<th>상위코드명</th>
<th>코드</th>
<th>코드명</th>
<th>등록일</th>
<th style="border-radius: 0 1rem 0 0;">사용여부</th>
</tr>
</thead>
<tbody>
<template v-if="codeList.length > 0">
<tr v-for="(code, index) in codeList" :key="index" :class="{ expired: code.useAt === 'N' }" @click="handleNavigation('view', code.code)">
<td>{{ code.upperCode }}</td>
<td>{{ code.upperCodeNm }}</td>
<td>{{ code.code }}</td>
<td>{{ code.codeNm }}</td>
<td>{{ formatDate(code.rgsde) }}</td>
<td>{{ getActiveStatusText(code.useAt) }}</td>
</tr>
</template>
<tr v-else>
<td colspan="6" class="text-center" style="border-radius: 0 0 1rem 1rem;">등록된 코드가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="d-flex justify-between align-center">
<div></div>
<Pagination :search="searchParams" @onChange="handlePageChange" />
<button class="btn sm primary" @click="handleNavigation('edit')">등록</button>
</div>
</template>
<script>
import Pagination from "../../../component/Pagination.vue";
// API
import { findCodesProc } from "../../../../resources/api/code";
export default {
name: 'CodeListPage',
components: {
Pagination,
},
data() {
return {
codeList: [], // 코드 목록
searchOptions: [
{ key: "UPPER_CODE", label: "상위코드" },
{ key: "UPPERCODE_NAME", label: "상위코드 이름" },
{ key: "CODE", label: "코드" },
{ key: "CODE_NAME", label: "코드 이름" },
],
searchParams: {
searchType: '',
searchText: '',
currentPage: 1,
}
}
},
mounted() {
this.fetchCodeList();
},
methods: {
// 코드 목록 조회
async fetchCodeList() {
try {
const response = await findCodesProc(this.searchParams);
const result = response.data.data;
this.codeList = result.codes;
this.searchParams = result.search;
} catch (error) {
this.handleError(error);
}
},
// 날짜 포맷팅
formatDate(dateString) {
return dateString ? dateString.split(' ')[0] : '-';
},
// 사용여부 텍스트 반환
getActiveStatusText(useAt) {
return useAt === 'Y' ? '사용중' : useAt === 'N' ? '미사용' : '';
},
// 검색 실행
handleSearch() {
this.searchParams.currentPage = 1;
this.fetchCodeList();
},
// 페이지 변경
handlePageChange(currentPage) {
this.searchParams.currentPage = Number(currentPage);
this.$nextTick(() => {
this.fetchCodeList();
});
},
// 페이지 이동
handleNavigation(type, id) {
const routeMap = {
'list': { name: 'CodeManagementListPage' },
'view': { name: 'CodeManagementViewPage', query: { id } },
'edit': { name: 'CodeManagementInsertPage', query: this.$isEmpty(id) ? {} : { id } },
};
const route = routeMap[type];
if (route) {
this.$router.push(route);
} else {
this.handleNavigationError(type);
}
},
// 네비게이션 에러 처리
handleNavigationError(type) {
console.warn(`유효하지 않은 라우트 타입: ${type}`);
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push({ name: 'CodeManagementListPage' });
},
// 에러 처리
handleError(error) {
const message = error.response?.data?.message || "에러가 발생했습니다.";
alert(message);
console.error(error.message);
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>