Commit @1cc12299054625ca7781dc49b5fa5782a0e117cd

PsHooN7979 2024-08-09

240809 박세훈 게시글 수정 추가

@1cc12299054625ca7781dc49b5fa5782a0e117cd

81e026c

1cc1229

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 name="" id="">
-      <option value="">A반</option>
+    <select>
+      <option v-for="(item, index) in classList" :key="item.id">
+        {{ item.sclsNm }}
+      </option>
     </select>
   </div>
   <div class="search-wrap flex justify-end mb20">

 
       // 반 아이디 (추후 세션에서 받는걸로 수정)
       sclsId: "1",
+      classList: [],
 
+      userId: "",
       // 검색어
       searchKeyword: "",
       selectedSearchOption: "bbsTtl",
+
+      selected: null,
     };
   },
   methods: {

           vm.userNm = res.data.result[0].userNm;
           vm.userId = res.data.result[0].userId;
           vm.totalPosts = res.data.totalBoard;
+          vm.selectClass();
+          sessionStorage.removeItem("selectedBoardList");
+          sessionStorage.removeItem("file");
+          console.log(vm.userId);
         })
         .catch(function (error) {
           console.log("result - error : ", error);

         });
     },
 
+    // 반 조회
+    selectClass() {
+      const vm = this;
+      console.log(vm.userId);
+      axios({
+        url: "/classes/selectClass.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          userId: vm.userId,
+        },
+      })
+        .then(function (res) {
+          console.log("classData - response : ", res.data);
+          vm.classList = res.data.data;
+          vm.selected = res.data.data.sclsId;
+        })
+        .catch(function (error) {
+          console.log("classData - error : ", error);
+        });
+    },
+
     createNo(index) {
       return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
     },

81e026c

1cc1229

client/views/pages/teacher/noticeDetail.vue

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

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


 <template>
   <div class="title-box flex justify-between mb40">
-    <p class="title">{{ dataList.bbsCls }}</p>
+    <p class="title">{{ category }}</p>
   </div>
   <div class="board-wrap">
     <div class="flex align-center">
-      <label for="" class="title2">{{ dataList.bbsTtl }}</label>
+      <label for="" class="title2">{{ title }}</label>
     </div>
     <hr />
-    <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
+    <textarea readonly name="" id="">{{ content }}</textarea>
     <hr />
     <div class="flex align-center">
       <label for="" class="title2">첨부파일</label>

       목록
     </button>
     <div class="flex">
-      <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
+      <button
+        type="button"
+        title="글쓰기"
+        class="new-btn mr10"
+        @click="goToPage('noticeInsert')"
+      >
+        수정
+      </button>
       <button
         type="button"
         title="글쓰기"

       if (seletedBoardList) {
         vm.dataList = seletedBoardList;
       }
