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