<template> <div class="pagetitle"> <h2>프로젝트 등록</h2> </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>ux/ui</option> </select> </div> <div class="col-md-9"> <label for="rm" class="form-label">사업금액</label> <input type="text" class="form-control" id="amount" v-model="amount" /> </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"><PlusOutlined /></button> </form> <input type="text" class="select-member" :value="selectedMember.join(' ')" > </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"><PlusOutlined /></button> </form> <input type="text" class="select-member" :value="selectedMember.join(' ')" > </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 { PlusOutlined } from '@ant-design/icons-vue'; export default { data() { const today = new Date().toISOString().split('T')[0]; return { searchQuery: '', selectedMember: [], projectNm: '', // Project name orgNm: '', // Organization name department: '', // Department selection amount: '', rm: '', // Business amount BstartDate: today, // Business start date BendDate: today, // Business end date MystartDate: today, // Actual start date MyendDate: today, // Actual end date totalDays: 1, // Total days reason: "", // Notes or remarks }; }, components: { PlusOutlined, }, 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(); // Validate the form when submitting if (this.isFormValid) { // Save form data to localStorage localStorage.setItem('projectFormData', JSON.stringify(this.$data)); alert("승인 요청이 완료되었습니다."); // Additional processing logic (e.g., API request) } else { alert("모든 필드를 올바르게 작성해주세요."); } }, loadFormData() { const savedData = localStorage.getItem('projectFormData'); if (savedData) { this.$data = JSON.parse(savedData); } console.log(loadFormData) }, }, mounted() { // Load the saved form data when the page is loaded this.loadFormData(); }, watch: { projectNm: "saveFormData", orgNm: "saveFormData", department: "saveFormData", rm: "saveFormData", BstartDate: "saveFormData", BendDate: "saveFormData", MystartDate: "saveFormData", MyendDate: "saveFormData", totalDays: "saveFormData", reason: "saveFormData", }, }; </script>