需求：聊天模块，可以实现发送文字、表情、图片、文件
接收语音、视频、地图消息数据
语音通话、视频通话
思路：发送消息数据，通过成功回调，聊天框新增数据
效果
分为三部分
- 左侧会话列表
- 中部聊天列表
- 右侧群组成员列表
先来看看效果
抽出聊天部分模块悬浮效果
布局：左边固定大小，中间宽75%，可右展开
聊天布局：左消息，撤回消息，右消息，用text-align控制
布局
<!--聊天界面-->
<div class="messagesBox-BigRight-down80">
<div class="showHisMsgs">
<span @click="getTalkHistorys">{{messagesHisMsgs}}</span>
</div>
<!--聊天消息数据-->
<div class="messagesBox-BigRight-down80-contain" id="msg_display">
<!--左消息-->
<ul>
<li class="tal" v-for="(item,index) in showMesDatas"
@contextmenu.prevent="rightMessageClick(item.mid,item.uid)"
@click="downLownFiles($event,item.url)">
<!--头像-->
<div v-show="item.type !='99'"
:class="item.uid ===user.userId?'RightmsgAvaterBox':'LeftmsgAvaterBox'">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>
<!--用户名、时间-->
<div v-show="item.type !='99'" class="msgTimgAndName">
<div v-if="item.uid ===user.userId">
<div class="RightmsgTimeText">
<span class="msgTime"> {{CurentTime(item.time)}} </span>
<span class="msgUser">{{item.una}} </span>
<!--<div class="msgAvaterBox">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>-->
</div>
</div>
<div v-else>
<div class="LeftmsgTimeText">
<!-- <div class="msgAvaterBox">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>-->
<span class="msgUser">{{item.una}} </span>
<span class="msgTime"> {{CurentTime(item.time)}} </span>
</div>
</div>
</div>
<!--消息-->
<div :id="'msg'+item.mid"
@click="handelBackEvent($event,item.mid)"
:class="item.uid ===user.userId?'RightmsgBoxOut':'LeftmsgBoxOut'">
<div v-html="item.temporaryMes"></div>
<div v-html="backMsghtml"></div>
</div>
</li>
</ul>
</div>
<!--撤回消息-->
<div v-show="withdrawMessageShow ===true">
<div class="withdrawMessageStyle">
<span @click="withdrawMessage" class="cursorText">撤回</span>
</div>
</div>
</div>
样式
//消息-聊天右侧聊天界面样式
data(){
return{
messagesBoxSyle: {
minWidth: '75%',
minHeight: '80vh',
// 'background-color': ' #b8e026'
},
//聊天或者文件
messagesOrFiles: 'messages',
messagesOrFilesActiveIndex: 'messages',
messagesSelectHanderMenu: 'messagesSelectHanderMenu',//选中文件样式
messagesNoSelectHanderMenu: 'messagesNoSelectHanderMenu',//选中文件样式
//展开按钮定位
messagesUnfoldSyle: {
width: '35px',
height: '80px',
backgroundColor: '#DADADA',
borderRadius: '10px 0 0 10px',
position: 'absolute',
top: '50%',
right: '19%',
'z-index': '100',
cursor: 'pointer',
transform: 'translateY(-50%)',
},
//发送按钮样式
messagesBoxBigRightBotton: {
position: 'absolute',
bottom: '6%',
right: '20%',
},
}
//头像
.LeftmsgAvaterBox {
width: 52px;
height: 51px;
background-color: #5a64c1;
border-radius: 50%;
float: left;
}.RightmsgAvaterBox {
width: 52px;
height: 51px;
background-color: #5a64c1;
border-radius: 50%;
float: right;
}
//聊天框
.LeftmsgBoxOut {
text-align: left;
}
.RightmsgBoxOut {
text-align: right;
}
表情处理
用图片匹配,显示到聊天列表的时候通过文字匹配替换即可
<!-- 表情区域 -->
<div class="browBox" v-if="emojiListDialogVisible">
<ul>
<li style="display: flex" v-for="(item,index) in faceList1" :key="index"
@click="ChooseEmojis(index,item.name)">
<img style="width: 50px;height: 50px;display: flex" :src="item.url" alt="">
</li>
</ul>
</div>
import faceList from '../plugins/faceList';
data(){
return{
faceList1: faceList,
}
选中表情
//选中表情
ChooseEmojis(index, name) {
for (let i in this.faceList1) {
if (index == i) {
this.messagesContents += name;
}
}
},
聊天区域
通过v-html显示数据，处理文字、图片、文件等
<!--消息-->
<div :id="'msg'+item.mid"
@click="handelBackEvent($event,item.mid)"
:class="item.uid===user.userId?'RightmsgBoxOut':'LeftmsgBoxOut'">
<div v-html="item.temporaryMes"></div>
<div v-html="backMsghtml"></div>
</div>
data(){
return{
showMesDatas: [],
}
},
method:{
//选中会话，渲染聊天列表数据
/**
*
* @index index 当前选中index
* @param id 会话id
* @param name 会话名称
* @param number 会话号码
* @type type
*/
selectThisSubIntoTmpTalkList(index, id, name, number, type) {
this.messagesContents = '';//切换会话时，清空当前输入框
//阅读消息，让红点隐藏
let redConversationRecordList = this.conversationRecordList;
for (let item = 0; item < redConversationRecordList.length; item++) {
//默认都为false,阅读消息时，改变状态，然后更新
let obj = redConversationRecordList[item];
for (let i in obj) {
redConversationRecordList[index].newMsgStatus = false;
}
}
this.conversationRecordList = redConversationRecordList;
this.conversationId = id;
let tempTalkList = {};
let tak = {};
if (type == 0) {
return;
}
var firstName = name.substr(0, 1);
var lastName = name.substr(1, 3);
if (tempTalkList[id] == null) {
tempTalkList[id] = {
id: id,
name: name,
number: number,
type: type,
};
} else {
delete tempTalkList[id];
}
//样式切换
this.clickIndex = index;
//清空聊天对象数据
this.showMesDatas = '';
/*查看历史消息*/
//清空聊天对象数据
this.messagesHisMsgs = '查看历史消息';
var params = {
userId: this.user.userId,
userType: 0, //0-调度员，1-终端
};
for (var item in tempTalkList) {
if (tempTalkList[item].id == null) {
return false;
}
tak = {
conversationId: tempTalkList[item].id,
name: tempTalkList[item].name,
number: tempTalkList[item].number,
};
params.conversationId = tempTalkList[item].id;
if (tempTalkList[item].type == 1) { //终端
params.conversationType = 1;
this.conversationType = 1;
this.conversationId = tempTalkList[item].id;
this.conversationName = tempTalkList[item].name;
this.conversationNumber = tempTalkList[item].number;
tak.conversationType = 1;
this.toMsgPage(tak);
//当前选中终端，则不渲染成员列表
this.courentGroupMerbers = '';
this.merberListShow = false;
//隐藏展开按钮
this.messagesUnfoldCtl = false;
this.messagesBoxSyle.minWidth = '100%';
this.messagesUnfoldSyle.right = '0';
this.messagesBoxBigRightBotton.right = '2%';
} else if (tempTalkList[item].type == 2) { //群组
// this.getMessageNewsDatas()
params.conversationType = 2;
this.conversationType = 2;
tak.conversationType = 2;
//查询消息数据
this.toMsgPage(tak);
//查询成员列表数据
this.queryGroupMember(tempTalkList[item].id);
//存放当前组id
this.courentGroupId = tempTalkList[item].id;
this.conversationId = tempTalkList[item].id;
this.conversationName = tempTalkList[item].name;
this.conversationNumber = tempTalkList[item].number;
this.merberListShow = true;
this.messagesUnfoldCtl = true;
this.messagesBoxSyle.minWidth = '75%';
this.messagesUnfoldSyle.right = '19%';
this.messagesBoxBigRightBotton.right = '20%';
//释放展开按钮
this.messagesUnfoldCtl = true;
// return tak
}
}
this.getMessageFileDatas();
},
//查看历史记录
getTalkHistorys() {
if (this.hisIndex == '') {
return;
}
var params = {
tempGroupId: this.conversationId,
gid: this.conversationId,
uid: this.conversationId,
did: this.user.userId,
index: this.hisIndex,
ps: 10,
flag: 2,
// MsgType:5
};
if (this.conversationType == 1) {
params.type = 3;
} else if (this.conversationType > 1) {
params.type = 0;
}
MessageApi.queryHisMsg(params).then(res => {
// 返回数据
var msgHis = res.obj.list;
console.log(msgHis);
//PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));
if (msgHis.length > 0) {
this.showMsg(msgHis, 0);
} else {
this.messagesHisMsgs = '没有更多历史消息';
}
}).catch(err => {
// 异常情况
});
},
//展示消息
showMsg(msgList, flag) {
var html = '';
let newMesList = msgList;
let newMesListA = [];
// for (let i = msgList.length - 1; i >= 0; i--) {
for (let i = 0; i < msgList.length; i++) {
newMesListA.push(this._hisDeal(msgList[i]));
}
for (let a = 0; a < newMesList.length; a++) {
newMesList[a]['temporaryMes'] = newMesListA[a];
}
//展示聊天记录
if (flag == 1) {
if (newMesList.length > 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.push(newMesList[0]);
break;
}
}
setTimeout(() => {
var messageShowDiv = document.getElementById('msg_display');
messageShowDiv.scrollTop = messageShowDiv.scrollHeight;
});
this.preIndex = msgList[0].mid;
}
//初始化数据，默认展示最近一条数据
else if (flag == -1) {
this.showMesDatas = newMesList;
let a = newMesList.length;
for (let i = 0; i < a; i++) {
console.log('newMesList[a].time');
console.log(newMesList[0].time);
break;
}
}
//展示历史记录
else if (flag == 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.unshift(newMesList[i]);
}
this.hisIndex = msgList[msgList.length - 1].mid;
}
},
}
撤回消息
//右击事件处理
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);
},
//删除消息(刪除当前列表数据，并没有删除数据库）
delMsg(msgId) {
if (msgId != null && msgId != '') {
console.log('当前选中消息对象' + msgId);
let deleteMesDatas = this.showMesDatas;
for (let i = 0; i < deleteMesDatas.length; i++) {
if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
deleteMesDatas.splice(i, 1);
this.withdrawMessageShow = false;
$('#backMsg').remove();
this.showMesDatas = deleteMesDatas;
$('#backMsg').remove();
break;
}
}
}
},
//取消消息
cancelBack(msgId) {
},
//撤回消息
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;
console.log(deleteMesDatas);
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();
}
},
发送文字
listen(event) {
if (event.shiftKey && event.keyCode === 13) {
console.log('33换行');
/* this.sendMessage(); // 发送文本
event.preventDefault(); // 阻止浏览器默认换行操作*/
} else if (event.keyCode === 13) {
event.preventDefault(); // 阻止浏览器默认换行操作*/
this.sendMessage(); // 发送文本
}
},
sendMessage() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
// let msgstring = "8998"
let msgstring = this.messagesContents;
if (msgstring.length >= 512) {
this.$Message.error('发送的消息过长');
return;
} else if (msgstring.trim() == '') {
this.$Message.warning('请不要发送空白消息');
return;
} else {
console.log('msgstring');
console.log(msgstring);
let user_id = this.user.userId;
DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
}
}
},
发送图片文件
<!--图片-->
<div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/photo.png" alt=""
@click="openUploadImgDialogVisible">
<el-dialog
title="请选择图片"
:visible.sync="uploadImgDialogVisible"
width="30%"
>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:auto-upload="false"
ref='uploadPhoto'
:multiple="false"
:on-preview="handlePictureCardPreview"
:before-upload="beforeUploadImg"
:on-change="changeUploadImg"
:on-remove="handleRemove"
@clearFiles="clearFilesPhoto"
accept="image/jpeg,image/png">
<i class="el-icon-plus"></i>
</el-upload>
<el-button @click="cancelUploadPhoto">取 消</el-button>
<el-button type="primary" @click="submitUpload">发送</el-button>
</el-dialog>
</div>
<!--文件-->
<div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/files.png" alt=""
@click="openUploadFilesDialogVisible">
<el-dialog
title="请选择文件"
:visible.sync="uploadFilesDialogVisible"
width="30%"
>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
ref='uploadFiles'
:multiple="false"
drag
:on-preview="handlePictureCardPreview"
:on-change="changeUploadFiles"
:on-remove="handleRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
<el-button @click="cancelUploadFile">取 消</el-button>
<el-button type="primary" @click="submitUploadFile">发送</el-button>
</el-dialog>
</div>
//上传图片
openUploadImgDialogVisible() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
this.uploadImgDialogVisible = true;
}
}, //上传文件
openUploadFilesDialogVisible() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
this.uploadFilesDialogVisible = true;
}
},
sendMessage() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
// let msgstring = "8998"
let msgstring = this.messagesContents;
if (msgstring.length >= 512) {
this.$Message.error('发送的消息过长');
return;
} else if (msgstring.trim() == '') {
this.$Message.warning('请不要发送空白消息');
return;
} else {
console.log('msgstring');
console.log(msgstring);
let user_id = this.user.userId;
DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
}
}
},
//发送图片文件---------
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
changeUploadImg(file) {
console.log(file);
//保存消息图片
// this.messageImgPost = file.raw;
const isJPG = file.raw.type === 'image/jpeg';
const isPNG = file.raw.type === 'image/png';
// const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
//执行清空图片
// this.$refs.uploadPhoto.clearFiles();
// 取消时在文件列表中删除该文件
this.$refs.uploadPhoto.handleRemove(file);
return (isJPG || isPNG);
} else {
this.newArrayImg.push(file.raw);
this.messageImgPost = this.newArrayImg;
console.log('this.messageImgPost');
console.log(this.messageImgPost);
}
},
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
changeUploadFiles(file) {
this.newArrayFiles.push(file.raw);
this.messageFilesPost = this.newArrayFiles;
console.log('this.messageFilesPost');
console.log(this.messageFilesPost);
},
//取消上传图片
cancelUploadPhoto() {
this.uploadImgDialogVisible = false;
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
},
//取消上传文件
cancelUploadFile() {
this.uploadFilesDialogVisible = false;
//执行清空文件列表
this.$refs.uploadFiles.clearFiles();
},
//上传发送图片
beforeUploadImg(file) {
console.log('file');
console.log(file);
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
// const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
}
return isJPG && isPNG;
},
//上传发送多图片
submitUpload() {
let messageImgPostArray = this.messageImgPost;
if (messageImgPostArray.length > 0) {
for (let i = 0; i < messageImgPostArray.length; i++) {
let formData1 = new FormData();
formData1.append('pocFile', messageImgPostArray[i]);
MessageApi.upload(formData1).then(res => {
// 发送图片
this.relativePhotoUrl = res.obj.relativeUrl;
this.sendPhoto(res.obj.relativeUrl);
this.handleRemove();
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
//清空保存图片数组
this.newArrayImg = [];
console.log(this.messageImgPost);
}).catch(err => {
// 异常情况
this.$message.error('发送失败!');
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
});
}
} else {
this.$Message.warning('请先选择图片');
}
},
//上传发送文件
submitUploadFile() {
let messageFilesPostArray = this.messageFilesPost;
console.log('messageFilesPostArray');
console.log(messageFilesPostArray);
if (messageFilesPostArray.length > 0) {
for (let i = 0; i < messageFilesPostArray.length; i++) {
let formData = new FormData();
formData.append('pocFile', messageFilesPostArray[i]);
MessageApi.upload(formData).then(res => {
this.relativePhotoUrl = res.obj.relativeUrl;
this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);
this.handleRemove();
//执行清空文件
this.$refs.uploadFiles.clearFiles();
this.newArrayFiles = [];
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
}).catch(err => {
// 异常情况
this.$message.error('发送失败!');
//执行清空文件
this.$refs.uploadFiles.clearFiles();
this.newArrayFiles = [];
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
});
}
} else {
this.$Message.warning('请先选择文件');
}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
clearFilesPhoto() {
console.log('clearFilesPhoto');
},
handlePictureCardPreview(file) {
this.messageImgPost = file.url;
this.dialogVisible = true;
},
handlePreview(file) {
console.log(file);
}
,
//发送图片
sendPhoto(url) {
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
let user_id = this.user.userId;
DispatchmessageCtrl.sendPhoto(obj, url, user_id);
}
处理聊天记录
//处理聊天记录
_hisDeal(msg) {
let html = '';
let emojiList = [
'[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',
'[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',
'[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',
'[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',
'[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',
'[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',
'[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',
'[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',
'[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',
'[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',
'[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',
'[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',
'[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'];
var type = parseInt(msg.type);
let nginxIp = this.user.ip;
let port = 1603;
let msgType = 0;
let MsgNum = 0;
function returnHtml(isMine) {
var bPoint, img, img_loc, yuyinUrl, times, durationHt, j, fileUrl;
var locPic = './images/message/msg_loc.png';
switch (type) {
case 0: //文字
var str = msg.mss.toString();
for (var i = 0; i < str.length; i++) {
var x = 0, y = 0, z = 0;
for (var j = 0; j < str.length; j++) {
if (str[j] === '[') {
x = j;
}
if (str[j] === '/') {
y = j;
}
if (str[j] === ']') {
z = j;
}
if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {
str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);
}
}
}
for (let i = 0; i < emojiList.length; i++) {
let emojiStr = emojiList[i];//[发怒];
for (var j = 0; j < str.length; j++) {
/*http://192.168.0.201:1603/Airport/images/emoji/emoji_*/
str = str.replace(emojiStr,
'<img class="replaceMegImg" src="./images/emoji/emoji_' + i + '.png" alt="">');
}
}
html += '<span class="msgContent" style="text-align:left;word-break: break-all;color: #ffffff;" >' + str +
'</span>';
break;
case 1: //图片
html += '<span ><img class="msgPhotoContent" src="http://' + nginxIp + ':' + msg.url +
'" data-menu="img" /></span>';
// this.temporaryMes = html
break;
case 3: //视频
html +=
'<span class="msgContent" data-menu="selMsg" ><video preload="meta" οnerrοr="" src="http://' +
nginxIp + ':' + msg.url + '" data-menu="video" width="170px"/></span>';
break;
case 104://位置消息 //4地图不考虑
if (ScsMapConstantTemp.mapType === 'openLayers') {
img = '';
img_loc = '<img src="' + locPic + '" style="width: 16px" />';
} else {
bPoint = GpsConvert.gcj02tobd09(msg.lng / 100000, msg.lat / 100000);
img = '<img src="http://api.map.baidu.com/staticimage/v2?ak=kiLRYtUm1fi0mOlN8kQZnaIW¢er=' +
bPoint.lng + ',' + bPoint.lat + '&markers=' + bPoint.lng + ',' + bPoint.lat +
'&width=300&height=200&zoom=18"/>';
img_loc = '';
}
html +=
// '<span class="msgMapContent" data-menu="loc" data-data="'+msg.lng+','+msg.lat+'">'+img+msg.loc+img_loc+'</span>';
'<span class="msgMapContent" >地图</span>';
break;
case 5:
var index = msg.url.indexOf('/');
var str0 = msg.url.substring(0, index);
str0 = parseInt(str0) + 1 + '';
var str1 = msg.url.substring(index);
var Url = str0 + str1;
msg.url = Url;
html +=
'<span id="downLoadMsg" class="msgFileContent" data-menu="selMsg" data-data="' + MsgNum + ',' +
msgType +
'"<a href="http://' + nginxIp + ':' + msg.url +
'"><img class="msgFilesImg" src="./images/message/filesImg.png" alt=""><span class="downFiles">文件下载</span></a></span>';
break;
case 99:
let cls = 'tar';
html = ' <div class="msgDrowBackContent" style="text-align: center">' +
'<div><p></p></div><div>' + msg.una + '撤回了一条消息' + '</div>';
break;
}
}
function ScsMapConstantTemp() {
};
ScsMapConstantTemp.mapType = 'baidu'; //"baidu" or "openLayers"
/* if(typeof openLayersURL!="undefined"){
ScsMapConstantTemp.openLayersURL=openLayersURL;
}*/
if (msg.uid == this.user.userId) {
returnHtml(true);
} else {
returnHtml(false);
}
return html;
},
展示消息
//展示消息
showMsg(msgList, flag) {
var html = '';
let newMesList = msgList;
let newMesListA = [];
for (let i = 0; i < msgList.length; i++) {
newMesListA.push(this._hisDeal(msgList[i]));
}
for (let a = 0; a < newMesList.length; a++) {
newMesList[a]['temporaryMes'] = newMesListA[a];
}
//展示聊天记录
if (flag == 1) {
if (newMesList.length > 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.push(newMesList[0]);
break;
}
}
setTimeout(() => {
var messageShowDiv = document.getElementById('msg_display');
messageShowDiv.scrollTop = messageShowDiv.scrollHeight;
});
this.preIndex = msgList[0].mid;
}
//初始化数据，默认展示最近一条数据
else if (flag == -1) {
this.showMesDatas = newMesList;
let a = newMesList.length;
for (let i = 0; i < a; i++) {
console.log('newMesList[a].time');
console.log(newMesList[0].time);
break;
}
}
//展示历史记录
else if (flag == 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.unshift(newMesList[i]);
}
this.hisIndex = msgList[msgList.length - 1].mid;
}
},
完整代码
html
<div class="messagesBox">
<!--左侧-->
<div class="messagesBox-left">
<!--搜索框部分-->
<div class="messagesBox-left-top">
<div class="messagesBox-left-topOne">
<span class="messagesBox-left-text">会话</span>
</div>
<div class="messagesBox-left-topTwo">
<!-- <input class="messagesBox-left-topTwo-input" v-model="form.name" placeholder="输入搜索内容"></input>-->
<el-input placeholder="输入搜索内容" v-model="messgaeSearchName" class="input-with-select">
<el-button slot="append" icon="el-icon-search"
@click="handleMessgaeSearchName"></el-button>
</el-input>
</div>
<div class="messagesBox-left-topThree">
<div class="messagesBox-left-topThreeBtn" @click="preConversationRecord">
<div class="messagesBox-left-topThreeBtn-controller">
<img src="@/assets/icons/messages/addLeft.png" alt="">
</div>
</div>
</div>
</div>
<!--部门消息数据部分-->
<div class="messagesBox-left-group">
<!--数据1-->
<div class="messagesBox-left-group-datas" v-for="(item,index) in conversationRecordList"
:key="item.conversationId"
:class="{'select-item':index === clickIndex}"
>
<div class="messagesBox-left-group-datas-ctl">
<!--点击改变样式，同时渲染聊天列表数据-->
<div class="messagesBox-left-group-left"
@click="selectThisSubIntoTmpTalkList(index,item.conversationId, item.name, item.number, item.conversationType)"
>
<div class="messagesBox-left-group-leftContainer">
<!--除了数字外，设置is-dot属性，它接受一个Boolean。-->
<el-badge :is-dot="item.newMsgStatus" class="item"
>
<div class="messagesBox-left-group-leftContainerOne">
<template v-if="item.conversationType ===1">
<img class="groupImg" src="@/assets/icons/messages/memberLeft.png"
alt="">
</template>
<template v-if="item.conversationType ===2">
<img class="groupImg" src="@/assets/icons/messages/groupLeft.png"
alt="">
</template>
</div>
</el-badge>
<div class="messagesBox-left-group-leftContainerTwo">
<div class="messagesBox-left-group-leftContainerControl">
<div class="messagesBox-left-group-leftContainText">
<span class="messagesBox-left-group-leftContainText-one">{{item.name}}</span>
<!-- <span class="messagesBox-left-group-leftContainText-two">下午5点开会</span>-->
</div>
</div>
<div class="messagesBox-left-group-msgString">
<div class="messagesBox-left-group-leftContainText-msgString">
<span class="messagesBox-left-group-leftContainText-msgString">
<span>
{{item.msgString}}
</span>
</span>
<!-- <span class="messagesBox-left-group-leftContainText-two">下午5点开会</span>-->
</div>
</div>
</div>
</div>
</div>
<div class="messagesBox-left-group-right">
<!--定位-->
<div class="messagesBox-left-group-rightBox">
<el-dropdown trigger="click"
@command="(command) => handleMessageCommand(command,item.conversationId,item.conversationType)">
<span>
<img src="@/assets/icons/messages/moreLeft.png" alt="">
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="deleteConversation">移除会话</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
</div>
</div>
<!--右侧-->
<div class="messagesBox-BigRight">
<!--右侧顶栏-->
<div class="messagesBox-BigRight-top">
<div class="messagesBox-BigRight-topLeft">
<span v-if="merberListShow === true && courentGroupMerbers !=''">{{conversationName}}（{{courentGroupMerbers.length}}）</span>
</div>
<div class="messagesBox-BigRight-topRight">
<div :class="[ messagesOrFiles === 'messages' ? messagesSelectHanderMenu : messagesNoSelectHanderMenu]"
@click="messagechangeNav('messages')">
<span @click="getMessageNewsDatas">聊天</span>
</div>
<!--class="messagesBox-BigRight-topRight-chat-two"-->
<div :class="[ messagesOrFiles === 'files' ? messagesSelectHanderMenu : messagesNoSelectHanderMenu]"
@click="messagechangeNav('files')">
<span class="messageFile" @click="getMessageFileDatas">文件</span>
</div>
<div class="messagesBox-BigRight-topRight-setting">
<!--设置图标-->
<div class="messagesBox-BigRight-topRight-settingIcon">
<img src="../assets/icons/messages/setting.png" alt="">
</div>
</div>
</div>
</div>
<!--右侧下部分聊天区域-->
<div v-show="messagesOrFilesActiveIndex === 'messages'" class="messagesBox-BigRight-down">
<!-- <div :class="messagesBoxClassObject">-->
<div :style="messagesBoxSyle">
<!--左右展开按钮-->
<div v-show="messagesUnfoldCtl" :style="messagesUnfoldSyle"
@click="handleMessagesUnfoldSyle">
<div style="position: absolute;top: 50%;transform: translateY(-50%)">
<template v-if="merberListShow === true">
<img src="@/assets/icons/messages/UnfoldRight.png" alt="">
</template>
<template v-else>
<img src="@/assets/icons/messages/UnfoldLeft.png" alt="">
</template>
</div>
</div>
<!--聊天界面-->
<div class="messagesBox-BigRight-down80">
<div class="showHisMsgs">
<span @click="getTalkHistorys">{{messagesHisMsgs}}</span>
</div>
<!--聊天消息数据-->
<div class="messagesBox-BigRight-down80-contain" id="msg_display">
<!--左消息-->
<ul>
<li class="tal" v-for="(item,index) in showMesDatas"
@contextmenu.prevent="rightMessageClick(item.mid,item.uid)"
@click="downLownFiles($event,item.url)">
<!--头像-->
<div v-show="item.type !='99'"
:class="item.uid ===user.userId?'RightmsgAvaterBox':'LeftmsgAvaterBox'">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>
<!--用户名、时间-->
<div v-show="item.type !='99'" class="msgTimgAndName">
<div v-if="item.uid ===user.userId">
<div class="RightmsgTimeText">
<span class="msgTime"> {{CurentTime(item.time)}} </span>
<span class="msgUser">{{item.una}} </span>
<!--<div class="msgAvaterBox">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>-->
</div>
</div>
<div v-else>
<div class="LeftmsgTimeText">
<!-- <div class="msgAvaterBox">
<p class="LeftmsgAvaterText">{{item.una.slice(0,1)}}</p>
</div>-->
<span class="msgUser">{{item.una}} </span>
<span class="msgTime"> {{CurentTime(item.time)}} </span>
</div>
</div>
</div>
<!--消息-->
<div :id="'msg'+item.mid"
@click="handelBackEvent($event,item.mid)"
:class="item.uid ===user.userId?'RightmsgBoxOut':'LeftmsgBoxOut'">
<div v-html="item.temporaryMes"></div>
<div v-html="backMsghtml"></div>
</div>
</li>
</ul>
</div>
<!--撤回消息-->
<div v-show="withdrawMessageShow ===true">
<div class="withdrawMessageStyle">
<span @click="withdrawMessage" class="cursorText">撤回</span>
</div>
</div>
</div>
<!-- 表情区域 -->
<div class="browBox" v-if="emojiListDialogVisible">
<ul>
<li style="display: flex" v-for="(item,index) in faceList1" :key="index"
@click="ChooseEmojis(index,item.name)">
<img style="width: 50px;height: 50px;display: flex" :src="item.url" alt="">
</li>
</ul>
</div>
<div class="messagesBox-BigRight-down20">
<!--文件区域-->
<div class="messagesBox-BigRight-down20-up">
<div class="messagesBox-BigRight-downFile">
<!--表情-->
<div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/motion.png" alt=""
@click="emojiListDialogVisible = !emojiListDialogVisible">
</div>
<!--图片-->
<div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/photo.png" alt=""
@click="openUploadImgDialogVisible">
<el-dialog
title="请选择图片"
:visible.sync="uploadImgDialogVisible"
width="30%"
>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:auto-upload="false"
ref='uploadPhoto'
:multiple="false"
:on-preview="handlePictureCardPreview"
:before-upload="beforeUploadImg"
:on-change="changeUploadImg"
:on-remove="handleRemove"
@clearFiles="clearFilesPhoto"
accept="image/jpeg,image/png">
<i class="el-icon-plus"></i>
</el-upload>
<el-button @click="cancelUploadPhoto">取 消</el-button>
<el-button type="primary" @click="submitUpload">发送</el-button>
</el-dialog>
</div>
<!--文件-->
<div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/files.png" alt=""
@click="openUploadFilesDialogVisible">
<el-dialog
title="请选择文件"
:visible.sync="uploadFilesDialogVisible"
width="30%"
>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false"
ref='uploadFiles'
:multiple="false"
drag
:on-preview="handlePictureCardPreview"
:on-change="changeUploadFiles"
:on-remove="handleRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
</el-upload>
<el-button @click="cancelUploadFile">取 消</el-button>
<el-button type="primary" @click="submitUploadFile">发送</el-button>
</el-dialog>
</div>
<!--截图-->
<!-- <div class="messagesBox-BigRight-downFileBox">
<img src="@/assets/icons/messages/addLeft.png" alt="">
</div>-->
</div>
</div>
<!--输入区域-->
<div class="messagesBox-BigRight-down20-input">
<div style="z-index: 9999">
<el-input class="inputmsg"
type="textarea"
:rows="4"
placeholder="请输入内容"
v-model="messagesContents"
ref="count"
@keydown.native="listen($event)">
</el-input>
</div>
</div>
<div :style="messagesBoxBigRightBotton">
<button class="sendMessageBtn" @click="sendMessage()">发送</button>
</div>
</div>
</div>
<!--可展开成员列表区域-->
<div v-show="merberListShow" class="messagesBox-BigRight-down-memberList">
<div class="messagesBox-BigRight-down-memberList-top">
<div class="messagesBox-BigRight-down-memberList-topLeft">
<div v-if="openDownSelected" @click=" openDownSelected = !openDownSelected">
<img src="@/assets/icons/messages/openUp.png" alt="">
</div>
<div v-else @click=" openDownSelected = !openDownSelected">
<img src="@/assets/icons/messages/openDown.png" alt="">
</div>
<span class="messagesBox-BigRight-down-memberList-topLeftText">
<span>成员列表</span>
</span>
</div>
<div class="messagesBox-BigRight-down-memberList-topRight" @click="preGroupMember">
<div class="messagesBox-BigRight-down-memberList-topRight-Ctl">
<img src="@/assets/icons/messages/addLeft.png" alt=""></div>
</div>
</div>
<!--成员数据-->
<div class="messagesBox-BigRight-down-memberList-container">
<!--数据1-->
<div v-show="openDownSelected"
class="messagesBox-BigRight-down-memberList-containerBox"
v-for="(item,index) in courentGroupMerbers">
<div class="messagesBox-BigRight-down-memberList-container0ne">
<div class="messagesBox-BigRight-down-memberList-container0ne-Avatar">
<span
class="messagesBox-BigRight-down-memberList-container0ne-AvatarText">{{item.name.slice(0,1)}}</span>
</div>
</div>
<div class="messagesBox-BigRight-down-memberList-containerTwo">
<span>{{item.name}}</span>
</div>
<div class="messagesBox-BigRight-down-memberList-containerThree">
</div>
</div>
</div>
</div>
</div>
<div v-show="messagesOrFilesActiveIndex === 'files'" class="messagesBox-BigRight-down">
<List class="ivu-mt" style="width: 100%;overflow: auto">
<ListItem v-for="(item, index) in SendandreceivefilesDatas" :key="item.id">
<ListItemMeta :title="item.url.slice(31,80)" :description="'与'+item.una+'的聊天'">
<Avatar src="./images/message/filesImg.png"
shape="square" size="large" slot="avatar"/>
</ListItemMeta>
<div class="list-basic-list-content">
<div class="list-basic-list-content-item">
<span>时间:</span>
<span>{{CurentTime(item.time)}}</span>
</div>
</div>
<template slot="action">
<li>
<Button type="text" @click="handleFileDownland(item.url)">下载</Button>
</li>
</template>
</ListItem>
</List>
</div>
</div>
</div>
style
li {
list-style: none;
}
.msgTime{
font-size: 16px;
}
.msgUser{
width: 50px;
height: 25px;
font-family: SourceHanSansCN-Medium;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.msgContent{
display: inline-block;
min-width: 98px;
min-height: 60px;
margin-top: 2%;
border-radius: 10px;
background-color: #5a64c1;
width: auto;
max-width: 500px;
font-family: SourceHanSansCN-Medium;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #e9e9e9;
}
.msgPhotoContent{
max-width: 500px;
}
.msgFileContent{
display: inline-block;
width: 230px;
height: 96px;
margin-top: 2%;
border-radius: 10px;
background-color: #efeff5;
/*max-width: 500px;*/
cursor: pointer;
}
.msgMapContent{
width: 230px;
height: 96px;
background-color: #13134b;
}
.msgFilesImg{
height:100%;
width: 100px;
float: left;
}
.downFiles{
line-height: 96px;
color: #00a0e9;
font-size: 18px;
font-weight: bold;
}
.msgDrowBackContent{
width: 100%;
height: 96px;
margin-top: 5%;
}
.RightmsgPhoto{
/*float: right;*/
} .LeftmsgPhoto{
/*float: right;*/
}
.msgContentFontCtl{
/*position: absolute;
top: 50%;
transform: translateY(-50%);*/
}
.tal{
display: block;
/*height: 100vh;*/
}
.LeftmsgAvaterBox {
width: 52px;
height: 51px;
background-color: #5a64c1;
border-radius: 50%;
float: left;
}.RightmsgAvaterBox {
width: 52px;
height: 51px;
background-color: #5a64c1;
border-radius: 50%;
float: right;
}
.LeftmsgTime {
/*float: left;*/
}
.LeftmsgTimeText {
/*float: left;*/
font-size: 20px;
margin-left: 5%;
}
.LeftmsgAvaterText {
line-height: 40px;
text-align: center;
color: white;
font-family: SourceHanSansCN-Medium;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
}
.LeftmsgBoxCtn {
text-align: right;
word-break: break-all;
display: block;
}
.msgTimgAndName{
height: 50px;
margin-top: 4%;
}
.msgAvaterBox {
width: 52px;
height: 51px;
background-color: #5a64c1;
border-radius: 50%;
/*float: right;*/
display: inline-block;
}
.RightmsgTime {
height: 40px;
/*float: right;*/
margin-left: 50%;
}
.RightmsgTimeText {
float: right;
margin-right: 2%;
font-size: 20px
}
.RightmsgAvaterText {
line-height: 40px;
text-align: center;
color: white;
font-size: 15px
}
.LeftmsgBoxOut {
text-align: left;
}
.RightmsgBoxOut {
text-align: right;
}
.RightmsgBoxCtn {
text-align: left;
word-break: break-all;
display: block;
}
/**/
.replaceMegImg {
height: 35px;
width: 35px
}
.msgPhoto {
/*height: 100px;*/
/*width:170px*/
}
.msgInputDown {
width: 100%;
height: 100px;
z-index: 99999;
}
/*左侧B消息*/
.messagesBoxdown80datas {
height: 150px;
width: 1080px;
background-color: #4b6182;
}
.messagesBoxdown80datasCtl {
float: right;
/*float: left;*/
background-color: #fff;
position: relative;
top: 20%;
transform: translateY(-50%);
}
.messagesBoxdown80datasAvater {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5D63C5;
}
.messagesBoxdown80datasText {
height: 20px;
width: 60px;
background-color: #c12727;
position: absolute;
left: -100px;
top: 10px;
}
.messagesBoxdown80datasMessages {
height: 20px;
width: 60px;
background-color: #c12727;
display: inline-block;
margin-top: 15px;
position: absolute;
left: -150px;
}
.messagesBoxdown80datasMessagesBox {
height: 60px;
min-width: 150px;
background-color: #5A65C1;
border-radius: 10px;
}
/**/
.messagesBox {
height: 93%;
width: 100%;
background-color: #f5f5f5;
display: flex;
position: absolute;
top: 7%;
}
.messagesBox-left {
width: 25%;
height: 100%;
background-color: #E2E3E7;
}
.messagesBox-BigRight {
width: 75%;
/*background-color: #9fbd6e;*/
}
.messagesBox-center {
width: 50%;
/*background-color: #9fbd6e;*/
}
.messagesBox-right {
width: 25%;
/*background-color: #872306;*/
}
.messagesBox-left-top {
height: 80px;
display: flex;
/*margin-top: 3%;*/
border-bottom: 1px solid #DADADA;
/*justify-content: space-between;*/
position: relative;
}
/*搜索框部分开始*/
.messagesBox-left-topOne {
width: 30%;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
}
.messagesBox-left-text {
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
font-family: SourceHanSansCN-Bold;
font-size: 26px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.messagesBox-left-text {
color: #7C7C7C;
font-size: 20px;
font-weight: bold;
}
.messagesBox-left-topTwo {
width: 60%;
position: absolute;
top: 50%;
left: 20%;
transform: translateY(-50%);
}
.dataAvatarText {
color: #ffffff;
font-weight: bold;
font-size: 18px;
}
.messagesBox-left-topTwo-input {
height: 40px;
width: 300px;
border: none;
border-radius: 5px;
outline: none;
}
.messagesBox-left-topThree {
width: 20%;
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
}
.messagesBox-left-topThreeBtn {
width: 40px;
height: 40px;
background-color: #fff;
position: relative;
border-radius: 5px;
cursor: pointer;
}
.messagesBox-left-topThreeBtn-controller {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*搜索框部分结束*/
/*左侧数据区域开始*/
.messagesBox-left-group {
margin-top: 5%;
max-height: 86%;
overflow: auto;
}
.messagesBox-left-group-datas {
height: 100px;
width: 100%;
/*background-color: #fff;*/
position: relative;
border-bottom: 1px solid #D9DADE;
}
.select-item {
background-color: #DADADA;
}
.messagesBox-left-group-datas2 {
height: 100px;
width: 100%;
background-color: #E2E3E7;
position: relative;
}
.messagesBox-left-group-datas-ctl {
position: absolute;
top: 50%;
transform: translateY(-50%);
position: relative;
display: flex;
}
.messagesBox-left-group-datas-ctn {
display: flex;
}
.messagesBox-left-group-datas-leftRight {
display: flex;
}
.messagesBox-left-group-left {
width: 70%;
cursor: pointer;
/*background-color: #de0e0e;*/
}
.messagesBox-left-group-right {
width: 30%;
}
.messagesBox-left-group-leftContainer {
display: flex;
/*height: 100px;*/
margin-left: 5%;
position: relative;
}
.messagesBox-left-group-leftContainerTwo {
margin-left: 5%;
}
.messagesBox-left-group-leftContainText-msgString {
}.messagesBox-left-group-leftContainText {
display: flex;
flex-direction: column;
position: relative;
}
.messagesBox-left-group-leftContainText-one {
/* width: 200px;
margin-left: 30%;*/
font-family: SourceHanSansCN-Regular;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.messagesBox-left-group-leftContainText-msgString {
/* width: 200px;
margin-left: 30%;*/
font-family: SourceHanSansCN-Regular;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
}
.groupImg {
width: 80px;
height: 80px;
}
.messagesBox-left-group-leftContainText-two {
font-size: 10px;
color: #9a9ac6;
margin-top: 5%;
}
.messagesBox-left-group-leftContainerControl {
position: absolute;
top: 30%;
left: 30%;
transform: translateY(-50%);
}.messagesBox-left-group-msgString {
position: absolute;
top: 70%;
left: 30%;
transform: translateY(-50%);
}
.messagesBox-left-group-right {
position: relative;
}
.messagesBox-left-group-rightBox {
position: absolute;
right: 10%;
cursor: pointer;
}
.messagesBox-left-group-datas3 {
height: 100px;
width: 100%;
/*background-color: #e32929;*/
position: relative;
}
.messagesBox-left-group-datas3-ctl {
position: absolute;
top: 50%;
transform: translateY(-50%);
position: relative;
display: flex;
}
/*左侧数据区域结束*/
/*右侧开始*/
.messagesBox-BigRight-top {
display: flex;
height: 80px;
line-height: 80px;
background-color: #F5F5F5;
/*justify-content: space-between;*/
border-bottom: 1px solid #ECECEC;
}
.messagesBox-BigRight-topLeft {
margin-left: 2%;
width: 75%;
font-family: SourceHanSansCN-Bold;
font-size: 26px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.messagesBox-BigRight-topRight {
display: flex;
width: 25%;
/*margin-right: 5%;*/
/*justify-content: space-between;*/
}
.messagesBox-BigRight-topRight-chat {
display: flex;
/*justify-content: space-between;*/
}
.messagesBox-BigRight-topRight-chat-one {
width: 25%;
}
.messagesSelectHanderMenu {
width: 25%;
cursor: pointer;
font-family: SourceHanSansCN-Bold;
font-size: 26px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.messagesNoSelectHanderMenu {
width: 25%;
cursor: pointer;
font-family: SourceHanSansCN-Bold;
font-size: 26px;
font-weight: bold;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
}
.messagesBox-BigRight-topRight-chat-two {
/*margin-left: 5%;*/
width: 25%;
}
.messageFile:hover {
cursor: pointer;
/*color: #f60000;*/
}
.messagesBox-BigRight-topRight-setting {
width: 50%;
/*margin-left: 20%;*/
/*background-color: #e76a6a;*/
position: relative;
}
.messagesBox-BigRight-topRight-settingIcon {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-30%);
}
.messagesBox-BigRight-down {
display: flex;
height: 75vh;
/*min-height: 80vh;*/
overflow: hidden;
}
/*聊天界面----设置最小宽度*/
.messagesBox-BigRight-down-chat {
min-width: 75%;
/*background-color: #b8e026;*/
}
.messagesBox-BigRight-down-memberList {
background-color: #f5f5f5;
min-width: 25%;
height: 85vh;
border-left: 1px solid #E2E3E7;
}
.messagesBox-BigRight-down-memberList-top {
height: 80px;
background-color: #ECECEC;
display: flex;
flex-direction: row;
/*line-height: 80px;*/
position: relative;
}
.messagesBox-BigRight-down-memberList-topLeft {
display: flex;
position: absolute;
top: 50%;
left: 2%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down-memberList-topRight {
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
cursor: pointer;
}
.messagesBox-BigRight-down-memberList-topRight-Ctl {
}
.el-icon-search {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.messagesBox-BigRight-down-memberList-topLeftText {
font-size: 20px;
margin-top: 10px;
}
.sendMessageBtn {
cursor: pointer;
width: 139px;
height: 50px;
background-color: #5a64c1;
border-radius: 10px;
font-size: 20px;
color: #edfff3;
border: 1px solid #5A65C1;
outline: none;
}
.messagesBox-BigRight-down-memberList-container {
max-height: 90%;
overflow: auto;
}
.messagesBox-BigRight-down-memberList-containerBox {
margin-top: 5%;
height: 60px;
display: flex;
position: relative;
}
.messagesBox-BigRight-down-memberList-container0ne {
position: absolute;
top: 50%;
left: 2%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down-memberList-container0ne-Avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5D63C5;
position: relative;
}
.messagesBox-BigRight-down-memberList-container0ne-AvatarText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
}
.messagesBox-BigRight-down-memberList-containerTwo {
position: absolute;
top: 50%;
left: 20%;
transform: translateY(-50%);
font-family: SourceHanSansCN-Medium;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.messagesBox-BigRight-down-memberList-containerThree {
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
}
/*聊天界面*/
.messagesBox-BigRight-down80 {
height: 72%;
background-color: #f5f5f5;
overflow: hidden;
}
.data02RightMsg {
font-size: 10px;
margin-right: 5px
}
.data02LeftMsg {
font-size: 10px;
margin-left: 5px
}
.messagesBox-BigRight-down20 {
height: 20%;
/*background-color: #37cb27;*/
z-index: 999;
}
.messagesBox-BigRight-down20-up {
height: 60px;
background-color: #f5f5f5;
border-top: 1px solid #E2E3E7;
}
.messagesBox-BigRight-downFile {
display: flex;
z-index: 9999;
}
.messagesBox-BigRight-downFileBox {
margin-left: 5px;
cursor: pointer;
}
.messagesBox-BigRight-down20-input {
height: 30vh;
background-color: #f5f5f5;
}
.messagesBox-BigRight-down20-botton {
position: absolute;
bottom: 4%;
right: 20%;
/*transform: translateY(-50%);*/
}
/*左聊天*/
.messagesBox-BigRight-down80-contain {
/*background-color: #fff;*/
height: 620px;
overflow: auto;
z-index: -1;
flex-direction: column;
}
/*撤回消息*/
.withdrawMessageStyle {
height: 100px;
height: 30px;
position: absolute;
top: 40%;
left: 70%;
/*transform: translate(-50%, -50%);*/
background-color: #797979;
z-index: 999;
}
.cursorText {
width: 50px;
cursor: pointer;
}
/*撤回消息*/
.messagesBox-BigRight-down80-datas {
height: 150px;
background-color: #fff;
display: flex;
position: relative;
}
.messagesBox-BigRight-down80-datas-container0ne-Avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5D63C5;
position: relative;
}
.messagesBox-BigRight-down80-datas-container0ne-AvatarText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.messagesBox-BigRight-down80-datas-container0ne {
position: absolute;
top: 50%;
left: 2%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down80-datas-containerTwo {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down80-datas-containerMessages {
position: absolute;
top: 62%;
left: 10%;
}
.messagesBox-BigRight-down80-datas-containerMessagesBox {
height: 60px;
width: 100%;
background-color: #5A65C1;
border-radius: 10px;
}
/*右聊天*/
.messagesBox-BigRight-down80-datas-container0neR {
position: absolute;
top: 50%;
right: 2%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down80-datas-container0ne-AvatarR {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #5D63C5;
position: relative;
}
.messagesBox-BigRight-down80-datas-containerTwoR {
position: absolute;
top: 50%;
right: 10%;
transform: translateY(-50%);
}
.messagesBox-BigRight-down80-datas-containerMessagesR {
position: absolute;
top: 62%;
right: 10%;
}
.messagesBox-BigRight-down80-datas-containerMessagesBoxR {
height: 60px;
width: 100%;
background-color: #5A65C1;
border-radius: 10px;
}
/*右侧结束*/
.msgContent {
/* display: inline-block;
max-width: 300px;
font-size: 14px;*/
/*border: 1px solid #ddd;*/
/*background: #f5f5f5;*/
/* border-radius: 3px;
padding: 5px;
vertical-align: top;*/
cursor: pointer;
color: #edfff3;
}
.el-textarea__inner {
background-color: #f5f5f5 !important;
}
.showHisMsgs {
position: absolute;
left: 50%;
top: 10%;
/*transform: translateX(-50%);*/
z-index: 99;
cursor: pointer;
}
.showHisTime {
position: absolute;
left: 50%;
top: 30%;
/*transform: translateX(-50%);*/
z-index: 99;
cursor: pointer;
}
data() {
return {
//消息-聊天右侧聊天界面样式
messagesBoxSyle: {
minWidth: '75%',
minHeight: '80vh',
// 'background-color': ' #b8e026'
},
//聊天或者文件
messagesOrFiles: 'messages',
messagesOrFilesActiveIndex: 'messages',
messagesSelectHanderMenu: 'messagesSelectHanderMenu',//选中文件样式
messagesNoSelectHanderMenu: 'messagesNoSelectHanderMenu',//选中文件样式
//展开按钮定位
messagesUnfoldSyle: {
width: '35px',
height: '80px',
backgroundColor: '#DADADA',
borderRadius: '10px 0 0 10px',
position: 'absolute',
top: '50%',
right: '19%',
'z-index': '100',
cursor: 'pointer',
transform: 'translateY(-50%)',
},
//发送按钮样式
messagesBoxBigRightBotton: {
position: 'absolute',
bottom: '6%',
right: '20%',
},
//会话列表数据
conversationRecordList: [],
//会话列表数据
conversationRecordListMsg: [],
//会话红点隐藏
indexHidden: false,
//判断当前点击标签
clickIndex: '',
//消息内容
messgaeSearchName: '',
//消息内容
messagesContents: '',
messagesContentsMaxLength: 240,
//文件弹框
SendandreceivefilesShow: false,
//文件数据
SendandreceivefilesDatas: '',
getBrowString: '',
imgList: [],
//临时消息图片
messageImgPostD: '',
//临时消息图片
messageImgPost: [],
//临时消息文件
messageFilesPost: [],
newArrayImg: [],//临时存放图片数组
newArrayFiles: [],//临时存放文件数组
//相对路径图片地址
relativePhotoUrl: '',
limitImgShow: false,
//图片和文件选择框
emojiListDialogVisible: false,
uploadImgDialogVisible: false,
uploadFilesDialogVisible: false,
// emojiList: emojiJSON,
faceList1: faceList,
//http请求临时消息
temporaryMes: '',
showMesDatas: [],
messagesHisMsgs: '',//历史消息
withdrawMessageShow: false,//撤回消息模型
backMsghtml: '',//撤回消息模型
withdrawMessageSmgId: '',//撤回消息id
con: [],
conversationId: '',//会话id
conversationName: '',//会话名称
conversationNumber: '',//会话号码
hisIndex: '',//用于查询历史记录的msgIndex
preIndex: '',//用于加载聊天记录的msgIndex
talkId: '', //用于存放当前聊天对象id
conversationType: '', //聊天类型，用于会话群组或终端区分
courentGroupMerbers: '', //去、当前选中会话成员
openDownSelected: true, //展开会话成员
courentGroupId: '', //存放当前组id
temporaryImgemo: [],
emojiList2: [
'[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',
'[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',
'[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',
'[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',
'[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',
'[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',
'[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',
'[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',
'[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',
'[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',
'[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',
'[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',
'[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'],
// 控制聊天成员列表的显示与隐藏
merberListShow: true,
messagesUnfoldCtl: true,//群组会话时允许展开，终端则不允许
uploadImgapi: 'http://192.168.0.201:1603/scs/pocMss/upload',
checked: false,
}
}
js
watch: {
//监听限制消息输入框长度
messagesContents() {
console.log(this.messagesContents.length);
console.log(this.getStringLength(this.messagesContents));
console.log(this.messagesContents);
let maxLength = this.getStringLength(this.messagesContents);
if (maxLength > this.messagesContentsMaxLength) {
// this.$Message.warning("输入内容过多");
this.messagesContents = this.messagesContents.substring(0, this.messagesContentsMaxLength);
}
},
},
methods: {
//获取当前时间
CurentTime(date) {
var now;
if (date == undefined) {
now = new Date();
} else {
now = new Date(date);
}
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var ss = now.getSeconds(); //秒
var clock = year + '/';
if (month < 10) {
clock += '0';
}
clock += month + '/';
if (day < 10) {
clock += '0';
}
clock += day + ' ';
if (hh < 10) {
clock += '0';
}
clock += hh + ':';
if (mm < 10) clock += '0';
clock += mm;
/*if (ss < 10) clock += '0';
clock += ss;*/
return (clock);
},
//消息布局样式处理
handleMessagesUnfoldSyle() {
this.merberListShow = !this.merberListShow;
//改变聊天界面宽度
if (this.messagesBoxSyle.minWidth === '75%') {
this.messagesBoxSyle.minWidth = '100%';
this.messagesUnfoldSyle.right = '5px';
this.messagesBoxBigRightBotton.right = '1%';
} else {
this.messagesBoxSyle.minWidth = '75%';
this.messagesUnfoldSyle.right = '18.7%';
this.messagesBoxBigRightBotton.right = '20%';
}
},
//切换文件或消息菜单
messagechangeNav(indexName) {
this.messagesOrFiles = indexName;
this.messagesOrFilesActiveIndex = indexName;
},
//点击消息时
getMessageNewsDatas() {
// this.messagesUnfoldCtl = true
},
//获取文件数据
getMessageFileDatas() {
this.SendandreceivefilesDatas = '';
//文件弹框列表
this.SendandreceivefilesShow = true;
if (this.hisIndex == '') {
return;
}
var params = {
tempGroupId: this.conversationId,
gid: this.conversationId,
uid: this.conversationId,
did: this.user.userId,
// index: this.hisIndex,
ps: 20,
flag: 2,
MsgType: 5,
};
if (this.conversationType == 1) {
params.type = 3;
} else if (this.conversationType > 1) {
params.type = 0;
}
/* if (this.conversationType == 1) {
params.type = 3
} else if (this.conversationType > 1) {
params.type = 0
}
console.log('历史记录参数')
console.log(params)*/
MessageApi.queryHisMsg(params).then(res => {
// 返回数据
var msgHis = res.obj.list;
//PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));
if (msgHis.length > 0) {
this.SendandreceivefilesDatas = msgHis;
} else {
}
}).catch(err => {
// 异常情况
});
},
//处理下载url,str:字符串，c处理字符串，n出现位置
dealDownloadUrl(str, c, n) {
let x = str.indexOf(c);
for (let i = 0; i < n; i++) {
x = str.indexOf(c, x + 1);
}
return x;
},
//文件下载
handleFileDownland(currentUrl) {
let index = this.dealDownloadUrl(currentUrl, '/', 0);
let url = currentUrl.substring(0, index);
let Url = currentUrl.substring(index);
url = parseInt(url) + 1;
// let url = "http://192.168.0.201:8081/upload//2020-07-29//80c47d710c714d428eef472afbe0af76.jsp"
let ipUrl = 'http://' + this.user.ip + ':' + url + Url;
let a = document.createElement('a');
//
a.setAttribute('download', '');
a.href = ipUrl;
a.click();
/* let url = window.URL.createObjectURL(new Blob([currentUrl]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'fileName')// 文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象*/
},
//文件关闭
closeMessageFileDatas() {
this.messagesUnfoldCtl = true;
},
//更多
handleFileClickMore() {
},
//删除会话
handleMessageCommand(command, id, type) {
if (command === 'deleteConversation') {
this.$Modal.confirm({
title: '删除',
content: '确定删除吗？',
onOk: () => {
MessageApi.deleteConversationRecord({
conversationId: id,
conversationType: type,
userId: this.user.userId,
userType: 0,
}).then(res => {
// 返回数据
// this.$Modal.remove();
this.$Message.success('删除成功');
this.queryConversationRecordList();
}).catch(err => {
// 异常情况
this.$Message.error('删除失败');
});
},
});
}
},
//获取会话列表
queryConversationRecordList() {
MessageApi.queryConversationRecordList({
userId: this.user.userId,//
userType: 0,
conversationName: this.messgaeSearchName,
}).then(res => {
// 返回数据
//定义保存会话数组对象
let newConversationRecordList = [];
let arrObj = res.obj;
let tempTalkList = [];
let tak = {};
for (let i = 0; i < arrObj.length; i++) {
newConversationRecordList.push(arrObj[i]);
tak = {
conversationId: arrObj[i].conversationId,
name: arrObj[i].name,
number: arrObj[i].number,
conversationType: arrObj[i].conversationType,
};
tempTalkList.push(tak);
}
/* console.log('tempTalkList');
console.log(tempTalkList);
console.log('tak');
console.log(tak);*/
/* for (let c =0; c<tempTalkList.length; c++){
this.conversationMsg(tempTalkList[c]);
}
console.log(this.conversationRecordListMsg);*/
if (this.conversationRecordList.length < 0) {
for (let a = 0; a < newConversationRecordList.length; a++) {
//默认都为false,新消息时，设置为true
newConversationRecordList[a]['newMsgStatus'] = false;
if (newConversationRecordList[a].msgString) {
if (newConversationRecordList[a].msgString.length > 10) {
newConversationRecordList[a].msgString = newConversationRecordList[a].msgString.substring(0, 10) +
'...';
} else {
newConversationRecordList[a].msgString = newConversationRecordList[a].msgString;
}
}
}
//保存新会话列表对象
this.conversationRecordList = newConversationRecordList;
} else {
/* console.log('走else');
for (let a = 0; a < newConversationRecordList.length; a++) {
for (let m =0;m<this.conversationRecordListMsg.length;m++){
if (newConversationRecordList[a].number = this.conversationRecordListMsg[m].gid){
newConversationRecordList[a]['lastMsg'] = this.conversationRecordListMsg[m].mss;
newConversationRecordList[a]['lastMsgType'] = this.conversationRecordListMsg[m].type;
}
}
}*/
//保存新会话列表对象
console.log('会话会话this.conversationRecordList');
console.log(this.conversationRecordList);
//原来保存的会话列表，有的可能有未读消息
let oldConversationRecordList = this.conversationRecordList;
for (let a = 0; a < newConversationRecordList.length; a++) {
if (newConversationRecordList[a].msgString) {
if (newConversationRecordList[a].msgString.length > 10) {
newConversationRecordList[a].msgString = newConversationRecordList[a].msgString.substring(0, 10) +
'...';
} else {
newConversationRecordList[a].msgString = newConversationRecordList[a].msgString;
}
}
//两者相对比，重置消息状态
for (let i = 0; i < oldConversationRecordList.length; i++) {
if (JSON.stringify(oldConversationRecordList[i]).
indexOf(JSON.stringify(newConversationRecordList[a].conversationId)) != -1) {
if (oldConversationRecordList[i].conversationId == newConversationRecordList[a].conversationId) {
if (oldConversationRecordList[i].newMsgStatus === true) {
newConversationRecordList[a]['newMsgStatus'] = true;
break;
} else {
newConversationRecordList[a]['newMsgStatus'] = false;
break;
}
}
} else {
// console.log('elseelseelseelseelse')
}
}
}
//保存新会话列表对象
this.conversationRecordList = newConversationRecordList;
}
}).catch(err => {
// 异常情况
});
},
//选中会话，渲染聊天列表数据
/**
*
* @index index 当前选中index
* @param id 会话id
* @param name 会话名称
* @param number 会话号码
* @type type
*/
selectThisSubIntoTmpTalkList(index, id, name, number, type) {
this.messagesContents = '';//切换会话时，清空当前输入框
//阅读消息，让红点隐藏
let redConversationRecordList = this.conversationRecordList;
for (let item = 0; item < redConversationRecordList.length; item++) {
//默认都为false,阅读消息时，改变状态，然后更新
let obj = redConversationRecordList[item];
for (let i in obj) {
redConversationRecordList[index].newMsgStatus = false;
}
}
this.conversationRecordList = redConversationRecordList;
this.conversationId = id;
let tempTalkList = {};
let tak = {};
if (type == 0) {
return;
}
var firstName = name.substr(0, 1);
var lastName = name.substr(1, 3);
if (tempTalkList[id] == null) {
tempTalkList[id] = {
id: id,
name: name,
number: number,
type: type,
};
} else {
delete tempTalkList[id];
}
//样式切换
this.clickIndex = index;
//清空聊天对象数据
this.showMesDatas = '';
/*查看历史消息*/
//清空聊天对象数据
this.messagesHisMsgs = '查看历史消息';
var params = {
userId: this.user.userId,
userType: 0, //0-调度员，1-终端
};
for (var item in tempTalkList) {
if (tempTalkList[item].id == null) {
return false;
}
tak = {
conversationId: tempTalkList[item].id,
name: tempTalkList[item].name,
number: tempTalkList[item].number,
};
params.conversationId = tempTalkList[item].id;
if (tempTalkList[item].type == 1) { //终端
params.conversationType = 1;
this.conversationType = 1;
this.conversationId = tempTalkList[item].id;
this.conversationName = tempTalkList[item].name;
this.conversationNumber = tempTalkList[item].number;
tak.conversationType = 1;
this.toMsgPage(tak);
//当前选中终端，则不渲染成员列表
this.courentGroupMerbers = '';
this.merberListShow = false;
//隐藏展开按钮
this.messagesUnfoldCtl = false;
this.messagesBoxSyle.minWidth = '100%';
this.messagesUnfoldSyle.right = '0';
this.messagesBoxBigRightBotton.right = '2%';
} else if (tempTalkList[item].type == 2) { //群组
// this.getMessageNewsDatas()
params.conversationType = 2;
this.conversationType = 2;
tak.conversationType = 2;
//查询消息数据
this.toMsgPage(tak);
//查询成员列表数据
this.queryGroupMember(tempTalkList[item].id);
//存放当前组id
this.courentGroupId = tempTalkList[item].id;
this.conversationId = tempTalkList[item].id;
this.conversationName = tempTalkList[item].name;
this.conversationNumber = tempTalkList[item].number;
this.merberListShow = true;
this.messagesUnfoldCtl = true;
this.messagesBoxSyle.minWidth = '75%';
this.messagesUnfoldSyle.right = '19%';
this.messagesBoxBigRightBotton.right = '20%';
//释放展开按钮
this.messagesUnfoldCtl = true;
// return tak
}
}
this.getMessageFileDatas();
},
//搜索会话数据
handleMessgaeSearchName() {
this.queryConversationRecordList();
},
//添加会话准备
preConversationRecord() {
//从公共组件选择成员，只能选择终端
this.addOrUpdateVisible = true;
this.type = 'messagesAddConversationRecord';
},
//添加会话
addConversationRecord(choosedDatas) {
//从公共组件选择，添加群组，或者终端
let groupId = this.courentGroupId;
//业务;点击添加，判断当前会话是否存在，若不存在，则新建
//判断选择的是群组还是终端，按条件新建，只支持单一新建
if (choosedDatas.length > 0) {
for (let i = 0; i < choosedDatas.length; i++) {
let params = {
conversationId: '',//当前会话id
conversationType: 1, //会话类型 //1:终端，2：群组，3：会话/自建组
userId: this.user.userId, //用户id
userType: 0, //0-调度员，1-终端
};
params.conversationId = choosedDatas[i].id;
if (choosedDatas[i].type == 2) { //终端
params.conversationType = 1;
} else if (choosedDatas[i].type == 3) { //群组
params.conversationType = 2;
}
MessageApi.addConversationRecord(params).then(res => {
if (res.success) {
//刷新会话列表
this.queryConversationRecordList();
} else {
this.$message.error(res.msg);
}
}).catch(err => {
// 异常情况
});
}
}
},
//展开会话成员
handleOpenDownSelected() {
//从公共组件选择成员，只能选择终端
this.openDownSelected = !this.openDownSelected;
},
//添加会话成员准备
preGroupMember() {
//从公共组件选择成员，只能选择终端
this.addOrUpdateVisible = true;
this.type = 'messagesAddMerber';
},
//添加会话成员
addGroupMember(choosedDatas) {
//从公共组件选择成员，只能选择终端
let groupId = this.courentGroupId;
if (choosedDatas.length > 0) {
for (let i = 0; i < choosedDatas.length; i++) {
if (choosedDatas[i].type === 3) {
this.$Message.warning('自动过滤群组');
return;
} else {
let courentGroupMerbers = this.courentGroupMerbers;
for (let a = 0; a < courentGroupMerbers.length; a++) {
if (choosedDatas[i].id === courentGroupMerbers[i].subId) {
this.$Message.error(courentGroupMerbers[i].name + '已存在该会话');
return;
} else {
MessageApi.addGroupMember({
groupId: groupId,
subscriberIds: choosedDatas[i].id,
}).then(res => {
//刷新当前组数据
this.queryGroupMember(groupId);
}).catch(err => {
// 异常情况
});
}
}
}
}
}
},
//查询成员数据
queryGroupMember(groupId) {
MessageApi.queryGroupMember({
groupId: groupId,
}).then(res => {
this.courentGroupMerbers = res.rows;
}).catch(err => {
// 异常情况
});
},
getFaceList() {
this.faceList1 = faceList;
},
//获取上一条消息接口，场景：点击群组或用户时调用
conversationMsg(talkObj) {
if (talkObj == null) {
return;
}
this.talkId = talkObj.conversationId;
var params = {
tempGroupId: talkObj.conversationId,
gid: talkObj.conversationId,
uid: talkObj.conversationId,
did: this.user.userId,//当前用户登录id
flag: 2,
};
if (talkObj.conversationType == 1) {
params.type = 3;
} else if (talkObj.conversationType > 1) {
params.type = 0;
}
var gmList = [];
MessageApi.queryLastMsgIndex(params).then(res => {
if (res.obj != null) {
gmList = res.obj.gmList;
}
if (res.obj != null
&& res.obj.msgIndexMap != null) {
let nesDtas = res.obj.msgIndexMap;
this.conversationRecordListMsg.push(nesDtas);
}
}).catch(err => {
// 异常情况
});
},
//获取上一条消息接口，场景：点击群组或用户时调用
toMsgPage(talkObj) {
if (talkObj == null) {
return;
}
this.talkId = talkObj.conversationId;
var params = {
tempGroupId: talkObj.conversationId,
gid: talkObj.conversationId,
uid: talkObj.conversationId,
did: this.user.userId,//当前用户登录id
flag: 2,
};
if (talkObj.conversationType == 1) {
params.type = 3;
} else if (talkObj.conversationType > 1) {
params.type = 0;
}
var gmList = [];
MessageApi.queryLastMsgIndex(params).then(res => {
if (res.obj != null) {
gmList = res.obj.gmList;
}
if (res.obj != null
&& res.obj.msgIndexMap != null) {
this.hisIndex = res.obj.msgIndexMap.mid;
this.preIndex = res.obj.msgIndexMap.mid;
let nesDtas = res.obj.msgIndexMap;
let arry2 = [];
arry2.push(nesDtas);
// preHt += plateA._hisDeal(res.obj.msgIndexMap);
this.showMsg(arry2, -1);
}
}).catch(err => {
// 异常情况
});
},
//获取上一条消息接口，场景：点击群组或用户时调用
queryLastMsgIndex() {
var preHt = '';
var gmList = [];
MessageApi.queryLastMsgIndex({
did: this.user.userId,
flag: 2,
gid: 18696,
ps: 10,
tempGroupId: 18696,
type: 3,
uid: 18696,
}).then(res => {
if (res.obj != null) {
gmList = res.obj.gmList;
}
if (res.obj != null
&& res.obj.msgIndexMap != null) {
this.hisIndex = res.obj.msgIndexMap.mid;
this.preIndex = res.obj.msgIndexMap.mid;
let nesDtas = res.obj.msgIndexMap;
let arry2 = [];
arry2.push(nesDtas);
// preHt += plateA._hisDeal(res.obj.msgIndexMap);
this.showMsg(arry2, 1);
}
}).catch(err => {
// 异常情况
});
},
// 检测数组标记红点
/*this.isHasObj(redConversationRecordList, div_ID, this.conversationId, Parm);*/
isHasObj(arr, val, conversationId, Parm) {
var flag = false; // true为有 false为没有
for (var i = 0; i < arr.length; i++) {
if (arr[i].conversationId === val) {
switch (Parm.MsgType) {
case 0:
if (Parm.MsgInfo.MsgString) {
if (Parm.MsgInfo.MsgString.length > 10) {
arr[i].msgString = Parm.MsgInfo.MsgString.substring(0, 10) + '...';
} else {
arr[i].msgString = Parm.MsgInfo.MsgString;
}
}
break;
case 1:
arr[i].msgString = '[图片]';
break;
case 3:
arr[i].msgString = '[视频]';
break;
case 4:
arr[i].msgString = '[位置]';
break;
case 5:
arr[i].msgString = '[文件]';
break;
case 99:
arr[i].msgString = '撤回了一条消息';
break;
}
if (conversationId != val) {
arr[i].newMsgStatus = true;
break;
}
} else {
console.log('elseIF');
break;
}
}
return flag;
},
// 检测数组-显示消息
isHasObjShowMsg(arr, val, conversationId, Parm) {
console.log('val');
console.log(val);
/* var flag = false; // true为有 false为没有
for (var i = 0; i < arr.length; i++) {
if (arr[i].conversationId === val && conversationId != val) {
console.log('zhixc');
arr[i].newMsgStatus = true;
} else {
this.getTalkContent(Parm);
// break;
}
}*/
return flag;
},
/**
* 查询preIndex之后的聊天记录
* type :0 组聊,3 单聊，6 临时组聊
* tempGroupId : 临时组Id,
* gid : 组Id,
* uid : 发送方subid,
* did : 接收方subId
*/
getTalkContent(obj, times) {
times = times || 1;
obj.index = this.preIndex;
MessageApi.queryMsgAfterIndex(obj).then(res => {
// 返回数据
var msgPre = res.obj.list;
//PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));
if (msgPre.length > 0) {
// times = 6
console.log('this.conversationId');
console.log(this.conversationId);
if (this.conversationId == '' || this.conversationId == null || this.conversationId == undefined) {
return;
}
this.showMsg(msgPre, 1);
} else {
return;
}
}).catch(err => {
// 异常情况
});
/* if (times < 6) {
times++
setTimeout(() => {
this.getTalkContent(obj, times)
}, 100)
}*/
},
//查看历史记录
getTalkHistorys() {
if (this.hisIndex == '') {
return;
}
var params = {
tempGroupId: this.conversationId,
gid: this.conversationId,
uid: this.conversationId,
did: this.user.userId,
index: this.hisIndex,
ps: 10,
flag: 2,
// MsgType:5
};
if (this.conversationType == 1) {
params.type = 3;
} else if (this.conversationType > 1) {
params.type = 0;
}
MessageApi.queryHisMsg(params).then(res => {
// 返回数据
var msgHis = res.obj.list;
console.log(msgHis);
//PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));
if (msgHis.length > 0) {
this.showMsg(msgHis, 0);
} else {
this.messagesHisMsgs = '没有更多历史消息';
}
}).catch(err => {
// 异常情况
});
},
//展示消息
showMsg(msgList, flag) {
var html = '';
let newMesList = msgList;
let newMesListA = [];
// for (let i = msgList.length - 1; i >= 0; i--) {
for (let i = 0; i < msgList.length; i++) {
newMesListA.push(this._hisDeal(msgList[i]));
}
for (let a = 0; a < newMesList.length; a++) {
newMesList[a]['temporaryMes'] = newMesListA[a];
}
//展示聊天记录
if (flag == 1) {
if (newMesList.length > 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.push(newMesList[0]);
break;
}
}
setTimeout(() => {
var messageShowDiv = document.getElementById('msg_display');
messageShowDiv.scrollTop = messageShowDiv.scrollHeight;
});
this.preIndex = msgList[0].mid;
}
//初始化数据，默认展示最近一条数据
else if (flag == -1) {
this.showMesDatas = newMesList;
let a = newMesList.length;
for (let i = 0; i < a; i++) {
console.log('newMesList[a].time');
console.log(newMesList[0].time);
break;
}
}
//展示历史记录
else if (flag == 0) {
for (let i = 0; i < newMesList.length; i++) {
this.showMesDatas.unshift(newMesList[i]);
}
this.hisIndex = msgList[msgList.length - 1].mid;
}
},
//消息下载文件
downLownFiles(e, msgUrl) {
let thisId = e.target.id;
switch (thisId) {
case 'downLoadMsg': //下载文件
let ipUrl = 'http://' + this.user.ip + ':' + msgUrl;
let a = document.createElement('a');
//
a.setAttribute('download', '');
a.href = ipUrl;
a.click();
break;
}
},
//右击事件处理
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);
},
//删除消息(刪除当前列表数据，并没有删除数据库）
delMsg(msgId) {
if (msgId != null && msgId != '') {
console.log('当前选中消息对象' + msgId);
let deleteMesDatas = this.showMesDatas;
for (let i = 0; i < deleteMesDatas.length; i++) {
if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
deleteMesDatas.splice(i, 1);
this.withdrawMessageShow = false;
$('#backMsg').remove();
this.showMesDatas = deleteMesDatas;
$('#backMsg').remove();
break;
}
}
}
},
//取消消息
cancelBack(msgId) {
},
//撤回消息
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;
console.log(deleteMesDatas);
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();
}
},
//处理聊天记录
_hisDeal(msg) {
let html = '';
let emojiList = [
'[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',
'[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',
'[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',
'[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',
'[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',
'[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',
'[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',
'[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',
'[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',
'[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',
'[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',
'[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',
'[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'];
var type = parseInt(msg.type);
let nginxIp = this.user.ip;
let port = 1603;
let msgType = 0;
let MsgNum = 0;
function returnHtml(isMine) {
var bPoint, img, img_loc, yuyinUrl, times, durationHt, j, fileUrl;
var locPic = './images/message/msg_loc.png';
switch (type) {
case 0: //文字
var str = msg.mss.toString();
for (var i = 0; i < str.length; i++) {
var x = 0, y = 0, z = 0;
for (var j = 0; j < str.length; j++) {
if (str[j] === '[') {
x = j;
}
if (str[j] === '/') {
y = j;
}
if (str[j] === ']') {
z = j;
}
if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {
str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);
}
}
}
for (let i = 0; i < emojiList.length; i++) {
let emojiStr = emojiList[i];//[发怒];
for (var j = 0; j < str.length; j++) {
/*http://192.168.0.201:1603/Airport/images/emoji/emoji_*/
str = str.replace(emojiStr,
'<img class="replaceMegImg" src="./images/emoji/emoji_' + i + '.png" alt="">');
/* str = str.replace(emojiStr,
'<img style="height: 35px;width: 35px" src="http://' + nginxIp + ':' + port +'/images/emoji/emoji_' + i + '.png">');
*/
}
}
html += '<span class="msgContent" style="text-align:left;word-break: break-all;color: #ffffff;" >' + str +
'</span>';
break;
case 1: //图片
html += '<span ><img class="msgPhotoContent" src="http://' + nginxIp + ':' + msg.url +
'" data-menu="img" /></span>';
// this.temporaryMes = html
break;
case 3: //视频
html +=
'<span class="msgContent" data-menu="selMsg" ><video preload="meta" οnerrοr="" src="http://' +
nginxIp + ':' + msg.url + '" data-menu="video" width="170px"/></span>';
break;
case 104://位置消息 //4地图不考虑
if (ScsMapConstantTemp.mapType === 'openLayers') {
img = '';
img_loc = '<img src="' + locPic + '" style="width: 16px" />';
} else {
bPoint = GpsConvert.gcj02tobd09(msg.lng / 100000, msg.lat / 100000);
img = '<img src="http://api.map.baidu.com/staticimage/v2?ak=kiLRYtUm1fi0mOlN8kQZnaIW¢er=' +
bPoint.lng + ',' + bPoint.lat + '&markers=' + bPoint.lng + ',' + bPoint.lat +
'&width=300&height=200&zoom=18"/>';
img_loc = '';
}
html +=
// '<span class="msgMapContent" data-menu="loc" data-data="'+msg.lng+','+msg.lat+'">'+img+msg.loc+img_loc+'</span>';
'<span class="msgMapContent" >地图</span>';
break;
case 5:
var index = msg.url.indexOf('/');
var str0 = msg.url.substring(0, index);
str0 = parseInt(str0) + 1 + '';
var str1 = msg.url.substring(index);
var Url = str0 + str1;
msg.url = Url;
html +=
'<span id="downLoadMsg" class="msgFileContent" data-menu="selMsg" data-data="' + MsgNum + ',' +
msgType +
'"<a href="http://' + nginxIp + ':' + msg.url +
'"><img class="msgFilesImg" src="./images/message/filesImg.png" alt=""><span class="downFiles">文件下载</span></a></span>';
break;
case 99:
let cls = 'tar';
html = ' <div class="msgDrowBackContent" style="text-align: center">' +
'<div><p></p></div><div>' + msg.una + '撤回了一条消息' + '</div>';
break;
}
}
function ScsMapConstantTemp() {
};
ScsMapConstantTemp.mapType = 'baidu'; //"baidu" or "openLayers"
/* if(typeof openLayersURL!="undefined"){
ScsMapConstantTemp.openLayersURL=openLayersURL;
}*/
if (msg.uid == this.user.userId) {
returnHtml(true);
} else {
returnHtml(false);
}
return html;
},
//发送文本消息----------
//选中表情
ChooseEmojis(index, name) {
for (let i in this.faceList1) {
if (index == i) {
this.messagesContents += name;
}
}
},
listen(event) {
// console.log($(".rongcloud-text").val());
/* var keyCode = e.keyCode || e.which || e.charCode;
var ctrlKey = e.ctrlKey || e.metaKey;
// 判断 ctrl+enter 换行
if (ctrlKey && keyCode == 13) {
var str = $(".inputmsg").val();
$(".inputmsg").val(str + "\n");
} else if (keyCode == 13) {
// 阻止提交自动换行
e.preventDefault();
// 获取发送按钮id，调用 发送按钮事件
this.sendMessage(); // 发送文本
}*/
// if (!event.ctrlKey && event.keyCode === 13) {
if (event.shiftKey && event.keyCode === 13) {
console.log('33换行');
/* this.sendMessage(); // 发送文本
event.preventDefault(); // 阻止浏览器默认换行操作*/
} else if (event.keyCode === 13) {
event.preventDefault(); // 阻止浏览器默认换行操作*/
this.sendMessage(); // 发送文本
}
},
//上传图片
openUploadImgDialogVisible() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
this.uploadImgDialogVisible = true;
}
}, //上传文件
openUploadFilesDialogVisible() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
this.uploadFilesDialogVisible = true;
}
},
sendMessage() {
if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
this.$Message.error('请先选择会话组');
return;
} else {
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
// let msgstring = "8998"
let msgstring = this.messagesContents;
if (msgstring.length >= 512) {
this.$Message.error('发送的消息过长');
return;
} else if (msgstring.trim() == '') {
this.$Message.warning('请不要发送空白消息');
return;
} else {
console.log('msgstring');
console.log(msgstring);
let user_id = this.user.userId;
DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);
}
}
},
//发送图片文件---------
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
changeUploadImg(file) {
console.log(file);
//保存消息图片
// this.messageImgPost = file.raw;
const isJPG = file.raw.type === 'image/jpeg';
const isPNG = file.raw.type === 'image/png';
// const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
//执行清空图片
// this.$refs.uploadPhoto.clearFiles();
// 取消时在文件列表中删除该文件
this.$refs.uploadPhoto.handleRemove(file);
return (isJPG || isPNG);
} else {
this.newArrayImg.push(file.raw);
this.messageImgPost = this.newArrayImg;
console.log('this.messageImgPost');
console.log(this.messageImgPost);
}
},
//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
changeUploadFiles(file) {
this.newArrayFiles.push(file.raw);
this.messageFilesPost = this.newArrayFiles;
console.log('this.messageFilesPost');
console.log(this.messageFilesPost);
},
//取消上传图片
cancelUploadPhoto() {
this.uploadImgDialogVisible = false;
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
},
//取消上传文件
cancelUploadFile() {
this.uploadFilesDialogVisible = false;
//执行清空文件列表
this.$refs.uploadFiles.clearFiles();
},
//上传发送图片
beforeUploadImg(file) {
console.log('file');
console.log(file);
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
// const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
}
return isJPG && isPNG;
},
//上传发送多图片
submitUpload() {
let messageImgPostArray = this.messageImgPost;
if (messageImgPostArray.length > 0) {
for (let i = 0; i < messageImgPostArray.length; i++) {
let formData1 = new FormData();
formData1.append('pocFile', messageImgPostArray[i]);
MessageApi.upload(formData1).then(res => {
// 发送图片
this.relativePhotoUrl = res.obj.relativeUrl;
this.sendPhoto(res.obj.relativeUrl);
this.handleRemove();
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
//清空保存图片数组
this.newArrayImg = [];
console.log(this.messageImgPost);
}).catch(err => {
// 异常情况
this.$message.error('发送失败!');
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
});
}
} else {
this.$Message.warning('请先选择图片');
}
/* let formData1 = new FormData();
formData1.append('pocFile', this.messageImgPost);
// this.$refs.upload.submit();
MessageApi.upload(formData1).then(res => {
// 发送图片
console.log('发送文件和图片、、、、、、、');
this.relativePhotoUrl = res.obj.relativeUrl;
this.sendPhoto(res.obj.relativeUrl);
this.handleRemove();
//执行清空图片
this.$refs.uploadPhoto.clearFiles();
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
console.log(this.messageImgPost);
}).catch(err => {
// 异常情况
});*/
},
//上传发送文件
submitUploadFile() {
let messageFilesPostArray = this.messageFilesPost;
console.log('messageFilesPostArray');
console.log(messageFilesPostArray);
if (messageFilesPostArray.length > 0) {
for (let i = 0; i < messageFilesPostArray.length; i++) {
let formData = new FormData();
formData.append('pocFile', messageFilesPostArray[i]);
MessageApi.upload(formData).then(res => {
this.relativePhotoUrl = res.obj.relativeUrl;
this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);
this.handleRemove();
//执行清空文件
this.$refs.uploadFiles.clearFiles();
this.newArrayFiles = [];
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
}).catch(err => {
// 异常情况
this.$message.error('发送失败!');
//执行清空文件
this.$refs.uploadFiles.clearFiles();
this.newArrayFiles = [];
//关闭弹框
this.uploadImgDialogVisible = false;
this.messageImgPost = '';
});
}
} else {
this.$Message.warning('请先选择文件');
}
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
clearFilesPhoto() {
console.log('clearFilesPhoto');
},
handlePictureCardPreview(file) {
this.messageImgPost = file.url;
this.dialogVisible = true;
},
handlePreview(file) {
console.log(file);
}
,
//发送图片
sendPhoto(url) {
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
let user_id = this.user.userId;
DispatchmessageCtrl.sendPhoto(obj, url, user_id);
}
,
//发送文件消息
sendfile(url, name) {
console.log(url);
let obj = {
conversationId: this.conversationId,
name: this.conversationName,
number: this.conversationNumber,
conversationType: this.conversationType,
};
let url1 = 'http://192.168.0.201:8080/upload//2020-07-11//29f81a2b36e94454862b8913d0c56839.exe';
let url12 = '8080/upload//image/2020-07-11//a62da9d769ec4f87a9ae664d1cc882f3.jpg';
let user_id = this.user.userId;
let fileName = name;
DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);
}
,
}
扫一扫
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
