|
@@ -29,26 +29,49 @@
|
|
|
<div class="flex direction-column message-info">
|
|
|
<div class="flex items-center p-base message-info-header">
|
|
|
<div class="flex items-center send-user">
|
|
|
- <span class="m-r-mini">发件人</span>
|
|
|
+ <!-- <span class="m-r-mini">发件人</span> -->
|
|
|
<span class="radius-base user-name">{{ currentMessage?.sendUserName }}</span>
|
|
|
</div>
|
|
|
<div class="grid pointer m-l-auto close-icon" @click="$emit('close')">
|
|
|
<el-icon><close /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="flex-1 overflow-hidden p-base">
|
|
|
- <pre
|
|
|
+ <div ref="historyMsgWrap" class="flex-1 overflow-hidden p-base scroll-auto">
|
|
|
+ <!-- <pre
|
|
|
class="full-h radius-base p-extra-base scroll-y-auto message-info-content"
|
|
|
@click="onContentClick"
|
|
|
v-html="currentMessage?.content"
|
|
|
- ></pre>
|
|
|
+ ></pre> -->
|
|
|
+ <div v-for="(message, index) in history" :key="index" class="m-b-base history-box">
|
|
|
+ <div class="m-b-mini message-header">
|
|
|
+ <span class="m-r-base user-name">{{ message.sendUserName }}</span>
|
|
|
+ <span class="message-time">{{ message.sendTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="history-message-info-content" @click="onContentClick" v-html="message.content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="p-base" style="padding-top: 0">
|
|
|
+ <div class="p-base radius-base overflow-hidden msg-content-box">
|
|
|
+ <div style="height: calc(100% - 18px)" class="scroll-y-auto">
|
|
|
+ <content-edit-able
|
|
|
+ v-model="messageContent"
|
|
|
+ class="full content-edit-able"
|
|
|
+ @click="onContentClick"
|
|
|
+ ></content-edit-able>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="limit-tip">{{ messageContent.length }} / 2000</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="p-base flex items-center justify-end">
|
|
|
- <el-button size="small" type="primary" :disabled="!currentMessage" @click="onReply">回复</el-button>
|
|
|
- <el-button size="small" plain :disabled="!currentMessage" @click="toggleHistory">历史消息</el-button>
|
|
|
+ <!-- <el-button size="small" type="primary" :disabled="!currentMessage" @click="onReply">回复</el-button> -->
|
|
|
+ <!-- <el-button size="small" plain :disabled="!currentMessage" @click="toggleHistory">历史消息</el-button> -->
|
|
|
+ <el-button size="small" type="primary" :disabled="!allowSend" :loading="sendLoading" @click="onSendMessage"
|
|
|
+ >发送</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
- <message-history v-if="showHistory" :send-user-id="currentMessage?.sendUserId"></message-history>
|
|
|
+ <!-- <message-history v-if="showHistory" :send-user-id="currentMessage?.sendUserId"></message-history> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<image-preview
|
|
@@ -61,8 +84,8 @@
|
|
|
|
|
|
<script setup lang="ts" name="MessageList">
|
|
|
/** 消息列表*/
|
|
|
-import { ref, watch, onUnmounted } from 'vue'
|
|
|
-import { ElButton, ElIcon } from 'element-plus'
|
|
|
+import { ref, watch, onUnmounted, computed, nextTick } from 'vue'
|
|
|
+import { ElButton, ElIcon, ElMessage } from 'element-plus'
|
|
|
import { Close } from '@element-plus/icons-vue'
|
|
|
import useFetch from '@/hooks/useFetch'
|
|
|
import MessageHistory from '@/components/shared/message/MessageHistory.vue'
|
|
@@ -71,13 +94,16 @@ import useMainStore from '@/store/main'
|
|
|
import { setLastMsgs } from '@/hooks/useMessageLoop'
|
|
|
import bus from '@/utils/bus'
|
|
|
import type { ExtractApiResponse } from '@/api/api'
|
|
|
+import ContentEditAble from '@/components/common/ContentEditAble.vue'
|
|
|
type MessageType = ExtractArrayValue<ExtractApiResponse<'getMessageList'>>
|
|
|
+const historyMsgWrap = ref()
|
|
|
const mainStore = useMainStore()
|
|
|
const emits = defineEmits(['close', 'change-type', 'reply'])
|
|
|
-
|
|
|
+const { fetch: getMessageHistory, result: history, loading } = useFetch('getMessageHistory')
|
|
|
/** 图片预览 */
|
|
|
const previewModalVisible = ref<boolean>(false)
|
|
|
-
|
|
|
+/** 消息内容 */
|
|
|
+const messageContent = ref<string>('')
|
|
|
/** 图片路径 */
|
|
|
const paperPath = ref<string>('')
|
|
|
|
|
@@ -86,19 +112,48 @@ const showHistory = ref<boolean>(false)
|
|
|
const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
|
|
|
|
|
|
const currentMessage = ref<MessageType>()
|
|
|
-
|
|
|
+watch(history, () => {
|
|
|
+ nextTick(() => {
|
|
|
+ console.log(historyMsgWrap.value.scrollHeight)
|
|
|
+ })
|
|
|
+})
|
|
|
watch(currentMessage, () => {
|
|
|
if (currentMessage.value) {
|
|
|
useFetch('handleReadMessage')
|
|
|
.fetch({ id: currentMessage.value.id })
|
|
|
.then(() => {
|
|
|
if (currentMessage.value?.unReadCount) {
|
|
|
- currentMessage.value.unReadCount--
|
|
|
+ // currentMessage.value.unReadCount--
|
|
|
+ currentMessage.value.unReadCount = 0
|
|
|
+ }
|
|
|
+ if (currentMessage.value?.sendUserId) {
|
|
|
+ getMessageHistory({ sendUserId: currentMessage.value.sendUserId })
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+const allowSend = computed<boolean>(() => {
|
|
|
+ return !!(messageContent.value && currentMessage.value?.sendUserId)
|
|
|
+})
|
|
|
+const { fetch: sendMessage, loading: sendLoading } = useFetch('sendMessage')
|
|
|
+/** 发送消息 */
|
|
|
+const onSendMessage = async () => {
|
|
|
+ try {
|
|
|
+ if (messageContent.value.length > 2000) {
|
|
|
+ return ElMessage.error('输入内容过长')
|
|
|
+ }
|
|
|
|
|
|
+ await sendMessage({
|
|
|
+ content: messageContent.value,
|
|
|
+ receiveUserIds: [currentMessage.value?.sendUserId as number],
|
|
|
+ })
|
|
|
+ ElMessage.success('发送成功')
|
|
|
+ messageContent.value = ''
|
|
|
+ // emit('close')
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+}
|
|
|
// const checkMessage = (message: MessageType) => {
|
|
|
// currentMessage.value = message
|
|
|
// }
|
|
@@ -111,8 +166,6 @@ const toggleHistory = () => {
|
|
|
}
|
|
|
|
|
|
const onReply = () => {
|
|
|
- console.log('ssss', currentMessage.value)
|
|
|
-
|
|
|
if (currentMessage.value) {
|
|
|
emits('change-type', 'send')
|
|
|
emits('reply', currentMessage.value.sendUserId, currentMessage.value.sendUserName)
|
|
@@ -165,6 +218,24 @@ onUnmounted(() => {
|
|
|
// width: 600px;
|
|
|
width: calc(100% - 260px);
|
|
|
position: relative;
|
|
|
+ .history-box {
|
|
|
+ .message-header {
|
|
|
+ color: $color--primary;
|
|
|
+ }
|
|
|
+ .history-message-info-content {
|
|
|
+ white-space: pre-wrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .msg-content-box {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 12px;
|
|
|
+ border: 1px solid #0091ff;
|
|
|
+ .limit-tip {
|
|
|
+ text-align: right;
|
|
|
+ height: 18px;
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.message-info {
|
|
|
height: 446px;
|
|
|
background-color: $color--white;
|