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 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>
<!-- 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-for="(item, index) in listData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.department }}</td>
<td>{{ item.user }}</td>
<td>{{ item.startDate }} ~ {{ item.endDate }}</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 class="sch-form-wrap title-wrap">
<h3><img :src="h3icon" alt="">사용이력</h3>
<div class="input-group">
<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>
<!-- 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-for="(item, index) in listData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.department }}</td>
<td>{{ item.user }}</td>
<td>{{ item.startDate }} ~ {{ item.endDate }}</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>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
data() {
return {
currentPage: 1,
totalPages: 3,
photoicon: "/client/resources/img/photo_icon.png",
h3icon: "/client/resources/img/h3icon.png",
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
listData: [
{
name: '쏘렌토',
department: '총무부',
user: '김철수',
startDate: '2025-05-01',
endDate: '2025-05-10',
},
{
name: '그랜저',
department: '영업부',
user: '이영희',
startDate: '2025-05-03',
endDate: '2025-05-04',
},],
filteredData: [],
};
},
computed: {
},
components:{
SearchOutlined
},
methods: {
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
this.$emit('page-changed', page); // 필요 시 부모에 알림
},
async onClickSubmit() {
// `useMutation` 훅을 사용하여 mutation 함수 가져오기
const { mutate, onDone, onError } = useMutation(mygql);
try {
const result = await mutate();
console.log(result);
} catch (error) {
console.error('Mutation error:', error);
}
},
registerLeave() {
console.log("등록 버튼 클릭됨");
// Vue의 반응성 문제를 피하기 위해, 새로운 객체를 추가합니다.
this.DeptData = [
...this.DeptData,
{ member: '', deptNM: '', acceptTerms: false }
];
console.log(this.DeptData); // 배열 상태 출력
},
getStatusClass(status) {
if (status === '승인') return 'status-approved';
if (status === '대기') return 'status-pending';
return '';
},
},
created() {
},
mounted() {
},
};
</script>
<style scoped></style>