feat: 增加回复评论

src/modules/viewer/api.js

@@ -196,6 +196,14 @@ export function addChapterHomeworkComment(data) {
 export function getChapterHomeworkComment(params) {
   return httpRequest.get('/api/lms/v2/education/homeworks/fmcomment', params)
 }
+
+/**
+ * 提交作业互评
+ */
+export function addChapterHomeworkCommentReply(data) {
+  return httpRequest.post('/api/lms/v2/education/add-comment', data)
+}
+
 /**
  * 获取营销数据
  * @param {string} semesterId 学期ID

src/modules/viewer/components/work/chapterWorkComment.vue

@@ -11,7 +11,7 @@
         ref="form"
       >
         <el-form-item prop="comment">
-          <chapter-work-comment-item :data="item" :index="index" :disabled="disabled" :key="item.id" /> </el-form-item
+          <chapter-work-comment-item :data="item" :index="index" :disabled="disabled" :key="item.id" @update="getList" /> </el-form-item
       ></el-form>
     </template>
     <div class="button" v-if="status !== 0">

src/modules/viewer/components/work/chapterWorkCommentAndReply.vue

+<template>
+  <div>
+    <div class="chapter-work-comment-and-reply" v-if="showFirst">
+      <show-more>
+        <div v-html="data.comment"></div>
+      </show-more>
+    </div>
+    <div class="chapter-work-comment-and-reply" v-for="reply in data.details">
+      <show-more :key="reply.id">
+        <div v-html="reply.comment"></div>
+      </show-more>
+    </div>
+    <div class="chapter-work-comment-and-reply-tools">
+      <el-button size="small" @click="showComment = !showComment">评论</el-button>
+      <template v-if="showComment">
+        <div style="flex:1;">
+          <v-editor v-model="comment"></v-editor>
+        </div>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import showMore from '@/components/showMore'
+import VEditor from '@/components/tinymce'
+import * as api from '../../api'
+
+export default {
+  name: 'ChapterWorkCommentAndReply',
+  props: { data: { type: Object, default: () => ({}) }, showFirst: { type: Boolean, default: true } },
+  emits: ['update'],
+  components: { VEditor, showMore },
+  data() {
+    return {
+      showComment: false,
+      comment: ''
+    }
+  },
+  methods: {
+    handleSubmit() {
+      api.addChapterHomeworkCommentReply({ comment_id: this.data.id, comment: this.comment }).then((response) => {
+        this.$message({ type: 'success', message: '回复成功' })
+        this.showComment = false
+        this.comment = ''
+        this.$emit('update')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.chapter-work-comment-and-reply {
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: #fff;
+  font-size: 12pt;
+  line-height: initial;
+  img {
+    max-width: 100%;
+  }
+}
+.chapter-work-comment-and-reply-tools {
+  display: flex;
+  flex-direction: column;
+  // align-items: flex-end;
+  gap: 10px;
+}
+</style>

src/modules/viewer/components/work/chapterWorkCommentItem.vue

 <template>
-  <chapter-work-answer-item :data="data" :key="data.id" v-bind="$attrs">
-    <h3 class="comment-title">{{ $t('viewerWork.commentMyTitle') }}</h3>
-    <v-editor v-model="data.comment" :disabled="disabled"></v-editor>
-  </chapter-work-answer-item>
+  <div>
+    <chapter-work-answer-item :data="data" :key="data.id" v-bind="$attrs">
+      <h3 class="comment-title">{{ $t('viewerWork.commentMyTitle') }}</h3>
+      <v-editor v-model="data.comment" :disabled="disabled"></v-editor>
+    </chapter-work-answer-item>
+    <chapter-work-comment-and-reply :data="data" v-on="$listeners" :show-first="false" />
+  </div>
 </template>
 
 <script>
 // componets
 import ChapterWorkAnswerItem from './chapterWorkAnswerItem.vue'
 import VEditor from '@/components/tinymce'
+import chapterWorkCommentAndReply from './chapterWorkCommentAndReply.vue'
 
 export default {
   props: { data: { type: Object, default: () => ({}) }, disabled: { type: Boolean } },
-  components: { ChapterWorkAnswerItem, VEditor },
+  components: { ChapterWorkAnswerItem, VEditor, chapterWorkCommentAndReply },
   data() {
     return {}
   }
@@ -24,6 +28,5 @@ export default {
   margin: 10px 0;
   font-size: 14px;
   font-weight: normal;
-  // padding: 10px 0;
 }
 </style>

src/modules/viewer/components/work/chapterWorkCommentToMe.vue

@@ -4,9 +4,7 @@
       <div class="module-item" :key="index">
         <div class="module-item-hd">{{ $t('viewerWork.comment') }}{{ index + 1 }}:</div>
         <div class="module-item-bd">
-          <show-more>
-            <div v-html="item.comment"></div>
-          </show-more>
+          <chapter-work-comment-and-reply :data="item" :key="item.id" @update="getList" />
         </div>
       </div>
     </template>
@@ -19,10 +17,10 @@ import * as api from '../../api'
 // componets
 import Container from '../common/container.vue'
 import showMore from '@/components/showMore'
-
+import chapterWorkCommentAndReply from './chapterWorkCommentAndReply.vue'
 export default {
   props: { id: { type: String } },
-  components: { Container, showMore },
+  components: { Container, showMore, chapterWorkCommentAndReply },
   data() {
     return {
       list: []
@@ -31,7 +29,7 @@ export default {
   computed: {},
   methods: {
     getList() {
-      api.getChapterHomeworkComment({ homework_id: this.id }).then(response => {
+      api.getChapterHomeworkComment({ homework_id: this.id }).then((response) => {
         this.list = response
       })
     }
@@ -52,14 +50,4 @@ export default {
 .module-item-hd {
   margin-bottom: 10px;
 }
-.module-item-bd {
-  padding: 10px;
-  border-radius: 8px;
-  background-color: #fff;
-  font-size: 12pt;
-  line-height: initial;
-  img {
-    max-width: 100%;
-  }
-}
 </style>