<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>&#124;</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>