Browse Source

add:新增文件上传功能

master
qiutianhong 7 months ago
parent
commit
855ed76156
  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']
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElBadge: typeof import('element-plus/es')['ElBadge']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElFooter: typeof import('element-plus/es')['ElFooter']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRow: typeof import('element-plus/es')['ElRow']
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']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
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>
<div
class="chatbox-main"
@ -86,12 +31,14 @@
<el-icon
:size="20"
class="input-option-icon"
@click="selectImg"
>
<Picture />
</el-icon>
<el-icon
:size="20"
class="input-option-icon"
@click="selectFile"
>
<Link />
</el-icon>
@ -109,7 +56,7 @@
maxlength="1000"
resize="none"
class="textarea"
@keyup.enter.exact="store.sendMessage"
@keyup.enter.exact="store.sendMessage('text')"
v-model="store.message"
/>
</div>
@ -119,7 +66,7 @@
content="按enter键发送,按ctrl+enter键换行"
>
<el-icon
@click="store.sendMessage"
@click="store.sendMessage('text')"
:size="22"
class="input-button"
>
@ -143,6 +90,38 @@
</div>
</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>
.chatbox-main {
width: 100%;

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

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

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

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

69
frontend/src/stores/chat.ts

@ -8,7 +8,7 @@ export const useChatStore = defineStore('chatStore', () => {
interface ChatMessage {
id?: any;
type: any;
type: any;
time?: any;
message: any; // 消息内容
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);
@ -38,6 +62,8 @@ export const useChatStore = defineStore('chatStore', () => {
// 群名
const departmentName = ref('');
const sendInfo: any = ref()
// 定义用户类型
type User = {
id: number;
@ -135,7 +161,43 @@ export const useChatStore = defineStore('chatStore', () => {
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;
// 判断是群聊发送还是单聊发送
@ -211,6 +273,7 @@ export const useChatStore = defineStore('chatStore', () => {
}
// 更新聊天和聊天记录
const changeChatListAndChatHistory = async (data: any) => {
@ -399,7 +462,6 @@ export const useChatStore = defineStore('chatStore', () => {
// 更新会话列表数据库
// 更新chatlist
// 更新聊天记录
console.log(data)
const isPresence = await db.getByField('workbenchusers', 'id', data.userId)
if (isPresence[0].id !== data.userId) {
return
@ -775,6 +837,7 @@ export const useChatStore = defineStore('chatStore', () => {
allUserList,
departmentName,
targetGroupInfo,
sendInfo,
initChat,
showContextMenu,
setCurrentNavId,

1
frontend/src/stores/choose.ts

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

2
frontend/src/stores/upgrade.ts

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

Loading…
Cancel
Save