群消息已读
This commit is contained in:
dong
parent
034199ec23
commit
0805383fde
@ -172,3 +172,18 @@ export function sendBase64(groupId, data) {
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置群消息已读
|
||||
* @param {String} groupId 房间号
|
||||
* @param {Object} data
|
||||
* @param {Number} data.id 群组id
|
||||
* @returns
|
||||
*/
|
||||
export function setGroupReadMessage(groupId, data) {
|
||||
return request({
|
||||
url: `/simulation/${groupId}/operate/Conversation_Group_Read_Message`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
@ -40,9 +40,12 @@
|
||||
</div>
|
||||
<div class="middleMain">
|
||||
<div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)">
|
||||
<div v-show="item.imageUrl" class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
|
||||
<div v-show="false" class="groupIcon">
|
||||
<img :src="getImgUrl(item.imageUrl)" alt="">
|
||||
</div>
|
||||
<el-badge :value="getBadge(item.messageList)" :hidden="!getBadge(item.messageList)" :max="99" class="badge" />
|
||||
<div class="groupInfo">
|
||||
<div class="text"><b>{{ item.name }}</b></div>
|
||||
<div class="text"><b>{{ getGroupName(item) }}</b></div>
|
||||
<div class="text">{{ getLastMsg(item.messageList) }}</div>
|
||||
</div>
|
||||
<div class="groupMarke">
|
||||
@ -53,12 +56,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <div v-for="(item, index) in activeMessageList" :key="index">
|
||||
<span>{{ item.time }}</span>
|
||||
<span>{{ item.content }}</span>
|
||||
</div>
|
||||
<el-input v-model="inputMsg" />
|
||||
<el-button @click="sendMsg">发送</el-button> -->
|
||||
<chat-content :id="id" :message-list="activeMessageList" />
|
||||
</div>
|
||||
</div>
|
||||
@ -66,13 +63,13 @@
|
||||
<div v-else-if="tabActive==2">工作台</div>
|
||||
<div v-else-if="tabActive==3">通讯录</div>
|
||||
</div>
|
||||
<EditGroup ref="editGroup" />
|
||||
<edit-group ref="editGroup" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex';
|
||||
import { getGroupList, sendText } from '@/api/newChat';
|
||||
import { getGroupList, setGroupReadMessage } from '@/api/newChat';
|
||||
import { timestampFormat } from '@/utils/date';
|
||||
import ChatContent from './chatContent';
|
||||
import EditGroup from './editGroup';
|
||||
@ -87,7 +84,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputMsg: '',
|
||||
logoImgUrl: '',
|
||||
dialogVisible: false,
|
||||
tabs: [
|
||||
@ -120,6 +116,9 @@ export default {
|
||||
myMemberId() {
|
||||
return this.$store.state.training.myMemberId;
|
||||
},
|
||||
memberData() {
|
||||
return this.$store.state.training.memberData;
|
||||
},
|
||||
activeMessageList() {
|
||||
let list = [];
|
||||
const find = this.groupList.find(item => {
|
||||
@ -143,24 +142,13 @@ export default {
|
||||
});
|
||||
if (find) {
|
||||
find.messageList.push(val.message);
|
||||
if (this.id == val.id) {
|
||||
this.setReadGroup();
|
||||
}
|
||||
}
|
||||
},
|
||||
'$store.state.socket.conversationGroup.MESSAGE_STATUS': function(val) {
|
||||
const find = this.groupList.find(item => {
|
||||
return item.id == val.id;
|
||||
});
|
||||
if (find) {
|
||||
const index = find.messageList.findIndex(item => {
|
||||
return item.id == val.message.id;
|
||||
});
|
||||
if (index > -1) {
|
||||
const obj = {
|
||||
...find.messageList[index],
|
||||
...val.message
|
||||
};
|
||||
find.messageList.splice(index, 1, obj);
|
||||
}
|
||||
}
|
||||
this.getMessageStatus(val);
|
||||
},
|
||||
'$store.state.socket.conversationGroup.JOIN': function(val) {
|
||||
if (val.messageTips) {
|
||||
@ -182,17 +170,46 @@ export default {
|
||||
this.handleClose();
|
||||
},
|
||||
methods: {
|
||||
getMessageStatus(val) {
|
||||
const find = this.groupList.find(item => {
|
||||
return item.id == val.id;
|
||||
});
|
||||
if (find) {
|
||||
const index = find.messageList.findIndex(item => {
|
||||
return item.id == val.message.id;
|
||||
});
|
||||
if (index > -1) {
|
||||
const obj = {
|
||||
...find.messageList[index],
|
||||
...val.message
|
||||
};
|
||||
find.messageList.splice(index, 1, obj);
|
||||
}
|
||||
}
|
||||
},
|
||||
getBadge(messageList) {
|
||||
const filter = messageList.filter(item => {
|
||||
return !item.readerSet.includes(this.myMemberId) && this.myMemberId != item.memberId;
|
||||
});
|
||||
return filter.length;
|
||||
},
|
||||
getGroupName(item) {
|
||||
let name = '';
|
||||
if (item.name) {
|
||||
name = item.name;
|
||||
} else {
|
||||
const nArr = [];
|
||||
item.memberList.forEach(ii => {
|
||||
const node = this.memberData[ii.memberId];
|
||||
node && nArr.push(node.labelName);
|
||||
});
|
||||
name = nArr.join('、');
|
||||
}
|
||||
return name;
|
||||
},
|
||||
createGroup() {
|
||||
this.$refs.editGroup.doShow();
|
||||
},
|
||||
sendMsg() {
|
||||
sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
|
||||
console.log(res, '--res--');
|
||||
this.inputMsg = '';
|
||||
}).catch(err => {
|
||||
console.log(err, '--err--');
|
||||
});
|
||||
},
|
||||
getLastMsg(list) {
|
||||
let msg = '';
|
||||
if (list.length) {
|
||||
@ -256,6 +273,24 @@ export default {
|
||||
},
|
||||
groupClick(item) {
|
||||
this.id = item.id;
|
||||
this.setReadGroup();
|
||||
},
|
||||
setReadGroup() {
|
||||
const id = this.id;
|
||||
setGroupReadMessage(this.groupId, {id}).then(res => {
|
||||
console.log(res, '设置已读res');
|
||||
res.data.forEach(item => {
|
||||
const obj = {
|
||||
id: id,
|
||||
message: {
|
||||
...item
|
||||
}
|
||||
};
|
||||
this.getMessageStatus(obj);
|
||||
});
|
||||
}).catch(err => {
|
||||
console.log(err, 'err设置已读失败');
|
||||
});
|
||||
},
|
||||
handleClose() {
|
||||
this.$store.dispatch('training/setChatBoxMin', true);
|
||||
@ -378,11 +413,12 @@ export default {
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 40px);
|
||||
.row {
|
||||
padding: 5px;
|
||||
padding: 10px 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
@ -390,10 +426,16 @@ export default {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 1px;
|
||||
}
|
||||
.groupInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -401,6 +443,7 @@ export default {
|
||||
overflow: hidden;
|
||||
.text {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 3px 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -50,13 +50,13 @@
|
||||
<el-form-item label="群名称：" prop="name">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="群头像：" prop="imageUrl">
|
||||
<!-- <el-form-item label="群头像：" prop="imageUrl">
|
||||
<div class="uploadImgDiv">
|
||||
<img v-if="form.imageUrl" :src="getImgUrl(form.imageUrl)" :alt="getImgUrl(form.imageUrl)">
|
||||
<i class="el-icon-plus" />
|
||||
<input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()">
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确定</el-button>
|
||||
@ -538,7 +538,7 @@ $imgHeight: 70px;
|
||||
.tagBox {
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
height: 300px;
|
||||
height: 400px;
|
||||
.tag {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user