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="name-box flex simple">
<div class="img-area" >
<div class="img"><img :src="photoicon" alt="">
</div>
</div>
<form class="row g-3 needs-validation " :class="{ 'was-validated': formSubmitted }"
@submit.prevent="handleRegister" novalidate >
<div class="col-12">
<label for="yourName" class="form-label">아이디</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<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" required
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" id="yourPassword"
required readonly placeholder="주식회사 테이큰 소프트">
</div>
</div>
<div class="col-12 border-x">
<div class="col-12 border-x">
<label for="youremail" class="form-label">직급</label>
<input v-model="email" type="text" name="username" class="form-control" id="youremail" required 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" id="yourPassword"
required readonly placeholder="팀장">
</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" required readonly
placeholder="admin">
</div>
<div class="col-12">
<label for="yourName" class="form-label">생년월일</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<div class="col-12 border-x">
<label for="yourName" class="form-label">입사일</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</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>연봉</label>
<div class="yearsalary">
<div class="col-12">
<label for="" class="second-label">2023</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<div class="col-12">
<label for="" class="second-label">2023</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
<div class="col-12 border-x">
<label for="" class="second-label">2023</label>
<input v-model="name" type="text" name="name" class="form-control" id="yourName" required readonly
placeholder="admin">
</div>
</div>
</div>
</form>
<div class="buttons">
<button type="delete" class="btn sm btn-red">탈퇴</button>
<button type="reset" class="btn sm secondary">수정</button>
<button type="submit" class="btn sm tertiary">목록</button>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
data() {
return {
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
},
methods: {
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>