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="">전체</option>
<option value="">상위코드</option>
<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>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in listData" :key="index" :class="{ expired: !isUsed(item.used) }" @click="goToDetailPage(item)">
<td>{{ item.parentCode }}</td>
<td>{{ item.parentName }}</td>
<td>{{ item.code }}</td>
<td>{{ item.name }}</td>
<td>{{ item.createdAt }}</td>
<td :class="getStatusClass(item.used)">{{ item.used }}</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 class="buttons">
<button type="button" class="btn sm sm primary" @click="goToPage('등록') ">
등록
</button>
<!-- 신청 종류 선택 모달 -->
<div v-if="showOptions" class="modal-overlay">
<div class="modal-box">
<p>신청 종류를 선택하세요</p>
<button @click="goToPage('휴가')">휴가신청</button>
<button @click="goToPage('출장')">출장신청</button>
<button class="cancel" @click="showOptions = false">취소</button>
</div>
</div>
</div>
</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: [
{
parentCode: 'A01',
parentName: '부서코드',
code: 'A0101',
name: '총무부',
createdAt: '2024-01-10',
used: 'Y',
},
{
parentCode: 'A01',
parentName: '부서코드',
code: 'A0102',
name: '인사부',
createdAt: '2024-03-21',
used: 'N',
},],
filteredData: [],
};
},
computed: {
},
components: {
SearchOutlined
},
methods: {
goToDetailPage(item) {
// item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
this.$router.push({ name: 'commonCodeDetail', 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);
}
},
goToPage(type) {
if (type === '등록') {
this.$router.push({ name: 'commonCodeInsert' });
}
},
getStatusClass(used) {
return used === 'Y' ? 'status-approved' : 'status-pending';
},
isUsed(used) {
return used === 'Y';
},
},
created() {
},
mounted() {
},
};
</script>
<style scoped>
tr{cursor: pointer;}
</style>