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() {
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>