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">
<div class="input-group">
<input type="date" class="form-control">~ <input type="date" class="form-control">
<select name="" id="" class="form-select">
<option value="">전체</option>
<option value="">미지급</option>
<option value="">지급</option>
</select>
<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>
<th>지급여부</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index">
<td>{{ item.department }}</td>
<td>{{ item.name }}</td>
<td>{{ item.location }}</td>
<td>{{ item.purpose }}</td>
<td>{{ item.period }}</td>
<td>{{ item.category }}</td>
<td>{{ formatCurrency(item.amount) }}</td>
<td :class="getStatusClass(item.status)">{{ item.status }}</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>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
export default {
data() {
return {
showOptions: false,
currentPage: 1,
totalPages: 3,
photoicon: "/client/resources/img/photo_icon.png",
// 데이터 초기화
years: [2023, 2024, 2025], // 연도 목록
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedYear: '',
selectedMonth: '',
listData: [
{
department: '기획팀',
name: '홍길동',
location: '부산',
purpose: '고객 미팅',
period: '2025-05-10 ~ 2025-05-12',
category: '교통(기차)',
amount: 120000,
status: '지급'
},
{
department: '기획팀',
name: '홍길동',
location: '부산',
purpose: '고객 미팅',
period: '2025-05-10 ~ 2025-05-12',
category: '교통(기차)',
amount: 120000,
status: '미지급'
},
// ... 다른 항목들
],
filteredData: [],
};
},
components:{
SearchOutlined
},
computed: {
},
methods: {
goToDetailPage(item) {
// item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
this.$router.push({
name: 'employeeSalaryDetail',
query: { id: item.id }
});
},
formatCurrency(amount) {
return new Intl.NumberFormat('ko-KR').format(amount) + ' 원';
},
viewPayslip(item) {
// 예: 모달 열기, PDF 보기, 페이지 이동 등
console.log('명세서 보기:', item);
// window.open(item.slipUrl, '_blank'); // 외부 링크 열기 예시
},
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);
}
},
goToPage(type) {
if (type === '휴가') {
this.$router.push({ name: 'VcatnInsert' });
} else if (type === '출장') {
this.$router.push({ name: 'ChuljangDetail' });
}
},
getStatusClass(status) {
if (status === '지급') return 'status-approved';
if (status === '미지급') return 'status-pending';
return '';
},
isPastPeriod(period) {
// 예: '2025-05-01 ~ 2025-05-03' → 종료일 추출
const endDateStr = period.split('~')[1]?.trim();
if (!endDateStr) return false;
const endDate = new Date(endDateStr);
const today = new Date();
// 현재 날짜보다 과거면 true
return endDate < today;
}
},
created() {
},
mounted() {
},
};
</script>
<style scoped>
</style>