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="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">승인 대기 목록</h2>
<div class="sch-form-wrap title-wrap">
<h3><img :src="sectionIcon" alt="">승인 대기</h3>
<div class="input-group">
<select class="form-select" v-model="pendingSearchParams.year" @change="handlePageChange(1, 'pending')">
<option value="">연도 전체</option>
<option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="pendingSearchParams.month" @change="handlePageChange(1, 'pending')">
<option value="">월 전체</option>
<option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="pendingSearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('pending')">
<button button="button" class="ico-sch" @click="handleSearch('pending')">
<SearchOutlined />
</button>
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 30%;">
<col style="width: 30%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in pendingApprovalList" :key="idx" @click="handleDetailNavigation(item.sanctnMbyId)">
<td>{{ item.sanctnIemNm }}</td>
<td>{{ item.sanctnSeNm }}</td>
<td>{{ item.registerNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="pendingSearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'pending')" />
<div class="sch-form-wrap title-wrap">
<h3><img :src="sectionIcon" alt="">승인 이력</h3>
<div class="input-group">
<select class="form-select" v-model="historySearchParams.year" @change="handlePageChange(1, 'history')">
<option value="">연도 전체</option>
<option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="historySearchParams.month" @change="handlePageChange(1, 'history')">
<option value="">월 전체</option>
<option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
</select>
<select name="" id="" class="form-select">
<option value="all">상태</option>
<option value="">승인</option>
<option value="">반려</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="historySearchParams.searchText" placeholder="검색어를 입력하세요." @keyup.enter="handleSearch('history')">
<button button="button" class="ico-sch" @click="handleSearch('history')">
<SearchOutlined />
</button>
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 13.33%;">
<col style="width: 30%;">
<col style="width: 16.66%;">
<col style="width: 13.33%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>결재구분</th>
<th>신청자</th>
<th>기간</th>
<th>신청일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in approvalHistoryList" :key="index" class="expired" @click="handleDetailNavigation(item.sanctnMbyId)">
<td>{{ item.sanctnIemNm }}</td>
<td>{{ item.sanctnSeNm }}</td>
<td>{{ item.registerNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
<td>{{ item.confmAtNm }}</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="historySearchParams" @onChange="(currentPage) => handlePageChange(currentPage, 'history')" />
</div>
</div>
</div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagination.vue';
// API
import { findPendingApprovalsProc } from '../../../../resources/api/sanctns';
export default {
components: {
SearchOutlined,
Pagenation,
},
data() {
return {
sectionIcon: "/client/resources/img/h3icon.png",
yearOptions: [2023, 2024, 2025], // 연도 목록
monthOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
// 승인 대기 목록
pendingApprovalList: [],
pendingSearchParams: {
year: '',
month: '',
isConfmAt: true, // 변경불가 (고정값)
searchText: '',
currentUserId: this.$store.state.userInfo.userId, // 변경불가 (고정값)
},
// 승인 이력 목록
approvalHistoryList: [],
historySearchParams: {
year: '',
month: '',
isConfmAt: false, // 변경불가 (고정값)
searchText: '',
currentUserId: this.$store.state.userInfo.userId, // 변경불가 (고정값)
},
};
},
created() {
this.generateYearOptions();
},
mounted() {
this.fetchApprovalList('pending'); // 승인 대기 목록
this.fetchApprovalList('history'); // 승인 이력 목록
},
methods: {
generateYearOptions() {
const startYear = 2020;
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= startYear; year--) {
this.yearOptions.push(year);
}
},
// 목록 조회
async fetchApprovalList(listType) {
const vm = this;
try {
let searchParams = {};
if (listType === 'pending') {
searchParams = vm.pendingSearchParams;
} else if (listType === 'history') {
searchParams = vm.historySearchParams;
}
const response = await findPendingApprovalsProc(searchParams);
const result = response.data.data;
if (listType === 'pending') {
vm.pendingApprovalList = result.lists;
vm.pendingSearchParams = result.search;
} else if (listType === 'history') {
vm.approvalHistoryList = result.lists;
vm.historySearchParams = result.search;
}
} catch (error) {
this.handleError(error);
};
},
// 검색 실행
handleSearch(listType) {
if (listType === 'pending') {
this.pendingSearchParams.currentPage = 1;
} else if (listType === 'history') {
this.historySearchParams.currentPage = 1;
}
this.fetchApprovalList(listType);
},
// 페이지 변경
handlePageChange(currentPage, listType) {
if (listType === 'pending') {
this.pendingSearchParams.currentPage = Number(currentPage);
} else if (listType === 'history') {
this.historySearchParams.currentPage = Number(currentPage);
}
this.$nextTick(() => {
this.fetchApprovalList(listType);
});
},
// 상세 페이지 이동
handleDetailNavigation(id) {
const approvalType = id.split('_')[0];
if (approvalType === "VCATN") {
this.$router.push({ name: 'HyugaDetail', query: { id, type: 'sanctns' } });
} if (approvalType === "BSRP") {
this.$router.push({ name: 'ChuljangDetailAll', query: { id, type: 'sanctns' } });
}
},
// 에러 처리
handleError(error) {
const message = error.response?.data?.message || "에러가 발생했습니다.";
alert(message);
console.error(error.message);
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>