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 v-model="searchReqDTO.searchType" id="searchType" class="form-select">
<option value="all">전체</option>
<option value="vm">차량명</option>
<option value="vn">차량번호</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="searchReqDTO.searchText" @keyup.enter="searchVhcles">
<button class="ico-sch" @click="searchCards">
<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-if="selectedVhcles.length === 0">
<td style="text-align: center;">등록된 차량량정보가 없습니다.</td>
</tr>
<tr v-for="(item, index) in selectedVhcles" :key="index" @click="selectVhcle(item)">
<td>
{{ item.vhcleNm }}
</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 sm tertiary" @click="resetVhcle">신규</button>
<button type="reset" class="btn sm sm secondary" @click="insertByUpdateVhcle">
{{ buttonText }}
</button>
<button type="delete" class="btn sm sm btn-red" @click="deleteByUseAtVhcle">삭제</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="vhcty" class="form-label">
<p>차종
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control" id="where" v-model="selectedVhcle.vhcty" />
</div>
<div class="col-12 border-x">
<label for="vhcleNo" class="form-label">
<p>차량번호
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control" id="where" v-model="selectedVhcle.vhcleNo" />
</div>
</div>
<div class="col-12">
<div class="col-12 border-x">
<label for="fuelKnd" class="form-label">연료종류</label>
<input type="text" class="form-control" id="where" v-model="selectedVhcle.fuelKnd" />
</div>
<div class="col-12 border-x">
<label for="posesnStle" class="form-label">
<p>소유형태
<p class="require"><img :src="require" alt=""></p>
</p>
</label>
<input type="text" class="form-control" id="where" v-model="selectedVhcle.posesnStle" />
</div>
</div>
<div class="col-12 ">
<label for="vhcleNm" 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="selectedVhcle.vhcleNm" />
</div>
<div class="col-12 ">
<label for="chargerId" 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="selectedVhcle.chargerId" 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="rm" class="form-label">비고</label>
<input type="text" class="form-control textarea" id="reason" v-model="selectedVhcle.rm" />
</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" id="sttus" v-model="selectedVhcle.sttus">
<option value="N">정상</option>
<option value="R">수리</option>
<option value="D">폐차차</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 processedVhcles" :key="index">
<td>{{ item.vhcty }}</td>
<td>{{ item.drverId }}</td>
<td>{{ item.formattedPeriod }}</td>
<td :class="getStatusClass(item.status)">
{{ item.status }}
</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="searchReqHisDTO" @onChange="fnChangeCurrentPage" />
</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";
import { saveAsSetVhcle, findAllAsSetVhcle, updateAsSetVhcle, findAllAsSetVhcleHis } from "../../../../resources/api/asset"; //카드 정보 API
import Pagination from "../../../component/Pagination.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",
checkVhcle: false,
vhcleId: null,
selectedVhcles: [],
selectedVhcleHis: [],
searchReqDTO: {
searchType: "all",
searchText: null,
useAt: null,
useAll: true,
},
searchReqHisDTO: {
searchType: "all",
searchText: null,
useAt: null,
useAll: false,
listType:"all",
currentPage: null,
recordSize: 2,
pageSize: null,
totalRecordCount: null,
totalPageCount: null,
startPage: null,
endPage: null,
limitStart: null,
existPrevPage: null,
existNextPage: null,
},
selectedVhcle: {
vhcleNm: null,
vhcty: null,
vhcleNo: null,
fuelKnd: null,
posesnStle: null,
chargerId: null,
rm: null,
sttus: "N",
useAt: "Y"
},
}
},
components: {
SearchOutlined, HrPopup, Pagination
},
methods: {
// 페이지 이동
fnChangeCurrentPage(currentPage) {
this.searchReqHisDTO.currentPage = Number(currentPage);
console.log(this.searchReqHisDTO);
this.$nextTick(() => {
this.searchVhclesHis();
});
},
//차량 정보 전체 조회
async searchVhcles() {
try {
const response = await findAllAsSetVhcle(this.searchReqDTO);
if (response.status === 200) {
this.selectedVhcles = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
//차량 정보 사용 현황 전체 조회
async searchVhclesHis() {
try {
const response = await findAllAsSetVhcleHis(this.searchReqHisDTO);
if (response.status === 200) {
this.selectedVhcleHis = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
this.searchReqHisDTO = response.data.data.search;
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
// 차량 정보 등록 수정
async insertByUpdateVhcle() {
if (!this.validateCheck()) {
return; // 유효성 검사 실패 시 함수 종료
}
if (this.vhcleId == null && this.vhcleId == "") {
try {
const response = await saveAsSetVhcle(this.selectedVhcle);
if (response.status === 200) { // 성공 여부 체크
alert("등록되었습니다.");
window.location.reload();
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "등록이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
this.searchVhcles();
}
} else{
try {
const response = await updateAsSetVhcle(this.vhcleId, this.selectedVhcle);
if (response.status === 200) {
alert("수정되었습니다.");
window.location.reload();
}
} catch (error) {
// HTTP 오류가 발생한 경우
const errorMessage = error.response?.data?.message || "수정이 실패하였습니다.";
alert(errorMessage); // 오류 메시지 표시
this.searchVhcles();
}
}
},
// 등록 유효성 체크 함수
validateCheck() {
// 1. 차종 (vhcty) 필수 체크
if (!this.selectedVhcle.vhcty || this.selectedVhcle.vhcty.trim() === "") {
alert("차종은 필수 입력 항목입니다.");
return false;
}
// 2. 차량번호 (vhcleNo) 필수 체크
if (!this.selectedVhcle.vhcleNo || this.selectedVhcle.vhcleNo.trim() === "") {
alert("차량번호는 필수 입력 항목입니다.");
return false;
}
// 3. 소유형태 (posesnStle) 필수 체크
if (!this.selectedVhcle.posesnStle || this.selectedVhcle.posesnStle.trim() === "") {
alert("소유형태는 필수 입력 항목입니다.");
return false;
}
// 4. 차량명 (vhcleNm) 필수 체크
if (!this.selectedVhcle.vhcleNm || this.selectedVhcle.vhcleNm.trim() === "") {
alert("차량명은 필수 입력 항목입니다.");
return false;
}
// 5. 담당자 (chargerId) 필수 체크
if (!this.selectedVhcle.chargerId || this.selectedVhcle.chargerId.trim() === "") {
alert("담당자는 필수 입력 항목입니다.");
return false;
}
return true; // 모든 유효성 검사 통과
},
// 삭제 버튼을 눌렀을 시 삭제
async deleteByUseAtVhcle() {
try {
this.selectedVhcle.useAt = "N";
const response = await updateAsSetVhcle(this.vhcleId, this.selectedVhcle);
if (response.status === 200) {
alert("삭제되었습니다.");
}
} catch (error) {
alert("삭제가 실패하였습니다.");
}
},
//선택한 차량의 정보를 오른쪽에 표시
selectVhcle(item) {
this.checkVhcle = true;
this.vhcleId = item.vhcleId;
this.selectedVhcle = {
vhcleNm: item.vhcleNm,
vhcty: item.vhcty,
vhcleNo: item.vhcleNo,
fuelKnd: item.fuelKnd,
posesnStle: item.posesnStle,
chargerId: item.chargerId,
rm: item.rm,
sttus: item.sttus,
useAt: item.useAt
};
},
// 신규 버튼을 눌렀을 시
resetVhcle() {
this.checkVhcle = false;
this.selectedVhcle = {
vhcleNm: null,
vhcty: null,
vhcleNo: null,
fuelKnd: null,
posesnStle: null,
chargerId: null,
rm: null,
sttus: "N",
useAt: "Y"
};
},
addApproval(selectedUser) {
this.approvals.push({
name: selectedUser.name
});
this.selectedVhcle.chargerId = selectedUser.name; // 입력창에 표시
this.showPopup = false;
},
getStatusClass(status) {
if (status === '예약') return 'status-pending';
if (status === '사용 중') return 'status-pending';
if (status === '반납') return 'status-approved';
return ''; // 기본값
},
},
watch: {
},
computed: {
buttonText() {
return this.checkVhcle ? "수정" : "등록";
},
// selectedCardsHis 데이터를 가공하여 화면에 표시할 데이터를 만듭니다.
processedVhcles() {
const now = new Date(); // 현재 시간
// 날짜와 시간 문자열을 조합하여 Date 객체를 생성하는 헬퍼 함수
const createDateTime = (dateStr, hourStr, minStr) => {
// dateStr이 "YYYY-MM-DD HH:MM:SS.ms" 형태라고 가정하고 "YYYY-MM-DD" 부분만 추출
const datePart = dateStr.split(' ')[0];
const year = parseInt(datePart.substring(0, 4), 10);
const month = parseInt(datePart.substring(5, 7), 10) - 1; // 월은 0부터 시작 (0=1월)
const day = parseInt(datePart.substring(8, 10), 10);
const hour = parseInt(hourStr, 10);
const minute = parseInt(minStr, 10);
return new Date(year, month, day, hour, minute, 0);
};
// Date 객체를 'YYYY-MM-DD HH:MI' 형식으로 포맷하는 헬퍼 함수
const formatDateTime = (dateObj) => {
const year = dateObj.getFullYear();
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
const day = String(dateObj.getDate()).padStart(2, '0');
const hour = String(dateObj.getHours()).padStart(2, '0');
const minute = String(dateObj.getMinutes()).padStart(2, '0');
return `${year}-${month}-${day} ${hour}:${minute}`;
};
return this.selectedVhcleHis.map(item => {
const startDateTime = createDateTime(item.bgnde, item.beginHour, item.beginMnt);
const endDateTime = createDateTime(item.endde, item.endHour, item.endMnt);
let status = '';
if (now >= startDateTime && now <= endDateTime) {
status = '사용 중'; // 현재 시간이 기간 안에 포함
} else if (now < startDateTime) {
status = '예약'; // 현재 시간이 시작일시보다 이전
} else { // now > endDateTime
status = '반납'; // 현재 시간이 종료일시보다 이후
}
return {
...item, // 원본 아이템의 모든 속성 유지
formattedPeriod: `${formatDateTime(startDateTime)} ~ ${formatDateTime(endDateTime)}`, // 포맷된 기간 문자열
status: status // 계산된 상태
};
});
}
},
mounted() {
console.log('main mounted');
this.searchVhcles();
this.searchVhclesHis();
}
}
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>