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>
</div>
<div class="wrap mb30">
<div class="flex justify-between mb30 align-center">
<label for="" class="title1">게시판</label>
<div class="look-btn flex align-center" @click="goToPage('Board')">
<p>자세히 보기</p>
<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
</div>
</div>
<div class="table-wrap">
<table>
<thead>
<td>No.</td>
<td>제목</td>
<td>내용</td>
<td>작성자</td>
<td>등록일</td>
</thead>
<tbody>
<tr
v-for="(item, index) in dataList"
:key="item.id"
:class="{ 'selected-row': selectedRow == item.dataList }"
@click="[goToPage('noticeDetail'), selectBoardList(item)]"
>
<td>{{ totalPosts - index }}</td>
<td>{{ item.bbsTtl }}</td>
<td>{{ item.bbsCls }}</td>
<td>{{ userNm }}</td>
<td>{{ item.bbsTm.substr(0, 16) }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="flex justify-between" style="gap: 30px">
<div class="wrap mb30">
<div class="flex justify-between mb30 align-center">
<label for="" class="title1">학생 목록</label>
<div class="look-btn align-center flex" @click="goToPage('StudentList')">
<p>자세히 보기</p>
<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
</div>
</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 studentDataList" :key="index" class="student"
@click="goToPage('StudentDetail')">
<td>{{ index + 1 }}</td>
<td>{{ student.grd_no }}</td>
<td>{{ student.scls_nm }}</td>
<td>{{ student.user_nm }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wrap mb30">
<div class="flex justify-between mb30 align-center">
<label for="" class="title1">책 </label>
<div class="align-center flex look-btn" @click="goToPage('textbook')">
<p>자세히 보기</p>
<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
</div>
</div>
<div class="flex" style="flex-direction: column; gap: 50px">
<div class="textbook" style="width: 180px">
<div class="box" style="gap: 10px"></div>
<div class="text">
<p class="title1" style="color: #fff">A 교재</p>
<div
class="btnGroup mt15 flex align-center justify-end"
style="gap: 10px"
>
<button>수정</button>
<p>|</p>
<button @click="showConfirm('delete')">삭제</button>
</div>
</div>
</div>
<div class="textbook">
<div class="box" style="gap: 10px"></div>
<div class="text">
<p class="title1" style="color: #fff">A 교재</p>
<div
class="btnGroup mt15 flex align-center justify-end"
style="gap: 10px"
>
<button>수정</button>
<p>|</p>
<button @click="showConfirm('delete')">삭제</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import { mdilArrowRight } from "@mdi/light-js";
import ProgressBar from "../../component/ProgressBar.vue";
import axios from "axios";
export default {
data() {
return {
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
// 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
selectedClassId: this.$route.query.sclsId,
// 게시글 정보
dataList: [],
totalPosts: 0,
selectedRow: "",
bbsTm: "",
// 학생 정보
studentDataList: [],
totalStudents: 0,
// 페이징
currentPage: 1,
itemsPerPage: 5,
// 반 아이디
sclsId: "",
};
},
methods: {
goToPage(page) {
this.$router.push({ name: page });
},
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
showConfirm(type) {
let message = "";
if (type === "cancel") {
message = "삭제하시겠습니까?";
} else if (type === "reset") {
message = "초기화하시겠습니까?";
} else if (type === "save") {
message = "등록하시겠습니까?";
}
if (confirm(message)) {
this.goBack();
}
},
// 게시글 조회
boardList() {
const vm = this;
axios({
url: "/board/findAll.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
page: vm.currentPage,
pageSize: vm.itemsPerPage,
sclsId: vm.selectedClassId,
},
})
.then(function (res) {
console.log("dataList - response : ", res.data);
vm.dataList = res.data.result[0].boardClass[0].board;
vm.userNm = res.data.result[0].userNm;
vm.userId = res.data.result[0].userId;
vm.totalPosts = res.data.totalBoard;
console.log(vm.userId);
})
.catch(function (error) {
console.log("result - error : ", error);
});
},
fetchStudents() {
const idx = (this.currentPage - 1) * this.itemsPerPage;
axios({
url: "/userclass/find.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"keyword": this.keyword,
"pageSize": this.itemsPerPage,
"startIndex": idx,
"sclsId": this.selectedClassId
},
})
.then(response => {
console.log("keywordkeywordkeywordkeyword",this.keyword);
console.log("<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>",response.data.students);
this.studentDataList = response.data.students;
this.totalStudents = response.data.totalStudent;
})
.catch(error => {
console.error("fetchStudents - error: ", error);
alert("조회 중 오류가 발생했습니다.");
});
},
setClassId() {
sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
sessionStorage.removeItem("selectedBoardList");
sessionStorage.removeItem("file");
this.boardList();
this.fetchStudents();
},
// 게시글 정보 세션에 저장
selectBoardList(item) {
sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
},
},
watch: {},
computed: {},
components: {
SvgIcon,
ProgressBar,
},
mounted() {
console.log("Main2 mounted");
//console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
this.setClassId();
},
};
</script>
<style scoped>
.textbook .box {
height: 70px;
}
</style>