sc

src/api/okr/comment.js

@@ -5,8 +5,8 @@ export const createComment = (data) => {
   return request.post({
     url: '/admin-api/okr/comments/create',
     data,
-    isSubmitForm: true,
+    isSubmitForm: true
-    headers: { 'instance-id': 1016 }
+    // headers: { 'instance-id': 1016 }
   })
 }
 
@@ -14,8 +14,8 @@ export const createComment = (data) => {
 export const getCommentPage = (params) => {
   return request.get({
     url: '/admin-api/okr/comments/page',
-    params,
+    params
-    headers: { 'instance-id': 1016 }
+    // headers: { 'instance-id': 1016 }
   })
 }
 
@@ -27,3 +27,12 @@ export const getCommentTypeOptions = () => {
     // headers: { 'instance-id': 1016 }
   })
 }
+
+// 点赞评论
+export const likeComment = (commentId) => {
+  return request.put({
+    url: '/admin-api/okr/comments-likes/update',
+    data: { commentId }
+    // headers: { 'instance-id': 1016 }
+  })
+}

src/views/OKR/Management/Components/DialogOkr.vue

@@ -160,7 +160,7 @@
                   />
                 </div>
                 <div
-                  v-for="it in commentList"
+                  v-for="(it, index) in commentList"
                   :key="it.commentId"
                   class="border-b-1"
                   style="padding: 10px 5px"
@@ -179,28 +179,42 @@
                         "
                         fit="fill"
                       >
-                        <span class="text-12px">{{ it.creatorName }}</span>
+                        <span class="text-12px">{{ it.creatorName.slice(-2) }}</span>
                       </el-avatar>
                       <div class="ml-10px text-16px">{{ it.creatorName }}</div>
                     </div>
-                    <div class="ml-10px text-13px text-gray-400">{{ it.createTime }}</div>
                   </div>
                   <div class="ml-10px" v-dompurify-html="it.content"></div>
                   <div
-                    class="ml-10px mt-10px flex items-center text-12px"
+                    class="ml-10px mt-10px flex items-center justify-between text-12px"
                     style="line-height: 20px; color: #aaa"
                   >
+                    <div class="flex items-center">
                       <div class="flex items-center mr-50px">
-                      <el-button link @click="good(index)">
+                        <el-button link @click="good(it)">
-                        <Icon icon="fa:thumbs-o-up" :size="16" />
+                          <Icon
+                            icon="fa:thumbs-o-up"
+                            :size="16"
+                            :color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
+                          />
                         </el-button>
-                      <span class="ml-5px">{{ it.likeCount }}</span>
+                        <span
+                          class="ml-5px"
+                          :style="{
+                            color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'
+                          }"
+                          >{{ it.likeCount }}</span
+                        >
                       </div>
                       <div class="flex items-center mr-50px">
                         <el-button link @click="showComment(index)">
-                        <Icon icon="ep:chat-dot-square" :size="16" />
+                          <Icon icon="ep:chat-dot-square" :size="16" color="#333" />
                         </el-button>
-                      <span class="ml-5px">{{ it.commentCount }}</span>
+                        <span class="ml-5px" style="color: #333">{{ it.commentCount }}</span>
+                      </div>
+                    </div>
+                    <div class="ml-10px text-13px text-gray-400">
+                      {{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }}
                     </div>
                   </div>
                   <!-- 评论 -->
@@ -210,22 +224,19 @@
                     style="margin: 10px 10px 0 10px; border-radius: 4px"
                     label="评论"
                   >
-                    <div class="text-14px" style="line-height: 24px">
+                    <div
-                      <span class="font-bold">武大郎：</span>
+                      v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)"
+                      :key="subComment.commentId"
+                      class="text-14px"
+                      style="line-height: 24px"
+                    >
+                      <span class="font-bold">{{ subComment.creatorName }}：</span>
                       <span>
-                        大官人，你要脆饼不要，卖完最后一个我要回家了，我家婆娘熬了鸡汤给我补身子
+                        {{ subComment.content }}
                       </span>
                     </div>
-                    <div class="text-14px" style="line-height: 24px">
-                      <span class="font-bold">潘金莲：</span>
-                      <span>西门大官人，我要给你生猴子❥(^_-)</span>
-                    </div>
-                    <div class="text-14px" style="line-height: 24px">
-                      <span class="font-bold">武二郎：</span>
-                      <span>如同天上降魔主，真乃人间太岁</span>
-                    </div>
                     <div class="mt-10px relative">
-                      <el-input
+                      <!-- <el-input
                         v-model="form.commentValue"
                         placeholder="请输入评论"
                         type="textarea"
@@ -233,12 +244,30 @@
                         clearable
                         size="small"
                         style="width: 100%"
