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="">전체</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 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>