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

效果

1、右击弹出列表，同时保存消息id

2、选择转发成员，转发即可

注意：转发对象可为当前聊天对象，转发成功后需判断是否是存在转发当前聊天，是的话把消息数据显示

右击事件处理

//右击事件处理rightMessageClick(e, msgId, uid) {console.log('右击事件');this.withdrawMessageSmgId = msgId; //保存消息idthis.withdrawMessageuid = uid; //保存消息idthis.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"><templatev-if="item.conversationType ===1 ||item.conversationType ===0"><img class="msgHandleOutBox-right-centerItem01BoxImg"src="@/assets/icons/messages/memberLeft.png"alt=""></template><templatev-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"><templatev-if="item.conversationType ===1 ||item.conversationType ===0"><img class="msgHandleOutBox-right-centerItem01BoxImg"src="@/assets/icons/messages/memberLeft.png"alt=""></template><templatev-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"><imgclass="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 = 0522163922.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 = 0522163922.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 = [];},

如果觉得《vue聊天功能模块（十二）消息转发》对你有帮助，请点赞、收藏，并留下你的观点哦！