Commit b900e056 authored by 夏敏伟's avatar 夏敏伟

聊天室优化

parent f1c9d809
...@@ -135,4 +135,12 @@ export default[ ...@@ -135,4 +135,12 @@ export default[
parent_name: "数据管理"//人物详情对应的一级菜单名称 parent_name: "数据管理"//人物详情对应的一级菜单名称
} }
}, },
{
name: "聊天室详情",
path: "/chatRoomInfo",
component:() => import(`@/view/ddkz/components/chatRoomInfo.vue`),
meta: {
parent_name: "导调控制"//人物详情对应的一级菜单名称
}
},
] ]
\ No newline at end of file
...@@ -7,22 +7,26 @@ ...@@ -7,22 +7,26 @@
<div v-for="item in chatMessageList" class="everyMessage"> <div v-for="item in chatMessageList" class="everyMessage">
<div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }"> <div :style="{ justifyContent: item.fromUserId == userInfo.account ? 'flex-end' : 'flex-start' }">
<template v-if="item.fromUserId != userInfo.account"> <template v-if="item.fromUserId != userInfo.account">
<img class="avatarImg" :src="avatar" alt=""> <img class="otherSidesAvatarImg" :src="avatar" alt="">
<!-- <div v-text="item.content" style="background-color:white"></div> --> <div class="otherSides">
<div v-if="item.messageForm == 'TEXT'" v-html="item.content" style="background-color: white;"> <div class="otherSides-user" v-text="item.fromUserId"></div>
<div class="otherSides-text" v-if="item.messageForm == 'TEXT'" v-html="item.content"
style="background-color: white;">
</div> </div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px" <el-image class="otherSides-img" v-else-if="item.messageForm == 'PICTURE'"
:src="item.content" :preview-src-list="[item.content]"> style="width: 150px; height: 100px;margin: 0;" :src="item.content"
:preview-src-list="[item.content]">
</el-image> </el-image>
</div>
</template> </template>
<template v-else-if="item.fromUserId == userInfo.account"> <template v-else-if="item.fromUserId == userInfo.account">
<div v-if="item.messageForm == 'TEXT'" v-html="item.content" <div class="mySides-text" v-if="item.messageForm == 'TEXT'" v-html="item.content"
style="background-color: #85ce61;"> style="background-color: #85ce61;">
</div> </div>
<el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px" <el-image v-else-if="item.messageForm == 'PICTURE'" style="width: 150px; height: 100px"
:src="item.content" :preview-src-list="[item.content]"> :src="item.content" :preview-src-list="[item.content]">
</el-image> </el-image>
<img class="avatarImg" :src="avatar" alt=""> <img class="MySidesAvatarImg" :src="avatar" alt="">
</template> </template>
</div> </div>
</div> </div>
...@@ -49,7 +53,7 @@ import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords'; ...@@ -49,7 +53,7 @@ import { getRecordsByPagingTeam } from '../../../api/chat/chatRecords';
import elDragDialog from "@/util/directive/el-dragDialog"; import elDragDialog from "@/util/directive/el-dragDialog";
import onPaste from '@/util/onPaste.js'; import onPaste from '@/util/onPaste.js';
import { upLoadFiles } from '@/api/chat/chatRoom'; import { upLoadFiles } from '@/api/chat/chatRoom';
import { getTime_extent, download } from '@/util/http_util.js'; import { getTime_extent } from '@/util/http_util.js';
export default { export default {
data() { data() {
return { return {
...@@ -59,7 +63,7 @@ export default { ...@@ -59,7 +63,7 @@ export default {
chatMessageList: [], chatMessageList: [],
// stompClient: '', // stompClient: '',
// ws: null, // ws: null,
analogDataList: [], // analogDataList: [],
currentChatRoom: {}, currentChatRoom: {},
myStompClient: null, myStompClient: null,
file: null, file: null,
...@@ -72,7 +76,6 @@ export default { ...@@ -72,7 +76,6 @@ export default {
}, },
props: { props: {
visible: Boolean, visible: Boolean,
analogData: Array,
stompClient: Object, stompClient: Object,
currentChatRoomInfo: Object currentChatRoomInfo: Object
...@@ -148,16 +151,14 @@ export default { ...@@ -148,16 +151,14 @@ export default {
keepBottom() { keepBottom() {
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight; this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
}, },
listChatroom(data) { listChatroom(item) {
//取消群聊的订阅 //取消群聊的订阅
for (const sub in this.stompClient.subscriptions) { for (const sub in this.stompClient.subscriptions) {
if (sub.startsWith("multicast")) { if (sub.startsWith("multicastTeam")) {
this.stompClient.unsubscribe(sub); this.stompClient.unsubscribe(sub);
} }
} }
data.forEach(e => { this.stompClient.subscribe('/topic/multicast/' + item.id + '/' + item.teamId, data => {
//订阅聊天室主题,订阅功能中设置ID:
this.stompClient.subscribe('/topic/multicast/' + e.id + '/' + e.teamId, data => {
this.chatMessageList.push({ this.chatMessageList.push({
content: JSON.parse(data.body).content, content: JSON.parse(data.body).content,
fromUserId: data.headers.fromUserId, fromUserId: data.headers.fromUserId,
...@@ -166,13 +167,11 @@ export default { ...@@ -166,13 +167,11 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.keepBottom(); this.keepBottom();
}); });
}, { id: "multicast" + e.id + new Date().getTime() }); }, { id: "multicastTeam" + item.id + new Date().getTime() });
})
}, },
getCurrentMessageList(item) { getCurrentMessageList(item) {
//查询我方聊天记录 //查询我方聊天记录
getRecordsByPagingTeam(item.id, 1, 500, '2023-10-01 00:00:00', getTime_extent(0).pre_rq_end, null, item.teamId).then(res1 => { getRecordsByPagingTeam(item.id, 1, 200, '2023-10-01 00:00:00', getTime_extent(0).pre_rq_end, null, item.teamId).then(res1 => {
this.chatMessageList = res1.records; this.chatMessageList = res1.records;
this.$nextTick(() => { this.$nextTick(() => {
this.keepBottom(); this.keepBottom();
...@@ -180,11 +179,11 @@ export default { ...@@ -180,11 +179,11 @@ export default {
}) })
}, },
handleDialogOpen() { handleDialogOpen() {
this.analogDataList = this.$props.analogData; // this.analogDataList = this.$props.analogData;
this.currentChatRoom = this.$props.currentChatRoomInfo; this.currentChatRoom = this.$props.currentChatRoomInfo;
this.myStompClient = this.$props.stompClient; this.myStompClient = this.$props.stompClient;
//订阅 //订阅
this.listChatroom(this.analogDataList); this.listChatroom(this.currentChatRoom);
this.getCurrentMessageList(this.$props.currentChatRoomInfo); this.getCurrentMessageList(this.$props.currentChatRoomInfo);
}, },
// 监听输入框内容 // 监听输入框内容
...@@ -282,25 +281,50 @@ export default { ...@@ -282,25 +281,50 @@ export default {
.avatarImg { .otherSidesAvatarImg {
width: 20px;
height: 20px;
margin: 5px 10px 0px 10px;
}
.mySidesAvatarImg {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 0px 10px; margin: 0px 10px;
} }
&>div {
max-width: 50%;
.otherSides-user {
color: white;
margin-bottom: 5px;
}
.otherSides-text {
border-radius: 5px;
color: black;
margin-bottom: 5px;
padding: 5px 10px;
}
.el-imgage { .el-imgage {
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
}
&>div { .mySides-text {
max-width: 50%;
padding: 5px 10px;
border-radius: 5px; border-radius: 5px;
color: black; color: black;
margin-bottom: 5px;
padding: 5px 10px;
} }
} }
} }
} }
......
This diff is collapsed.
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</el-form-item> </el-form-item>
<el-form-item label="附件"> <el-form-item label="附件">
<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove" <el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove"
:file-list="form.fileList" :auto-upload="false" multiple :accept="formatFile"> :file-list="form.fileList" :auto-upload="false" :accept="formatFile">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div> <div slot="tip" class="el-upload__tip">支持导入word,pdf,ppt,mlf,xls!!!</div>
</el-upload> </el-upload>
...@@ -50,15 +50,12 @@ export default { ...@@ -50,15 +50,12 @@ export default {
elDragDialog elDragDialog
}, },
props: { props: {
visible: Boolean,
stompClient: Object, stompClient: Object,
currentChatRoomInfo: Object, currentChatRoomInfo: Object
analogData: Array
}, },
methods: { methods: {
handleClose() { handleClose() {
this.dialogVisible = false; this.dialogVisible = false;
// this.$emit('handleCancel');
}, },
showDialog() { showDialog() {
this.dialogVisible = true; this.dialogVisible = true;
...@@ -81,39 +78,25 @@ export default { ...@@ -81,39 +78,25 @@ export default {
}); });
}, },
handleRemove() { }, handleRemove() {
this.form.fileList = [];
},
sendNotice() { sendNotice() {
this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form)); this.myStompClient.send(`/app/sendToChatRoom/${this.currentChatRoom.id}/${this.currentChatRoom.teamId}`, {}, JSON.stringify(this.form));
}, this.form = {
listChatroom(data) { title: '',
//取消群聊的订阅 content: '',
for (const sub in this.stompClient.subscriptions) { attachment: '',
if (sub.startsWith("multicast")) { messageForm: null
this.stompClient.unsubscribe(sub); };
} this.handleRemove();
}
data.forEach(e => {
//订阅聊天室主题,订阅功能中设置ID:
this.stompClient.subscribe('/topic/multicast/' + e.id, data => {
this.$emit('handleCancel');
this.$emit('showInfo', true, this.currentChatRoom);
}, { id: "multicast" + e.id + new Date().getTime() });
})
}, },
handleDialogOpen() { handleDialogOpen() {
this.myStompClient = this.$props.stompClient; this.myStompClient = this.$props.stompClient;
this.currentChatRoom = this.$props.currentChatRoomInfo; this.currentChatRoom = this.$props.currentChatRoomInfo;
this.analogDataList = this.$props.analogData;
this.listChatroom(this.analogDataList);
} }
}, }
// mounted() {
// this.dialogVisible = this.$props.visible;
// this.myStompClient = this.$props.stompClient;
// this.currentChatRoom = this.$props.currentChatRoomInfo;
// this.analogDataList = this.$props.analogData;
// this.listChatroom(this.analogDataList);
// }
} }
</script> </script>
......
This diff is collapsed.
...@@ -57,9 +57,9 @@ ...@@ -57,9 +57,9 @@
<div class="ta-transfer_btn"> <div class="ta-transfer_btn">
<el-button type="primary" :disabled='item.parameter.selected_num == 0' <el-button type="primary" :disabled='item.parameter.selected_num == 0'
@click="removeGoods(index)" icon="el-icon-arrow-left">离席</el-button> @click="removePeopleFromMeeting(index)" icon="el-icon-arrow-left">离席</el-button>
<el-button type="primary" :disabled='item.invoking.selected_num == 0' <el-button type="primary" :disabled='item.invoking.selected_num == 0'
@click='addRemoveGoods(index)'>参会 @click='addPeopleToMeeting(index)'>参会
<i class="el-icon-arrow-right el-icon--right"></i> <i class="el-icon-arrow-right el-icon--right"></i>
</el-button> </el-button>
</div> </div>
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
} }
); );
}, },
addRemoveGoods(index) { //添加或者删除物品 addPeopleToMeeting(index) { //参会
let formData = this.formData.teams[index].invoking.checkedCities let formData = this.formData.teams[index].invoking.checkedCities
for (const key in formData) { for (const key in formData) {
for (const k in this.allData) { for (const k in this.allData) {
...@@ -211,7 +211,7 @@ export default { ...@@ -211,7 +211,7 @@ export default {
this.formData.teams[index].invoking.checkedCities = [] this.formData.teams[index].invoking.checkedCities = []
this.formData.teams[index].invoking.checkAll = false this.formData.teams[index].invoking.checkAll = false
}, },
removeGoods(index) { //拿出 removePeopleFromMeeting(index) { //离席
let formData = this.formData.teams[index].parameter.checkedCities let formData = this.formData.teams[index].parameter.checkedCities
for (const key in formData) { for (const key in formData) {
for (const k in this.formData.teams[index].wpinfo) { for (const k in this.formData.teams[index].wpinfo) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment