vue聊天功能模块（八）撤回消息实现

需求：撤回消息

思路

• 鼠标右键弹出 撤回 按钮
• 点击撤回按钮，拿到当前选中消息id，遍历消息列表拿到消息相关数据，主要是拿到用户名
• 通过接口撤回当前消息
• 在撤回成功回调中重新更新列表数据
• 到这里，有两个办法更新列表 办法一、可以通过http刷新消息列表
  办法二、也可以遍历本地消息，用元素替换掉当前消息即可
  办法二效果肯定好一些，毕竟不需要等http回调

一、鼠标右键弹出 撤回 按钮

消息列表

 <li class="tal" v-for="(item,index) in showMesDatas"                                        @contextmenu.prevent="rightMessageClick(item.mid,item.uid)"
 </li>

右击事件，追加撤回按钮

    //右击事件处理
      rightMessageClick(msgId, uid) {
        console.log('右击事件');
        this.withdrawMessageSmgId = msgId; //保存消息id
        if (uid === this.user.userId) {
          this.setMsg(msgId);
        } else {
          return;
        }
      },
      //撤回，删除，取消
      handelBackEvent(e, msgId) {
        let thisId = e.target.id;
        switch (thisId) {
          case 'delMsg': //删除消息
            this.delMsg(msgId);
            break;

          case 'withdrawMessage'://撤回消息
            this.withdrawMessage(msgId);

            break;
          case 'cancelBack'://取消
            $('#backMsg').remove();
            console.log('cancelBack');
            break;

        }
      },
      setMsg(num) {
        $('#backMsg').remove();
        var backMsghtml = '<div id="backMsg" style="position: relative;z-index: 99;margin-right: 15%;">' +
            '<span  id="delMsg" style="font-size: 5px;padding: 0;cursor:pointer ;">删除</span>' +
            '<span  id="withdrawMessage" style="font-size: 5px;padding: 0;cursor:pointer ;margin: auto 2px">撤回</span>' +
            '<span  id="cancelBack" style="font-size: 5px;padding: 0;cursor:pointer ;">取消</span>' +
            '</div>';
        $('#msg' + num).append(backMsghtml);

      },

二、撤回消息，界面处理注意

let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);这是通过websocket处理撤回

我们主要做的是删除消息，追加 let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' + '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>'; $('#msg' + msgId).append(htmld);

   //撤回消息
      withdrawMessage(msgId) {
        if (msgId != null && msgId != '') {
          function findshowMes(findshowMesDatas) {
            for (let i = 0; i < findshowMesDatas.length; i++) {
              if (findshowMesDatas[i].mid == msgId) {
                var msgInfo = findshowMesDatas[i];
                return msgInfo;
                break;
              }
            }
          }
          let msgInfo = findshowMes(this.showMesDatas);
          var MsgIndex;//消息编号
          var TargetType;//对象类型	Int	0-终端 1-群组 2-调度员 3-临时组
          var TargetInfo = {};//对象信息
          if (msgInfo.gid === 0) {
            MsgIndex = msgInfo.mid;
            TargetType = 0;
            TargetInfo = {
              UserID: msgInfo.uid,
              UserNumber: this.conversationNumber,
              UserName: msgInfo.una,
            };
          } else {
            MsgIndex = msgInfo.mid;
            TargetType = 1;
            TargetInfo = {
              GroupID: msgInfo.gid,
              GroupNumber: this.conversationNumber,
              GroupName: msgInfo.gna,
            };
          }
          let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);
          if (rspOBJ === 0) {
            // Dispatchmessage.backMsg(TargetInfo)      //处理消息撤回后的界面
            let deleteMesDatas = this.showMesDatas;
            let htmld = ' <div class="msgDrowBackContent" style="text-align: center">' +
                '<div><p></p></div><div>' + msgInfo.una + '撤回了一条消息' + '</div>';
            $('#msg' + msgId).append(htmld);
            for (let i = 0; i < deleteMesDatas.length; i++) {
              if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                deleteMesDatas.splice(i, 1);
                console.log(deleteMesDatas);
                this.withdrawMessageShow = false;
                this.showMesDatas = deleteMesDatas;
                // this.getTalkHistorys();
                $('#backMsg').remove();
                break;
              }
            }
          } else {
            // Dispatchmessage.backMsg(-1)
            // 失败后的处理,参数传入-1
            this.withdrawMessageShow = false;
            this.$message.warning('撤回失败');
            $('#backMsg').remove();
          }
        } else {
          $('#backMsg').remove();
        }

      },

来看看效果