DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

一对一聊天重构，期待群聊开发

Browse Source
This commit is contained in:
hdka
2024-11-21 17:31:08 +08:00
parent 446b669c75
commit d6b81d4559
185 changed files with 5034 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
ruoyi-ui/src/layout/components/Navbar.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar"/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
@@ -9,23 +10,23 @@
<template v-if="device!=='mobile'">
<search id="header-search" class="right-menu-item" />
<search id="header-search" class="right-menu-item"/>
<div style="position: absolute;top: 0;right: 300px;font-weight: 200">
<!-- <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
<!-- <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
<i class="el-icon-s-comment" @click="chat = true" style=""></i>
</div>
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
<el-tooltip content="用户" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect" >{{roleGroup}} / {{user.nickName}}</div>
<div class="right-menu-item hover-effect">{{ roleGroup }} / {{ user.nickName }}</div>
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<i class="el-icon-caret-bottom" />
<i class="el-icon-caret-bottom"/>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
@@ -46,44 +47,49 @@
size="50%"
:visible.sync="chat"
:with-header="false">
<!-- 好友列表-->
<!-- 好友列表-->
<el-aside width="" style="background-color: white;display: flex;height: 90%">
<el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
<div v-if="currentContact.id">
<el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 10%;top: 0;left: 10px">
<el-col :span="24" style="color: #666;position: relative;top: 25px">
<span style="font-weight: 500; font-size: 16px">{{currentContact.user.nickName}}</span>
<span style="font-weight: 500; font-size: 16px">{{ currentContact.user.nickName }}</span>
<el-divider direction="vertical"/>
</el-col>
</el-row>
<el-row style="height: 60%">
<el-col :span="24" class="msg_content" id="message_content">
<el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
<div v-if="item.userId === currentContact.contactUserId" style="">
<div v-if="item.userId !== userId" style="">
<el-col :span="24" style="font-size: 16px;">
<div>{{item.user.nickName}}:</div>
<div>{{ item.user.nickName }}:</div>
<div style="display: flex">
<div style="background-color: #f6f6f6;border-radius: 5px;padding: 0 12px 0 12px;">
{{item.content}}
{{ item.content }}
</div>
</div>
<div style="font-size: 11px; color: gray; margin-left: 5px">{{item.createTime}}</div>
<div style="font-size: 11px; color: gray; margin-left: 5px">{{ item.createTime }}</div>
</el-col>
</div>
<div v-else>
<el-col :span="24" style="font-size: 16px;">
<div class="chat_bubble">
<span>{{item.content}}</span>
<span>{{ item.content }}</span>
</div>
<i class="el-icon-circle-check" style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
<span style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{item.createTime}}</span>
<i class="el-icon-circle-check"
style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
<span
style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{ item.createTime }}</span>
</el-col>
</div>
</el-row>
<el-row id="message_content_end" style="height: 15px"><el-col></el-col></el-row>
<el-row id="message_content_end" style="height: 15px">
<el-col></el-col>
</el-row>
</el-col>
</el-row>
<el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 20%;bottom: 15px;left: 10px">
<el-row
style="position: absolute;background: white;width: 50%;z-index: 999;height: 20%;bottom: 15px;left: 10px">
<el-col :span="24">
<el-row>
<el-col :span="24">
@@ -91,14 +97,16 @@
placement="top-start"
trigger="click">
<div>
<VEmojiPicker :showSearch="false" @select="insertEmoji" />
<VEmojiPicker :showSearch="false" @select="insertEmoji"/>
</div>
<img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
</el-popover>
</el-col>
</el-row>
<el-input type="textarea" :rows="3" v-model="inputVal" style="font-size: 17px; color: black;position: relative;height: 20%" @keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
<el-input type="textarea" :rows="3" v-model="inputVal"
style="font-size: 17px; color: black;position: relative;height: 20%"
@keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
<el-button style="position: relative;left: 80%;top:10px" @click="send">发送</el-button>
</el-col>
@@ -122,7 +130,8 @@
<el-header>
<el-row>
<el-col :span="24">
<el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人" v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
<el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人"
v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
</el-col>
</el-row>
<el-row style="margin-top: 15px">
@@ -132,21 +141,26 @@
</el-row>
</el-header>
<div v-loading="contactListLoading" style="margin-top: 10px">
<el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750" :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
<el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId" :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
<el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750"
:infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
<el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId"
:style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
<el-col :span="6">
<el-image :src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar" fit="fill" style="width: 70%;border-radius: 50%;"/>
<el-image
:src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar"
fit="fill" style="width: 70%;border-radius: 50%;"/>
</el-col>
<el-col :span="18">
<el-row>
<el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{item.user.nickName}}</span></el-col>
<el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{ item.user.nickName }}</span>
</el-col>
<el-col :span="5">
<el-divider direction="vertical"/>
</el-col>
</el-row>
<el-row>
<el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
<span><i class="el-icon-circle-check"></i> {{item.endMsg}}</span>
<span><i class="el-icon-circle-check"></i> {{ item.endMsg }}</span>
</el-col>
<el-col :span="5" style="float: right">
<el-dropdown class="hover_down_menu">
@@ -187,7 +201,7 @@
</template>
<script>
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
@@ -200,6 +214,7 @@ import {getUserProfile} from "@/api/system/user";
import {getContact, listContact} from "../../api/system/contact";
import {addMessage} from "../../api/system/message";
import {parseTime} from "../../utils/ruoyi";
export default {
components: {
Breadcrumb,
@@ -238,7 +253,7 @@ export default {
data() {
return {
user: {},
chat:false,
chat: false,
roleGroup: {},
// postGroup: {},
@@ -258,7 +273,8 @@ export default {
pageSize: 10,
pageNum: 1
},
currentContact: {}
currentContact: {},
contactUser:{}
};
},
mounted() {
@@ -292,7 +308,8 @@ export default {
this.$store.dispatch('LogOut').then(() => {
location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
})
}).catch(() => {});
}).catch(() => {
});
},
/***********************************************************************/
@@ -323,10 +340,10 @@ export default {
this.msgListLoading = true;
getContact(concatId).then(response => {
if (response.code === 200) {
console.log(response.data)
this.currentContact = response.data;
this.contactUser = response.data.user;
this.msgList = response.data.messages;
console.log(this.msgList);
}
this.msgListLoading = false;
this.fleshScroll();
@@ -336,7 +353,6 @@ export default {
this.inputVal += emoji.data;
},
send() {
console.log("发送数据")
const message = {
contactId: this.currentContact.id,
userId: this.userId,
@@ -353,7 +369,7 @@ export default {
const msg = {
sendUserId: this.userId,
sendUserName: this.$store.state.user.name,
userId: this.currentContact.contactUserId,
userId: this.currentContact.contactUserId === this.userId ? this.currentContact.user.userId : this.currentContact.contactUserId,
type: "chat",
detail: this.inputVal
}
@@ -363,18 +379,22 @@ export default {
},
subscribeMessage(res) {
if (res) {
const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
const {sendUserId, sendUserName, userId, type, detail} = res.detail.data;
const message = {
id: 1,
contactId: userId,
contactId: this.currentContact.id,
userId: sendUserId,
content: detail,
roomId: this.currentContact.roomId,
createTime: parseTime(new Date())
createTime: parseTime(new Date()),
user:this.contactUser
}
this.msgList.push(message);
this.fleshLastMsg();
this.fleshScroll();
}
},
fleshLastMsg() {
@@ -397,7 +417,7 @@ export default {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
.hamburger-container {
line-height: 46px;
@@ -405,7 +425,7 @@ export default {
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
@@ -479,21 +499,26 @@ export default {
}
}
}
.app-container {
background: linear-gradient(180deg, rgba(0, 190, 189, .1), rgba(136, 255, 254, .2) 50%, rgba(242, 244, 247, .1));
}
.app {
background-color: white;
border-radius: 12px 12px 0 0;
}
.msgListMain {
height: 500px;
overflow-y:auto;
overflow-y: auto;
margin-top: 15px;
}
.msgUserList {
border-radius: 10px;
}
.msgListMain_empty {
display: flex;
height: 500px;
@@ -502,28 +527,35 @@ export default {
align-items: center;
text-align: center;
}
.hover_down_menu {
display: none;
}
.msgUserList:hover {
background-color: #f2f2f2;
cursor: pointer;
}
.msgUserList:hover .hover_down_menu{
.msgUserList:hover .hover_down_menu {
display: block;
}
.el-dropdown-link {
cursor: pointer;
}
.el-icon-arrow-down {
font-size: 15px;
font-weight: 500;
}
.main {
background-color: white;
height: 86%;
margin-left: 5px;
}
.main_empty {
display: flex;
background-color: white;
@@ -532,18 +564,22 @@ export default {
justify-content: center;
align-items: center;
}
.main_empty .el-row {
text-align: center;
}
.main_empty img {
width: 25%;
}
.msg_content {
margin-top: 30px;
height: 50%;
overflow: auto;
//background-color: gray;
}
.chat_bubble {
float: right;
margin-right: 35px;
@@ -554,7 +590,8 @@ export default {
padding: 0 12px 0 12px;
border-radius: 5px;
}
.input_top_menu_img{
.input_top_menu_img {
width: 22px;
height: 22px;
cursor: pointer;