<template> <div class="pagetitle"> <h1>프로젝트 등록</h1> </div><!-- End Page Title --> <section class="section"> <div class="card"> <div class="card-body"> <!-- Multi Columns Form --> <form class="row g-3 pt-3" @submit.prevent="handleSubmit"> <div class="col-md-9"> <label for="projectNm" class="form-label">프로젝트명</label> <input type="text" class="form-control" id="projectNm" v-model="projectNm" /> </div> <div class="col-md-5"> <label for="orgNm" class="form-label">주관사</label> <input type="text" class="form-control" id="orgNm" v-model="orgNm" /> </div> <div class="col-md-5"> <label for="inputName5" class="form-label">부서</label> <select id="inputState" class="form-select"> <option selected></option> <option></option> <option></option> <option></option> <option></option> <option></option> </select> </div> <div class="col-md-9"> <label for="rm" class="form-label">사업금액</label> <input type="text" class="form-control" id="rm" v-model="rm" /> </div> <div class="col-md-5"> <label for="startDate" class="form-label">사업기간</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="BstartDate" v-model="BstartDate" />~ <input type="date" class="form-control" id="BendDate" v-model="BendDate" /> </div> </div> <div class="col-6"> <label for="prvonsh" class="form-label">사업 투입인력</label> <div class="search-bar d-flex gap-2"> <form class="search-form d-flex align-items-center" method="POST" action="#" @submit.prevent="updateMember"> <input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword"> <button type="submit" title="Search"><i class="bi bi-search"></i></button> </form> <input type="text" class="select-member" :value="selectedMember.join(' ')" readonly> </div> </div> <div class="col-md-5"> <label for="endDate" class="form-label">실제 투입기간</label> <div class="d-flex gap-1"> <input type="date" class="form-control" id="MystartDate" v-model="MystartDate" />~ <input type="date" class="form-control" id="MyendDate" v-model="MyendDate" /> </div> </div> <div class="col-6"> <label for="prvonsh" class="form-label">실제 투입인력</label> <div class="search-bar d-flex gap-2"> <form class="search-form d-flex align-items-center" method="POST" action="#" @submit.prevent="updateMember"> <input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword"> <button type="submit" title="Search"><i class="bi bi-search"></i></button> </form> <input type="text" class="select-member" :value="selectedMember.join(' ')" readonly> </div> </div> <div class="col-md-4"> <label for="totalDays" class="form-label">총 투입일<span class="small"></span></label> <input type="text" class="form-control" id="totalDays" v-model="totalDays" readonly /> </div> <div class="col-12"> <label for="rm" class="form-label">비고</label> <input type="text" class="form-control" id="rm" v-model="rm" /> </div> <div class="text-end"> <button type="submit" class="btn btn-primary">등록</button> <button type="reset" class="btn btn-secondary">취소</button> </div> </form><!-- End Multi Columns Form --> </div> </div> </section> </template> <script> import { useAuthStore } from '../../stores/authStore'; export default { data() { const today = new Date().toISOString().split('T')[0]; return { searchQuery: '', selectedMember: [], BstartDate: today, MystartDate: today, totalDays: 0, // 사용 휴가일 계산 reason: "", // 사유 }; }, computed: { // Pinia Store의 상태를 가져옵니다. loginUser() { const authStore = useAuthStore(); return authStore.getLoginUser; }, }, methods: { updateMember() { // Add the search query to the selectedMembers array if it's not empty if (this.searchQuery.trim()) { this.selectedMember.push(this.searchQuery.trim()); } // Clear the search query after adding it to selectedMembers this.searchQuery = ''; }, // 폼 검증 메서드 validateForm() { // 필수 입력 필드 체크 if ( this.BstartDate && this.BendDate && this.MystartDate && this.MyendDate && this.totalDays > 0 ) { this.isFormValid = true; } else { this.isFormValid = false; } }, handleSubmit() { this.validateForm(); // 제출 시 유효성 확인 if (this.isFormValid) { alert("승인 요청이 완료되었습니다."); // 추가 처리 로직 (API 요청 등) } else { alert("모든 필드를 올바르게 작성해주세요."); } }, }, watch: { BstartDate: 'calculateDayCount', BendDate: 'calculateDayCount', MystartDate: 'calculateDayCount', MyendDate: 'calculateDayCount', rm: "validateForm", }, }; </script>