feat: 会话记录功能优化

src/api/business/chat.js

@@ -61,3 +61,11 @@ export function findAiChatList(params) {
     data: params
   })
 }
+
+export function findHistoryRecord(params) {
+  return request({
+    url: '/sysIMRecord/findHistoryRecord',
+    method: 'post',
+    data: params
+  })
+}

src/views/customerService/chatDetail.vue

@@ -80,7 +80,6 @@
         <ChatUserInfo v-if="chatUserInfo && chatUserInfo.user" :chat-user-info="chatUserInfo"/>
       </el-aside>
     </el-container>
-
   </div>
 </template>
 
@@ -140,6 +139,10 @@ export default {
   },
   methods: {
     handleGetUserInfo() {
+      chat.off(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
+      chat.off(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
+      chat.off(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated)
+      chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
       store.dispatch('GetUserInfo').then(res => { // 拉取user_info
         this.userId = res.data.data.id // note: perms must be a array! such as: ['GET /aaa','POST /bbb']
       }).catch((err) => {
@@ -283,6 +286,10 @@ export default {
         const promise = chat.logout()
         promise.then((imResponse) => {
           // console.log('==登出成功=', imResponse.data, this.conversationList) // 登出成功
+          chat.off(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
+          chat.off(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
+          chat.off(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated)
+          chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
           const chatItem = this.customerList[this.currentCustomerIndex]
           this.handleGetUserSign(chatItem.code)
         }).catch(function(imError) {
@@ -313,14 +320,14 @@ export default {
      * IM 登录
      */
     handleImLoin(userId, userSign) {
-      chat.on(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
-      chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
       console.log('====用户信息===', userId, userSign) // 登录成功
       this.closeLoading()
       const promise = chat.login({ userID: this.envText + userId, userSig: userSign })
       promise.then((imResponse) => {
         this.closeLoading()
         console.log('====登录成功===', imResponse.data) // 登录成功
+        chat.on(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
+        chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
         chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated)
         chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
         this.handleGetConversationList()

src/views/customerService/chatList.vue

@@ -10,7 +10,7 @@
           :value="item.code"/>
       </el-select>
       <el-button size="mini" class="filter-item" type="primary" @click="getList">查询</el-button>
-      <el-button size="mini" class="filter-item" @click="getList">重置</el-button>
+      <el-button size="mini" class="filter-item" @click="handleReset">重置</el-button>
     </div>
     <!-- 查询结果 -->
     <el-table
@@ -96,6 +96,13 @@ export default {
     handleClose() {
       this.showDetail = false
     },
+    handleReset() {
+      this.listQuery = {
+        page: 1,
+        limit: 20
+      }
+      this.getList()
+    },
     /**
      * 获取客服列表
      **/

src/views/customerService/components/chatUserInfo.vue

@@ -9,7 +9,6 @@
       <div class="info-content">{{ chatUserInfo.aiAssistant && chatUserInfo.aiAssistant.profile || '-' }}</div>
     </div>
     <el-divider />
-
     <div class="info flex">
       <div class="info-title">用户昵称：</div>
       <div class="info-content">{{ chatUserInfo.user && chatUserInfo.user.nickname || '-' }}</div>
@@ -20,10 +19,12 @@
     </div>
     <div class="info flex">
       <div class="info-title">备注：</div>
+      <div v-if="!chatUserInfo || !chatUserInfo.user || !chatUserInfo.user.remark">-</div>
+      <div v-if="chatUserInfo && chatUserInfo.user && chatUserInfo.user.remark">
         <el-input
           v-model="chatUserInfo.user.remark"
-        :autosize="{ minRows: 4, maxRows: 4}"
-        maxlength="30"
+          :autosize="{ minRows: 6, maxRows: 12}"
+          maxlength="100"
           type="textarea"
           show-word-limit
           style="border: 1px solid #DCDFE6; border-radius: 4px;margin: 0; width: 230px"
@@ -33,6 +34,8 @@
 
     </div>
 
+  </div>
+
 </template>
 
 <script>

src/views/customerService/components/historyMessageList.vue

 <template>
-  <div class="component-history"/>
+  <div class="component-history">
+    <div class="filter-container">
+      <el-date-picker
+        v-model="value2"
+        size="mini"
+        class="filter-item"
+        style="width: 400px; "
+        type="datetimerange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        format="yyyy-MM-dd HH:mm:ss"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        align="right"/>
+      <el-button size="mini" class="filter-item" type="primary" @click="handleSearch">确定</el-button>
+      <el-button size="mini" class="filter-item" @click="handleReset">重置</el-button>
+      <el-main style="background-color: rgb(238, 241, 246); padding: 0; border: 1px solid #eee">
+        <div class="chat-message">
+          <div class="chat-message-list" style="overflow:auto">
+            <div
+              v-if="isHasNextPage"
+              class="chat-message-list__more"
+              @click="handleGetList()">点击获取更多历史消息
+            </div>
+            <ul
+              class="chat-message-list__content"
+              infinite-scroll-disabled="disabled"
+              style="margin: 0; padding: 0">
+              <div
+                v-for="(messageItem, index) in messageList"
+                :key="messageItem.id"
+                :class="`chat-message-list__content__item_${index}`"
+                class="chat-message-list__content__item">
+                <ChatMessageItem :chat-message-item="messageItem" />
+              </div>
+            </ul>
+            <div class="hash" />
+          </div>
+        </div>
+      </el-main>
 
+    </div>
+  </div>
 </template>
 
 <script>
+import { findHistoryRecord } from '@/api/business/chat'
+import ChatMessageItem from './chatMessageItem'
 export default {
   name: 'HistoryMessageList',
+  components: { ChatMessageItem },
   props: {
     fromAccount: {
       type: String,
@@ -15,6 +59,97 @@ export default {
       type: String,
       required: true
     }
+  },
+  data() {
+    return {
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      value2: '',
+      messageList: [],
+      isHasNextPage: false
+    }
+  },
+  created() {
+    this.handleGetList()
+  },
+  methods: {
+    handleReset() {
+      this.listQuery = {
+        page: 1,
+        limit: 20
+      }
+      this.handleGetList()
+    },
+    handleSearch() {
+      if (this.value2.length < 2) {
+        this.$message.error('请选择时间')
+        return
+      }
+      console.log('===时间=', this.value2)
+      this.listQuery.page = 1
+      this.listQuery.startTime = this.value2[0]
+      this.listQuery.endTime = this.value2[1]
+      this.handleGetList()
+    },
+    handleGetList() {
+      const params = {
+        ...this.listQuery,
+        fromAccount: this.fromAccount,
+        toAccount: this.toAccount
+      }
+      findHistoryRecord(params).then(response => {
+        if (response && response.data && response.data.data && response.data.data.dataList) {
+          this.isHasNextPage = response.data.data.isHasNextPage
+          const list = []
+          response.data.data.dataList.map((item) => {
+            const messageItem = {
+              id: item.msgKey,
+              messageContent: item.msgContent,
+              fromUserId: item.fromAccount,
+              toAccount: item.toAccount,
+              avatar: item.fromAccountIcon,
+              msgType: item.fromAccount === this.toAccount ? 1 : 2
+            }
+            list.push(messageItem)
+          })
+          if (this.listQuery.page === 1) {
+            this.messageList = list
+            this.scrollToBottom(true)
+          } else {
+            this.messageList = list.concat(this.messageList)
+            this.scrollToBottom(false, list.length)
+          }
+          this.listQuery.page = this.listQuery.page + 1
+        } else {
+          this.isHasNextPage = false
+        }
+        console.log('===list ===', response.data.data.dataList)
+      }).catch(response => {
+        this.$notify.error({
+          title: '失败',
+          message: response.data.errmsg || '请求失败'
+        })
+      })
+    },
+    scrollToBottom(scrollToEnd, listLength) {
+      if (scrollToEnd) {
+        setTimeout(() => {
+          const hashElements = document.getElementsByClassName('hash')
+          if (hashElements && hashElements.length > 0) {
+            hashElements[0].scrollIntoView(true)
+          }
+        }, 250) // 延长触发时间，避免在App.vue的afterEnter之前执行
+      } else {
+        setTimeout(() => {
+          const hashElements = document.getElementsByClassName(`chat-message-list__content__item_${listLength - 1}`)
+          if (hashElements && hashElements.length > 0) {
+            hashElements[0].scrollIntoView(true)
+          }
+        }, 250)
+      }
+    }
   }
 }
 </script>
@@ -23,5 +158,53 @@ export default {
 .component-history {
   display: flex;
   flex-direction: column;
+  padding-bottom: 100px;
+  .filter-container {
+    position: fixed;
+    background: white;
+  }
+  .chat-message {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 130px);
+
+    .chat-message-list {
+      height: 100%;
+      width: 100%;
+      flex: 1;
+      padding-top: 10px;
+
+      .chat-message-list__more {
+        width: 100%;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #989CA8;
+        line-height: 40px;
+        text-align: center;
+      }
+
+      .chat-message-list__content {
+        width: 100%;
+
+        .chat-message-list__content__item {
+          width: 100%;
+          margin-bottom: 20px;
+        }
+      }
+    }
+
+    .chat-message-input {
+      border: 1px solid #DCDFE6;
+      border-radius: 4px;
+      background-color: #FFFFFF;
+      padding: 12px 0;
+
+      .chat-message-input__send {
+        text-align: end;
+        margin: 12px 12px 0 0;
+      }
+    }
+  }
 }
 </style>

src/views/customerService/components/messageDetail.vue

@@ -63,6 +63,7 @@ export default {
 
 <style lang="scss" scoped>
 .components-message {
+  padding: 10px;
 
 }