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="lists.length > 0">
<tr v-for="(item, idx) in lists" :key="idx" @click="fnMoveTo('view', item.vcatnId)">
<td>{{ item.vcatnKndNm }}</td>
<td>{{ $formattedDates(item) }}</td>
<td>{{ item.rgsde }}</td>
<td>{{ item.confmAtNm }}</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, findVcatnsProc } 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: [], // 연차 비 소모성 휴가
request: {
vcatnKnds: null, // 휴가 종류
bgnde: null, // 시작일
endde: null, // 종료일
},
lists: [],
};
},
computed: {},
created() { },
mounted() {
this.findSummary(); // 현황 조회
this.findList(); // 목록 조회
},
methods: {
// 현황 조회
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);
};
},
// 목록 조회
async findList() {
const vm = this;
try {
delete vm.request.vcatnKndList;
const response = await findVcatnsProc(vm.request);
const result = response.data.data;
vm.lists = result.lists;
vm.request = result.search;
} 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(); // 목록 조회
},
// 목록 필터 조회
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(); // 목록 조회
},
// 페이지 이동
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>