Browse Source

add:新增邀请好友进入群聊

master
qiutianhong 7 months ago
parent
commit
9eadcebb90
  1. 10
      frontend/src/components/chat/Chat.vue
  2. 314
      frontend/src/components/chat/ChatBox.vue
  3. 1
      frontend/src/components/chat/ChatMessage.vue
  4. 4
      frontend/src/components/chat/ChatMsgList.vue
  5. 154
      frontend/src/components/chat/chatUserInfo.vue
  6. 135
      frontend/src/stores/chat.ts

10
frontend/src/components/chat/Chat.vue

@ -103,15 +103,13 @@
<el-dialog <el-dialog
v-model="store.groupChatInvitedDialogVisible" v-model="store.groupChatInvitedDialogVisible"
width="80%" width="80%"
title="创建群聊"
style="height: 550px" style="height: 550px"
align-center align-center
> >
<template #title>
<span>{{ store.groupTitle }}</span>
</template>
<div class="dialog-body"> <div class="dialog-body">
<!-- 添加输入部门名的输入框 --> <!-- 添加输入部门名的输入框 -->
<div v-if="store.groupTitle === '创建群聊'"> <div>
<el-form label-position="top"> <el-form label-position="top">
<el-form-item label="群聊名称:"> <el-form-item label="群聊名称:">
<el-input <el-input
@ -132,9 +130,7 @@
:data="data" :data="data"
:titles="['可选项', '已选项']" :titles="['可选项', '已选项']"
filterable filterable
:style="{ style="height: 250px"
height: store.groupTitle === '创建群聊' ? '250px' : '350px',
}"
filter-placeholder="搜索用户名" filter-placeholder="搜索用户名"
:props="{ key: 'key', label: 'label', avatar: 'avatar' }" :props="{ key: 'key', label: 'label', avatar: 'avatar' }"
class="transfer-container" class="transfer-container"

314
frontend/src/components/chat/ChatBox.vue

