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="title-box flex justify-between mb40">
<p class="title">홈</p>
</div>
<div class="content-t">
<div class="flex" style="gap: 50px" :style="{ flexWrap: 'wrap' }">
<div
class="class"
v-for="classItem in classesList"
:key="classItem.sclsId"
>
<div
class="box gd-col2"
style="gap: 10px"
@click="goToPage('ClassDetail', classItem.sclsId)"
>
<div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
<div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
<div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
<div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
</div>
<div class="text flex justify-between mt20">
<p class="title1">{{ classItem.sclsNm }}</p>
<span class="member">{{ classItem.studentCount }}</span>
</div>
<div
class="btnGroup mt15 flex align-center justify-end"
style="gap: 10px"
>
<button @click="editModeModal(classItem.sclsId)">수정</button>
<p>|</p>
<button @click="deleteClass(classItem.sclsId)">삭제</button>
</div>
</div>
<div class="textbook-add">
<button @click="addModeModal">
<img src="../../../resources/img/btn32_98t_normal.png" alt="" />
</button>
</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"
v-model="createClassName"
class="data-wrap"
placeholder=""
/>
<!-- <button type="button" >
<img src="../../../resources/img/look_t.png" alt="">
</button> -->
</div>
<div class="flex justify-center">
<button
type="button"
title="글쓰기"
class="new-btn mr10"
@click="closeBtn"
>
취소
</button>
<button
type="button"
title="등록"
class="new-btn"
@click="isEditMode ? updateClass() : insertClass()"
>
{{ isEditMode ? "수정" : "등록" }}
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify, mdiWindowClose } from "@mdi/js";
export default {
data() {
return {
mdiWindowClose: mdiWindowClose,
showModal: false,
searchOpen: false,
classesList: [], // 불러온 반 정보
user_id: "2", //유저 아이디 : 현재는 고정
createClassName: "", // 생성 또는 수정할 반 이름
isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
current_editId: "", // 현재 수정할 반 id
};
},
methods: {
goToPage(page, sclsId) {
//console.log(`sclsId : ${sclsId}`); // 쿼리 확인
this.$router.push({ name: page, query: { sclsId: sclsId } });
},
closeModal() {
this.showModal = false;
},
editModeModal(sclsId) {
this.searchOpen = true;
this.isEditMode = true; // 수정 모드로 설정
this.current_editId = sclsId;
},
addModeModal() {
this.searchOpen = true;
this.isEditMode = false; // 추가 모드로 설정
},
closeBtn() {
this.searchOpen = false;
this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
},
showConfirm(type, callback) {
let message = "";
if (type === "delete") {
message = "삭제하시겠습니까?";
} else if (type === "reset") {
message = "초기화하시겠습니까?";
} else if (type === "save") {
message = "등록하시겠습니까?";
} else if (type === "edit") {
message = "수정하시겠습니까?";
}
if (confirm(message)) {
if (callback) callback(); // 콜백 함수 호출
}
},
// 조회
selectClass() {
sessionStorage.removeItem("sclsId");
axios({
url: "/classes/selectClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: this.user_id,
},
})
.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("조회에 오류가 발생했습니다.");
});
},
// 추가
insertClass() {
if (this.createClassName.trim() === "") {
alert("반 이름을 입력해주세요");
} else {
this.showConfirm("save", () => {
axios({
url: "/classes/insertClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: this.user_id,
sclsNm: this.createClassName,
},
})
.then((res) => {
if (res.data.status === "success") {
console.log("classesList - response(추가) : ", res.data.data);
this.selectClass();
this.createClassName = ""; // 반 이름 초기화
this.closeBtn(); // 생성 모달 닫기
} else {
console.log("추가에 실패했습니다: ", res.data);
alert("추가에 실패했습니다.");
}
})
.catch((err) => {
console.log("classesList - error(추가) : ", err);
alert("추가에 오류가 발생했습니다.");
});
});
}
},
// 삭제
deleteClass(sclsId) {
this.showConfirm("delete", () => {
axios({
url: "/classes/deleteClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
sclsId: sclsId,
},
})
.then((res) => {
if (res.data.status === "success") {
console.log("classesList - response(삭제) : ", res.data.data);
this.selectClass();
} else {
console.log("삭제에 실패했습니다: ", res.data);
alert("삭제에 실패했습니다.");
}
})
.catch((err) => {
console.log("classesList - error(삭제) : ", err);
alert("삭제에 오류가 발생했습니다.");
});
});
},
// 수정
updateClass() {
if (this.createClassName.trim() === "") {
alert("반 이름을 입력해주세요");
} else {
this.showConfirm("edit", () => {
axios({
url: "/classes/updateClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
sclsId: this.current_editId,
sclsNm: this.createClassName,
},
})
.then((res) => {
if (res.data.status === "success") {
console.log("classesList - response(수정) : ", res.data.data);
this.selectClass();
this.createClassName = ""; // 반 이름 초기화
this.current_editId = ""; // 반 Id 초기화
this.closeBtn(); // 팝업 닫기
} else {
console.log("수정에 실패했습니다: ", res.data);
alert("수정에 실패했습니다.");
}
})
.catch((err) => {
console.log("classesList - error(수정) : ", err);
alert("수정에 오류가 발생했습니다.");
});
});
}
},
},
watch: {},
computed: {},
components: {
SvgIcon,
},
mounted() {
console.log("Main2 mounted");
this.selectClass();
},
};
</script>
<style>
.content-t {
flex-wrap: wrap;
height: 90%;
overflow-y: scroll;
}
</style>