效果
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 = [];
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
