多选模式2：消息批量删除

src/js/event/receiveDeleteMsg.js

@@ -4,7 +4,10 @@ export const onReceiveDeleteMsg = () => {
   return (msg) => {
     const messageData = useMessageStore()
     const sessionId = msg.body.sessionId
-    const deleteMsgId = msg.body.content
-    messageData.removeMsgRecord(sessionId, deleteMsgId)
+    const deleteMsgIds = msg.body.content
+
+    deleteMsgIds.split(',').forEach((item) => {
+      messageData.removeMsgRecord(sessionId, item)
+    })
   }
 }

src/views/message/MessageLayout.vue

@@ -33,7 +33,8 @@ import backgroupImage from '@/assets/svg/messagebx_bg.svg'
 import {
   msgChatPullMsgService,
   msgChatCreateSessionService,
-  msgChatQuerySessionService
+  msgChatQuerySessionService,
+  msgChatDeleteMsgService
 } from '@/api/message'
 import { groupInfoService, groupCreateService } from '@/api/group'
 import { MsgType } from '@/proto/msg'
@@ -1182,9 +1183,24 @@ const handleCancleMultiSelect = () => {
 //   }
 // }
 
-// const handleDeleteMessages = async () => {
-//   // 实现批量删除逻辑
-// }
+const handleBatchDeleteMsg = () => {
+  msgChatDeleteMsgService({
+    sessionId: selectedSessionId.value,
+    deleteMsgIds: [...multiSelectedMsgIds.value]
+  })
+    .then((res) => {
+      if (res.data.code === 0) {
+        multiSelectedMsgIds.value.forEach((item) => {
+          messageData.removeMsgRecord(selectedSessionId.value, item)
+        })
+        handleCancleMultiSelect()
+        ElMessage.success('消息已删除')
+      }
+    })
+    .catch((error) => {
+      console.error(error)
+    })
+}
 
 // const handleForwardSelected = () => {
 //   // 实现批量转发逻辑
@@ -1651,6 +1667,7 @@ const onShowRecorder = () => {
                   ref="inputMultiSelectRef"
                   :selectedCount="multiSelectedMsgIds.size"
                   @exit="handleCancleMultiSelect"
+                  @batchDelete="handleBatchDeleteMsg"
                 ></InputMultiSelect>
               </el-container>
               <el-container v-else-if="isShowRecorder">

src/views/message/components/InputMultiSelect.vue

@@ -4,6 +4,7 @@ import ForwardIcon from '@/assets/svg/forward.svg'
 import ForwardoboIcon from '@/assets/svg/forwardobo.svg'
 import DeletemsgIcon from '@/assets/svg/deletemsg.svg'
 import CancleIcon from '@/assets/svg/cancle.svg'
+import { ElMessageBox } from 'element-plus'
 
 const props = defineProps(['selectedCount'])
 const emit = defineEmits(['exit', 'forwardTogether', 'forwardOneByOne', 'batchDelete'])
@@ -27,6 +28,18 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('keydown', handleKeyDown)
 })
+
+const handleBatchDelete = () => {
+  if (props.selectedCount > 0) {
+    ElMessageBox.confirm(`确定删除选中的消息记录吗？`, '温馨提示', {
+      type: 'warning',
+      confirmButtonText: '确认',
+      cancelButtonText: '取消'
+    }).then(() => {
+      emit('batchDelete')
+    })
+  }
+}
 </script>
 
 <template>
@@ -46,7 +59,7 @@ onUnmounted(() => {
         <span>逐条转发</span>
       </div>
       <div class="function-item">
-        <div class="fun-icon">
+        <div class="fun-icon" @click="handleBatchDelete">
           <DeletemsgIcon></DeletemsgIcon>
         </div>
         <span>批量删除</span>

src/views/message/components/MessageItem.vue

@@ -856,7 +856,7 @@ const onSelectMenuMsgItem = async (label) => {
     case 'delete':
       msgChatDeleteMsgService({
         sessionId: props.sessionId,
-        deleteMsgId: msg.value.msgId // 服务器上删除用msg.value.msgId
+        deleteMsgIds: [msg.value.msgId] // 服务器上删除用msg.value.msgId
       })
         .then((res) => {
           if (res.data.code === 0) {