This commit is contained in:
fan 2023-04-25 17:39:34 +08:00
commit cc3003dbb0
4 changed files with 109 additions and 41 deletions

View File

@ -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
});
}

View File

@ -14,7 +14,7 @@ const whiteList = ['/login', '/design/login', '/loginNew', '/gzzbxy/relay', '/au
function getRouteInfo(to) {
let loginPath = '';
const markKey = store.state.projectConfig.markKey || getSessionStorage('project');
loginPath = markKey == 'login' ? '/login' : '/login?project=' + markKey;
loginPath = !markKey || markKey == 'login' ? '/login' : '/login?project=' + markKey;
if (to.query.projectDevice && to.query.type && loginPath.includes('?')) {
loginPath = `${loginPath}&projectDevice=${to.query.projectDevice}&type=${to.query.type}`;
} else if (to.query.projectDevice && to.query.type) {

View File

@ -33,16 +33,19 @@
<div class="activeLine" />
</div>
<div class="nullDiv" />
<div class="editFilter pointer">
<div class="editFilter " :class="myMemberId ? 'pointer' : 'disable'">
<i class="el-icon-plus" title="创建会话群" @click="createGroup" />
<!-- <i class="el-icon-more" /> -->
</div>
</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,16 +170,46 @@ export default {
this.handleClose();
},
methods: {
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--');
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() {
if (!this.myMemberId) { return; }
this.$refs.editGroup.doShow();
},
getLastMsg(list) {
let msg = '';
@ -256,6 +274,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);
@ -282,6 +318,9 @@ export default {
.pointer {
cursor: pointer;
}
.disable {
cursor: not-allowed;
}
.dialogHeader {
padding: 5px 10px;
display: flex;
@ -378,11 +417,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 +430,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 +447,7 @@ export default {
overflow: hidden;
.text {
height: 22px;
line-height: 22px;
padding: 3px 5px;
overflow: hidden;
text-overflow: ellipsis;

View File

@ -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>
@ -173,6 +173,12 @@ export default {
memberList () {
this.getTreeData();
},
myMemberId(val) {
this.initData();
if (!val) {
this.handleClose();
}
},
'$store.state.map.activeTrainListChange': function () {
this.getActiveTrains();
}
@ -538,7 +544,7 @@ $imgHeight: 70px;
.tagBox {
margin: 10px;
overflow-y: auto;
height: 300px;
height: 400px;
.tag {
margin: 5px 10px;
}