feat:增加讨论任务-评论列表-发表帖子、帖子详情-帖子展示-图片展示-图片上传-回复评论

src/api/api.js

@@ -11,6 +11,7 @@ export const USER_INFO = '/admin/CheckUser/userInfo'
 // export const FILE_UPLOAD = 'http://143.143.139.204:30001/file/upload'
 export const FILE_UPLOAD = import.meta.env.VITE_BASE_API + '/file/uploadFile'
 export const FILE_UPLOAD_ANNEX = import.meta.env.VITE_BASE_API + '/file/stuUploadAnnex'
+export const FILE_UPLOAD_IMG = import.meta.env.VITE_BASE_API + '/file/img'
 export const COMMON_TOKEN = 'https://upload-z2.qiniup.com'
 export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
 export const ROUTER_LIST = '/stu/router/list post'
@@ -51,7 +52,7 @@ export const VOTE_DETAIL2 = `/voteSubmit/queryVoteTaskDetailById post`
 // 投票详情接口
 export const VOTE_DETAIL_SUBMIT = `/voteSubmit/vote/commit post`
 
-export const COMMENT_ADD = '/comment post'
+export const COMMENT_ADD = '/comment/add post'
 export const COMMENT_PRAISE = '/comment/praise post'
 export const COMMENT_COLLECTION = '/comment/collection post'
 
@@ -100,13 +101,21 @@ export const PostAdd = `/statement/add post`
 // 帖子收藏
 export const PostCollection = `/statement/collection post`
 // 帖子删除
-export const PostDelete = postId => `/statement/delete/?id=${postId} post`
+export const PostDelete = postId => `/statement/delete?id=${postId} post`
-// 查询讨论下的帖子
-export const PostList = `/statement/list`
 // 贴子点赞
 export const PostPraise = `/statement/praise post`
 // 帖子更新
 export const PostUpdate = `/statement/update post`
 
+// 帖子详情查询
+export const PostDetails = `/statement/info`
+// 查询帖子的评论
+export const GetComments = `/statement/getComments`
+// 查询某个评论下更多的回复
+export const GetMoreComments = `/statement/getMoreComments`
+// 查询讨论下的帖子
+export const PostList = `/statement/list`
+
+
 
 

src/components/img/UploadPostImg.vue

@@ -0,0 +1,81 @@
+<!-- 上传评论图片 -->
+<template>
+	<el-upload :file-list="files" :action="FILE_UPLOAD_IMG" method="POST" :show-file-list="false" :on-change="handleChange"
+		:limit="max" ref="imageRef" :on-exceed="exceed">
+		<template #trigger>
+			<div>
+				<slot></slot>
+			</div>
+		</template>
+	</el-upload>
+</template>
+<script setup>
+import { FILE_UPLOAD_IMG } from "@/api/api";
+import { defineProps, ref, watch } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+	value: [],
+	max: {
+		type: Number,
+		default: 10
+	}
+})
+
+const emit = defineEmits()
+
+const files = ref([])
+const imageRef = ref()
+
+watch(props.value, () => {
+	props.value.length || (files.value = props.value)
+})
+
+function exceed() {
+	ElMessage.error(`只能上传${props.max}个附件`);
+}
+
+function handleChange(e) {
+	if (e.response && e.response.code === 200) {
+		e.url = e.response.data
+        // console.log(e)
+        emit('fileUploadValue', e)
+	}
+
+	const index = files.value.findIndex(f => f.uid === e.uid)
+	if (index === -1) {
+		files.value.unshift(e)
+	} else {
+		files.value[index] = e
+	}
+	emit('update:value', files.value)
+}
+
+function remove(i) {
+	files.value.splice(i, 1)
+	console.log(imageRef)
+}
+
+function clearFiles() {
+	imageRef.value.clearFiles();
+}
+
+function reUpload(i) {
+    console.log(i)
+	if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
+		imageRef.value.abort(files.value[i].raw)
+		files.value[i].status = 'abort';
+	} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
+		imageRef.value.handleStart(files.value[i].raw)
+		imageRef.value.submit()
+	}
+}
+
+function abort(i) {
+	imageRef.value.abort(files.value[i].raw)
+}
+
+
+defineExpose({ reUpload, remove, clearFiles })
+
+</script>

src/views/discuss/DiscussPage.vue

