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="flex align-top">
<div class="sch-form-wrap search">
<div class="input-group" style="display: flex;">
<select name="" id="" class="form-select">
<option value="">전체</option>
<option value="">차량명</option>
<option value="">차량번호</option>
</select>
<div class="sch-input">
<input type="text" class="form-control">
<button class="ico-sch">
<SearchOutlined />
</button>
</div>
</div>
<div class="tbl-wrap table-scroll">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>차량목록 </th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="width: 100%;">
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">차량 정보</h3>
<div class="buttons" style="margin: 0;">
<button type="submit" class="btn sm tertiary">신규</button>
<button type="reset" class="btn sm secondary">등록</button>
<button type="delete" class="btn sm btn-red">삭제</button>
</div>
</div>
<form class="row g-3 pt-3 needs-validation " @submit.prevent="handleSubmit"
style="margin-bottom: 3rem;">
<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="where" v-model="where" />
</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="where" />
</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"><p>소유형태<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control" id="where" v-model="where" />
</div>
</div>
<div class="col-12 ">
<label for="prvonsh" class="form-label"><p>차량명<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control textarea" id="reason" v-model="reason" />
</div>
<div class="col-12 ">
<label for="prvonsh" class="form-label"><p>담당자<p class="require"><img :src="require" alt=""></p></p></label>
<input type="text" class="form-control textarea" id="reason" v-model="selectedname" readonly/>
<input type="button" class="form-control " value="검색" @click="showPopup = true" />
<HrPopup v-if="showPopup" @close="showPopup = false" @select="addApproval"/>
</div>
<div class="col-12 chuljang ">
<label for="prvonsh" class="form-label">비고</label>
<input type="text" class="form-control textarea" id="reason" v-model="reason" />
</div>
<div class="col-12 border-x input-radio">
<label for="prvonsh" 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>
</form>
<div class=" sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">예약현황</h3>
</div>
<div class="tbl-wrap chk-area">
<table id="myTable" class="tbl data">
<thead>
<tr>
<th>차종</th>
<th>운행자</th>
<th>기간</th>
<th>상태</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td>{{ item.type }}</td>
<td>{{ item.driver }}</td>
<td>{{ item.startDate }} ~ {{ item.endDate }}</td>
<td :class="getStatusClass(item.status)">
{{ item.status }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<ul>
<!-- 왼쪽 화살표 (이전 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
<
</li>
<!-- 페이지 번호 -->
<li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }"
@click="changePage(page)">
{{ page }}
</li>
<!-- 오른쪽 화살표 (다음 페이지) -->
<li class="arrow" :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import GoogleCalendar from "../../../component/GoogleCalendar.vue"
import { SearchOutlined } from '@ant-design/icons-vue';
import HrPopup from "../../../component/Popup/HrPopup.vue";
export default {
data() {
return {
showPopup: false,
selectedname: '',
approvals: [],
require: "/client/resources/img/require.png",
h3icon: "/client/resources/img/h3icon.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: [
{
type: 'SUV',
driver: '김철수',
startDate: '2025-05-01',
endDate: '2025-05-03',
status: '예약', // 사용중
},
{
type: '세단',
driver: '이영희',
startDate: '2025-05-05',
endDate: '2025-05-06',
status: '예약', // 예약됨
},
{
type: '트럭',
driver: '박민호',
startDate: '2025-04-25',
endDate: '2025-04-28',
status: '반납', // 반납됨
},
],
}
},
components: {
SearchOutlined, HrPopup
},
methods: {
addApproval(selectedUser) {
this.approvals.push({
name: selectedUser.name
});
this.selectedname = selectedUser.name; // 입력창에 표시
this.showPopup = false;
},
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>