Commit @b216abbf9f09633e2ff04f10ebd61fdaad7c724c

PsHooN7979 08-09

240809 박세훈 ClassDetail 화면 게시판 화면 연결

@b216abbf9f09633e2ff04f10ebd61fdaad7c724c

22fc379

b216abb

client/views/pages/teacher/Board.vue

--- client/views/pages/teacher/Board.vue

+++ client/views/pages/teacher/Board.vue


 <template>
   <div class="title-box flex justify-between mb40">
     <p class="title">게시판</p>
-    <select>
-      <option v-for="(item, index) in classList" :key="item.id">
+    <select v-model="sclsId" @change="handleClassId()">
+      <option
+        v-for="(item, index) in classList"
+        :key="index"
+        :value="item.sclsId"
+      >
         {{ item.sclsNm }}
       </option>
     </select>

           console.log("classData - error : ", error);
         });
     },
+    handleClassId() {
+      sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
+      this.boardList();
+    },
 
     createNo(index) {
       return this.totalPosts - (this.currentPage * this.itemsPerPage + index);

   mounted() {
     console.log("Main2 mounted");
     this.boardList();
-    this.setClassId();
   },
 };
 </script>

22fc379

b216abb

client/views/pages/teacher/ClassDetail.vue

--- client/views/pages/teacher/ClassDetail.vue

+++ client/views/pages/teacher/ClassDetail.vue


   </div>
   <div class="wrap mb30">
     <div class="flex justify-between mb30 align-center">
-      <label for="" class="title1">학습 현황</label>
+      <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>

           <td>등록일</td>
         </thead>
         <tbody>
-          <tr>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+          <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>

 import { mdiMagnify } from "@mdi/js";
 import { mdilArrowRight } from "@mdi/light-js";
 import ProgressBar from "../../component/ProgressBar.vue";
+import axios from "axios";
 
 export default {
   data() {

 
       // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
       selectedClassId: this.$route.query.sclsId,
+
+      // 게시글 정보
+      dataList: [],
+      totalPosts: 0,
+      selectedRow: "",
+      bbsTm: "",
+
+      // 페이징
+      currentPage: 0,
+      itemsPerPage: 5,
+
+      // 반 아이디
+      sclsId: "",
     };
   },
   methods: {

         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 + 1,
+          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);
+        });
+    },
     setClassId() {
       sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
+      sessionStorage.removeItem("selectedBoardList");
+      sessionStorage.removeItem("file");
+      this.boardList();
+    },
+
+    // 게시글 정보 세션에 저장
+    selectBoardList(item) {
+      sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
     },
   },
   watch: {},

22fc379

b216abb

client/views/pages/teacher/noticeDetail.vue

--- client/views/pages/teacher/noticeDetail.vue

+++ client/views/pages/teacher/noticeDetail.vue


             "selectedBoardList",
             JSON.stringify(vm.dataList)
           );
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.time = vm.dataList.bbsTm;
           vm.findFile();
           console.log(vm.dataList);
         })

             "selectedBoardList",
             JSON.stringify(vm.dataList)
           );
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.time = vm.dataList.bbsTm;
           vm.findFile();
           console.log(vm.dataList);
         })

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,8 +1,12 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">게시판</p>
4		- <select>
5		- <option v-for="(item, index) in classList" :key="item.id">
	4	+ <select v-model="sclsId" @change="handleClassId()">
	5	+ <option
	6	+ v-for="(item, index) in classList"
	7	+ :key="index"
	8	+ :value="item.sclsId"
	9	+ >
6	10	{{ item.sclsNm }}
7	11	</option>
8	12	</select>
...	...	@@ -226,6 +230,10 @@
226	230	console.log("classData - error : ", error);
227	231	});
228	232	},
	233	+ handleClassId() {
	234	+ sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
	235	+ this.boardList();
	236	+ },
229	237
230	238	createNo(index) {
231	239	return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
...	...	@@ -264,7 +272,6 @@
264	272	mounted() {
265	273	console.log("Main2 mounted");
266	274	this.boardList();
267		- this.setClassId();
268	275	},
269	276	};
270	277	</script>

...	...	@@ -4,7 +4,7 @@
4	4	</div>
5	5	<div class="wrap mb30">
6	6	<div class="flex justify-between mb30 align-center">
7		- <label for="" class="title1">학습 현황</label>
	7	+ <label for="" class="title1">게시판</label>