-      console.log(vm.dataList);
+      vm.title = vm.dataList.bbsTtl;
+      vm.content = vm.dataList.bbsCnt;
+      vm.category = vm.dataList.bbsCls;
     },
 
     findFile() {

         .then(function (res) {
           console.log("fileInfo - response : ", res.data.list[0]);
           vm.file = res.data.list[0];
+          sessionStorage.setItem("file", JSON.stringify(vm.file));
         })
         .catch(function (error) {
           console.log("result - error : ", error);

81e026c

1cc1229

client/views/pages/teacher/noticeInsert.vue

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

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


 <template>
   <div class="title-box flex justify-between mb40">
-    <p class="title">공지 등록</p>
+    <p class="title">{{ titleLabel }}</p>
   </div>
   <div class="board-wrap">
-    <form @submit.prevent="handleSubmit">
+    <form @submit.prevent="handleButtonAction">
       <div class="flex align-center">
         <label for="title" class="title2">제목</label>
         <input type="text" id="title" class="data-wrap" v-model="title" />

       <hr />
       <div class="flex align-center">
         <label for="file" class="title2">첨부파일</label>
+        <label for="file" class="title2"> {{ file.fileNm }}</label>
         <input type="file" ref="fileInput" @change="handleFileUpload" />
       </div>
       <div class="flex justify-between mt50">
         <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
           목록
         </button>
-        <button title="글쓰기" class="new-btn">등록</button>
+        <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
+          {{ buttonLabel }}
+        </button>
       </div>
     </form>
   </div>

       title: "",
       content: "",
       category: "Notice",
+      file: "",
       sclsId: "",
+
       selectedFile: null,
+      dataList: "",
+
+      // 데이터 편집 상태 (true = 수정, false = 등록)
+      isEditMode: false,
     };
   },
   methods: {

     created() {
       const vm = this;
       const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
+      const dataList = JSON.parse(sessionStorage.getItem("selectedBoardList"));
+      const file = JSON.parse(sessionStorage.getItem("file"));
 
       if (sclsId) {
         vm.sclsId = sclsId;
+        if (dataList && file) {
+          vm.dataList = dataList;
+          vm.file = file;
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.isEditMode = true;
+        } else {
+          vm.isEditMode = false;
+        }
       }
-      console.log(sclsId);
     },
-
-    async handleSubmit() {
+    // 게시글 등록
+    async dataInsert() {
       const vm = this;
       try {
         // 파일 업로드

         await axios.post("/board/insert.json", newData);
 
         alert("게시물 등록 성공");
+        vm.$router.push({ name: "Board" });
       } catch (error) {
         console.error("게시물 등록 실패 ", error);
         alert("게시물 등록 실패");
       }
     },
+
+    // 게시글 수정
+    async boardUpdate() {
+      const vm = this;
+
+      // 파일 업로드
+      const formData = new FormData();
+      formData.append("files", this.selectedFile);
+
+      const fileUploadResponse = await axios.post(
+        "/file/upload.json",
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      // 업로드 후 파일 매니지 아이디 호출
+      const fileMngId = fileUploadResponse.data.fileMngId;
+
+      const newData = {
+        bbsTtl: vm.title,
+        bbsCls: vm.category,
+        bbsCnt: vm.content,
+        fileMngId: fileMngId,
+        sclsId: vm.sclsId,
+        bbsId: this.dataList.bbsId,
+      };
+      await axios({
+        url: "/board/update.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: newData,
+      })
+        .then(function (res) {
+          console.log("dataUpdate - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
+    },
+
+    handleButtonAction() {
+      if (this.isEditMode) {
+        this.boardUpdate();
+      } else {
+        this.dataInsert();
+      }
+    },
   },
   watch: {},
-  computed: {},
+  computed: {
+    titleLabel() {
+      return this.isEditMode ? "수정" : "공지 등록";
+    },
+
+    buttonLabel() {
+      return this.isEditMode ? "수정" : "등록";
+    },
+  },
   components: {
     SvgIcon,
   },

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,8 +1,10 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">게시판</p>
4		- <select name="" id="">
5		- <option value="">A반</option>
	4	+ <select>
	5	+ <option v-for="(item, index) in classList" :key="item.id">
	6	+ {{ item.sclsNm }}
	7	+ </option>
6	8	</select>
7	9	</div>
8	10	<div class="search-wrap flex justify-end mb20">
...	...	@@ -99,10 +101,14 @@
99	101
100	102	// 반 아이디 (추후 세션에서 받는걸로 수정)
101	103	sclsId: "1",
	104	+ classList: [],
102	105
	106	+ userId: "",
103	107	// 검색어
104	108	searchKeyword: "",
105	109	selectedSearchOption: "bbsTtl",
	110	+
	111	+ selected: null,
106	112	};
107	113	},
108	114	methods: {
...	...	@@ -146,6 +152,10 @@
146	152	vm.userNm = res.data.result[0].userNm;
147	153	vm.userId = res.data.result[0].userId;
148	154	vm.totalPosts = res.data.totalBoard;
	155	+ vm.selectClass();
	156	+ sessionStorage.removeItem("selectedBoardList");
	157	+ sessionStorage.removeItem("file");
	158	+ console.log(vm.userId);
149	159	})
150	160	.catch(function (error) {
151	161	console.log("result - error : ", error);
...	...	@@ -193,6 +203,30 @@
193	203	});
194	204	},
195	205
	206	+ // 반 조회
	207	+ selectClass() {
	208	+ const vm = this;
	209	+ console.log(vm.userId);
	210	+ axios({
	211	+ url: "/classes/selectClass.json",
	212	+ method: "post",
	213	+ headers: {
	214	+ "Content-Type": "application/json; charset=UTF-8",
	215	+ },
	216	+ data: {
	217	+ userId: vm.userId,
	218	+ },
	219	+ })
	220	+ .then(function (res) {
	221	+ console.log("classData - response : ", res.data);
	222	+ vm.classList = res.data.data;
	223	+ vm.selected = res.data.data.sclsId;
	224	+ })
	225	+ .catch(function (error) {
	226	+ console.log("classData - error : ", error);
	227	+ });
	228	+ },
	229	+
196	230	createNo(index) {
197	231	return this.totalPosts - (this.currentPage * this.itemsPerPage + index);
198	232	},

...	...	@@ -1,9 +1,9 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">공지 등록</p>
	3	+ <p class="title">{{ titleLabel }}</p>
4	4	</div>
5	5	<div class="board-wrap">
6		- <form @submit.prevent="handleSubmit">
	6	+ <form @submit.prevent="handleButtonAction">
7	7	<div class="flex align-center">
8	8	<label for="title" class="title2">제목</label>
9	9	<input type="text" id="title" class="data-wrap" v-model="title" />
...	...	@@ -13,13 +13,16 @@
13	13	<hr />
14	14	<div class="flex align-center">
15	15	<label for="file" class="title2">첨부파일</label>
	16	+ <label for="file" class="title2"> {{ file.fileNm }}</label>
16	17	<input type="file" ref="fileInput" @change="handleFileUpload" />
17	18	</div>
18	19	<div class="flex justify-between mt50">
19	20	<button title="글쓰기" class="new-btn" @click="goToPage('Board')">
20	21	목록
21	22	</button>
22		- <button title="글쓰기" class="new-btn">등록</button>
	23	+ <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
	24	+ {{ buttonLabel }}
	25	+ </button>
23	26	</div>
24	27	</form>
25	28	</div>
...	...	@@ -38,8 +41,14 @@
38	41	title: "",
39	42	content: "",
40	43	category: "Notice",
	44	+ file: "",
41	45	sclsId: "",
	46	+
42	47	selectedFile: null,
	48	+ dataList: "",
	49	+
	50	+ // 데이터 편집 상태 (true = 수정, false = 등록)
	51	+ isEditMode: false,
43	52	};
44	53	},
45	54	methods: {
...	...	@@ -55,14 +64,25 @@
55	64	created() {
56	65	const vm = this;
57	66	const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
	67	+ const dataList = JSON.parse(sessionStorage.getItem("selectedBoardList"));
	68	+ const file = JSON.parse(sessionStorage.getItem("file"));
58	69
59	70	if (sclsId) {
60	71	vm.sclsId = sclsId;
	72	+ if (dataList && file) {
	73	+ vm.dataList = dataList;
	74	+ vm.file = file;
	75	+ vm.title = vm.dataList.bbsTtl;
	76	+ vm.content = vm.dataList.bbsCnt;
	77	+ vm.category = vm.dataList.bbsCls;
	78	+ vm.isEditMode = true;
	79	+ } else {
	80	+ vm.isEditMode = false;
	81	+ }
61	82	}
62		- console.log(sclsId);
63	83	},
64		-
65		- async handleSubmit() {
	84	+ // 게시글 등록
	85	+ async dataInsert() {
66	86	const vm = this;
67	87	try {
68	88	// 파일 업로드
...	...	@@ -94,14 +114,76 @@
94	114	await axios.post("/board/insert.json", newData);
95	115
96	116	alert("게시물 등록 성공");
	117	+ vm.$router.push({ name: "Board" });
97	118	} catch (error) {
98	119	console.error("게시물 등록 실패 ", error);
99	120	alert("게시물 등록 실패");
100	121	}
101	122	},
	123	+
	124	+ // 게시글 수정
	125	+ async boardUpdate() {
	126	+ const vm = this;
	127	+
	128	+ // 파일 업로드
	129	+ const formData = new FormData();
	130	+ formData.append("files", this.selectedFile);
	131	+
	132	+ const fileUploadResponse = await axios.post(
	133	+ "/file/upload.json",
	134	+ formData,
	135	+ {
	136	+ headers: {
	137	+ "Content-Type": "multipart/form-data",
	138	+ },
	139	+ }
	140	+ );
	141	+
	142	+ // 업로드 후 파일 매니지 아이디 호출
	143	+ const fileMngId = fileUploadResponse.data.fileMngId;
	144	+
	145	+ const newData = {
	146	+ bbsTtl: vm.title,
	147	+ bbsCls: vm.category,
	148	+ bbsCnt: vm.content,
	149	+ fileMngId: fileMngId,
	150	+ sclsId: vm.sclsId,
	151	+ bbsId: this.dataList.bbsId,
	152	+ };
	153	+ await axios({
	154	+ url: "/board/update.json",
	155	+ method: "post",
	156	+ headers: {
	157	+ "Content-Type": "application/json; charset=UTF-8",
	158	+ },
	159	+ data: newData,
	160	+ })
	161	+ .then(function (res) {
	162	+ console.log("dataUpdate - response : ", res.data);
	163	+ })
	164	+ .catch(function (error) {
	165	+ console.log("result - error : ", error);
	166	+ });
	167	+ },
	168	+
	169	+ handleButtonAction() {
	170	+ if (this.isEditMode) {
	171	+ this.boardUpdate();
	172	+ } else {
	173	+ this.dataInsert();
	174	+ }
	175	+ },
102	176	},
103	177	watch: {},
104		- computed: {},
	178	+ computed: {
	179	+ titleLabel() {
	180	+ return this.isEditMode ? "수정" : "공지 등록";
	181	+ },
	182	+
	183	+ buttonLabel() {
	184	+ return this.isEditMode ? "수정" : "등록";
	185	+ },
	186	+ },
105	187	components: {
106	188	SvgIcon,
107	189	},

...	...	@@ -1,13 +1,13 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">{{ dataList.bbsCls }}</p>
	3	+ <p class="title">{{ category }}</p>
4	4	</div>
5	5	<div class="board-wrap">
6	6	<div class="flex align-center">
7		- <label for="" class="title2">{{ dataList.bbsTtl }}</label>
	7	+ <label for="" class="title2">{{ title }}</label>
8	8	</div>
9	9	<hr />
10		- <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
	10	+ <textarea readonly name="" id="">{{ content }}</textarea>
11	11	<hr />
12	12	<div class="flex align-center">
13	13	<label for="" class="title2">첨부파일</label>
...	...	@@ -35,7 +35,14 @@
35	35	목록
36	36	</button>
37	37	<div class="flex">
38		- <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
	38	+ <button
	39	+ type="button"
	40	+ title="글쓰기"
	41	+ class="new-btn mr10"
	42	+ @click="goToPage('noticeInsert')"
	43	+ >
	44	+ 수정
	45	+ </button>
39	46	<button
40	47	type="button"
41	48	title="글쓰기"
...	...	@@ -84,7 +91,9 @@
84	91	if (seletedBoardList) {
85	92	vm.dataList = seletedBoardList;
86	93	}
87		- console.log(vm.dataList);
	94	+ vm.title = vm.dataList.bbsTtl;
	95	+ vm.content = vm.dataList.bbsCnt;
	96	+ vm.category = vm.dataList.bbsCls;
88	97	},
89	98
90	99	findFile() {
...	...	@@ -102,6 +111,7 @@
102	111	.then(function (res) {
103	112	console.log("fileInfo - response : ", res.data.list[0]);
104	113	vm.file = res.data.list[0];
	114	+ sessionStorage.setItem("file", JSON.stringify(vm.file));
105	115	})
106	116	.catch(function (error) {
107	117	console.log("result - error : ", error);

Delete comment