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 ">
<div class="col-12 border-x">
<label for="youremail" class="form-label ">출장구분<p class="require"><img :src="require" alt=""></p></label>
<input v-model="email" type="text" name="username" class="form-control" readonly >
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">이름</label>
<input v-model="password" type="password" name="password" class="form-control" readonly placeholder="주식회사 테이큰 소프트">
</div>
</div>
<div class="col-12">
<div class="col-12 border-x">
<label for="youremail" class="form-label">부서</label>
<input v-model="email" type="text" name="username" class="form-control" readonly placeholder="과장">
</div>
<div class="col-12 border-x">
<label for="yourPassword" class="form-label">직급</label>
<input v-model="password" type="password" name="password" class="form-control" readonly placeholder="팀장">
</div>
</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>
</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 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>
</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 border-x">
<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 sm primary" type="submit">승인</button>
<button class="btn sm btn-red" type="submit" @click="showPopup = true">반려</button>
<button class="btn sm 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: {
// Pinia Store의 상태를 가져옵니다.
loginUser() {
const authStore = useAuthStore();
return authStore.getLoginUser;
},
},
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>