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="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>