@@ -69,14 +69,12 @@
           v-for="(d, j) in state?.postList"
           :key="j"
         >
-          <div class="itemtitle" @click="comment(d)">{{ d.discussSubmitTitle }}</div>
+          <div class="itemtitle" @click="comment(d)">{{ d.title }}</div>
-          <div class="itemdiscuss" @click="comment(d)">
+          <div class="itemdiscuss" @click="comment(d)" :v-html="d.content"></div>
-            {{ d.discussSubmitContent }}
-          </div>
           <div class="allstar clearfix">
             <div @click="comment(d)" style="display: flex; cursor: pointer">
               <span class="iconfont icon-pinglun" style="color: #b3bdc4"></span>
-              <div class="count">{{ d.discussReviewCount || 0 }}</div>
+              <div class="count">{{ d.commentNum || 0 }}</div>
             </div>
             <div @click="like(d)" style="display: flex; cursor: pointer">
               <span
@@ -86,7 +84,7 @@
                   marginLeft: '19px',
                 }"
               ></span>
-              <div class="count">{{ d.discussLikeCount || 0 }}</div>
+              <div class="count">{{ d.praiseNum || 0 }}</div>
             </div>
             <div @click="collection(d)" style="display: flex; cursor: pointer">
               <span
@@ -96,13 +94,12 @@
                   marginLeft: '19px',
                 }"
               ></span>
-              <div class="count">{{ d.discussCollectionCount || 0 }}</div>
+              <div class="count">{{ d.collectionNum || 0 }}</div>
             </div>
           </div>
           <div class="thinline"></div>
         </div>
-        <div
+        <div style="display:flex;justify-content:center;align-items:center;margin-top:36px;margin-bottom:36px;">
-           style="display:flex;justify-content:center;align-items:center;margin-top:36px;">
           <!-- 分页 -->
           <el-pagination
             v-model:current-page="state.currentPage"
