<template> <div class="card "> <div class="card-body "> <h2 class="card-title">직원 검색</h2> <div class="name-box flex simple"> <div class="img-area column"> <div class="img"> <img :src="previewImg || placeholder" alt="미리보기 이미지" /> <button class="close-btn" @click="removeImage">&#215;</button> </div> <div class="info"> <div class="file"> <label for="fileUpload" class="file-label"> <img :src="file" alt=""> <p>업로드</p> </label> <input id="fileUpload" type="file" @change="handleFileUpload" accept="image/*" /> </div> </div> </div> <form class="row g-3 needs-validation " :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>아이디<p class="require"><img :src="require" alt=""></p></p></label> <input v-model="email" type="text" name="username" class="form-control" required > </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label"><p>권한<p class="require"><img :src="require" alt=""></p></p></label> <select class="form-select" > <option value="선택">선택</option> <option value=""></option> <option value=""></option> </select> </div> </div> <div class="col-12 "> <div class="col-12 border-x"> <label for="youremail" class="form-label "><p>이름<p class="require"><img :src="require" alt=""></p></p></label> <input v-model="email" type="text" name="username" class="form-control" required > </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label"><p>부서<p class="require"><img :src="require" alt=""></p></p></label> <input v-model="selectedname" type="password" name="password" class="form-control" required placeholder="주식회사 테이큰 소프트"> <input type="button" class="form-control " value="검색" @click="showPopup = true" /> <BuseoPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/> </div> </div> <div class="col-12 border-x"> <div class="col-12 border-x"> <label for="youremail" class="form-label"><p>직급<p class="require"><img :src="require" alt=""></p></p></label> <select class="form-select" > <option value="선택">선택</option> <option value=""></option> <option value=""></option> </select> </div> <div class="col-12 border-x"> <label for="yourPassword" class="form-label">직책</label> <select class="form-select" > <option value="선택">선택</option> <option value=""></option> <option value=""></option> </select> </div> </div> </form> </div> <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate style="margin-bottom: 20px;"> <div class="col-12"> <label for="yourName" class="form-label">연락처</label> <input v-model="name" type="text" name="name" class="form-control " id="yourName" placeholder="admin"> </div> <div class="col-12"> <label for="yourName" class="form-label">생년월일</label> <input v-model="name" type="date" name="name" class="form-control" id="yourName" > </div> <div class="col-12 border-x"> <label for="yourName" class="form-label"><p>입사일<p class="require"><img :src="require" alt=""></p></p></label> <input v-model="name" type="date" name="name" class="form-control" id="yourName" required > </div> </form> <form class="row g-3 needs-validation detail salary" :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate> <div class=" col-12 border-x"><label>연봉<button type="button" title="추가" @click="addSalary"> <PlusCircleFilled /> </button></label> <div class="yearsalary approval-container"> <div class="col-12 border-x addapproval" v-for="(salary, index) in salarys" :key="index"> <input type="text" name="name" class="form-control" v-model="salary.salary" style="width: 200px;" placeholder="년도"> <div> <input type="text" name="name" class="form-control" v-model="salary.total" placeholder="금액"> </div> </div> </div> </div> </form> <div class="buttons"> <button type="reset" class="btn sm primary">등록</button> <button type="submit" class="btn sm tertiary">취소</button> </div> </div> </div> </template> <script> import GoogleCalendar from "../../../component/GoogleCalendar.vue" import { SearchOutlined, PlusCircleFilled } from '@ant-design/icons-vue'; import BuseoPopup from "../../../component/Popup/BuseoPopup.vue"; export default { data() { return { showPopup: false, selectedname: '', approvals: [], salarys: [ { salary: '', total: '', },] , previewImg: null, placeholder: "/client/resources/img/img1.png", require: "/client/resources/img/require.png", file: "/client/resources/img/file.png", photoicon: "/client/resources/img/photo_icon.png", img1: "/client/resources/img/img.png", icon1: "/client/resources/img/icon.png", dateicon: "/client/resources/img/date.png", startbtn: "/client/resources/img/start.png", stopbtn: "/client/resources/img/stop.png", moreicon: "/client/resources/img/more.png", today: new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short', }), time: this.getCurrentTime(), listData: Array.from({ length: 20 }, (_, i) => ({ department: `부서 ${i + 1}`, name: `이름 ${i + 1}`, position: `직급 ${i + 1}` })) } }, components: { SearchOutlined, PlusCircleFilled, BuseoPopup }, methods: { addApproval(selectedUser) { this.approvals.push({ name: selectedUser.name }); this.selectedname = selectedUser.name; // 입력창에 표시 this.showPopup = false; }, addSalary() { this.salarys.push({ salary: '', total: '', }); }, handleFileUpload(event) { const file = event.target.files[0]; if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = (e) => { this.previewImg = e.target.result; // 파일 읽기 완료 후 미리보기 이미지 설정 }; reader.readAsDataURL(file); // 파일을 데이터 URL로 읽기 } else { alert('이미지 파일만 선택할 수 있습니다.'); } }, // 이미지 삭제 함수 removeImage() { this.previewImg = null; // 미리보기 이미지 삭제 this.$refs.fileUpload.value = null; // 파일 input 초기화 }, formatBudget(amount) { return new Intl.NumberFormat().format(amount) + ' 원'; }, isPastPeriod(period) { // 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출 const endDateStr = period.split('~')[1]?.trim(); if (!endDateStr) return false; const endDate = new Date(endDateStr); const today = new Date(); // 현재 날짜보다 과거면 true return endDate < today; }, getStatusClass(status) { return status === 'active' ? 'status-active' : 'status-inactive'; }, getStatusClass(status) { if (status === '미진행') return 'status-pending'; if (status === '진행중') return 'status-approved'; // Default empty string return ''; }, getCurrentTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; }, getCategoryClass(category) { switch (category) { case '용역': return 'category-service'; case '내부': return 'category-internal'; case '국가과제': return 'category-government'; default: return ''; } }, }, watch: { }, computed: { }, mounted() { console.log('main mounted'); setInterval(() => { this.time = this.getCurrentTime(); }, 1000); } } </script> <style scoped> tr { cursor: pointer; } </style>