-                      />
+                      /> -->
+                      <el-mention
+                        v-model="form.commentValue"
+                        type="textarea"
+                        :autosize="{ minRows: 4 }"
+                        :options="employeeOptions"
+                        style="width: 100%"
+                        size="small"
+                        whole
+                        placeholder="请输入评论"
+                        @select="handleMention"
+                      >
+                        <template #label="{ item }">
+                          <div class="flex items-center justify-between h-full">
+                            <span class="text-14px text-dark-700">{{ item.name }}</span>
+                            <span class="text-12px text-gray-400">{{ item.dept }}</span>
+                          </div>
+                        </template>
+                      </el-mention>
                       <el-button
                         type="primary"
                         size="small"
                         style="position: absolute; right: 2px; bottom: 2px"
-                        @click="handleSendCommnet"
+                        @click="handleSendCommnet(index)"
                       >
                         发布
                       </el-button>
@@ -277,8 +306,16 @@ import { formatDate } from '@/utils/formatTime'
 import OkrTable from './OkrTable.vue'
 
 import { getOkrNodeDetail, getOkrNodeHistory } from '@/api/okr/okr'
-import { getCommentTypeOptions, createComment, getCommentPage } from '@/api/okr/comment'
+import {
+  getCommentTypeOptions,
+  createComment,
+  getCommentPage,
+  likeComment
+} from '@/api/okr/comment'
+import { listToTree } from '@/utils/tree'
+import { getEmployeeSimpleList } from '@/api/pers/employee'
 
+const message = useMessage()
 const emit = defineEmits(['edit'])
 
 const show = ref(false)
@@ -319,6 +356,8 @@ async function open(curNode) {
   show.value = true
 }
 
+const employeeOptions = ref([])
+
 function searchInfo(curNode) {
   try {
     getOkrNodeDetail(curNode.nodeId).then((resp) => {
@@ -339,6 +378,13 @@ function searchInfo(curNode) {
     getOkrNodeHistory(curNode.nodeId).then((resp) => {
       nodeRecords.value = resp
     })
+    getEmployeeSimpleList({ status: 0 }).then((resp) => {
+      employeeOptions.value = resp.map((item) => ({
+        ...item,
+        label: item.name,
+        value: item.name
+      }))
+    })
     getCommentTypeOptions().then((resp) => {
       commentTypeOptions.value = resp
     })
@@ -353,6 +399,10 @@ function close() {
 
 defineExpose({ open, close })
 
+function handleMention(item) {
+  form.value.mentionedUserIdList.push(item.id)
+}
+
 function handleSaveProcess() {
   okrTableRef.value.updateProcess(nodeInfo.value.nodeId).then(() => {
     message.success('更新成功')
@@ -367,7 +417,8 @@ function handleChildItem() {
 const addNewComment = ref(false)
 const form = ref({
   commentValue: '',
-  commentType: undefined
+  commentType: undefined,
+  mentionedUserIdList: []
 })
 function handleInsertComment() {
   addNewComment.value = true
@@ -401,10 +452,14 @@ function handleSaveComment() {
       content: form.value.commentValue,
       mentionedUserIdList: form.value.mentionedUserIdList
     }
-    createComment(data).then(() => {
+    createComment(data)
+      .then(() => {
         message.success('评论成功')
         searchCommentList()
       })
+      .finally(() => {
+        form.value.commentValue = ''
+      })
   } catch (error) {
     message.error('评论失败')
   }
@@ -416,14 +471,21 @@ function searchCommentList() {
     businessType: 1,
     businessId: nodeInfo.value.nodeId,
     pageNum: 1,
-    pageSize: 100
+    pageSize: -1
   }).then((resp) => {
-    commentList.value = resp.list
+    commentList.value = listToTree(resp.list, {
+      id: 'commentId',
+      pid: 'parentId',
+      children: 'children'
+    })
   })
 }
 
-function good(index) {
+function good(item) {
-  console.log(index)
+  likeComment(item.commentId).then(() => {
+    message.success('点赞成功')
+    searchCommentList()
+  })
 }
 
 const showCommentIndex = ref(-1)
@@ -431,8 +493,37 @@ function showComment(index) {
   showCommentIndex.value = showCommentIndex.value == index ? -1 : index
 }
 
-function handleSendCommnet() {
+function handleSendCommnet(idx) {
-  console.log(form.value.commentValue)
+  try {
+    // 过滤掉删除的用户，方式为遍历mentionedUserIdList，查找评论中是否有对应的用户名
+    const userList = [...form.value.mentionedUserIdList]
+    const arr = []
+    userList.map((item) => {
+      if (form.value.commentValue.indexOf(`@${item.name}`) != -1) {
+        arr.push(item.id)
+        // 然后移除对应的用户名，防止有多个
+        form.value.commentValue = form.value.commentValue.replace(`@${item.name}`, '')
+      }
+    })
+    const data = {
+      businessType: 1,
+      businessId: nodeInfo.value.nodeId,
+      contentType: 1,
+      content: form.value.commentValue,
+      mentionedUserIdList: arr,
+      parentId: commentList.value[idx].commentId
+    }
+    createComment(data)
+      .then(() => {
+        message.success('评论成功')
+        searchCommentList()
+      })
+      .finally(() => {
+        form.value.commentValue = ''
+      })
+  } catch (error) {
+    message.error('评论失败')
+  }
 }
 </script>