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="form-group">
<div class="form-conts">
<div class="form-conts datepicker-conts">
<div class="datepicker-input">
<input type="date" class="form-control datepicker cal" v-model="request.bgnde" style="max-width: 200px;" @change="changeDate" />
<mark>~</mark>
<input type="date" class="form-control datepicker cal" v-model="request.endde" style="max-width: 200px;" @change="changeDate" />
</div>
</div>
</div>
</div>
<div class="boxs">
<div class="color-boxs">
<div v-for="(item, idx) of useSummary" :key="idx" :class="getBoxClass(idx)" @click="fnFindUseList(item)">
<h3>{{ item.name }}</h3> {{ item.value }}
</div>
<div v-for="(item, idx) of notUseSummary" :key="idx" :class="getBoxClass(useSummary.length + idx)" @click="fnFindNotUseList(item.code)">
<h3>{{ item.codeNm }}</h3> {{ item.value }}
</div>
</div>
</div>
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<colgroup>
<col style="width: 15%;">
<col style="width: 40%;">
<col style="width: 30%;">
<col style="width: 15%;">
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>기간</th>
<th>신청일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
<template v-if="formattedListData.length > 0">
<tr v-for="(item, idx) in formattedListData" :key="idx" @click="fnMoveTo('view', item.vcatnId)">
<td :class="getTypeColorClass(item.formattedVcatnKnd)">{{ item.formattedVcatnKnd }}</td>
<td>{{ item.formattedBgnde }} {{ item.formattedBeginHour }}:{{ item.formattedBeginMnt }} ~ {{ item.formattedEndde }} {{ item.formattedEndHour }}:{{ item.formattedEndMnt }}</td>
<td>{{ item.rgsde }}</td>
<td :class="getStatusClass(item.formattedStatus)">{{ item.formattedStatus }}</td>
</tr>
</template>
<tr v-else>
<td colspan="4">해당 기간 내 등록된 휴가가 없습니다.</td>
</tr>
</tbody>
</table>
</div>
<Pagenation :search="request" @onChange="fnChangeCurrentPage" />
</div>
</div>
</div>
</template>
<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from '../../../component/Pagenation.vue';
// API
import { findVcatnsSummary, findMyVcatnsProc } from '../../../../resources/api/vcatn';
export default {
components: {
SearchOutlined,
Pagenation
},
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
color: ['blue', 'red', 'green', 'purple', 'orange'],
colorMap: [],
useSummary: [], // 연차 소모성 휴가
notUseSummary: [], // 연차 비 소모성 휴가
// 휴가 현황 목록 조회용
listData: [],
request: {
vcatnKnds: null, // 휴가 종류
bgnde: null, // 시작일
endde: null, // 종료일
},
// 공통코드(구분, 상태) 목록 조회용
vcatnKnds: [],
confmTypes: [],
serachRequest: {
searchType: "upperCd",
searchText: null,
},
};
},
computed: {
formattedListData() {
if (!this.listData || !Array.isArray(this.listData)) {
return [];
}
return this.listData.map(item => {
const vcatnKnd = this.vcatnKnds.find(v => v.code === item.vcatnKnd);
const confmAt = this.confmTypes.find(v => v.codeValue === item.confmAt);
return {
...item,
formattedVcatnKnd: vcatnKnd ? vcatnKnd.codeNm : item.vcatnKnd,
formattedBgnde: item.bgnde ? item.bgnde.split(' ')[0] : '',
formattedEndde: item.endde ? item.endde.split(' ')[0] : '',
formattedBeginHour: item.beginHour ? item.beginHour.toString().padStart(2, '0') : '00',
formattedEndHour: item.endHour ? item.endHour.toString().padStart(2, '0') : '00',
formattedBeginMnt: item.beginMnt ? item.beginMnt.toString().padStart(2, '0') : '00',
formattedEndMnt: item.endMnt ? item.endMnt.toString().padStart(2, '0') : '00',
formattedStatus: confmAt ? confmAt.codeNm : item.confmAt,
};
});
}
},
created() {
this.vcatnCodes(); // 휴가 종류 코드 조회
this.confmTypeCodes(); // 상태 코드 조회
},
mounted() {
this.findSummary(); // 현황 조회
this.findList(); // 목록 조회
},
methods: {
// 휴가 종류 코드 조회
async confmTypeCodes() {
this.vcatnKnds = []; // 초기화
this.serachRequest.searchText = "sanctn_mby_vcatn";
const codes = await this.$findCodeList(this.serachRequest);
if (codes && Array.isArray(codes)) {
for (const code of codes) {
this.serachRequest.searchText = code.code;
const result = await this.$findCodeList(this.serachRequest);
if (result && Array.isArray(result)) {
this.vcatnKnds.push(...result);
}
}
}
},
// 상태 코드 조회
async vcatnCodes() {
this.confmTypes = []; // 초기화
this.serachRequest.searchText = "confm_code";
const codes = await this.$findCodeList(this.serachRequest);
if (codes && Array.isArray(codes)) {
this.confmTypes = codes;
}
},
// 현황 조회
async findSummary() {
const vm = this;
try {
const response = await findVcatnsSummary(vm.request);
const result = response.data.data;
this.request.bgnde = new Date(result.data.bgnde).toISOString().split('T')[0];
this.request.endde = new Date(result.data.endde).toISOString().split('T')[0];
if (result.data.yryc < 1) {
this.request.endde = new Date().toISOString().split('T')[0];
}
let yrycCyfdCo = result.data.yrycCyfdCo;
let totalCo = result.data.yrycCo + yrycCyfdCo;
let useCo = result.useSummary.useCo;
let notUseCo = totalCo - useCo;
this.useSummary = []; // 초기화
this.useSummary.push({ key: 'totalCo', name: '전체', value: totalCo + '(' + yrycCyfdCo + ')' });
this.useSummary.push({ key: 'useCo', name: '사용', value: useCo, codeList: result.useSummary.codeList });
this.useSummary.push({ key: 'notUseCo', name: '미사용', value: notUseCo });
this.notUseSummary = []; // 초기화
this.notUseSummary = result.notUseSummary;
this.colorMap = []; // 초기화
const keys = Object.keys(this.notUseSummary);
for (let i = 0; i < Object.keys(this.notUseSummary).length; i++) {
this.colorMap.push({
code: keys[i].code,
class: this.color[this.useSummary.length + i],
})
}
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 현황에 클래스 부여
getBoxClass(idx) {
if (idx === 0) return 'box';
return `box ${this.color[(idx - 1) % this.color.length]}`;
},
// 날짜 선택
changeDate() {
if (!this.request.bgnde || !this.request.endde) {
return;
}
const startDate = new Date(this.request.bgnde);
const endDate = new Date(this.request.endde);
if (endDate < startDate) {
alert('종료일은 시작일보다 이전일 수 없습니다.');
this.request.endde = this.request.bgnde;
return;
}
this.findList(); // 목록 조회
},
// 목록 조회
async findList() {
const vm = this;
try {
delete vm.request.vcatnKndList;
const response = await findMyVcatnsProc(vm.request);
const result = response.data.data;
vm.listData = result.lists;
vm.request = result.search;
} catch (error) {
if (error.response) {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.");
}
console.error(error.message);
};
},
// 목록 필터 조회
fnFindUseList(item) {
if (item.key === 'totalCo') {
this.request.vcatnKnds = null;
} else if (item.key === 'useCo') {
this.request.vcatnKnds = item.codeList.map(code => code.code).join(", ");
} else {
return;
}
this.findList(); // 목록 조회
},
fnFindNotUseList(vcatnKnd) {
this.request.vcatnKnds = vcatnKnd;
this.findList(); // 목록 조회
},
// 구분에 클래스 부여
getTypeColorClass(code) {
for (let color of this.colorMap) {
if (color.code === code) {
return 'vcatnKnd ' + color.class;
}
}
return 'vcatnKnd blue';
},
// 상태에 따른 클래스 반환 메소드
getStatusClass(status) {
if (status === '승인') return 'status-approved';
if (status === '대기') return 'status-pending';
return '';
},
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.request.currentPage = Number(currentPage);
this.$nextTick(() => {
this.findList();
});
},
// 페이지 이동
fnMoveTo(type, id) {
const routes = {
'list': { name: 'hyugaStatue' },
'view': { name: 'HyugaDetail', query: { id } },
'edit': { name: 'hyugaInsert', query: this.$isEmpty(id) ? {} : { id } },
};
if (routes[type]) {
if (!this.$isEmpty(this.pageId) && type === 'list') {
this.$router.push({ name: 'HyugaDetail', query: { id: this.pageId } });
}
this.$router.push(routes[type]);
} else {
alert("올바르지 않은 경로를 요청하여 목록으로 이동합니다.");
this.$router.push(routes['list']);
}
},
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
.box {
cursor: pointer;
}
.vcatnKnd.red {
color: #E92727 !important;
}
.vcatnKnd.green {
color: #3C97AB !important;
}
.vcatnKnd.blue {
color: #1D75E1 !important;
}
.vcatnKnd.purple {
color: #A36CD4 !important;
}
.vcatnKnd.orange {
color: #F7941C !important;
}
</style>