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 class="form-select" v-model="request.year" @change="fnChangeCurrentPage(1)">
<option value="">연도 전체</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}년</option>
</select>
<select class="form-select" v-model="request.month" @change="fnChangeCurrentPage(1)">
<option value="">월 전체</option>
<option v-for="month in months" :key="month" :value="month">{{ month }}월</option>
</select>
<select name="" id="" class="form-select">
<option value="" selected>전체</option>
<option value="">출장-복명</option>
<option value="">출장-품의</option>
<option value="">연차</option>
<option value="">반차-오전</option>
<option value="">반차-오후</option>
<option value="">대체휴가</option>
<option value="">공가</option>
<option value="">병가</option>
</select>
</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, idx) of lists" :key="idx">
<td>{{ item.sanctnIemNm }}</td>
<td>{{ item.sanctnSeNm }}</td>
<td>{{ item.applcntNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
<td>{{ item.confmAtNm }}</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="request" @onChange="fnChangeCurrentPage" />
<div class="buttons">
<button type="button" class="btn sm primary" @click="showOptions = true"> 등록 </button>
</div>
</div>
</div>
</div>
<div v-if="showOptions" 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 hyuga" @click="goToPage('휴가')">휴가신청</button>
<button class="btn chuljang" @click="goToPage('출장')">출장신청</button>
</div>
</div>
</div>
<button class="close-btn" @click="showOptions = false">
<CloseCircleFilled />
</button>
</div>
</div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagenation.vue';
// API
import { findSanctnsProc } from '../../../../resources/api/sanctns';
export default {
components: {
SearchOutlined, CloseCircleFilled,
Pagenation,
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
showOptions: false,
years: [],
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
lists: [],
request: {
year: '',
month: '',
register: this.$store.state.userInfo.userId,
},
};
},
created() {
this.generateYears();
},
mounted() {
this.findList(); // 목록 조회
},
methods: {
generateYears() {
const startYear = 2020;
const currentYear = new Date().getFullYear();
for (let year = currentYear; year >= startYear; year--) {
this.years.push(year);
}
},
// 목록 조회
async findList() {
const vm = this;
try {
const response = await findSanctnsProc(vm.request);
const result = response.data.data;
this.lists = result.lists;
this.request = result.search;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.request.currentPage = Number(currentPage);
this.$nextTick(() => {
this.findList();
});
},
},
};
</script>