prr 7 months ago
parent
commit
2c91b05e34
  1. 12
      frontend/components.d.ts
  2. 93
      frontend/src/components/chat/ChatBox.vue
  3. 1
      frontend/src/components/localchat/ChatEditor.vue
  4. 2
      frontend/src/components/localchat/ChatFoot.vue
  5. 69
      frontend/src/stores/chat.ts
  6. 1
      frontend/src/stores/choose.ts
  7. 2
      frontend/src/stores/upgrade.ts

12
frontend/components.d.ts

@ -50,39 +50,27 @@ declare module 'vue' {
EditType: typeof import('./src/components/builtin/EditType.vue')['default'] EditType: typeof import('./src/components/builtin/EditType.vue')['default']
ElAside: typeof import('element-plus/es')['ElAside'] ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard'] ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel'] ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer'] ElContainer: typeof import('element-plus/es')['ElContainer']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElFooter: typeof import('element-plus/es')['ElFooter'] ElFooter: typeof import('element-plus/es')['ElFooter']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader'] ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElMain: typeof import('element-plus/es')['ElMain'] ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress'] ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElText: typeof import('element-plus/es')['ElText']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer'] ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree'] ElTree: typeof import('element-plus/es')['ElTree']

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

@ -1,58 +1,3 @@
<script setup lang="ts">
import { useChatStore } from "@/stores/chat";
const store: any = useChatStore();
// // msgList
// const mockMsgList = [
// {
// id: 1,
// isMe: true,
// type: "text",
// content: " {--smile--}",
// createdAt: new Date().toISOString(),
// },
// {
// id: 2,
// isMe: false,
// type: "file",
// content: [
// {
// name: ".pdf",
// path: "/path/to/file.pdf",
// },
// ],
// createdAt: new Date().toISOString(),
// },
// {
// id: 3,
// isMe: true,
// type: "image",
// content: ["/path/to/image1.jpg", "/path/to/image2.jpg"],
// createdAt: new Date().toISOString(),
// },
// {
// id: 4,
// isMe: false,
// type: "fileSending",
// content: {
// status: "apply",
// path: "/path/to/file.pdf",
// },
// createdAt: new Date().toISOString(),
// },
// {
// id: 5,
// isMe: true,
// type: "applyfile",
// content: {
// status: "apply",
// fileList: ["/path/to/file1.pdf", "/path/to/file2.pdf"],
// },
// createdAt: new Date().toISOString(),
// },
// ];
</script>
<template> <template>
<div <div
class="chatbox-main" class="chatbox-main"
@ -86,12 +31,14 @@
<el-icon <el-icon
:size="20" :size="20"
class="input-option-icon" class="input-option-icon"
@click="selectImg"
> >
<Picture /> <Picture />
</el-icon> </el-icon>
<el-icon <el-icon
:size="20" :size="20"
class="input-option-icon" class="input-option-icon"
@click="selectFile"
> >
<Link /> <Link />
</el-icon> </el-icon>
@ -109,7 +56,7 @@
maxlength="1000" maxlength="1000"
resize="none" resize="none"
class="textarea" class="textarea"
@keyup.enter.exact="store.sendMessage" @keyup.enter.exact="store.sendMessage('text')"
v-model="store.message" v-model="store.message"
/> />
</div> </div>
@ -119,7 +66,7 @@
content="按enter键发送,按ctrl+enter键换行" content="按enter键发送,按ctrl+enter键换行"
> >
<el-icon <el-icon
@click="store.sendMessage" @click="store.sendMessage('text')"
:size="22" :size="22"
class="input-button" class="input-button"
> >
@ -143,6 +90,38 @@
</div> </div>
</template> </template>
<script setup lang="ts">
import { useChatStore } from "@/stores/chat";
import { useChooseStore } from "@/stores/choose";
const store: any = useChatStore();
const choose = useChooseStore();
const imgExt = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"];
const choosetype = ref("image");
function selectImg() {
choosetype.value = "image";
choose.select("选择图片", imgExt);
}
function selectFile() {
choosetype.value = "applyfile";
choose.select("选择文件", "*");
}
watch(
() => choose.path,
(newVal, _) => {
console.log("choose.path 变化了:", newVal);
const paths = toRaw(newVal);
if (paths.length > 0) {
store.sendInfo = paths;
choose.path = [];
store.sendMessage(choosetype.value);
}
},
{ deep: true } // deep: true
);
</script>
<style scoped> <style scoped>
.chatbox-main { .chatbox-main {
width: 100%; width: 100%;

1
frontend/src/components/localchat/ChatEditor.vue

@ -38,6 +38,7 @@ function keyDown(event: any) {
} }
} }
const handleDrop = (event:any) => { const handleDrop = (event:any) => {
console.log("handleDrop")
const frompathArrStr = event?.dataTransfer?.getData('frompath'); const frompathArrStr = event?.dataTransfer?.getData('frompath');
event.preventDefault() event.preventDefault()
const files = JSON.parse(frompathArrStr) as string[]; const files = JSON.parse(frompathArrStr) as string[];

2
frontend/src/components/localchat/ChatFoot.vue

@ -83,7 +83,7 @@ function selectFile() {
watch( watch(
() => choose.path, () => choose.path,
(newVal, _) => { (newVal, _) => {
//console.log("userList :", newVal); console.log("userList 变化了:", newVal);
const paths = toRaw(newVal) const paths = toRaw(newVal)
if(paths.length > 0){ if(paths.length > 0){
store.sendInfo = paths; store.sendInfo = paths;

69
frontend/src/stores/chat.ts

@ -8,7 +8,7 @@ export const useChatStore = defineStore('chatStore', () => {
interface ChatMessage { interface ChatMessage {
id?: any; id?: any;
type: any; type: any;
time?: any; time?: any;
message: any; // 消息内容 message: any; // 消息内容
userId: any; // 发送者id userId: any; // 发送者id
@ -20,6 +20,30 @@ export const useChatStore = defineStore('chatStore', () => {
} }
}; };
// 文件消息类型
interface ChatFileMessage {
type: string;
content_type: string;
time: Date | null;
userId: number;
toUserId: number;
message: string;
to_groupid: string,
userInfo: {};
}
// 文件发送模型
const fileMessage: ChatFileMessage = {
type: '',
content_type: '',
time: null,
userId: 0,
toUserId: 0,
message: '',
to_groupid: '',
userInfo: {},
}
// 发起群聊对话框显示 // 发起群聊对话框显示
const groupChatInvitedDialogVisible = ref(false); const groupChatInvitedDialogVisible = ref(false);
@ -38,6 +62,8 @@ export const useChatStore = defineStore('chatStore', () => {
// 群名 // 群名
const departmentName = ref(''); const departmentName = ref('');
const sendInfo: any = ref()
// 定义用户类型 // 定义用户类型
type User = { type User = {
id: number; id: number;
@ -135,7 +161,43 @@ export const useChatStore = defineStore('chatStore', () => {
currentNavId.value = id; currentNavId.value = id;
}; };
const sendMessage = async () => { const sendMessage = async (messageType: string) => {
if (messageType == 'text') {
sendTextMessage()
}
// if (messageType == 'image') {
// sendImageMessage()
// }
if (messageType == 'applyfile') {
fileMessage.type = "user"
fileMessage.content_type = 'file'
fileMessage.time = null
fileMessage.userId = userInfo.value.id
fileMessage.toUserId = targetChatId.value
fileMessage.message = sendInfo.value[0]
fileMessage.to_groupid = targetGroupInfo.value.group_id || ''
try {
await sendFileMessage()
} catch (error) {
notifyError('文件发送失败');
}
}
}
const sendFileMessage = async () => {
console.log(fileMessage)
const res = await fetchPost(config.userInfo.url + '/chat/send/file', JSON.stringify(fileMessage));
if (res.ok) {
const data = await res.json();
console.log(data)
}
}
// 发送文字消息
const sendTextMessage = async () => {
let messageHistory: ChatMessage; let messageHistory: ChatMessage;
// 判断是群聊发送还是单聊发送 // 判断是群聊发送还是单聊发送
@ -211,6 +273,7 @@ export const useChatStore = defineStore('chatStore', () => {
} }
// 更新聊天和聊天记录 // 更新聊天和聊天记录
const changeChatListAndChatHistory = async (data: any) => { const changeChatListAndChatHistory = async (data: any) => {
@ -399,7 +462,6 @@ export const useChatStore = defineStore('chatStore', () => {
// 更新会话列表数据库 // 更新会话列表数据库
// 更新chatlist // 更新chatlist
// 更新聊天记录 // 更新聊天记录
console.log(data)
const isPresence = await db.getByField('workbenchusers', 'id', data.userId) const isPresence = await db.getByField('workbenchusers', 'id', data.userId)
if (isPresence[0].id !== data.userId) { if (isPresence[0].id !== data.userId) {
return return
@ -775,6 +837,7 @@ export const useChatStore = defineStore('chatStore', () => {
allUserList, allUserList,
departmentName, departmentName,
targetGroupInfo, targetGroupInfo,
sendInfo,
initChat, initChat,
showContextMenu, showContextMenu,
setCurrentNavId, setCurrentNavId,

1
frontend/src/stores/choose.ts

@ -6,6 +6,7 @@ export const useChooseStore = defineStore('chooseStore', () => {
const path:any = ref([]) const path:any = ref([])
const ifShow = ref(false) const ifShow = ref(false)
const select = (title = '选择文件', fileExt:any) => { const select = (title = '选择文件', fileExt:any) => {
win.value = new BrowserWindow({ win.value = new BrowserWindow({
title, title,
content: "Computer", content: "Computer",

2
frontend/src/stores/upgrade.ts

@ -61,7 +61,6 @@ export const useUpgradeStore = defineStore('upgradeStore', () => {
source.onmessage = function (event) { source.onmessage = function (event) {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
console.log(data)
handleMessage(data); handleMessage(data);
}; };
source.onerror = function (event) { source.onerror = function (event) {
@ -99,7 +98,6 @@ export const useUpgradeStore = defineStore('upgradeStore', () => {
chatChatStore.userChatMessage(message.data) chatChatStore.userChatMessage(message.data)
break break
case 'group': case 'group':
console.log(message.data);
chatChatStore.groupChatMessage(message.data); chatChatStore.groupChatMessage(message.data);
break; break;
default: default:

Loading…
Cancel
Save