<template> <div class="pagetitle"> <h2>휴가신청</h2> </div><!-- End Page Title --> <section class="section"> <div class="card"> <div class="card-body"> <!-- Multi Columns Form --> <form class="row g-3 pt-3" @submit.prevent="handleSubmit"> <div class="col-md-9"> <label for="inputName5" class="form-label">구분</label> <select id="category" class="form-select" v-model="category"> <option selected>연차</option> <option>반차</option> <option>병가</option> <option>경조</option> <option>무급</option> <option>공가</option> </select> </div> <div class="col-md-5"> <label for="startDate" class="form-label">시작일</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="startDate" v-model="startDate" /> <!-- 시간 선택을 위한 select 사용 --> <select class="form-control" id="startTime" v-model="startTime"> <option value="09:00">09:00</option> <option value="10:00">10:00</option> <option value="11:00">11:00</option> <option value="12:00">12:00</option> <option value="13:00">13:00</option> <option value="14:00">14:00</option> <option value="15:00">15:00</option> <option value="16:00">16:00</option> <option value="17:00">17:00</option> <option value="18:00">18:00</option> </select> </div> </div> <div class="col-md-5"> <label for="endDate" class="form-label">종료일</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="endDate" v-model="endDate" /> <!-- 종료 시간을 위한 select 사용 --> <select class="form-control" id="endTime" v-model="endTime"> <option value="09:00">09:00</option> <option value="10:00">10:00</option> <option value="11:00">11:00</option> <option value="12:00">12:00</option> <option value="13:00">13:00</option> <option value="14:00">14:00</option> <option value="15:00">15:00</option> <option value="16:00">16:00</option> <option value="17:00">17:00</option> <option value="18:00">18:00</option> </select> </div> </div> <div class="col-md-4"> <label for="dayCount" class="form-label">사용 휴가일</label> <input type="text" class="form-control" id="dayCount" v-model="dayCount" readonly /> </div> <div class="col-12"> <label for="prvonsh" class="form-label">사유</label> <input type="text" class="form-control" id="reason" v-model="reason" /> </div> <div class="text-end"> <button type="submit" class="btn btn-primary">승인요청</button> <button type="reset" class="btn btn-secondary">취소</button> </div> </form><!-- End Multi Columns Form --> </div> </div> </section> </template> <script> export default { data() { const today = new Date().toISOString().split('T')[0]; return { startDate: today, startTime: "09:00", // 기본 시작 시간 09:00 endDate: today, endTime: "18:00", // 기본 종료 시간 18:00 category: "", dayCount: 1, reason: "", // 사유 }; }, computed: { // Pinia Store의 상태를 가져옵니다. loginUser() { const authStore = useAuthStore(); return authStore.getLoginUser; }, }, methods: { // 폼 검증 메서드 validateForm() { // 필수 입력 필드 체크 if ( this.category && this.startDate && this.startTime && this.endDate && this.endTime && this.dayCount > 0 && this.reason.trim() !== "" ) { this.isFormValid = true; } else { this.isFormValid = false; } }, calculateDayCount() { const start = new Date(`${this.startDate}T${this.startTime}:00`); const end = new Date(`${this.endDate}T${this.endTime}:00`); let totalHours = (end - start) / (1000 * 60 * 60); // 밀리초를 시간 단위로 변환 if (this.startDate !== this.endDate) { // 시작일과 종료일이 다른경우 const startDateObj = new Date(this.startDate); const endDateObj = new Date(this.endDate); const daysDifference = (endDateObj - startDateObj) / (1000 * 60 * 60 * 24); // 두 날짜 사이의 차이를 일수로 계산 if (this.startTime !== "09:00" || this.endTime !== "18:00") { this.dayCount = daysDifference + 0.5; // 시간 조건이 기준에서 벗어날 경우 } else { this.dayCount = Math.ceil(daysDifference + 1); // 시간 조건이 기준에 맞을 경우 } } else { // 시작일과 종료일이 같은 경우 if (this.startTime !== "09:00" || this.endTime !== "18:00") { this.dayCount = 0.5; // 시작 시간 또는 종료 시간이 기준과 다를 경우 0.5 } else { this.dayCount = 1; // 기준 시간(09:00~18:00)이 맞으면 1일로 간주 } } this.validateForm(); // dayCount 변경 후 폼 재검증 }, handleSubmit() { this.validateForm(); // 제출 시 유효성 확인 if (this.isFormValid) { localStorage.setItem('HyugaFormData', JSON.stringify(this.$data)); alert("승인 요청이 완료되었습니다."); // 추가 처리 로직 (API 요청 등) } else { alert("모든 필드를 올바르게 작성해주세요."); } }, loadFormData() { const savedData = localStorage.getItem('HyugaFormData'); if (savedData) { this.$data = JSON.parse(savedData); } console.log(loadFormData) }, }, mounted() { // Load the saved form data when the page is loaded this.loadFormData(); }, watch: { startDate: 'calculateDayCount', startTime: 'calculateDayCount', endDate: 'calculateDayCount', endTime: 'calculateDayCount', reason: "validateForm", category: 'category', }, }; </script>