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="pagetitle">
<h2>직원관리</h2>
</div>
<!-- End Page Title -->
<section class="section">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">직원관리</h5>
<div class="d-flex pb-3 justify-content-between">
<div class="datatable-search d-flex gap-1 ">
<div class="">
<select class="form-select " v-model="selectedDept">
<option value="" >이름</option>
</select>
</div>
<div class="search-bar d-flex gap-2">
<form class="search-form d-flex align-items-center" method="POST" action="#"
@submit.prevent="updateMember">
<input type="text" v-model="searchQuery" name="query" placeholder="Search" title="Enter search keyword">
<button type="submit" title="Search"><i class="bi bi-search"></i></button>
</form>
</div>
<button type="button" class="btn btn-outline-secondary"
@click="filterData">조회</button>
</div>
<div class="d-flex justify-content-end ">
<!-- <button type="button" class="btn btn-outline-secondary" @click="registerLeave">
등록
</button>
<button type="button" class="btn btn-outline-success" @click="saveChanges">
저장
</button> -->
<button type="button" class="btn btn-outline-danger" @click="deletePending">
삭제
</button>
</div>
</div>
<!-- Table -->
<table id="myTable" class="table datatable table-hover">
<!-- 동적으로 <th> 생성 -->
<thead>
<tr>
<th>No </th>
<th>이름</th>
<th>부서</th>
<th>직급</th>
<th>이메일</th>
</tr>
</thead>
<!-- 동적으로 <td> 생성 -->
<tbody>
<tr v-for="(item, index) in UserInfo" :key="index">
<td>
<div class="form-check">
<label class="form-check-label" for="acceptTerms">{{ index + 1 }}</label>
<input v-model="item.acceptTerms" class="form-check-input" type="checkbox" />
</div>
</td>
<td>{{ item.name }}</td> <!-- 이름 -->
<td>{{ item.dept }}</td> <!-- 부서 -->
<td>{{ item.level }}</td> <!-- 레벨 -->
<td>{{ item.email }}</td> <!-- 이메일 -->
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
data() {
return {
// 데이터 초기화
levels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedDept: '',
selectedlevel: '',
filteredData: [],
};
},
computed: {
},
methods: {
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.UserInfoData.filter(item => item.acceptTerms);
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.UserInfoData = this.UserInfoData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
// 페이지 변경
changePage(page) {
this.currentPage = page;
},
},
created() {
// 로컬스토리지에서 UserInfoData 불러오기
const storedUserInfo = localStorage.getItem('UserInfo');
console.log(storedUserInfo);
if (storedUserInfo) {
// 로컬스토리지에서 데이터를 가져와 UserInfoData에 설정
const parsedData = JSON.parse(storedUserInfo);
this.UserInfo = Array.isArray(parsedData) ? parsedData : [parsedData];
}
},
mounted() {
},
};
</script>
<style scoped></style>