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">
<div class="input-group">
<select name="yearPicker" id="yearPicker" class="form-select" v-model="searchParams.year" @change="handlePageChange(1)">
<option value="">연도 전체</option>
<option v-for="year in yearOptions" :key="year" :value="year">{{ year }}년</option>
</select>
<select name="monthPicker" id="monthPicker" class="form-select" v-model="searchParams.month" @change="handlePageChange(1)">
<option value="">월 전체</option>
<option v-for="month in monthOptions" :key="month" :value="month">{{ month }}월</option>
</select>
<select name="sanctnIemPicker" id="sanctnIemPicker" class="form-select" v-model="searchParams.sanctnIem" @change="handlePageChange(1)">
<option value="">전체</option>
<option v-for="(item, idx) of approvalTypeOptions" :key="idx" :value="item.code">{{ item.codeNm }}</option>
</select>
</div>
</div>
<div class="tbl-wrap">
<table 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>
<template v-if="approvalRequestList.length > 0">
<tr v-for="(item, idx) of approvalRequestList" :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>
<td>{{ item.confmAtNm }}</td>
</tr>
</template>
<tr v-else>
<td colspan="6">게시물이 존재하지 않습니다.</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="searchParams" @onChange="handlePageChange" />
<div class="buttons">
<button type="button" class="btn sm sm primary" @click="isOptionsModalVisible = true">등록</button>
</div>
</div>
</div>
</div>
<div v-if="isOptionsModalVisible" class="popup-overlay">
<div class="popup-content">
<div class="card">
<div class="card-body">
<h2 class="card-title">신청종류선택</h2>
<div class="buttons">
<button class="btn sm hyuga" @click="handleRegistrationNavigation('휴가')">휴가신청</button>
<button class="btn sm chuljang" @click="handleRegistrationNavigation('출장')">출장신청</button>
</div>
</div>
</div>
<button class="close-btn" @click="isOptionsModalVisible = false">
<CloseCircleFilled />
</button>
</div>
</div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagination from '../../../component/Pagination.vue';
// API
import { findMyApprovalRequestsProc } from '../../../../resources/api/sanctns';
export default {
components: {
SearchOutlined, CloseCircleFilled,
Pagination,
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
isOptionsModalVisible: false,
yearOptions: [],
monthOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
approvalTypeOptions: [],
approvalRequestList: [],
searchParams: {
year: '',
month: '',
sanctnIem: '',
currentUserId: this.$store.state.userInfo.userId, // 변경불가 (고정값)
},
};
},
async created() {
this.generateYearOptions();
this.approvalTypeOptions = await this.$sanctnIemCodes(); // 휴가 및 출장 구분 코드 조회
},
mounted() {
this.fetchApprovalRequestList(); // 목록 조회
},
methods: {
generateYearOptions() {
const startYear = 2020;
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= startYear; year--) {
this.yearOptions.push(year);
}
},
// 목록 조회
async fetchApprovalRequestList() {
const vm = this;
try {
const response = await findMyApprovalRequestsProc(vm.searchParams);
const result = response.data.data;
this.approvalRequestList = result.lists;
this.searchParams = result.search;
} catch (error) {
this.handleError(error);
};
},
// 페이지 변경
handlePageChange(currentPage) {
this.searchParams.currentPage = Number(currentPage);
this.$nextTick(() => {
this.fetchApprovalRequestList();
});
},
// 상세 페이지 이동
handleDetailNavigation(id) {
const approvalType = id.split('_')[0];
if (approvalType === "VCATN") {
this.$router.push({ name: 'HyugaDetail', query: { id } });
} if (approvalType === "BSRP") {
this.$router.push({ name: 'ChuljangDetailAll', query: { id } });
}
},
// 등록 페이지 이동
handleRegistrationNavigation(type) {
if (type === "휴가") {
this.$router.push({ name: 'hyugaInsert' });
} else if (type === "출장") {
this.$router.push({ name: 'ChuljangInsert' });
}
},
// 에러 처리
handleError(error) {
const message = error.response?.data?.message || "에러가 발생했습니다.";
alert(message);
console.error(error.message);
},
},
};
</script>