@@ -252,14 +249,7 @@ function getPostList(discussId) {
   console.log('获取帖子参数', {
       "discussId": discussId,
       "pageNo": state.pageNo,
-      "pageSize": state.pageSize,
+      "pageSize": state.pageSize
-      "id": "",
-      "title": "",
-      "content": "",
-      "userId": userInfo.value.id,
-      "userJobName": userInfo.value.jobName,
-      "userName": userInfo.value.realName,
-      "userOrgName": userInfo.value.orgName
     })
 
   request(
@@ -267,73 +257,11 @@ function getPostList(discussId) {
     {
       "discussId": discussId,
       "pageNo": state.pageNo,
-      "pageSize": state.pageSize,
+      "pageSize": state.pageSize
-      "id": "",
-      "title": "",
-      "content": "",
-      "userId": userInfo.value.id,
-      "userJobName": userInfo.value.jobName,
-      "userName": userInfo.value.realName,
-      "userOrgName": userInfo.value.orgName
     }).then(e=>{
       console.log('我是当前讨论下的帖子',e)
-      state.postList = e.data.rows;
+      state.postList = e.data.records;
-      state.total = e.data.total;
+      state.total = Number(e.data.total);
-
-      // 添加一条假的数据 供测试使用
-      state.postList =[
-        {
-          "createTime": "",
-          "createUser": 0,
-          "discussCollectionCount": "234",
-          "discussId": "",
-          "discussLikeCount": "3576",
-          "discussReviewCount": "12353",
-          "discussSubmitContent": "帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容",
-          "discussSubmitId": "",
-          "discussSubmitPictureAddress": "",
-          "discussSubmitTitle": "我是一个用来测试的帖子标题",
-          "stuId": "",
-          "stuName": "",
-          "updateTime": "",
-				  "updateUser": 0,
-
-          "submitReviewVoList": [
-            {
-              "createTime": "",
-              "createUser": 0,
-              "discussLikeCount": "",
-              "discussReviewContent": "",
-              "discussReviewFlag": "",
-              "discussReviewId": "",
-              "discussReviewPictureAddress": "",
-              "discussSubmitId": "",
-              "stuId": "",
-              "stuName": "",
-              "submitReplyVoList": [
-                {
-                  "createTime": "",
-                  "createUser": 0,
-                  "discussReplyId": 0,
-                  "discussReviewId": "",
-                  "replyContent": "",
-                  "replyFlag": "",
-                  "replyPictureAddress": "",
-                  "reviewStuId": "",
-                  "reviewStuName": "",
-                  "stuId": "",
-                  "stuName": "",
-                  "updateTime": "",
-                  "updateUser": 0
-                }
-              ],
-              "updateTime": "",
-              "updateUser": 0
-            }
-          ]
-        }
-      ]
-      state.total = 100;
     }).catch(err=>{
       console.log(err)
     })
@@ -363,20 +291,30 @@ function handleCurrentChange(e, k) {
 }
 
 
-function comment({ discussId: id }) {
+function comment({ discussId: id, id: postID }) {
-  router.push({ path: "discussdetail", query: { id, type, pName, sName} });
+  router.push({ path: "discussdetail", query: { id, type, pName, sName, postID, postName:state.info.discussDtoList[0].discussName } });
 }
 
 function like(d) {
-  d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1);
+  d.praised ? ((d.praiseNum) -= 1) : (d.praiseNum += 1);
   d.praised = !d.praised;
-  request(COMMENT_PRAISE, { targetId: d.discussId, type: 3 });
+  console.log('我是点赞传递的参数', { targetId: d.discussId, type: 2 })
+  request(PostPraise, { targetId: d.discussId, type: 2 }).then(res=>{
+    console.log('我是点赞的操作',res)
+  }).catch(err=>{
+    console.log(err)
+  });
 }
 
 function collection(d) {
   d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1);
   d.collected = !d.collected;
-  request(COMMENT_COLLECTION, { targetId: d.discussId, type: 4 });
+  console.log('我是收藏传递的参数', { targetId: d.discussId, type: 2 })
+  request(PostCollection, { targetId: d.discussId, type: 2 }).then(res=>{
+    console.log('我是收藏的操作',res)
+  }).catch(err=>{
+    console.log(err)
+  });
 }
 
 
@@ -420,7 +358,9 @@ const postAdd = () => {
     if(res.code==200){
       dialogVisible.value = false;
       ElMessage.success("发帖成功");
-      getPostList();
+      getPostList(state.info.discussDtoList[0].discussId);
+      titleName.value = "";
+      valueHtml.value = "";
     }
   }).catch(err=>{
     console.log(err)

src/views/discussdetail/DiscussDetail.vue

@@ -37,35 +37,29 @@
     </div> 
     <!-- 面包屑导航 -->
     <!-- 标题 -->
-    <div class="title">【讨论】管理者进阶腾飞班 - 班内成员讨论</div>
+    <div class="title">【讨论】{{postName}}</div>
     <!-- 标题 -->
     <!-- 详细内容 -->
     <div class="bascinfo clearfix">
       <!-- 中间部分 -->
       <div class="middletitle">
         <div class="title">
-          {{ disDetail.projectName }} 
+          {{ postName }} 
         </div>
-        <!--        <button class="btn">回复</button>-->
+        <button class="btn" @click="getFocus">回复</button>
       </div>
 
       <div class="line clearfix">
-        <div class="linetitle">{{ disDetail.stageName }}</div>
+        <div class="linetitle">{{ disDetail.title  }}</div>
         <div class="radi"></div>
         <div class="intime">进行中</div>
       </div>
       <div class="discusscontent clearfix">
         <div class="contenttop clearfix">
-          <div class="contenttitle">{{ disDetail.discussName }}</div>
+          <div class="contenttitle">{{ disDetail.title }}</div>
           <div
             @click="like()"
-            style="
+            style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px;">
-              display: flex;
-              cursor: pointer;
-              align-items: baseline;
-              margin-left: 20px;
-            "
-          >
             <span
               class="iconfont icon-dianzan"
               :style="{
@@ -81,9 +75,7 @@
               display: flex;
               cursor: pointer;
               align-items: baseline;
-              margin-left: 20px;
+              margin-left: 20px;">
-            "
-          >
             <span
               class="iconfont icon-shoucang"
               :style="{
@@ -95,7 +87,10 @@
           </div>
         </div>
         <div class="contentmid"> 
-          {{ disDetail.discussExplain }}
+           <!-- <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
+              :mode="mode" /> -->
+              <Editor style="height: 450px; overflow-y: hidden" v-model="disDetail.content" :defaultConfig="editorConfig"
+              :mode="mode" @onCreated="handleCreated" />
         </div>
       </div>
     </div>
@@ -103,6 +98,7 @@
     <div class="bascinfor">
       <div class="inputone">
         <el-input
+          ref="refInput"
           v-model="disComment.content"
           :autosize="{ minRows: 5, maxRows: 5 }"
           resize="none"
@@ -115,7 +111,7 @@
           <div style="display: flex">
             <div
               class="allimg"
-              v-for="(img, i) in commentSubmitFileList"
+              v-for="(img, i) in fileListComment"
               :key="i"
             >
               <div
@@ -130,12 +126,12 @@
           </div>
           <div class="uploadAnd">
             <div class="btnone clearfix">
-              <UploadImg v-model="commentSubmitFileList">
+              <UploadPostImg v-model="commentSubmitFileList" @fileUploadValue="uploadBack">
                 <button class="btwwo">
                   <img class="image" src="../../assets/image/uploadimg.png" />
                   <div class="shangchuan">上传图片</div>
                 </button>
-              </UploadImg>
+              </UploadPostImg>
             </div>
 
             <button class="btntwo" @click="submitComment">发表</button>
@@ -171,13 +167,7 @@
                 </div>
                 <div
                   @click="commentLike(row)"
-                  style="
+                  style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px;">
-                    display: flex;
-                    cursor: pointer;
-                    align-items: baseline;
-                    margin-left: 19px;
-                  "
-                >
                   <span
                     class="iconfont icon-dianzan"
                     :style="{ color: row.praised ? 'red' : '#b3bdc4' }"
@@ -224,9 +214,7 @@
                       display: flex;
                       cursor: pointer;
                       align-items: baseline;
-                      margin-left: 19px;
+                      margin-left: 19px;">
-                    "
-                  >
                     <span
                       class="iconfont icon-dianzan"
                       :style="{ color: replay.praised ? 'red' : '#b3bdc4' }"
@@ -239,8 +227,7 @@
           </div>
           <div
             class="discuss clearfix"
-            v-if="commontList && commontList.length"
+            v-if="commontList && commontList.length">
-          >
             <div class="inreply">
               <el-input
                 v-model="replayComment.content"
@@ -265,7 +252,7 @@
                   </div>
                 </div>
                 <datagrid class="uploadAnd">
-                  <UploadImg v-model="fileList">
+                  <UploadPostImg v-model="fileList" @fileUploadValue="uploadBack">
                     <button class="btnone clearfix">
                       <img
                         class="image"
@@ -273,8 +260,8 @@
                       />
                       <div class="shangchuan">上传图片</div>
                     </button>
-                  </UploadImg>
+                  </UploadPostImg>
-                  <button class="btntwo" @click="submitReplayComment">
+                  <button class="btntwo" @click="submitReplayComment" style="top:206px;">
                     发表
                   </button>
                 </datagrid>
@@ -288,8 +275,10 @@
   </div>
 </template>
 <script setup>
-import { reactive, ref, toRefs } from "vue";
+import { reactive, ref, toRefs, shallowRef } from "vue";
 import { useRoute, useRouter } from "vue-router/dist/vue-router";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 import { request, usePage, useRequest } from "@/api/request";
 import {
   COMMENT_ADD,
@@ -298,16 +287,31 @@ import {
   COMMENT_PRAISE,
   DISCUSS_DETAIL,
   FILE_UPLOAD,
+
+  PostAdd,
+  PostDelete,
+  PostUpdate,
+  PostList,
+
+  PostPraise,
+  PostCollection,
+
+  GetComments,
+  PostDetails
 } from "@/api/api";
-import UploadImg from "@/components/img/UploadImg.vue";
+import UploadPostImg from "@/components/img/UploadPostImg.vue";
 
 const router = useRouter();
+const refInput =ref()
+const getFocus = () => {
+  refInput.value.focus()
+}
 const returnclick = () => {
   router.back();
 };
 
 const {
-  query: { id, discussSubmitId, type, pName, sName },
+  query: { id, discussSubmitId, type, pName, sName, postID, postName },
 } = useRoute();
 
 const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
@@ -317,25 +321,61 @@ const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
 
 // const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
 
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("");
+
+const toolbarConfig = {
+  excludeKeys: ["insertVideo", "insertImage"],
+};
+
+const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
+
+editorConfig.MENU_CONF["uploadImage"] = {
+  // 自定义上传
+  async customUpload(file, insertFn) {
+    const formData = new FormData();
+    formData.append("file", file);
+    fileUp(formData).then((res) => {
+      if (res.data.code === 200) {
+        // 最后插入图片  url alt href
+        insertFn(res.data.data, file.name, res.data.data);
+      }
+    });
+  },
+};
+
+const handleCreated = (editor) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
+
+
 const disDetail = ref({});
 
-useRequest(DISCUSS_DETAIL, { id, type }, (e)=>{
+useRequest(PostDetails, {id:postID}, (e)=>{
   console.log(e)
   disDetail.value = e.data
+  console.log('查询帖子下的评论参数',{
+    statementId:e.data.discussId,
+    pageNo:10,
+    pageSize:1
+  })
+  // 获取帖子下的评论
+  request(GetComments,{
+    statementId:e.data.id,
+    pageNo:10,
+    pageSize:1
+  }).then(res=>{
+    console.log('我是获取当前帖子的评论', res)
+  }).catch(err=>{
+    console.log(err)
+  })
 
-  // 模拟数据
-  disDetail.value = {
-    projectName:'讨论考勤模块', 
-    stageName:'讨论考勤模块',  
-    discussName:'我是一个用来测试的帖子标题', 
-    praised:true,  
-    praiseNum:888,  
-    collected:true,  
-    collectionNum:3465,  
-    discussExplain:'帖子的内容----帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容帖子的内容 试内容展示我是帖子的测试内容展示我是帖子的测试内容展示我是帖子的测试内容展示我是帖子的测试内容展示', 
-  }
 })
 
+
 const fileList = ref([]);
 const commentSubmitFileList = ref([]);
 
@@ -352,8 +392,8 @@ function removeImg(i) {
   fileList.value.splice(i, 1);
 }
 
-function removeCommentImg() {
+function removeCommentImg(i) {
-  commentSubmitFileList.value.splice(i, 1);
+  fileListComment.value.splice(i, 1);
 }
 
 function like() {
@@ -384,25 +424,53 @@ function commentComment(obj) {
 }
 
 function submitComment() {
-  request(COMMENT_ADD, {
+  console.log(disDetail.value)
-    targetId: disDetail.value.discussId,
+  console.log('帖子评论参数',{
+    targetId: disDetail.value.id,
     content: disComment.value.content,
     type: 1,
-  }).then(() => {
+  })
+  request(COMMENT_ADD, {
+    targetId: disDetail.value.id,
+    content: disComment.value.content,
+    type: 1,
+  }).then((res) => {
+    console.log(res)
     commonFetch();
+  }).catch(err=>{
+    console.log(err)
   });
 }
 
 function submitReplayComment() {
+  console.log('帖子回复评论参数',{
+    targetId: disDetail.value.discussId,
+    content: disComment.value.content,
+    type: 2,
+  })
   request(COMMENT_ADD, {
     targetId: disDetail.value.discussId,
     content: replayComment.value.content,
     type: 2,
     pid: replayComment.value.pid,
-  }).then(() => {
+  }).then((res) => {
+    console.log(res)
     commonFetch();
+  }).catch(err=>{
+    console.log(err)
   });
 }
+
+// 评论图片展示数组
+const fileListComment = ref([]);
+// 回复图片展示数组
+const fileListCommentRelpay = ref([]);
+
+// 上传图片成功返回的URL
+const uploadBack = (e) => {
+  console.log('--------->', e)
+  fileListComment.value.push(e)
+}
 </script>
 
 <style lang="scss">
@@ -629,6 +697,7 @@ function submitReplayComment() {
       // }
       .upload {
         display: flex;
+        height: 100px;
         // background-color: red;
         .allimg {
           position: relative;

vite.config.js

@@ -41,6 +41,14 @@ export default defineConfig(({ command, mode }) =>
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
 			},
+			'/file/img': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},
+			'/file/stuUploadAnnex': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},
 			'/stu': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
@@ -129,6 +137,27 @@ export default defineConfig(({ command, mode }) =>
 			},'/stu/externalExam/submitExternalExam': {
 				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
 				changeOrigin: true,
+			},'/comment/list': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/comment/add': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/comment/praise': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/comment/collection': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/statement/info': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/statement/getComments': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
+			},'/statement/getMoreComments': {
+				target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
+				changeOrigin: true,
 			},
 		}
 	}