vue聊天功能模块（十二）消息转发

效果

1、右击弹出列表，同时保存消息id
2、选择转发成员，转发即可
注意：转发对象可为当前聊天对象，转发成功后需判断是否是存在转发当前聊天，是的话把消息数据显示

右击事件处理

 //右击事件处理
      rightMessageClick(e, msgId, uid) {
        console.log('右击事件');
        this.withdrawMessageSmgId = msgId; //保存消息id
        this.withdrawMessageuid = uid; //保存消息id
        this.withdrawMessageShowDropdown = true;
        this.MsgcontextmenuRight(e);
      },
      MsgcontextmenuRight(event) {
        event.preventDefault();
        this.$refs.contentMenuMessageRight.$refs.reference = event.target;
       
        this.$refs.contentMenuMessageRight.currentVisible = !this.$refs.contentMenuMessageRight.currentVisible;
      },

转发右击列表

 <Dropdown style="z-index:9999999!important;" ref="contentMenuMessageRight"
                                          trigger="click"
                                          v-show="withdrawMessageShowDropdown"
@on-click="(name) => dblclickRihtMsgListCommand(name)">
<DropdownMenu style="z-index:9999999!important;" slot="list">
   <template>
       <template v-if="user.userId ==withdrawMessageuid">
           <DropdownItem name="withdrawMessage">撤回</DropdownItem>
       </template>
       <DropdownItem id="handleOutOtherId" name="handleOutOther">转发</DropdownItem>
       <DropdownItem name="delMsg">删除</DropdownItem>
   </template>
   <DropdownItem name="cancelBack">取消</DropdownItem>
</DropdownMenu>
</Dropdown>

转发弹框

