fix:修复评论的一系列问题

Yi.Bbs.Vue3/src/apis/commentApi.js

@@ -15,9 +15,10 @@ export function add(data) {
   });
 }
 
-export function del(ids) {
+export function del(data) {
   return request({
-    url: `/comment/${ids}`,
+    url: `/comment`,
     method: "delete",
+    data: data,
   });
 }

Yi.Bbs.Vue3/src/components/CommentInfo.vue

@@ -5,22 +5,30 @@
   </el-tabs>
 
   <div class="total">
-    <div style="align-self: center;"> 共{{total}}个评论</div>
+    <div style="align-self: center">共{{ total }}个评论</div>
-    <div> <el-radio-group v-model="selectRadio">
+    <div>
+      <el-radio-group v-model="selectRadio">
         <el-radio-button label="new" name="new">最新</el-radio-button>
         <el-radio-button label="host" name="host">最热</el-radio-button>
-      </el-radio-group></div>
+      </el-radio-group>
+    </div>
   </div>
 
+  <el-divider />
+  <div v-hasPer="['bbs:comment:add']">
+    <el-input
+      v-model="topContent"
+      placeholder="发表一个友善的评论吧~"
+      :rows="5"
+      type="textarea"
+    ></el-input>
+    <el-button @click="addTopComment" type="primary" class="btn-top-comment"
+      >发表评论</el-button
+    >
+    <el-button class="btn-top-comment">其他</el-button>
 
-  <el-divider />
+    <el-divider />
-<div v-hasPer="['bbs:comment:add']">
+  </div>
-  <el-input v-model="topContent" placeholder="发表一个友善的评论吧~" :rows="5" type="textarea"></el-input>
-  <el-button @click="addTopComment" type="primary" class="btn-top-comment"  >发表评论</el-button>
-  <el-button class="btn-top-comment">其他</el-button>
-  
-  <el-divider />
-</div>
 
   <!-- 开始评论主体 -->
 
@@ -30,72 +38,123 @@
       {{ item.content }}
     </div>
     <span class="time"> {{ item.creationTime }} </span>
-    <span class="pointer"><el-icon>
+    <span class="pointer"
+      ><el-icon>
         <Pointer />
-      </el-icon> 0</span>
+      </el-icon>
-    <el-button type="primary" @click="replay(item.createUser.nick, item.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
+      0</span
-    <el-button  type="danger" @click="delComment(item.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
+    >
+    <el-button
+      type="primary"
+      @click="replay(item.createUser.nick, item.id, item.id)"
+      size="large"
+      text
+      v-hasPer="['bbs:comment:add']"
+      >回复</el-button
+    >
+    <el-button
+      type="danger"
+      @click="delComment(item.id)"
+      size="large"
+      text
+      v-hasPer="['bbs:comment:remove']"
+      >删除</el-button
+    >
     <div v-show="replayId == item.id" class="input-reply">
-      <el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
+      <el-input
+        v-model="form.content"
+        :placeholder="placeholder"
+        :rows="3"
+        type="textarea"
+      ></el-input>
       <div class="btn-reply">
-        <el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
+        <el-button
-        
+          @click="addComment"
+          type="primary"
+          v-hasPer="['bbs:comment:add']"
+          >回复</el-button
+        >
       </div>
     </div>
 
-
     <!-- 开始子评论主体 -->
     <div v-for="children in item.children" :key="children.id" class="comment2">
-     
+      <div style="display: flex">
-      <div style="display: flex ;">
         <AvatarInfo :userInfo="children.createUser" />
-        <span style="align-self: center;color:#606266;"> 回复@{{ children.commentedUser.nick }}</span>
+        <span style="align-self: center; color: #606266">
+          回复@{{ children.commentedUser.nick }}</span
+        >
       </div>
       <div class="content">
         {{ children.content }}
       </div>
       <span class="time">{{ children.creationTime }} </span>
-      <span class="pointer"> <el-icon>
+      <span class="pointer">
-          <Pointer />
+        <el-icon> <Pointer /> </el-icon>0</span
-        </el-icon>0</span>
+      >
-      <el-button  type="primary" @click="replay(children.createUser.nick, children.id, item.id)" size="large" text v-hasPer="['bbs:comment:add']">回复</el-button>
+      <el-button
-      <el-button  type="danger" @click="delComment(children.id)" size="large" text v-hasPer="['bbs:comment:remove']">删除</el-button>
+        type="primary"
+        @click="replay(children.createUser.nick, children.id, item.id)"
+        size="large"
+        text
+        v-hasPer="['bbs:comment:add']"
+        >回复</el-button
+      >
+      <el-button
+        type="danger"
+        @click="delComment(children.id)"
+        size="large"
+        text
+        v-hasPer="['bbs:comment:remove']"
+        >删除</el-button
+      >
       <div v-show="replayId == children.id" class="input-reply">
-      <el-input v-model="form.content" :placeholder="placeholder" :rows="3" type="textarea"></el-input>
+        <el-input
-      <div class="btn-reply">
+          v-model="form.content"
-        <el-button @click="addComment" type="primary" v-hasPer="['bbs:comment:add']">回复</el-button>
+          :placeholder="placeholder"
+          :rows="3"
+          type="textarea"
+        ></el-input>
+        <div class="btn-reply">
+          <el-button
+            @click="addComment"
+            type="primary"
+            v-hasPer="['bbs:comment:add']"
+            >回复</el-button
+          >
+        </div>
       </div>
     </div>
 
-    </div>
-
     <el-divider />
- 
   </div>
-     <el-empty v-show="commentList.length<=0"  description="评论空空如也，快来抢占沙发~" />
+  <el-empty
+    v-show="commentList.length <= 0"
+    description="评论空空如也，快来抢占沙发~"
+  />
 </template>
 <script setup>
 import { onMounted, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { getListByDiscussId, add ,del} from "@/apis/commentApi.js";
+import { getListByDiscussId, add, del } from "@/apis/commentApi.js";
-import AvatarInfo from './AvatarInfo.vue';
+import AvatarInfo from "./AvatarInfo.vue";
 //数据定义
 const route = useRoute();
 const router = useRouter();
 const commentList = ref([]);
 const query = reactive({});
-const topContent=ref('');
+const topContent = ref("");
 //当前回复id
-const replayId = ref('');
+const replayId = ref("");
 //回复文本框
-const placeholder = ref('')
+const placeholder = ref("");
 
 //选择类型：评论
-const activeName = ref('comment');
+const activeName = ref("comment");
 //选择 最新
-const selectRadio = ref('new');
+const selectRadio = ref("new");
 //评论总数
-const total=ref(0);
+const total = ref(0);
 const form = reactive({
   content: "",
   discussId: route.params.discussId,
@@ -107,57 +166,53 @@ onMounted(async () => {
   await loadComment();
 });
 const loadComment = async () => {
-topContent.value='';
+  topContent.value = "";
-  form.content = '';
+  form.content = "";
   const response = await getListByDiscussId(route.params.discussId, query);
   commentList.value = response.data.items;
-  total.value=response.data.total
+  total.value = response.data.total;
 };
 const addTopComment = async () => {
-  form.parentId = 0;
+  form.parentId = "00000000-0000-0000-0000-000000000000";
-  form.rootId = 0;
+  form.rootId = "00000000-0000-0000-0000-000000000000";
- form.content=topContent.value;
+  form.content = topContent.value;
   await addComment();
-}
+};
 const addComment = async () => {
-  if(form.content.length<=0)
+  if (form.content.length <= 0) {
-  {
+    ElMessage.error("输入评论不能为空!");
-    ElMessage.error('输入评论不能为空!')
+    return;
-    return 
   }
   await add(form);
   await loadComment();
   ElMessage({
-    message: '评论发表成功!',
+    message: "评论发表成功!",
-    type: 'success',
+    type: "success",
-  })
+  });
 };
-const delComment=async(ids)=>{
+const delComment = async (ids) => {
   ElMessageBox.confirm(`确定是否删除编号[${ids}]的评论吗?`, "警告", {
     confirmButtonText: "确认",
     cancelButtonText: "取消",
     type: "warning",
   }).then(async () => {
-   
+    await del({ id: [ids] });
-await del(ids);
+    await loadComment();
-await loadComment();
+    ElMessage({
-ElMessage({
+      message: "评论已删除!",
-    message: '评论已删除!',
+      type: "success",
-    type: 'success',
+    });
-  })
   });
-
+};
-
-}
 const replay = async (parentUserName, parentId, rootId) => {
   replayId.value = parentId;
   form.parentId = parentId;
   form.rootId = rootId;
   placeholder.value = `回复@${parentUserName}`;
-}
+};
 
 //切换 评论、相关内容
-const handleClick = () => { }
+const handleClick = () => {};
 </script>
 <style scoped>
 .input-reply {
@@ -175,7 +230,7 @@ const handleClick = () => { }
 }
 
 .time {
-  color: #8C8C8C;
+  color: #8c8c8c;
 }
 
 .content {
@@ -186,7 +241,6 @@ const handleClick = () => { }
   display: flex;
 
   justify-content: space-between;
-
 }
 
 .comment2 {
@@ -201,4 +255,4 @@ const handleClick = () => { }
   margin-top: 0.5rem;
   margin-right: 1rem;
 }
-</style>
+</style>