Code - jichoi/calendar

<template> <div class="card"> <div class="card-body"> <h2 class="card-title">프로젝트 등록</h2> <p class="require"><img :src="require" alt=""> 필수입력</p> <form class="row g-3 needs-validation" @submit.prevent="handleSubmit"> <div class="col-12"> <label for="purpose" class="form-label"> <p>구분 <p class="require"><img :src="require" alt=""></p> </p> </label> <select class="form-select" style="width: 110px;"> <option value=""></option> <option value=""></option> <option value=""></option> </select> </div> <div class="col-12"> <label for="inputName5" class="form-label"> <p>프로젝트명 <p class="require"><img :src="require" alt=""></p> </p> </label> <input type="text" class="form-control" /> </div> <div class="col-12"> <label for="inputName5" class="form-label">주관기관</label> <input type="text" class="form-control" /> </div> <div class="col-12"> <div class="col-12 border-x"> <label for="where" class="form-label"> <p>담당부서 <p class="require"><img :src="require" alt=""></p> </p> </label> <input type="text" class="form-control" id="buseo" v-model="selectedDepartment" readonly /> <input type="button" class="form-control " value="검색" @click="showPopup = true" /> <BuseoPopup v-if="showPopup" @close="showPopup = false" @select="addBuseo" /> </div> <div class="col-12 border-x"> <label for="where" class="form-label"> <p>프로젝트 책임자 <p class="require"><img :src="require" alt=""></p> </p> </label> <input type="text" class="form-control" id="where" v-model="selectedname" readonly /> <input type="button" class="form-control " value="검색" @click="showPopup1 = true" /> <HrPopup v-if="showPopup1" @close="showPopup1 = false" @select="addApproval" /> </div> </div> <div class="col-12"> <div class="col-12 border-x"> <label for="where" class="form-label">사업비</label> <input type="text" class="form-control" id="where" v-model="where" /> </div> <div class="col-12 border-x"> <label for="where" class="form-label">회의비</label> <input type="text" class="form-control" id="where" v-model="where" /> </div> </div> <div class="col-12"> <label for="startDate" class="form-label"> <p>사업기간 <p class="require"><img :src="require" alt=""></p> </p> </label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="startDate" v-model="startDate" />  ~ </div> <div class="d-flex gap-1"> <input type="date" class="form-control" id="endDate" v-model="endDate" /> </div> </div> <div class="col-12"> <label for="startDate" class="form-label">계획기간</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="startDate" v-model="startDate" />  ~ </div> <div class="d-flex gap-1"> <input type="date" class="form-control" id="endDate" v-model="endDate" /> </div> </div> <div class="col-12"> <label for="startDate" class="form-label">실제기간</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="startDate" v-model="startDate" />  ~ </div> <div class="d-flex gap-1"> <input type="date" class="form-control" id="endDate" v-model="endDate" /> </div> </div> <div class="col-12 "> <label for="member" class="form-label"> <p>투입인력 <button type="button" title="추가" @click="showPopup2 = true"> <PlusCircleFilled /> </button> <p class="require"><img :src="require" alt=""></p> </p> </label> <HrPopup v-if="showPopup2" @close="showPopup2 = false" @select="addApproval1"/> <div class="approval-container"> <div v-for="(member, index) in approvals1" :key="index" class="d-flex gap-2 addapproval mb-2"> <select class="form-select" style="width: 110px;" v-model="member.category"> <option value="선택">선택</option> <option value=""></option> <option value=""></option> </select> <input type="text" class="form-control" v-model="member.name" style="max-width: 150px;" /> <button type="button" @click="removeApproval(index)" class="delete-button"> <CloseOutlined /> </button> </div> </div> </div> <div class="col-12 chuljang border-x"> <label for="prvonsh" class="form-label">비고</label> <input type="text" class="form-control textarea" id="reason" v-model="reason" /> </div> </form> <div class="buttons"> <button type="submit" class="btn sm primary">등록</button> <button type="reset" class="btn sm tertiary">취소</button> </div> </div> </div> </template> <script> import { PlusCircleFilled, CloseOutlined } from '@ant-design/icons-vue'; import HrPopup from "../../../component/Popup/HrPopup.vue"; import BuseoPopup from "../../../component/Popup/BuseoPopup.vue"; export default { data() { const today = new Date().toISOString().split('T')[0]; return { showPopup: false, showPopup1: false, showPopup2: false, buseos: [], selectedDepartment: '', selectedname: '', approvals: [], approvals1: [], require: "/client/resources/img/require.png", startDate: today, startTime: "09:00", // 기본 시작 시간 09:00 endDate: today, endTime: "18:00", // 기본 종료 시간 18:00 category: "", dayCount: 1, reason: "", // 사유 }; }, components: { PlusCircleFilled, CloseOutlined, BuseoPopup, HrPopup }, computed: { }, methods: { addBuseo(selectedUser) { this.buseos.push({ department: selectedUser.department, name: selectedUser.name }); this.selectedDepartment = selectedUser.department; // 입력창에 표시 this.showPopup = false; }, removeBuseo(index) { this.buseos.splice(index, 1); }, addApproval(selectedUser) { this.approvals.push({ name: selectedUser.name }); this.selectedname = selectedUser.name; // 입력창에 표시 this.showPopup1 = false; }, addApproval1(selectedUser) { this.approvals1.push({ category: '선택', name: selectedUser.name, // or other fields if needed }); this.showPopup2 = false; // 팝업 닫기 }, // 승인자 삭제 removeApproval(index) { this.approvals1.splice(index, 1); }, 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일로 간주 } } }, }, mounted() { }, }; </script>