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="cm">카드명</option>
<option value="nm">신청자</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="searchReqHisResDTO.searchText"
@keyup.enter="searchCardsHisRes">
<button class="ico-sch" @click="searchCardsHisRes">
<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>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-if="!(cardHisResData && cardHisResData.length)">
<td colspan="4" style="text-align: center;">등록된 예약현황이 없습니다.</td>
</tr>
<tr v-for="(item, index) in cardHisResData" :key="index">
<td>{{ item.cardNm }}</td>
<td>{{ item.deptId }}</td>
<td>{{ item.applcntId }}</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>
<Pagenation :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="cm">카드명</option>
<option value="nm">신청자</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" v-model="searchReqHisRtnDTO.searchText"
@keyup.enter="searchCardsHisRtn">
<button class="ico-sch" @click="searchCardsHisRtn">
<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>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-if="!(cardHisRtnData && cardHisRtnData.length)">
<td colspan="4" style="text-align: center;">등록된 사용이력이 없습니다.</td>
</tr>
<tr v-for="(item, index) in cardHisRtnData" :key="index">
<td>{{ item.cardNm }}</td>
<td>{{ item.deptId }}</td>
<td>{{ item.applcntId }}</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>
<Pagenation :search="searchReqHisRtnDTO" @onChange="fnChangeCurrentPageRtn" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import Pagenation from "../../../component/Pagenation.vue";
import { findAllAsSetCardHis } 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,
}, // 예약현황
cardHisResData: [], // 예약현황 데이터
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,
}, // 사용현황
cardHisRtnData: [], // 예약현황 데이터
};
},
computed: {
},
components: {
SearchOutlined, Pagenation
},
methods: {
// 페이지 이동 예약현황황
fnChangeCurrentPageRes(currentPage) {
this.searchReqHisResDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.searchCardsHisRes();
});
},
//카드 정보 사용 현황 예약현황
async searchCardsHisRes() {
try {
const response = await findAllAsSetCardHis(this.searchReqHisResDTO);
if (response.status === 200) {
this.cardHisResData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
this.searchReqHisResDTO = response.data.data.search;
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
// 페이지 이동 사용현황
fnChangeCurrentPageRtn(currentPage) {
this.searchReqHisRtnDTO.currentPage = Number(currentPage);
this.$nextTick(() => {
this.searchCardsHisRtn();
});
},
//카드 정보 사용 현황 사용현황
async searchCardsHisRtn() {
try {
const response = await findAllAsSetCardHis(this.searchReqHisRtnDTO);
if (response.status === 200) {
this.cardHisRtnData = response.data.data.cardHis; // API 응답에서 카테고리 목록을 가져옴
this.searchReqHisRtnDTO = response.data.data.search;
}
} catch (error) {
console.error("검색 중 오류 발생:", error);
}
},
},
created() {
},
mounted() {
this.searchCardsHisRes();
this.searchCardsHisRtn();
},
};
</script>
<style scoped></style>