@ -1,4 +1,53 @@
<template> <template>
<!-- 邀请群聊对话框 -->
<el-dialog
v-model="store.inviteFriendDialogVisible"
title="邀请群聊"
width="80%"
style="height: 450px"
align-center
>
<div>
<el-transfer
:titles="['可选项', '已选项']"
filterable
filter-placeholder="搜索用户名"
style="height: 300px"
v-model="users"
:data="data"
:props="{ key: 'key', label: 'label', avatar: 'avatar' }"
>
<!-- 自定义穿梭框列表项模板 -->
<template #default="{ option }">
<el-avatar
:src="option.avatar"
size="small"
style="margin-right: 5px"
/>
<span>{{ option.label }}</span>
</template>
</el-transfer>
<el-button
style="
background-color: #0078d4;
color: #fff;
position: absolute;
bottom: 10px;
right: 120px;
"
@click="store.inviteFriendDialogVisible = false"
>取消</el-button
>
<el-button
@click="
store.inviteFriend(store.targetGroupInfo.group_id, users)
"
class="invite-group-button"
style=""
>确定</el-button
>
</div>
</el-dialog>
<div <div
class="chatbox-main" class="chatbox-main"
v-if="store.targetChatId" v-if="store.targetChatId"
@ -22,75 +71,127 @@
store.targetGroupInfo && store.targetGroupInfo &&
Object.keys(store.targetGroupInfo).length > 0 Object.keys(store.targetGroupInfo).length > 0
" "
@click="store.drawerVisible = true"
> >
<el-icon><Tools /></el-icon> <div style="display: flex; gap: 10px">
<el-dropdown
placement="bottom"
style="border: none"
>
<el-icon
style="
cursor: pointer;
color: black;
font-size: 15px;
"
><More
/></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
@click="openInviteGroupDialog()"
>邀请群聊</el-dropdown-item
>
<el-dropdown-item
@click="
store.quitGroup(
store.targetGroupInfo.group_id
)
"
>退出群聊</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-icon
style="
cursor: pointer;
color: black;
font-size: 15px;
"
@click="openDrawer()"
><Tools
/></el-icon>
</div>
<!-- 抽屉 --> <!-- 抽屉 -->
<el-drawer <el-drawer
v-model="store.drawerVisible" v-model="store.drawerVisible"
direction="ltr" direction="ltr"
title="群设置" title="群成员"
:with-header="true" :with-header="true"
> >
<div <div
style=" style="
display: flex; display: flex;
height: 100%;
padding-top: 40px;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 100%;
" "
> >
<div> <div
<!-- 群名 --> class="group-member-container"
<div class="group-name"> style="
{{ store.targetGroupInfo.displayName }} display: flex;
</div> flex-wrap: wrap;
max-width: 248px; /* 每行4个用户,每个60px + 2px间距 */
<!-- 群成员 --> "
<div class="group-member"> >
<div><span>群成员</span></div> <div
<div class="group-member-list"> class="group-member"
<button v-for="member in store.groupMembers"
@click="store.addMember" :key="member.id"
class="group-member-add"
>
<el-icon><Plus /></el-icon>
</button>
<div
style="
display: flex;
flex-direction: row;
"
v-for="member in store.groupMemberList"
>
<el-avatar :src="member.avatar" />
</div>
</div>
</div>
</div>
<!-- 退出按钮 -->
<div class="group-exit">
<el-button
style=" style="
background-color: #0078d4; display: flex;
color: #fff; flex-direction: column;
" align-items: center;
@click=" justify-content: center;
store.quitGroup( width: 50px;
store.targetGroupInfo.group_id height: 70px;
)
" "
>退出群聊</el-button
> >
<el-avatar
size="40"
src=""
/>
<div
style="
max-width: 46px;
height: 20px;
font-size: 10px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
line-height: 20px;
"
>
{{ member.nickname }}
</div>
</div>
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
<div v-else> <div
v-else
style="
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<el-dropdown> <el-dropdown>
<el-icon><Tools /></el-icon> <el-icon
style="
cursor: pointer;
color: black;
font-size: 15px;
"
><Tools
/></el-icon>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item>删除好友</el-dropdown-item> <el-dropdown-item>删除好友</el-dropdown-item>
@ -98,36 +199,6 @@
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<!-- 邀请好友对话框 -->
<el-dialog
v-model="store.inviteFriendDialogVisible"
title="邀请好友"
width="80%"
style="height: 550px"
align-center
>
<div>
<el-transfer
v-model="value"
:data="data"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button
style="background-color: #0078d4; color: #fff"
@click="store.inviteFriendDialogVisible = false"
>取消</el-button
>
<el-button
style="background-color: #0078d4; color: #fff"
>确定</el-button
>
</span>
</template>
</el-dialog>
</div> </div>
</el-header> </el-header>
@ -197,7 +268,14 @@
</div> </div>
<div <div
class="no-message-container" style="
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
v-else v-else
> >
<el-icon <el-icon
@ -206,7 +284,16 @@
> >
<ChatDotSquare /> <ChatDotSquare />
</el-icon> </el-icon>
<p>欢迎使用GodoOS</p> <p
style="
font-size: 18px;
font-weight: 600;
margin-top: 10px;
color: #333;
"
>
欢迎使用GodoOS
</p>
</div> </div>
</template> </template>
@ -220,15 +307,46 @@
const scrollbarRef = ref(null); const scrollbarRef = ref(null);
const innerRef = ref(null); const innerRef = ref(null);
const openInviteGroupDialog = () => {
store.inviteFriendDialogVisible = true;
store.getInviteUserList();
};
function scrollToBottom() { function scrollToBottom() {
store.setScrollToBottom(innerRef, scrollbarRef); store.setScrollToBottom(innerRef, scrollbarRef);
} }
const generateData = () => {
return store.inviteUserList.map((user: any) => ({
key: user.id,
label: user.nickname,
avatar: user.avatar, //
}));
};
const data = ref([]);
watchEffect(() => {
if (store.inviteUserList && store.inviteUserList.length > 0) {
data.value = generateData();
}
});
// users any[]
const users = ref<any[]>([]);
watchEffect(() => {
if (store.allUserList.length > 0) {
data.value = generateData();
}
});
// storemessageSendStatus.value = truescrollToBottom // storemessageSendStatus.value = truescrollToBottom
watch( watch(
() => store.messageSendStatus, () => store.messageSendStatus,
(newVal, _) => { (newVal, _) => {
console.log("messageSendStatus 变化了:", newVal);
if (newVal) { if (newVal) {
console.log("messageSendStatus 变化了:", newVal);
scrollToBottom(); scrollToBottom();
} }
} }
@ -244,6 +362,11 @@
} }
); );
function openDrawer() {
store.drawerVisible = true;
store.getGroupMemberList(store.targetGroupInfo.group_id);
}
// store.drawerVisible // store.drawerVisible
watch( watch(
() => store.drawerVisible, () => store.drawerVisible,
@ -254,17 +377,6 @@
} }
); );
const generateData = () => {
return store.allUserList.map((user: any) => ({
key: user.id,
label: user.nickname,
avatar: user.avatar, //
}));
};
const data = ref(generateData());
const value = ref([]);
function selectImg() { function selectImg() {
choosetype.value = "image"; choosetype.value = "image";
console.log(choosetype.value); console.log(choosetype.value);
@ -293,6 +405,30 @@
</script> </script>
<style scoped> <style scoped>
.invite-group-button {
background-color: #0078d4;
color: #fff;
position: absolute;
bottom: 10px;
right: 50px;
}
.infinite-list {
display: flex;
flex-direction: column;
align-items: start;
padding: 0;
width: 100%;
margin: 0;
}
.infinite-list-item {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px; /* 每个成员之间的间距 */
}
:deep(.el-drawer__header) { :deep(.el-drawer__header) {
color: #000000; color: #000000;
} }

1
frontend/src/components/chat/ChatMessage.vue

@ -256,6 +256,7 @@
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 10px; margin: 10px;
word-break: break-all;
} }
.chat-item-file { .chat-item-file {

4
frontend/src/components/chat/ChatMsgList.vue

@ -39,7 +39,7 @@
<!-- 在线状态 --> <!-- 在线状态 -->
<el-icon <el-icon
v-if="item.online" v-if="item.online && item.type == 'user'"
style=" style="
position: absolute; position: absolute;
left: 40px; left: 40px;
@ -51,7 +51,7 @@
</el-icon> </el-icon>
<!-- 离线状态 --> <!-- 离线状态 -->
<el-icon <el-icon
v-else v-else-if="item.type == 'user'"
style=" style="
position: absolute; position: absolute;
left: 40px; left: 40px;

154
frontend/src/components/chat/chatUserInfo.vue

@ -1,6 +1,7 @@
<template> <template>
<div <div
v-if="store.targetChatId == null" v-if="store.targetChatId == null"
style="height: 280px; width: 100%"
class="no-message-container" class="no-message-container"
> >
<el-icon <el-icon
@ -9,32 +10,58 @@
> >
<ChatDotSquare /> <ChatDotSquare />
</el-icon> </el-icon>
<p>欢迎使用GodoOS</p> <p class="welcome-text">欢迎使用GodoOS</p>
</div> </div>
<div <div
v-else v-else-if="
store.targetUserInfo && Object.keys(store.targetUserInfo).length > 0
"
class="user-info-container" class="user-info-container"
> >
<div <el-avatar
class="user-details" class="user-avatar"
v-if=" :size="80"
store.targetUserInfo && :src="store.targetUserInfo.avatarUrl || ''"
Object.keys(store.targetUserInfo).length > 0 />
" <h2 class="user-name">{{ store.targetUserInfo.displayName }}</h2>
> <div class="user-details">
<p>昵称: {{ store.targetUserInfo.displayName }}</p> <p><strong>邮箱:</strong> {{ store.targetUserInfo.email }}</p>
<p>邮箱: {{ store.targetUserInfo.email }}</p> <p><strong>电话:</strong> {{ store.targetUserInfo.phone }}</p>
<p>电话: {{ store.targetUserInfo.phone }}</p> <p><strong>描述:</strong> {{ store.targetUserInfo.desc }}</p>
<p>描述: {{ store.targetUserInfo.desc }}</p> <p><strong>工号:</strong> {{ store.targetUserInfo.jobNumber }}</p>
<p>工号: {{ store.targetUserInfo.jobNumber }}</p> <p>
<p>工作地点: {{ store.targetUserInfo.workPlace }}</p> <strong>工作地点:</strong> {{ store.targetUserInfo.workPlace }}
<p>入职日期: {{ store.targetUserInfo.hiredDate }}</p> </p>
<p>
<strong>入职日期:</strong> {{ store.targetUserInfo.hiredDate }}
</p>
</div> </div>
<el-button <el-button
style="background-color: #0078d4; color: #fff" class="send-message-btn"
@click="sendMessage(store.targetChatId)" @click="sendMessage(store.targetChatId, 'user')"
>发送消息</el-button >
发送消息
</el-button>
</div>
<!-- 群聊信息 -->
<div
v-else
class="group-info-container"
>
<el-avatar
class="group-avatar"
:size="80"
><span style="font-size: 40px;"></span></el-avatar>
<h2 class="group-name">{{ store.targetGroupInfo.displayName }}</h2>
<el-button
class="send-message-btn"
@click="sendMessage(store.targetChatId, 'group')"
> >
发送消息
</el-button>
</div> </div>
</template> </template>
@ -43,43 +70,104 @@
const store = useChatStore(); const store = useChatStore();
const sendMessage = (chatId: string) => { const sendMessage = (chatId: string, type: string) => {
store.currentNavId = 0; store.currentNavId = 0;
store.addChatListAndGetChatHistory(chatId); console.log(chatId, type);
store.addChatListAndGetChatHistory(chatId, type);
}; };
</script> </script>
<style scoped> <style scoped>
/* 无消息提示样式 */
.no-message-container { .no-message-container {
height: 100%; display: flex;
margin: 0px auto; flex-direction: column;
align-items: center;
justify-content: center;
text-align: center; text-align: center;
font-size: 14px; color: #4a4a4a;
} }
.welcome-text {
font-size: 18px;
font-weight: 600;
margin-top: 10px;
color: #333;
}
/* 用户信息容器 */
.user-info-container { .user-info-container {
height: 100%;
margin: 0px auto;
text-align: center;
font-size: 14px;
display: flex; display: flex;
width: 100%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
padding: 20px;
text-align: center;
}
/* 用户头像 */
.user-avatar {
margin-bottom: 15px;
border-radius: 50%;
}
/* 用户名标题 */
.user-name {
font-size: 22px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
} }
/* 用户详细信息 */
.user-details { .user-details {
margin-bottom: 20px;
text-align: left; text-align: left;
max-width: 300px; background-color: #f8f9fa;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
max-width: 200px;
width: 100%;
margin-bottom: 30px;
} }
.user-details p { .user-details p {
margin: 5px 0; margin: 8px 0;
color: #333;
}
.user-details p strong {
color: #333;
}
/* 发送消息按钮 */
.send-message-btn {
width: 100%;
max-width: 240px;
font-size: 16px;
background-color: #0078d4;
color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 120, 212, 0.3);
font-weight: 600;
transition: background-color 0.3s;
} }
.el-button { .send-message-btn:hover {
background-color: #005a9e;
}
/* 群聊信息容器 */
.group-info-container {
display: flex;
width: 100%; width: 100%;
max-width: 300px; flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 20px;
text-align: center;
} }
</style> </style>

135
frontend/src/stores/chat.ts

@ -54,13 +54,15 @@ export const useChatStore = defineStore('chatStore', () => {
const setGroupChatInvitedDialogVisible = (visible: boolean) => { const setGroupChatInvitedDialogVisible = (visible: boolean) => {
getAllUser() getAllUser()
groupChatInvitedDialogVisible.value = visible; groupChatInvitedDialogVisible.value = visible;
groupTitle.value = '创建群聊' // groupTitle.value = '创建群聊'
}; };
// 设置群信息抽屉状态 // 设置群信息抽屉状态
const setGroupInfoDrawerVisible = (visible: boolean) => { const setGroupInfoDrawerVisible = (visible: boolean) => {
groupInfoSettingDrawerVisible.value = visible groupInfoSettingDrawerVisible.value = visible
} }
const groupMembers = ref([])
// 群名 // 群名
const departmentName = ref(''); const departmentName = ref('');
@ -109,7 +111,7 @@ export const useChatStore = defineStore('chatStore', () => {
const departmentList = ref([]) const departmentList = ref([])
// groupTitle // groupTitle
const groupTitle = ref('') // const groupTitle = ref('')
// 群组信息系统消息 // 群组信息系统消息
const groupSystemMessage = ref('') const groupSystemMessage = ref('')
@ -155,20 +157,26 @@ export const useChatStore = defineStore('chatStore', () => {
// 新增代码:提取部门成员并去重,按指定字段保存 // 新增代码:提取部门成员并去重,按指定字段保存
const uniqueUsers = new Set(); const uniqueUsers = new Set();
console.log(data.data.users) console.log("部门成员", data.data.users)
data.data.users.forEach((department: { users: any[]; }) => { data.data.users.forEach((department: { users: any[]; }) => {
department.users?.forEach(async (user) => { department.users?.forEach(async (user) => {
if (!uniqueUsers.has(user.user_id)) { if (!uniqueUsers.has(user.user_id)) {
uniqueUsers.add(user.user_id); uniqueUsers.add(user.user_id);
const userToProcess = { const userToProcess = {
id: user.user_id, id: user.user_id,
login_ip: user.login_ip || '', // 假设 login_ip 可能未提供 login_ip: user.login_ip,
type: "user", type: "user",
chatId: user.user_id, chatId: user.user_id,
online: user.is_online, online: user.is_online,
avatar: user.avatar || '/default_avatar.png', // 使用默认头像如果没有提供 avatar: user.avatar,
email: user.email,
phone: user.phone,
desc: user.desc,
jobNumber: user.job_number,
workPlace: user.work_place,
hiredDate: user.hired_date,
username: user.user_name, username: user.user_name,
nickname: user.nick_name nickname: user.user_name
}; };
const existingUser = await db.getOne("workbenchChatUser", user.user_id); const existingUser = await db.getOne("workbenchChatUser", user.user_id);
@ -310,7 +318,7 @@ export const useChatStore = defineStore('chatStore', () => {
Message.content_type = 'file'; Message.content_type = 'file';
Message.userId = userInfo.value.id; Message.userId = userInfo.value.id;
Message.toUserId = targetChatId.value; Message.toUserId = targetChatId.value;
Message.message = "data/userData/1"+sendInfo.value[0]; Message.message = "data/userData/1" + sendInfo.value[0];
Message.to_groupid = targetGroupInfo.value?.group_id || ''; Message.to_groupid = targetGroupInfo.value?.group_id || '';
Message.userInfo = {}; Message.userInfo = {};
} }
@ -475,13 +483,24 @@ export const useChatStore = defineStore('chatStore', () => {
}; };
// 点击目标用户时,将其添加到 chatList,并添加到数据库,以及获取到聊天记录 // 点击目标用户时,将其添加到 chatList,并添加到数据库,以及获取到聊天记录
const addChatListAndGetChatHistory = async (chatId: string) => { const addChatListAndGetChatHistory = async (chatId: string, type: string) => {
const chatIdSet = new Set(chatList.value.map((chat: { chatId: any }) => chat.chatId)); const chatIdSet = new Set(chatList.value.map((chat: { chatId: any }) => chat.chatId));
// getSessionInfo(chatId, type);
// 如果会话存在于 chatList,则获取聊天记录并更新 chatHistory // 如果会话存在于 chatList,则获取聊天记录并更新 chatHistory
messageSendStatus.value = false;
if (chatIdSet.has(chatId)) { if (chatIdSet.has(chatId)) {
console.log("存在"); console.log("存在");
chatHistory.value = await getHistory(chatId, userInfo.value.id, "user");
if (type == "group") {
getInviteUserList()
chatHistory.value = await db.getByField("workbenchGroupChatRecord", "chatId", chatId);
messageSendStatus.value = true;
return
}
chatHistory.value = await getHistory(chatId, userInfo.value.id, type);
messageSendStatus.value = true;
return; return;
} }
console.log("不存在") console.log("不存在")
@ -518,7 +537,10 @@ export const useChatStore = defineStore('chatStore', () => {
}); });
// 获取聊天记录 // 获取聊天记录
chatHistory.value = await getHistory(chatId, userInfo.value.id, "user"); chatHistory.value = await getHistory(chatId, userInfo.value.id, type);
console.log(chatHistory.value)
messageSendStatus.value = true;
}; };
@ -591,7 +613,7 @@ export const useChatStore = defineStore('chatStore', () => {
// 添加到会话列表中 // 添加到会话列表中
const groupConversation = { const groupConversation = {
group_id: group_id, group_id: group_id,
avatar: "./logo.png", avatar: "",
messages: message.value, messages: message.value,
chatId: group_id, chatId: group_id,
type: "group", type: "group",
@ -803,7 +825,8 @@ export const useChatStore = defineStore('chatStore', () => {
const updateOrAddUsers = async (users: OnlineUserInfoType[]) => { const updateOrAddUsers = async (users: OnlineUserInfoType[]) => {
// 从数据库中获取所有用户信息 // 从数据库中获取所有用户信息
const allUsers = await db.getAll("workbenchChatUser"); const allUsers = await db.getAll("workbenchChatUser");
console.log(users)
console.log(allUsers)
// 添加或更新在线用户 // 添加或更新在线用户
for (const user of users) { for (const user of users) {
const existingUser = allUsers.find((u: { id: string; }) => u.id === user.id); const existingUser = allUsers.find((u: { id: string; }) => u.id === user.id);
@ -836,8 +859,21 @@ export const useChatStore = defineStore('chatStore', () => {
}; };
// 邀请好友 // 邀请好友
const inviteFriend = async () => { const inviteFriend = async (groupId: string, userIds: string[]) => {
console.log("邀请好友") if (userIds.length === 0) {
notifyError('请选择用户')
return false
}
// 邀请加入群聊
const url = config.userInfo.url + '/chat/group/join';
const res = await fetchPost(url, JSON.stringify({ group_id: groupId, user_ids: userIds }));
if (!res.ok) {
return false;
}
console.log(await res.json())
// 关闭对话框
inviteFriendDialogVisible.value = false
notifySuccess('邀请成功')
} }
const initUserList = async () => { const initUserList = async () => {
@ -863,6 +899,7 @@ export const useChatStore = defineStore('chatStore', () => {
// 设置会话列表 // 设置会话列表
const getSessionInfo = async (chatId: string, type: string) => { const getSessionInfo = async (chatId: string, type: string) => {
messageSendStatus.value = false
// 设置 targetUserId // 设置 targetUserId
// 根据type去判断 // 根据type去判断
// user会话,查发送和接收发方id // user会话,查发送和接收发方id
@ -870,6 +907,8 @@ export const useChatStore = defineStore('chatStore', () => {
// 清空聊天记录 // 清空聊天记录
chatHistory.value = [] chatHistory.value = []
targetChatId.value = chatId targetChatId.value = chatId
console.log("------")
if (type === 'user') { if (type === 'user') {
console.log("user") console.log("user")
// 获取当前用户和目标用户的聊天记录 // 获取当前用户和目标用户的聊天记录
@ -878,20 +917,24 @@ export const useChatStore = defineStore('chatStore', () => {
chatHistory.value = [...history]; chatHistory.value = [...history];
// 设置目标用户的信息 // 设置目标用户的信息
await setTargetUserInfo(chatId); await setTargetUserInfo(chatId);
messageSendStatus.value = true
} else if (type === 'group') { } else if (type === 'group') {
console.log('group') console.log('group')
// 获取当前用户和目标用户的聊天记录
console.log(userInfo.value.id, chatId, type) console.log(userInfo.value.id, chatId, type)
// 获取当前用户和目标用户的聊天记录
getInviteUserList()
const history = await getHistory(userInfo.value.id, chatId, type) const history = await getHistory(userInfo.value.id, chatId, type)
// await getGroupInviteMessage(chatId) // await getGroupInviteMessage(chatId)
chatHistory.value = history; chatHistory.value = history;
// 设置目标用户的信息 // 设置目标用户的信息
await setTargetGrouprInfo(chatId); await setTargetGrouprInfo(chatId);
messageSendStatus.value = true
} }
}; };
const getHistory = async (sendUserId: string, toUserId: string, type: string) => { const getHistory = async (sendUserId: string, toUserId: string, type: string) => {
var messagesHistory var messagesHistory
console.log(sendUserId, toUserId, type)
if (type === 'user') { if (type === 'user') {
messagesHistory = await db.filter("workbenchChatRecord", (record: any) => { messagesHistory = await db.filter("workbenchChatRecord", (record: any) => {
return ( return (
@ -1017,21 +1060,7 @@ export const useChatStore = defineStore('chatStore', () => {
} }
const inviteUserList = ref([])// 添加群成员 const inviteUserList = ref([])// 添加群成员
const addMember = async () => {
groupChatInvitedDialogVisible.value = true;
await getAllUser();
// 确保 groupMemberList 是一个包含 ID 的数组
const existingMemberIds = groupMemberList.value.map((member: any) => member.id);
// 使用 filter 方法过滤掉已在群成员列表中的用户
inviteUserList.value = allUserList.value.filter(
(user: any) => !existingMemberIds.includes(user.id)
);
allUserList.value = inviteUserList.value;
groupTitle.value = '邀请群聊';
};
// 获取图片消息预览 // 获取图片消息预览
// 获取图片消息预览 // 获取图片消息预览
@ -1083,15 +1112,40 @@ export const useChatStore = defineStore('chatStore', () => {
} }
} }
// 获取群成员
const getGroupMemberList = async (group_id: string) => {
console.log(group_id)
const res = await fetchGet(userInfo.value.url + '/chat/group/info?gid=' + group_id);
if (!res.ok) {
return false;
}
const memberData = await res.json();
console.log(memberData.data.group.members)
// 封装 avatar 和 nickname 到 groupMembers
groupMembers.value = memberData.data.group.members.map((member: any) => ({
id: member.id,
avatar: member.avatar,
nickname: member.nickname,
}));
// 获取群组系统消息
const getGroupInviteMessage = async (group_id: string) => {
groupSystemMessage.value = ""
// 邀请群信息
const message = await db.getByField("workbenchGroupInviteMessage", "group_id", group_id)
groupSystemMessage.value = message[0].Message
} }
// 邀请群聊获取用户
const getInviteUserList = async () => {
const userList = await db.getAll("workbenchChatUser");
await getGroupMemberList(targetChatId.value);
// 筛选出不在 groupMembers 中的用户
inviteUserList.value = userList.filter(
(user: { id: string; }) => !groupMembers.value.some((member: { id: string; }) => member.id === user.id)
);
};
return { return {
@ -1128,10 +1182,11 @@ export const useChatStore = defineStore('chatStore', () => {
inviteFriendDialogVisible, inviteFriendDialogVisible,
drawerVisible, drawerVisible,
addMemberDialogVisible, addMemberDialogVisible,
groupTitle, // groupTitle,
inviteUserList, inviteUserList,
messageSendStatus, messageSendStatus,
messageReceiveStatus, messageReceiveStatus,
groupMembers,
initChat, initChat,
showContextMenu, showContextMenu,
setCurrentNavId, setCurrentNavId,
@ -1151,10 +1206,10 @@ export const useChatStore = defineStore('chatStore', () => {
quitGroup, quitGroup,
inviteFriend, inviteFriend,
getGroupMember, getGroupMember,
addMember,
getImageSrc, getImageSrc,
groupInviteMessage, groupInviteMessage,
getGroupInviteMessage, setScrollToBottom,
setScrollToBottom getGroupMemberList,
getInviteUserList
}; };
}); });
Loading…
Cancel
Save