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="popup-overlay" @click.self="$emit('close')">
<div class="popup-content">
<div class="card">
<div class="card-body">
<h2 class="card-title">출장비 목록</h2>
<div class="sch-form-wrap">
<div class="input-group">
<div class="datepicker-input">
<input
type="date"
class="form-control datepicker cal"
:value="startDate"
style="max-width: 200px;"
/>
<mark>~</mark>
<input
type="date"
class="form-control datepicker cal"
:value="endDate"
style="max-width: 200px;"
/>
</div>
<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>
<th>금액(사용금액)</th>
<th>지급여부</th>
<th>선택</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in popuplistData" :key="index">
<td>{{ item.location }}</td>
<td>{{ item.purpose }}</td>
<td>{{ item.period }}</td>
<td>{{ item.category }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.paid }}</td>
<td>
<button
type="button"
class="btn sm secondary"
@click="selectPerson(item)"
>
선택
</button>
</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>
<!-- End Table -->
</div>
</div>
<button @click="$emit('close')" class="close-btn">
<CloseCircleFilled />
</button>
</div>
</div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled } from '@ant-design/icons-vue';
export default {
data() {
return {
popuplistData: [
{
location: '서울',
purpose: '회의 참석',
period: '2025-05-10 ~ 2025-05-12',
category: '교통(기차)',
amount: '150,000',
paid: '지급',
}, {
location: '서울',
purpose: '회의 참석',
period: '2025-05-10 ~ 2025-05-12',
category: '점심식사',
amount: '150,000',
paid: '미지급',
},
],
}
},
components: {
SearchOutlined, CloseCircleFilled
},
methods: {
selectPerson(item) {
this.$emit('select', item); // 부모에게 데이터 전달
},
}
}
</script>
<style scoped>
.popup-content {
width: 50%;
}
</style>