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">
<h1>직원관리</h1>
</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>
<option v-for="dept in depts" :key="dept" :value="dept">{{ dept }}</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 ChuljangData" :key="item.startDate + 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><input type="text" v-model="item.name" /></td>
<td><input type="text" v-model="item.dept" /></td>
<td><input type="text" v-model="item.level" /></td>
<td><input type="text" v-model="item.email" /></td>
</tr>
</tbody>
</table>
<!-- End Table -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { DataTable } from 'simple-datatables'
export default {
data() {
return {
// 데이터 초기화
depts: [2023, 2024, 2025], // 연도 목록
levels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 월 목록
selectedDept: '',
selectedlevel: '',
ChuljangData: [
{ startDate: '', endDate: '', where: '대구', purpose: '', acceptTerms: false },
{ startDate: '', endDate: '', where: '경산', acceptTerms: false },
// 더 많은 데이터 추가...
],
filteredData: [],
};
},
computed: {
},
methods: {
deletePending() {
// 선택된 항목만 필터링하여 삭제
const selectedItems = this.ChuljangData.filter(item => item.acceptTerms);
// 승인된 항목이 없으면 삭제 진행
if (selectedItems.length > 0) {
this.ChuljangData = this.ChuljangData.filter(item => !item.acceptTerms);
alert(`${selectedItems.length}개의 항목이 삭제되었습니다.`);
} else {
alert("선택된 항목이 없습니다.");
}
},
// 페이지 변경
changePage(page) {
this.currentPage = page;
},
},
mounted() {
// 처음에는 모든 데이터를 표시
this.filteredData = this.ChuljangData;
},
};
</script>
<style scoped></style>