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>
</select>
<select name="" id="" class="form-select">
<option value="">직급</option>
</select>
<select name="" id="" class="form-select">
<option value="">직책</option>
</select>
<div class="sch-input">
<input type="text" class="form-control" placeholder="직원명">
<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 listData" :key="index" @click="goToDetailPage(item)">
<td>{{ item.department }}</td>
<td>{{ item.position }}</td>
<td>{{ item.role }}</td>
<td>{{ item.userId }}</td>
<td>{{ item.name }}</td>
<td>{{ item.joinDate }}</td>
<td>
<button class="btn tertiary xsm" @click.stop="resetPassword(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>
<div class="buttons">
<button class="btn primary" type="submit" @click="goToPage('등록')">등록</button>
</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: [
{
department: '인사팀',
position: '대리',
role: '인사담당',
userId: 'honggildong',
name: '홍길동',
joinDate: '2022-01-15'
},
],
filteredData: [],
};
},
components:{
SearchOutlined
},
computed: {
},
methods: {
resetPassword(user) {
// 예: 비밀번호 초기화 로직
console.log(`${user.name} (${user.userId}) 비밀번호 초기화`);
// 실제 초기화 API 호출 또는 처리 추가
},
goToDetailPage(item) {
// item.id 또는 다른 식별자를 사용하여 URL을 구성할 수 있습니다.
this.$router.push({ name: 'hrDetail', 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: 'hrInsert' });
}
},
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>
tr{cursor: pointer;}
</style>