<!--转发选人弹框-->
                <div v-show="forwardObj.showForwardObjDialog" class="msgHandleOutCtl">
                    <div id="msgHandleOutBoxMoveId" class="msgHandleOutBoxMove">

                    </div>
                    <div id="msgHandleOutBoxId" class="msgHandleOutBox">

                        <div class="msgHandleOutBox-left">
                            <div class="msgHandleOutBox-left-up">
                                <div class="msgHandleOutBox-left-upBox">
                                    <el-input placeholder="请输入搜索内容" v-model="forwardObj.conversationName">
                                        <el-button slot="append" icon="el-icon-search"
                                                   @click="handleStartOutMsgqueryConversationRecordList"></el-button>
                                    </el-input>
                                </div>

                            </div>
                            <div class="msgHandleOutBox-left-down">
                                <div class="msgHandleOutBox-left-downContainer">
                                    <div class="msgHandleOutBox-left-downItem"
                                         v-for="(item,index) in forwardObj.forwardConversationRecordList" :key="index">
                                        <div class="msgHandleOutBox-left-downItem01">
                                            <div class="msgHandleOutBox-left-downItem01Box">
                                                <div class="msgHandleOutBox-left-downItem01BoxCtl">
                                                    <template
                                                            v-if="item.conversationType ===1 ||item.conversationType ===0">
                                                        <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                             src="@/assets/icons/messages/memberLeft.png"
                                                             alt="">
                                                    </template>
                                                    <template
                                                            v-if="item.conversationType ===2 || item.conversationType ===3">
                                                        <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                             src="@/assets/icons/messages/groupLeft.png"
                                                             alt="">
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="msgHandleOutBox-left-downItem02">
                                            <div class="msgHandleOutBox-left-downItem02Box">
                                                <div class="msgHandleOutBox-left-downItem02BoxCtl">
                                                    <span class="msgHandleOutBox-left-downItem02BoxCtlText">{{item.name}}</span>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="msgHandleOutBox-left-downItem03">
                                            <div class="msgHandleOutBox-left-downItem03Box">
                                                <div class="msgHandleOutBox-left-downItem03BoxCtl">
                                                    <!-- <el-button size="mini"
                                                                class="msgHandleOutBox-left-downItem03BoxCtlBtn"
                                                                type="primary"
                                                                @click="handleChooseConversationRecordList(item.conversationId,item)">
                                                         添加
                                                     </el-button>-->
                                                    <template v-if="item.chooseStatus ==1">
                                                        <img @click="handleChooseConversationRecordList(item.conversationId,item)"
                                                             class="msgHandleOutBox-hanChooseBoxImg"
                                                             src="@/assets/icons/messages/hanChoose.png"
                                                             alt="">
                                                    </template>
                                                    <template v-else>
                                                        <img @click="handleChooseConversationRecordList(item.conversationId,item)"
                                                             class="msgHandleOutBox-hanChooseBoxImg"
                                                             src="@/assets/icons/messages/noChoose.png"
                                                             alt="">
                                                    </template>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="msgHandleOutBoxRightId" class="msgHandleOutBox-right">
                            <div class="msgHandleOutBox-right-up">
                                <div class="msgHandleOutBox-right-upOne">
                                    <div class="msgHandleOutBox-right-upOne-img" @click="closeShowForwardObjDialog">
                                        <img class="msgHandleOutBox-right-upOne-imgStyle"
                                             src="@/assets/icons/messages/handleOutMsg/shoutRight.png" alt="">
                                    </div>

                                </div>
                                <div class="msgHandleOutBox-right-upTwo">
                                    <div class="msgHandleOutBox-right-one">
                                        <span class="msgHandleOutBox-right-oneText">分别转发给:</span>
                                    </div>
                                    <div class="msgHandleOutBox-right-two">
                                        <span v-if="forwardObj.chooseConversationRecordList.length ===0"
                                              class="msgHandleOutBox-right-twoText">未选择聊天</span>
                                        <span v-else class="msgHandleOutBox-right-twoText">已选择{{forwardObj.chooseConversationRecordList.length}}个聊天</span>
                                    </div>
                                </div>
                            </div>
                            <div class="msgHandleOutBox-right-center">
                                <div class="msgHandleOutBox-right-center-Container">
                                    <div class="msgHandleOutBox-right-centerItem"
                                         v-for="(item,index) in forwardObj.chooseConversationRecordList" :key="index">
                                        <div class="msgHandleOutBox-right-centerItem01">
                                            <div class="msgHandleOutBox-right-centerItem01Box">
                                                <div class="msgHandleOutBox-right-centerItem01BoxCtl">
                                                    <template
                                                            v-if="item.conversationType ===1 ||item.conversationType ===0">
                                                        <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                             src="@/assets/icons/messages/memberLeft.png"
                                                             alt="">
                                                    </template>
                                                    <template
                                                            v-if="item.conversationType ===2 || item.conversationType ===3">
                                                        <img class="msgHandleOutBox-right-centerItem01BoxImg"
                                                             src="@/assets/icons/messages/groupLeft.png"
                                                             alt="">
                                                    </template>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="msgHandleOutBox-right-centerItem02">
                                            <div class="msgHandleOutBox-right-centerItem02Box">
                                                <div class="msgHandleOutBox-right-centerItem02BoxName">
                                                    <span class="msgHandleOutBox-right-centerItem02BoxNameText">{{item.name}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="msgHandleOutBox-right-centerItem03">
                                            <div id="handleDeleteConversationRecordListId"
                                                 class="msgHandleOutBox-right-centerItem03Box"
                                                 @click="handleDeleteConversationRecordList(item.conversationId)">
                                                <div class="msgHandleOutBox-right-centerItem03BoxCtl"><img
                                                        class="msgHandleOutBox-right-centerItem03BoxImg"
                                                        src="@/assets/icons/messages/handleOutMsg/shoutRight.png"
                                                        alt="">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="msgHandleOutBox-right-down">
                                <div class="msgHandleOutBox-right-downOne">
                                    <template v-if="forwardObj.chooseConversationRecordList ==0">
                                        <div class="msgHandleOutBox-right-downOneBtnNoDatas">
                                            <span class="msgHandleOutBox-right-downOneBtnText">发送</span>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="msgHandleOutBox-right-downOneBtn" @click="handleSendForward">
                                            <span class="msgHandleOutBox-right-downOneBtnText">发送</span>
                                        </div>
                                    </template>


                                </div>
                                <div class="msgHandleOutBox-right-downTwo">
                                    <div class="msgHandleOutBox-right-downTwoBtn" @click="closeShowForwardObjDialog">
                                        <span class="msgHandleOutBox-right-downTwoBtnText">取消</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

右击确认

dblclickRihtMsgListCommand(name) {
        let msgId = this.withdrawMessageSmgId;
        switch (name) {
          case 'withdrawMessage'://撤回
            this.withdrawMessage(msgId);
            break;
          case 'handleOutOther'://转发
            this.handleStartOutMsg(msgId);
            break;
          case 'delMsg'://删除
            this.delMsg(msgId);
            break;
          case 'cancelBack'://取消
            this.withdrawMessageShowDropdown = false;
            break;
        }
      },

转发弹框，支持拖动

 //转发消息
      handleStartOutMsg(msgId) {
        this.handleStartOutMsgqueryConversationRecordList();
        this.forwardObj.showForwardObjDialog = true;
        $('.msgHandleOutCtl').Tdrag(
            {
              // scope: '#app',
              handle: '#msgHandleOutBoxMoveId',
            },
        );
        if (msgId != null && msgId != '') {
          console.log('当前选中消息对象' + msgId);
          let MesDatas = this.showMesDatas;
          for (let i = 0; i < MesDatas.length; i++) {
            if (JSON.stringify(MesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
              this.forwardObj.saveCourentMsgDataObj = MesDatas[i];//保存消息数据
              break;
            }
          }
        }
      },

获取转发弹框会话列表

 //获取转发弹框会话列表
      handleStartOutMsgqueryConversationRecordList(params) {
        params = params || null;
        MessageApi.queryConversationRecordList({
          userId: this.user.userId,//
          userType: 0,
          conversationName: this.forwardObj.conversationName
          ,
        }).then(res => {
          // 返回数据

          //定义保存会话数组对象
          let newConversationRecordList = res.obj;
          let choose = this.forwardObj.chooseConversationRecordList;
          // this.forwardObj.forwardConversationRecordList = res.obj;
          if (this.forwardObj.forwardConversationRecordList.length <= 0 && choose.length == 0) {
            for (let a = 0; a < newConversationRecordList.length; a++) {
              newConversationRecordList[a]['chooseStatus'] = 0;
            }

          } else {
            //原来保存的会话列表，有的可能有勾选
            // let oldConversationRecordList = this.forwardObj.forwardConversationRecordList;
            let oldConversationRecordList = choose;
            for (let a = 0; a < newConversationRecordList.length; a++) {
              //两者相对比，重置状态
              for (let i = 0; i < oldConversationRecordList.length; i++) {
                if (oldConversationRecordList[i].conversationId == newConversationRecordList[a].conversationId) {
                  newConversationRecordList[a]['chooseStatus'] = 1;
                } else {
                  newConversationRecordList[a]['chooseStatus'] = 0;
                }
              }
            }
          }
          this.forwardObj.forwardConversationRecordList = newConversationRecordList;
        }).catch(err => {
          // 异常情况
        });
      },

添加和删除转发对象

 //添加到转发
      handleChooseConversationRecordList(conversationId, item) {
        // 检测数组
        function isHasObj(arr, val) {
          var flag = false; // true为有 false为没有
          for (var i = 0; i < arr.length; i++) {
            if (JSON.stringify(arr[i]).indexOf(JSON.stringify(val)) != -1) {
              flag = true;
            }
          }
          return flag;
        }

        /* var keyIndex = isHasObj(this.forwardObj.chooseConversationRecordList, conversationId);
         if (keyIndex) {
           this.$message('已经存在');
         } else {
           this.forwardObj.chooseConversationRecordList.push(item);
         }*/
        let choose = this.forwardObj.chooseConversationRecordList;
        for (let i = 0; i < this.forwardObj.forwardConversationRecordList.length; i++) {
          if (this.forwardObj.forwardConversationRecordList[i].conversationId == conversationId) {
            if (this.forwardObj.forwardConversationRecordList[i].chooseStatus == 1) {
              this.forwardObj.forwardConversationRecordList[i].chooseStatus = 0;
              for (let j = 0; j < choose.length; j++) {
                if (choose[j].conversationId == conversationId) {
                  choose.splice(j, 1);
                }
              }
            } else {
              this.forwardObj.forwardConversationRecordList[i].chooseStatus = 1;
              this.forwardObj.chooseConversationRecordList.push(item);
            }
          }
        }
        this.forwardObj.chooseConversationRecordList = choose;

      },
      handleDeleteConversationRecordList(conversationId) {
        let choose = this.forwardObj.chooseConversationRecordList;
        for (let i = 0; i < this.forwardObj.forwardConversationRecordList.length; i++) {
          if (this.forwardObj.forwardConversationRecordList[i].conversationId == conversationId) {
            if (this.forwardObj.forwardConversationRecordList[i].chooseStatus == 1) {
              this.forwardObj.forwardConversationRecordList[i].chooseStatus = 0;
              for (let j = 0; j < choose.length; j++) {
                if (choose[j].conversationId == conversationId) {
                  choose.splice(j, 1);
                }
              }
            } else {
              this.forwardObj.forwardConversationRecordList[i].chooseStatus = 1;
            }
          }
        }
        this.forwardObj.chooseConversationRecordList = choose;
      },

转发开始

支持转发文字、表情、图片、文件、视频、语音

//转发消息开始
      handleSendForward() {
        let forwardDatas = this.forwardObj.chooseConversationRecordList;
        if (forwardDatas.length === 0) {
          this.$message.error('未选择转发对象');
          return;
        }
        // this.forwardObj.forwardObjSelfStatus = false;
        let msgData = this.forwardObj.saveCourentMsgDataObj;
        console.log('消息数据msgdata');
        console.log(msgData);
        //type:0：文字；1：图片；3：视频；5：文件
        //发送文字
        // this.forwardSendMessage()
        //发送图片
        // this.sendPhoto(res.obj.relativeUrl);

        //发送文件
        // this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);
        // this.forwardSendMessage(msgData);
        for (let i = 0; i < forwardDatas.length; i++) {
          let conObj = {};
          conObj.conversationId = forwardDatas[i].conversationId;
          conObj.conversationName = forwardDatas[i].name;
          conObj.conversationNumber = forwardDatas[i].number;
          conObj.conversationType = forwardDatas[i].conversationType;
          switch (msgData.type) {
            case 0: //文字
              console.log('转发文字');
              this.forwardSendMessage(conObj, msgData);
              this.closeShowForwardObjDialog();
              break;
            case 1: //图片
              console.log('转发图片');
              this.forwardSendPhoto(conObj, msgData.url);
              this.closeShowForwardObjDialog();
              break;
            case 5: //文件
              console.log('转发文件');
              let name = msgData.mss;
              this.forwardSendfile(conObj, msgData.url, name);
              this.closeShowForwardObjDialog();
              break;
            case 2: //语音信息
              console.log('转发语音信息');
              let currentUrlY = msgData.url;
              let nameY = '语音文件';
              this.forwardSendyuyin(conObj, currentUrlY, nameY);
              this.closeShowForwardObjDialog();
              break;

            case 3: //视频
              console.log('转发视频');
              break;
          }
        }

      },
      //转发---发送文本数据
      forwardSendMessage(conObj, msgObj) {
        if (conObj.conversationId === '' || conObj.conversationId === null || conObj.conversationId === undefined) {
          this.$Message.error('请先选择会话组');
          return;
        } else {
          var obj = {
            //conversationId  0:调度员 ；1：终端；2：群组 、会话组
            conversationId: conObj.conversationId,
            name: conObj.conversationName,
            number: conObj.conversationNumber,
            conversationType: conObj.conversationType,
          };
          let msgstring = msgObj.mss;
          let user_id = this.user.userId;
          if (obj.conversationType === 0) { //调度员         1:终端，-1：调度员，>1:群组
            obj.conversationType = -1;
            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
          }
          if (obj.conversationType == 1) {//终端
            obj.conversationType = 1;
            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
          } else if (obj.conversationType == 2) {//固定组
            obj.conversationType = 2;
            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
          } else if (obj.conversationType == 3) {//会话组
            obj.conversationType = 2;
            MessageApi.queryNickname({
              conversationId: conObj.conversationId,
              member_id: this.user.userId,
            }).then(res => {
              // 返回数据
              if (res.success) {
                if (res.obj) {
                  obj.NickName = res.obj;
                }
                console.log('发送检查22obj');
                console.log(obj);
                let msgstring = msgObj.mss;
                console.log(msgstring);
                if (msgstring.length >= 512) {
                  this.$Message.error('发送的消息过长');
                  return;
                } else if (msgstring.trim() == '') {
                  this.$Message.warning('请不要发送空白消息');
                  return;
                } else {
                  let user_id = this.user.userId;
                  DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
                }
              }
            }).catch(err => {
              // 异常情况
              // this.$Message.error('');
            });
          }
        }

      },
      //转发---发送图片数据
      forwardSendPhoto(conObj, url) {
        let obj = {
          conversationId: conObj.conversationId,
          name: conObj.conversationName,
          number: conObj.conversationNumber,
          conversationType: conObj.conversationType,
        };

        let user_id = this.user.userId;
        if (obj.conversationType === 0) { //调度员         1:终端，-1：调度员，>1:群组
          obj.conversationType = -1;
          DispatchmessageCtrl.sendPhoto(obj, url, user_id);
        }
        if (obj.conversationType == 1) {//终端
          obj.conversationType = 1;
          DispatchmessageCtrl.sendPhoto(obj, url, user_id);
        } else if (obj.conversationType == 2) {
          obj.conversationType = 2;
          DispatchmessageCtrl.sendPhoto(obj, url, user_id);
        } else if (obj.conversationType == 3) {
          obj.conversationType = 2;
          MessageApi.queryNickname({
            conversationId: conObj.conversationId,
            member_id: this.user.userId,
          }).then(res => {
            // 返回数据
            if (res.success) {
              if (res.obj) {
                obj.NickName = res.obj;
              }
              DispatchmessageCtrl.sendPhoto(obj, url, user_id);
            }
          }).catch(err => {
            // 异常情况
            // this.$Message.error('');
          });
        }
      },
      //转发---发送文件数据
      forwardSendfile(conObj, url, name) {
        console.log('转发---发送文件数据');
        let obj = {
          conversationId: conObj.conversationId,
          name: conObj.conversationName,
          number: conObj.conversationNumber,
          conversationType: conObj.conversationType,
        };
        let fileName = name;
        let user_id = this.user.userId;
        if (obj.conversationType === 0) { //调度员         1:终端，-1：调度员，>1:群组
          obj.conversationType = -1;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        }
        if (obj.conversationType == 1) {//终端
          obj.conversationType = 1;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        } else if (obj.conversationType == 2) {
          obj.conversationType = 2;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        } else if (obj.conversationType == 3) {
          obj.conversationType = 2;
          MessageApi.queryNickname({
            conversationId: conObj.conversationId,
            member_id: this.user.userId,
          }).then(res => {
            // 返回数据
            if (res.success) {
              if (res.obj) {
                obj.NickName = res.obj;
              }

              function getFileName(fileName) {
                // var fileName = 20190522163922.png;
                let first = fileName.lastIndexOf('.');//取到文件名开始到最后一个点的长度
                let namelength = fileName.length;//取到文件名长度
                let name = fileName.substring(0, first);//截取获得后缀名
                return name;
              }

              // let fileName = getFileName(name);
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);

            }
          }).catch(err => {
            // 异常情况
            // this.$Message.error('');
          });
        }

      },
      //转发---发送语音数据
      forwardSendyuyin(conObj, url, name) {
        console.log('转发---发送语音数据');
        console.log(url);
        let obj = {
          conversationId: conObj.conversationId,
          name: conObj.conversationName,
          number: conObj.conversationNumber,
          conversationType: conObj.conversationType,
        };
        let fileName = name;
        let user_id = this.user.userId;
        if (obj.conversationType === 0) { //调度员         1:终端，-1：调度员，>1:群组
          obj.conversationType = -1;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        }
        if (obj.conversationType == 1) {//终端
          obj.conversationType = 1;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        } else if (obj.conversationType == 2) {
          obj.conversationType = 2;
          DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
        } else if (obj.conversationType == 3) {
          obj.conversationType = 2;
          MessageApi.queryNickname({
            conversationId: conObj.conversationId,
            member_id: this.user.userId,
          }).then(res => {
            // 返回数据
            if (res.success) {
              if (res.obj) {
                obj.NickName = res.obj;
              }

              function getFileName(fileName) {
                // var fileName = 20190522163922.png;
                let first = fileName.lastIndexOf('.');//取到文件名开始到最后一个点的长度
                let namelength = fileName.length;//取到文件名长度
                let name = fileName.substring(0, first);//截取获得后缀名
                return name;
              }

              // let fileName = getFileName(name);
              DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);

            }
          }).catch(err => {
            // 异常情况
            // this.$Message.error('');
          });
        }

      },
      //关闭转发弹框
      closeShowForwardObjDialog() {
        this.forwardObj.showForwardObjDialog = false;
        this.forwardObj.chooseConversationRecordList = [];
      },