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 ">
<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 primary" type="submit">승인</button>
<button class="btn btn-red" type="submit" @click="showPopup = true">반려</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: {
// 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>