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="col-lg-12">
<div class="card">
<div class="card-body">
<h2 class="card-title">사용현황</h2>
<div class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">예약현황</h3>
<div class="input-group">
<select v-model="searchReqHisResDTO.searchType" id="searchType" class="form-select">
<option value="all">전체</option>
<option value="vm">차량명</option>
<option value="vn">차량번호</option>
<option value="dr">운행자</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="searchReqHisResDTO.searchText"
@keyup.enter="searchVhclesHisRes">
<button class="ico-sch" @click="searchVhclesHisRes">
<SearchOutlined />
</button>
</div>
</div>
</div>
<!-- Table -->
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>차종 </th>
<th>차량번호</th>
<th>차량명</th>
<th>부서</th>
<th>운행자</th>
<th>기간</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-if="!(vhcleHisResData && vhcleHisResData.length)">
<td colspan="6" style="text-align: center;">등록된 예약현황이 없습니다.</td>
</tr>
<tr v-for="(item, index) in vhcleHisResData" :key="index">
<td>{{ item.vhcty }}</td>
<td>{{ item.vhcleNo }}</td>
<td>{{ item.vhcleNm }}</td>
<td>{{ item.deptId }}</td>
<td>{{ item.drverId }}</td>
<td>
{{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
{{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="searchReqHisResDTO" @onChange="fnChangeCurrentPageRes" />
<div class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">사용이력</h3>
<div class="input-group">
<select v-model="searchReqHisRtnDTO.searchType" id="searchType" class="form-select">
<option value="all">전체</option>
<option value="vm">차량명</option>
<option value="vn">차량번호</option>
<option value="dr">운행자</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="searchReqHisRtnDTO.searchText"
@keyup.enter="searchVhclesHisRtn">
<button class="ico-sch" @click="searchVhclesHisRtn">
<SearchOutlined />
</button>
</div>
</div>
</div>
<!-- Table -->
<div class="tbl-wrap">
<table id="myTable" class="tbl data">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>차종 </th>
<th>차량번호</th>
<th>차량명</th>
<th>부서</th>
<th>운행자</th>
<th>기간</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-if="!(vhcleHisRtnData && vhcleHisRtnData.length)">
<td colspan="6" style="text-align: center;">등록된 예약현황이 없습니다.</td>
</tr>
<tr v-for="(item, index) in vhcleHisRtnData" :key="index">
<td>{{ item.vhcty }}</td>
<td>{{ item.vhcleNo }}</td>
<td>{{ item.vhcleNm }}</td>
<td>{{ item.deptId }}</td>
<td>{{ item.drverId }}</td>
<td>
{{ item.bgnde }} {{ item.beginHour.padStart(2, '0') }}:{{ item.beginMnt.padStart(2, '0') }} ~
{{ item.endde }} {{ item.endHour.padStart(2, '0') }}:{{ item.endMnt.padStart(2, '0') }}
</td>
</tr>
</tbody>
</table>
</div>
<Pagination :search="searchReqHisRtnDTO" @onChange="fnChangeCurrentPageRtn" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagination from "../../../component/Pagination.vue";
import { findAllAsSetVhcleHis } from "../../../../resources/api/asset"; //차량 정보 API
export default {
data() {
return {
photoicon: "/client/resources/img/photo_icon.png",
h3icon: "/client/resources/img/h3icon.png",
searchReqHisResDTO: {
searchType: "all",
searchText: null,
useAt: null,
useAll: false,
listType: "res",
currentPage: null,
recordSize: 3,
pageSize: null,
totalRecordCount: null,
totalPageCount: null,
startPage: null,
endPage: null,
limitStart: null,
existPrevPage: null,
existNextPage: null,
}, // 예약현황
vhcleHisResData: [], // 예약현황 데이터
searchReqHisRtnDTO: {
searchType: "all",
searchText: null,
useAt: null,
useAll: false,
listType: "rtn",
currentPage: null,
recordSize: 3,
pageSize: null,
totalRecordCount: null,
totalPageCount: null,
startPage: null,
endPage: null,
limitStart: null,
existPrevPage: null,
existNextPage: null,
}, // 사용현황
vhcleHisRtnData: [], // 예약현황 데이터
};
},
computed: {
},
components: {
SearchOutlined, Pagination
},
methods: {
// 페이지 이동 예약현황황
fnChangeCurrentPageRes(currentPage) {
this.searchReqHisResDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.searchVhclesHisRes();
});
},
//차량량 정보 사용 현황 예약현황
async searchVhclesHisRes() {
try {
const response = await findAllAsSetVhcleHis(this.searchReqHisResDTO);
if (response.status === 200) {
this.vhcleHisResData = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
this.searchReqHisResDTO = response.data.data.search;
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
// 페이지 이동 사용현황
fnChangeCurrentPageRtn(currentPage) {
this.searchReqHisRtnDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.searchVhclesHisRtn();
});
},
//차량 정보 사용 현황 사용현황
async searchVhclesHisRtn() {
try {
const response = await findAllAsSetVhcleHis(this.searchReqHisRtnDTO);
if (response.status === 200) {
this.vhcleHisRtnData = response.data.data.vhcle; // API 응답에서 카테고리 목록을 가져옴
this.searchReqHisRtnDTO = response.data.data.search;
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
},
created() {
},
mounted() {
this.searchVhclesHisRes();
this.searchVhclesHisRtn();
},
};
</script>
<style scoped></style>