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
2024-11-19
2024-11-19
<template>
<div class="title-box flex justify-between mb40">
<p class="title">게시판</p>
<select name="" id="" v-model="selectedClass" @click="fetchStudents">
<option value="" disabled selected>반을 선택하세요</option>
<option v-for="sClass in classesList" :key="sClass.sclsId" :value="sClass.sclsId">
{{ sClass.sclsNm }}
</option>
</select>
</div>
<div class="flex justify-end mb20">
<div class="search-wrap ">
<select name="" id="" class="mr10 data-wrap">
<option value="">전체</option>
</select>
<input type="text" placeholder="검색하세요." v-model="keyword">
<button type="button" title="위원회 검색" @click="search">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch">
학생 추가
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<td>No.</td>
<td>학년</td>
<td>반</td>
<td>이름</td>
</thead>
<tbody>
<!-- StudentDetail로 갈때 stdId? userId? -->
<tr v-for="(student, index) in students" :key="index" class="student"
@click="goToPage('StudentDetail')">
<td>{{ index + 1 + (currentPage - 1) * pageSize }}</td>
<td>{{ student.grd_no }}</td>
<td>{{ student.scls_nm }}</td>
<td>{{ student.user_nm }}</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
<button v-for="page in totalPages" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
</article>
<div class="flex justify-end ">
</div>
</div>
<div v-show="searchOpen" class="popup-wrap">
<div class="popup-box ">
<div class="flex justify-between mb30">
<p class="popup-title">학생 검색</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
</div>
<div class="search-wrap mb30">
<input type="text" class="data-wrap" placeholder="">
<button type="button" >
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<td>No.</td>
<td>학년</td>
<td>반</td>
<td>번호</td>
<td>이름</td>
<td>선택</td>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td><input type="checkbox" class="ui-checkbox"></td>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button><img src="../../../resources/img/btn27_90t_normal.png" alt=""></button>
<button v-for="page in totalPages" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button><img src="../../../resources/img/btn28_90t_normal.png" alt=""></button>
</article>
<div class="flex justify-end ">
</div>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10">
취소
</button>
<button type="button" title="" class="new-btn">
등록
</button>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
import axios from 'axios';
export default {
data() {
return {
classesList: [],
mdiMagnify: mdiMagnify,
mdiWindowClose: mdiWindowClose,
showModal: false,
searchOpen: false,
selectedClass: "",
students: [],
keyword: "",
currentPage: 1,
pageSize: 10,
totalStudents: 0,
}
},
methods: {
selectClass(){
axios({
url: "/classes/selectClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "2"
},
})
.then((res) => {
if (res.data.status === "success") {
console.log("classesList - response(조회) : ", res.data.data);
this.classesList = res.data.data;
} else {
console.log("조회에 실패했습니다: ", res.data);
alert("조회에 실패했습니다.")
}
}).catch((err) => {
console.log("classesList - error(조회) : ", err);
alert("조회에 오류가 발생했습니다.");
});
},
fetchStudents() {
const idx = (this.currentPage - 1) * this.pageSize;
axios({
url: "/userclass/find.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"keyword": this.keyword,
"pageSize": this.pageSize,
"startIndex": idx,
"sclsId": this.selectedClass
},
})
.then(response => {
console.log("keywordkeywordkeywordkeyword",this.keyword);
console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
this.students = response.data.students;
this.totalStudents = response.data.totalStudent;
})
.catch(error => {
console.error("fetchStudents - error: ", error);
alert("조회 중 오류가 발생했습니다.");
});
},
search() {
this.currentPage = 1;
this.fetchStudents();
},
changePage(page) {
if (page > 0 && page <= this.totalPages) {
this.currentPage = page;
this.fetchStudents();
}
},
goToPage(page) {
this.$router.push({ name: page });
},
showConfirm(type) {
let message = '';
if (type === 'cancel') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
closeModal() {
this.showModal = false;
},
buttonSearch() {
this.searchOpen = true;
},
closeBtn() {
this.searchOpen = false;
},
},
watch: {
},
computed: {
totalPages() {
return Math.ceil(this.totalStudents / this.pageSize);
}
},
components: {
SvgIcon
},
mounted() {
console.log('Main2 mounted');
this.selectClass();
}
}
</script>