解决了会话人员列表搜索bug

第一次接收到新聊天消息不显示的bug
添加删除会话消息功能

src/api/chat/msg.js

@@ -43,9 +43,9 @@ export function msgFriend(msgId) {
   })
 }
 // 删除聊天消息管理;
-export function delMsg(msgId) {
+export function delMsg(toId) {
   return request({
-    url: '/chat/msg/'+msgId,
+    url: '/chat/msg/del/'+toId,
     method: 'delete'
   })
 }

src/assets/styles/my-common.scss

@@ -155,13 +155,11 @@
   .del-chat {
     position: absolute;
     right: 8px;
-    bottom: -8px;
-    width: 88px;
-    height: 38px;
     box-shadow: 0px 2px 8px 1px rgba(199, 203, 216, 0.5);
     background: rgba(255, 255, 255, 0.9);
     border-radius: 4px;
     border: none;
+    cursor: pointer;
   }
 }
 

src/views/liveChat/index.vue

@@ -43,7 +43,7 @@ const userIds = useUserStore();
 // main元素的初始高度，在onMounted时需要重新计算
 let height = ref(document.documentElement.clientHeight - 16 + "px;");
 const messageText = ref(""); //发送的内容
-const headerName = ref("");
+let headerName = ref("");
 const total = ref(0);
 const sendId = ref(""); //选择发送的文件id
 const isForward = ref(false);
@@ -75,7 +75,10 @@ const getMsgList = async () => {
   const resFriend = await msgFriend();
   personList.data = resFriend.rows;
   searchData.value = personList.data;
-  // console.log("会话列表获取完成！")
+  if(personList.data.length==0){
+    getchatUserState = false
+    return
+  }
   //圆点======
   sendCont.data.toId =
     personList.data[0]?.toId == userIds.uid
@@ -193,13 +196,16 @@ const clickPerson = (index, item) => {
   msgRecordEvent(sendCont.data.toId); 
 };
 //删除聊天
-const delClick = (msgId) => {
+const delClick = (toId) => {
   proxy.$modal
-    .confirm("删除后，将清空该聊天的消息记录")
+    .confirm("删除后，将清空与该人员的所有会话记录，确定吗？")
     .then(function () {
-      return delMsg(msgId);
+      return delMsg(toId);
     })
     .then(() => {
+      chatRecords.data=[]
+      headerName.value=''
+      clickPersonId.value=0
       getMsgList();
       proxy.$modal.msgSuccess("删除成功");
     });
@@ -210,21 +216,22 @@ const delClick = (msgId) => {
 // isnew：false或null：自己添加的 true：其他人员发起的新消息会话
 const changeMsg = async (val,isnew) => {
   const resInfo = await userInfo(val.id);
+  resInfo.fromId = val.id
+  resInfo.content = val.content
+  resInfo.file = val.file
   if (searchData.value.length > 0) {
     //判断是否有相同的聊天人
     const filerData = searchData.value.filter(
       (vPerson) =>
         (vPerson.toId && vPerson.toId == resInfo.userId) ||
-        (vPerson.userId && vPerson.userId == resInfo.userId)
+        (vPerson.fromId && vPerson.fromId == resInfo.userId)
     );
     if (filerData.length > 0) {
       // 存在就算了，无需提示
       //return ElMessage({ message: "该聊天已存在", type: "error" });
     } else {
-      if(isnew!=null){
-         resInfo.showCircel = true
-         resInfo.content = val.content
-         resInfo.file = val.file
+      if(isnew!=null){        
+        resInfo.showCircel = true        
       }
       searchData.value.unshift(resInfo);
     }
@@ -235,8 +242,12 @@ const changeMsg = async (val,isnew) => {
   if(isnew==null){
     // 自己添加的会话人员，默认选中进行对话
     sendCont.data.toId = resInfo.userId;
-    // msgRecordEvent(sendCont.data.toId);
     headerName.value = resInfo.nickName;
+  }else if(searchData.value.length==1){
+    sendCont.data.toId = resInfo.userId;
+    headerName.value = resInfo.nickName;
+    clickPersonId.value = val.id
+    clickPerson(0,searchData.value[0]);
   }
 };
 
@@ -429,11 +440,16 @@ downLoadfile(file)
 //搜索的点击事件
 const SearchChat = () => {
   if (searchText.value) {
-    searchData.value = personList.data.filter((i) => {
-      return i.toName == searchText.value;
+    searchData.value.map((user) => {
+      let charUserName = user?.toId == userIds.uid  ? user.fromName : user.toName;
+      if(charUserName==null) charUserName = user.nickName
+      if(charUserName.indexOf(searchText.value.replace(/ /gi,''))>-1) user['display'] = 1
+      else user['display'] = 0
     });
   } else {
-    // getMsgList();
+    searchData.value.map((user) => {
+      user['display'] = 1
+    });
   }
 };
 //转聊天记录的/n为实际样式
@@ -518,14 +534,15 @@ onMounted(() => {
         :key="index"
         @click="clickPerson(index, item)"
       >
+      <template v-if="item.display==null || item.display==1">
         <img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
-        <!-- <button
+        <button
           class="del-chat"
           v-if="clickPersonIndex == index"
-          @click="delClick(item.msgId)"
+          @click="delClick(item.toId == userIds.uid?item.fromId:item.toId)"
         >
-          删除聊天
-        </button> -->
+          删除会话
+        </button>
         <div>
           <!-- <img :src="item.avatar?item.avatar : chat" class="head-sculpture" /> -->
           <img
@@ -569,6 +586,7 @@ onMounted(() => {
           class="yuandian"
           v-if="item.showCircel && $route.path == '/index' && clickPersonId!==item.fromId"
         ></span>
+      </template>
       </div>
     </div>
     <!-- 右侧聊天 -->