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" id="youremail" 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 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 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: {
},
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>
<style scoped>
td p {
width: 125px;
}
</style>