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="card ">
<div class="card-body">
<h2 class="card-title">출장 현황</h2>
<div class="form-card">
<h1>출장복명서</h1>
<div class="approval-box tbl-wrap tbl2">
<table class="tbl data">
<tbody>
<tr class="thead">
<td rowspan="2" class="th">승인자</td>
<td v-for="(approver, index) in approvers" :key="index">
<p class="position">{{ approver.position }}</p>
</td>
</tr>
<tr>
<td v-for="(approver, index) in approvers" :key="index">
<p class="name">{{ approver.name }}</p>
<p class="date">{{ approver.date }}</p>
</td>
</tr>
</tbody>
</table>
</div>
<form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
<div class="col-12 chuljang">
<label for="yourName" class="form-label">복명내용</label>
<input v-model="name" type="text" name="name" class="form-control textarea " readonly>
</div>
<div class="col-12">
<label for="yourName" class="form-label">여비계산</label>
<input v-model="name" type="text" name="name" class="form-control " readonly>
</div>
<div class="col-12 ">
<label for="yourName" class="form-label">복명 신청일</label>
<input v-model="name" type="text" name="name" class="form-control" readonly placeholder="2025-01-01">
</div>
<div class="col-12 border-x return">
<label for="yourName" class="form-label">반려사유</label>
<input v-model="name" type="text" name="name" class="form-control" readonly placeholder="2025-01-01">
</div>
</form>
</div>
<div class="buttons">
<button class="btn primary" type="submit">승인</button>
<button class="btn btn-red" type="submit" @click="showPopup = true">반려</button>
<button class="btn btn-red" type="submit">신청취소</button>
<button class="btn secondary" type="submit">재신청</button>
<button class="btn secondary" type="submit">수정</button>
<button class="btn tertiary " type="submit">목록</button>
</div>
<ReturnPopup v-if="showPopup" @close="showPopup = false"/>
</div>
</div>
</template>
<script>
import ReturnPopup from '../../../component/Popup/ReturnPopup.vue';
export default {
data() {
const today = new Date().toISOString().split('T')[0];
return {
showPopup: false,
startDate: today,
startTime: "09:00", // 기본 시작 시간 09:00
endDate: today,
endTime: "18:00", // 기본 종료 시간 18:00
category: "",
dayCount: 1,
reason: "", // 사유
approvers: [
{ position: '', name: '', date: '' },
{ position: '', name: '', date: '' },
],
listData: [
{
type: '연차',
approvalType: '결재',
applicant: '홍길동',
period: '2025-05-10 ~ 2025-15-03',
requestDate: '2025-04-25',
status: '대기'
}, {
type: '반차',
approvalType: '전결',
applicant: '홍길동',
period: '2025-05-01 ~ 2025-05-03',
requestDate: '2025-04-25',
status: '승인'
}],
};
},
components: {
ReturnPopup
},
computed: {
},
methods: {
hasAnyApprover() {
return this.approvers.some(
(approver) =>
approver.name?.trim() !== '' && approver.date?.trim() !== ''
);
},
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일로 간주
}
}
},
},
};
</script>