8	8	<div class="look-btn flex align-center" @click="goToPage('Board')">
9	9	<p>자세히 보기</p>
10	10	<svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
...	...	@@ -20,12 +20,17 @@
20	20	<td>등록일</td>
21	21	</thead>
22	22	<tbody>
23		- <tr>
24		- <td></td>
25		- <td></td>
26		- <td></td>
27		- <td></td>
28		- <td></td>
	23	+ <tr
	24	+ v-for="(item, index) in dataList"
	25	+ :key="item.id"
	26	+ :class="{ 'selected-row': selectedRow == item.dataList }"
	27	+ @click="[goToPage('noticeDetail'), selectBoardList(item)]"
	28	+ >
	29	+ <td>{{ totalPosts - index }}</td>
	30	+ <td>{{ item.bbsTtl }}</td>
	31	+ <td>{{ item.bbsCls }}</td>
	32	+ <td>{{ userNm }}</td>
	33	+ <td>{{ item.bbsTm.substr(0, 16) }}</td>
29	34	</tr>
30	35	</tbody>
31	36	</table>
...	...	@@ -106,6 +111,7 @@
106	111	import { mdiMagnify } from "@mdi/js";
107	112	import { mdilArrowRight } from "@mdi/light-js";
108	113	import ProgressBar from "../../component/ProgressBar.vue";
	114	+import axios from "axios";
109	115
110	116	export default {
111	117	data() {
...	...	@@ -117,6 +123,19 @@
117	123
118	124	// 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
119	125	selectedClassId: this.$route.query.sclsId,
	126	+
	127	+ // 게시글 정보
	128	+ dataList: [],
	129	+ totalPosts: 0,
	130	+ selectedRow: "",
	131	+ bbsTm: "",
	132	+
	133	+ // 페이징
	134	+ currentPage: 0,
	135	+ itemsPerPage: 5,
	136	+
	137	+ // 반 아이디
	138	+ sclsId: "",
120	139	};
121	140	},
122	141	methods: {
...	...	@@ -142,8 +161,46 @@
142	161	this.goBack();
143	162	}
144	163	},
	164	+
	165	+ // 게시글 조회
	166	+ boardList() {
	167	+ const vm = this;
	168	+ axios({
	169	+ url: "/board/findAll.json",
	170	+ method: "post",
	171	+ headers: {
	172	+ "Content-Type": "application/json; charset=UTF-8",
	173	+ },
	174	+ data: {
	175	+ page: vm.currentPage + 1,
	176	+ pageSize: vm.itemsPerPage,
	177	+ sclsId: vm.selectedClassId,
	178	+ },
	179	+ })
	180	+ .then(function (res) {
	181	+ console.log("dataList - response : ", res.data);
	182	+
	183	+ vm.dataList = res.data.result[0].boardClass[0].board;
	184	+ vm.userNm = res.data.result[0].userNm;
	185	+ vm.userId = res.data.result[0].userId;
	186	+ vm.totalPosts = res.data.totalBoard;
	187	+
	188	+ console.log(vm.userId);
	189	+ })
	190	+ .catch(function (error) {
	191	+ console.log("result - error : ", error);
	192	+ });
	193	+ },
145	194	setClassId() {
146	195	sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
	196	+ sessionStorage.removeItem("selectedBoardList");
	197	+ sessionStorage.removeItem("file");
	198	+ this.boardList();
	199	+ },
	200	+
	201	+ // 게시글 정보 세션에 저장
	202	+ selectBoardList(item) {
	203	+ sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
147	204	},
148	205	},
149	206	watch: {},

...	...	@@ -140,6 +140,10 @@
140	140	"selectedBoardList",
141	141	JSON.stringify(vm.dataList)
142	142	);
	143	+ vm.title = vm.dataList.bbsTtl;
	144	+ vm.content = vm.dataList.bbsCnt;
	145	+ vm.category = vm.dataList.bbsCls;
	146	+ vm.time = vm.dataList.bbsTm;
143	147	vm.findFile();
144	148	console.log(vm.dataList);
145	149	})
...	...	@@ -169,6 +173,10 @@
169	173	"selectedBoardList",
170	174	JSON.stringify(vm.dataList)
171	175	);
	176	+ vm.title = vm.dataList.bbsTtl;
	177	+ vm.content = vm.dataList.bbsCnt;
	178	+ vm.category = vm.dataList.bbsCls;
	179	+ vm.time = vm.dataList.bbsTm;
172	180	vm.findFile();
173	181	console.log(vm.dataList);
174	182	})

Delete comment