From 49b5d302a9e2de41bd0235386a9e3bdb54f75f7d Mon Sep 17 00:00:00 2001
From: qsh <>
Date: Mon, 7 Apr 2025 16:57:03 +0800
Subject: [PATCH] sc
---
src/api/okr/comment.js | 17 +-
.../OKR/Management/Components/DialogOkr.vue | 171 ++++++++++++++----
2 files changed, 144 insertions(+), 44 deletions(-)
diff --git a/src/api/okr/comment.js b/src/api/okr/comment.js
index a9758a9..6763407 100644
--- a/src/api/okr/comment.js
+++ b/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,
- headers: { 'instance-id': 1016 }
+ isSubmitForm: true
+ // 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,
- headers: { 'instance-id': 1016 }
+ params
+ // 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 }
+ })
+}
diff --git a/src/views/OKR/Management/Components/DialogOkr.vue b/src/views/OKR/Management/Components/DialogOkr.vue
index f430229..be1e43d 100644
--- a/src/views/OKR/Management/Components/DialogOkr.vue
+++ b/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 mr-50px">
- <el-button link @click="good(index)">
- <Icon icon="fa:thumbs-o-up" :size="16" />
- </el-button>
- <span class="ml-5px">{{ it.likeCount }}</span>
+ <div class="flex items-center">
+ <div class="flex items-center mr-50px">
+ <el-button link @click="good(it)">
+ <Icon
+ icon="fa:thumbs-o-up"
+ :size="16"
+ :color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
+ />
+ </el-button>
+ <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" color="#333" />
+ </el-button>
+ <span class="ml-5px" style="color: #333">{{ it.commentCount }}</span>
+ </div>
</div>
- <div class="flex items-center mr-50px">
- <el-button link @click="showComment(index)">
- <Icon icon="ep:chat-dot-square" :size="16" />
- </el-button>
- <span class="ml-5px">{{ it.commentCount }}</span>
+ <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">
- <span class="font-bold">武大郎：</span>
+ <div
+ 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(() => {
- message.success('评论成功')
- searchCommentList()
- })
+ 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) {
- console.log(index)
+function good(item) {
+ 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() {
- console.log(form.value.commentValue)
+function handleSendCommnet(idx) {
+ 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>