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">
<select name="" id="" class="form-select">
<option :value="currentYear">{{ currentYear }}년</option>
<option value="all">전체</option>
<option
v-for="year in remainingYears"
:key="year"
:value="year"
v-if="year !== currentYear"
>
{{ year }}년
</option>
</select>
<select name="" id="" class="form-select">
<option :value="currentMonth">{{ currentMonth }}월</option>
<option value="all">전체</option>
<option
v-for="month in remainingMonths"
:key="month"
:value="month"
v-if="month !== currentMonth"
>
{{ month }}월
</option>
</select>
</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 listData" :key="index" :class="{ 'expired': isPast(item) }" @click="handleClick(item)">
<td>{{ item.type }}</td>
<td>{{ item.where }}</td>
<td>{{ item.purpose }}</td>
<td >{{ item.period }}</td>
<td
:class="getStatusClass(item.pumuiStatue)"
>
{{ item.pumuiStatue }}
</td>
<td
:class="getBokmyeongClass(item.bokmyeong)"
>
{{ item.bokmyeong }}
</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>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
export default {
data() {
return {
currentMonth,
selectedMonth: currentMonth,
remainingMonths: Array.from({ length: 12 }, (_, i) => i + 1),
currentYear,
selectedYear: currentYear,
remainingYears: Array.from({ length: 10 }, (_, i) => currentYear - i),
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: [
{
type: '연차',
where: '상주시청',
purpose: '유지보수',
period: '2025-05-10 ~ 2025-05-23',
pumuiStatue: '대기',
bokmyeong: '미등록',
status: '-'
},
{
type: '연차',
where: '상주시청',
purpose: '유지보수',
period: '2025-05-10 ~ 2025-05-23',
pumuiStatue: '승인',
bokmyeong: '미등록',
status: '-'
},
{
type: '연차',
where: '상주시청',
purpose: '유지보수',
period: '2025-05-10 ~ 2025-05-23',
pumuiStatue: '승인',
bokmyeong: '등록',
status: '대기'
}, {
type: '연차',
where: '상주시청',
purpose: '유지보수',
period: '2025-05-10 ~ 2025-05-10',
pumuiStatue: '승인',
bokmyeong: '등록',
status: '승인'
},],
filteredData: [],
};
},
components: {
SearchOutlined
},
computed: {
},
methods: {
goToAttendancePage(item) {
this.$router.push({ name: 'AttendanceDetail', query: { id: item.id } });
},
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);
}
},
// 상태에 따른 클래스 반환 메소드
getStatusClass(status) {
return status === 'active' ? 'status-active' : 'status-inactive';
},
getStatusClass(status, pumuiStatue) {
// Check the 'status' and 'pumuiStatue' to return the correct class
if (pumuiStatue === '승인') return 'status-approved';
if (pumuiStatue === '대기') return 'status-pending';
// If no match, fallback to status-based class
if (status === '대기') return 'status-pending';
if (status === '승인') return 'status-approved';
// Default empty string
return '';
},
getBokmyeongClass(bokmyeong) {
if (bokmyeong === '등록') return 'status-approved';
if (bokmyeong === '미등록') return 'status-pending';
return '';
},
isPast(item) {
return (
item.pumuiStatue === '승인' &&
item.bokmyeong === '등록' &&
item.status === '승인'
);
},
handleClick(item) {
const isCasePumui = (
(item.pumuiStatue === '대기' && item.bokmyeong === '미등록') ||
(item.pumuiStatue === '승인' && item.bokmyeong === '미등록')
);
if (item.bokmyeong === '등록') {
this.$router.push({ name: 'ChuljangDetailAll' });
} else if (isCasePumui) {
this.$router.push({ name: 'ChuljangPumuiDetail' });
} else {
console.log('이동 조건이 아닙니다.');
}
},
handleBokmyeongClick(item) {
this.$router.push({ name: 'ChuljangBokmyeongDetail' });
},
},
created() {
},
mounted() {
},
};
</script>
<style scoped>
tr {
cursor: pointer;
}
</style>