Skip to content

T
tokcos-socket-web-ts
提交 3cd0f8bb 作者: Hao
操作

add

父级 3ac1e7e0
正在显示 包含 47 行增加 和 150 行删除
src/axios/index.ts
......@@ -2,7 +2,7 @@
import { useUserStore } from '../store/modules/user'
import axios from "axios";
const instance = axios.create({
baseURL: "http://192.168.31.228:8080", // 设置基础 URL
baseURL: "http://192.168.31.123:8080", // 设置基础 URL
// baseURL:'',
timeout: 1000, // 设置请求超时时间
});
......
src/components/AutomaticPrompt.vue
......@@ -66,7 +66,6 @@ import Emotion from './IndexComponent.vue'
import { ElLoading } from 'element-plus'
import { ref, watch, defineEmits, defineExpose } from 'vue'
import { upLoadFilesHander } from '../minxins/UploadMixin'
import axios from 'axios'
const inputVal = ref('')
const elAutocomplete = ref<any>(null)
const file = ref<any>(null)
......
src/components/IndexComponent.vue
......@@ -16,6 +16,7 @@
import { ref, watch, defineEmits, defineExpose, defineProps } from 'vue'
const list = ref([])
import * as emoji from 'emoji.json'
console.log(emoji,'打印emoji')
const getList = () => {
list.value = emoji.slice(0, 50)
list.value.push(emoji[55])
......
src/components/Menu/RightClickMenu.ts
import { h, render, reactive, ref, defineEmits } from "vue";
import RightClickMenu from "./RightClickMenu.vue";
// export function openRightClickMenu(e: MouseEvent) {
// const contextMenuVisible = ref(false);
// const contextMenuTop = ref(0);
// const contextMenuLeft = ref(0);
// const contextMenuIndex = ref(0);
// const scope = document.body;
// const containerEl: any = document.createElement("div");
// const vnode:any = h(RightClickMenu, {
// visible: contextMenuVisible.value,
// menuList: [
// "复制",
// "翻译",
// "设为客户名称",
// "设置国家/地区",
// "设为Email",
// "设为watchApp",
// ],
// active: contextMenuIndex.value,
// handleItemClick: (item: any, index: number) => {
// console.log(item);
// contextMenuIndex.value = index;
// },
// });
// render(vnode, containerEl);
// containerEl.style.position = "fixed";
// containerEl.style["z-index"] = "1000";
// scope?.appendChild(containerEl);
// const showContextMenu1 = (event: any, item: any) => {
// //阻止默认右键事件
// event.preventDefault();
// //菜单可见
// contextMenuVisible.value = true;
// //获取鼠标坐标
// contextMenuTop.value = event.clientY;
// contextMenuLeft.value = event.clientX;
// // 检测是否超出浏览器视口区域 一个菜单40px*6个
// const menuHeight = 300; // 右键菜单的高度
// const windowHeight = window.innerHeight;
// if (event.clientY + menuHeight > windowHeight) {
// // 如果右键菜单超出视口底部，调整位置为向上弹出
// contextMenuTop.value -= menuHeight;
// }
// containerEl.style.top = `${contextMenuTop.value}px`;
// containerEl.style.left = `${contextMenuLeft.value}px`;
// window.addEventListener("click", hideContextMenu2);
// };
// //隐藏右键菜单的函数，移除点击事件监听器，并将 contextMenuVisible 设置为 false
// const hideContextMenu2 = (e: any) => {
// console.log(vnode,'打印');
// const pop: any = document.querySelector("#select-box1");
// if (!e || (e?.target && !pop.contains(e?.target))) {
// contextMenuVisible.value = false;
// vnode.props.visible = false;
// console.log(contextMenuVisible.value, "关闭");
// window.removeEventListener("click", hideContextMenu2);
// }
// };
// return {
// showContextMenu1,
// hideContextMenu2,
// };
// }
export default function useMenu(e: MouseEvent) {
const contextMenuVisible = ref(true);
const contextMenuTop = ref(0);
......@@ -103,12 +36,12 @@ export default function useMenu(e: MouseEvent) {
if (containerEl) containerEl.style.position = "fixed";
if (containerEl) containerEl.style["z-index"] = "1000";
};
const showContextMenu1 = (event: any, item: any) => {
const showContextMenu = (event: any, item: any) => {
//阻止默认右键事件
event.preventDefault();
//菜单可见
contextMenuVisible.value = true;
openRightClickMenu(e)
openRightClickMenu(e);
//获取鼠标坐标
contextMenuTop.value = event.clientY;
contextMenuLeft.value = event.clientX;
......@@ -122,21 +55,21 @@ export default function useMenu(e: MouseEvent) {
}
containerEl.style.top = `${contextMenuTop.value}px`;
containerEl.style.left = `${contextMenuLeft.value}px`;
window.addEventListener("click", hideContextMenu2);
window.addEventListener("click", hideContextMenu);
};
//隐藏右键菜单的函数，移除点击事件监听器，并将 contextMenuVisible 设置为 false
const hideContextMenu2 = (e: any) => {
const hideContextMenu = (e: any) => {
const pop: any = document.querySelector("#select-box1");
if (!e || (e?.target && !pop.contains(e?.target))) {
contextMenuVisible.value = false;
setComponent();
window.removeEventListener("click", hideContextMenu2);
window.removeEventListener("click", hideContextMenu);
}
};
return {
contextMenuVisible,
openRightClickMenu,
showContextMenu1,
hideContextMenu2,
showContextMenu,
hideContextMenu,
};
}
src/store/modules/user.ts
......@@ -26,11 +26,7 @@ export const useUserStore = defineStore("user", {
setUserInfo(res: any) {
this.userInfo = res;
},
// setUserList(res: any) {
// this.userList = res;
// },
setUserListMessages(res: any) {
console.log("调取setUserListMessages");
return new Promise((resolve, reject) => {
const query = {
code: this.userInfo.username,
......@@ -41,6 +37,7 @@ export const useUserStore = defineStore("user", {
return {
...item,
username: item.id,
userImg:"https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png",
messages: [],
};
});
......
src/utils/websocket.ts
......@@ -84,7 +84,7 @@ function websocketclose(e: any) {
function websocketsend(res: any) {
if (websocket && useUserStore().isConnected) {
// 检查连接状态
console.log("发送的数据", websocket);
console.log("发送的数据", JSON.stringify(res));
websocket.send(JSON.stringify(res));
} else {
ElMessage({
......
src/views/HomeView.vue
......@@ -23,7 +23,7 @@
<div class="user-name-box">
<span class="user-name">{{ item?.nick }}</span>
<div class="user-time">
{{ item?.createTime }}
{{ item?.time }}
</div>
</div>
<div class="user-reply-box">
......@@ -60,9 +60,9 @@
:key="index"
:class="getMessageClass(message)"
>
<div class="time">{{ message.createTime }}</div>
<div class="time">{{ message.time }}</div>
<div v-if="isSelf(message)" class="message-container">
<div class="bubble" @contextmenu="showContextMenu1($event, item)">
<div class="bubble" @contextmenu="showContextMenu($event, item)">
<div v-if="message?.msgType == 0" class="message">
<div class="content" v-html="message?.content"></div>
<div class="contentFy" v-html="message?.contentFy"></div>
......@@ -86,7 +86,7 @@
<div class="avatar">
<img :src="message?.userImg" class="avatar-image" />
</div>
<div class="bubble" @contextmenu="showContextMenu1($event, item)">
<div class="bubble" @contextmenu="showContextMenu($event, item)">
<div v-if="message?.msgType == 0" class="message">
<div class="content" v-html="message?.content"></div>
<div class="contentFy" v-html="message?.contentFy"></div>
......@@ -244,18 +244,14 @@ import { sendWebSocket } from '../utils/websocket'
import type { FormInstance } from 'element-plus'
import { initWebSocket } from '../utils/websocket'
import '@luohc92/vue3-image-viewer/dist/style.css'
import { getUserList, InquiryAdd, checkMesssages } from '../axios/model/user'
import { InquiryAdd, checkMesssages } from '../axios/model/user'
import useMenu from '@/components/Menu/RightClickMenu'
let { showContextMenu1, hideContextMenu2 } = useMenu()
//显示右键菜单的函数，在右键点击时调用。
//它阻止了默认的右键菜单并设置了菜单的位置，同时添加了一个点击事件监听器来在其他地方点击时隐藏菜单。
//处理右键菜单项点击的函数，你可以在这里处理点击菜单项后的逻辑。
let { showContextMenu, hideContextMenu } = useMenu()
const ruleForm = ref({
count: 1,
})
const ruleFormRef = ref<FormInstance>()
const messages = ref([])
// const { getUseUserStore.userInfo, setcurrentInfo, userList } = useUserStore()
const getUseUserStore = useUserStore()
const list = ref([])
const automaticPromptRef = ref('')
......@@ -316,7 +312,7 @@ let currentInfo = ref({
})
const connectMsg = () => {
const useUser = useUserStore()
const toIp = `ws://192.168.31.228:8081?type=kf&code=${getUseUserStore.userInfo?.username}`
const toIp = `ws://192.168.31.123:8081?type=kf&code=${getUseUserStore.userInfo?.username}`
useUser.connect()
initWebSocket(toIp)
useUser.setUserListMessages({}).then((res: any) => {
......@@ -341,12 +337,20 @@ const getCheckMesssages = async (res: any) => {
let query = {
sessionId: res.sessionId,
}
const { success, result, message }: any = await checkMesssages(query)
currentInfo.value = JSON.parse(JSON.stringify(res))
console.log(currentInfo)
currentInfo.value.messages = result
messages.value = result
console.log(messages.value)
const { success, result }: any = await checkMesssages(query)
if (success) {
currentInfo.value = JSON.parse(JSON.stringify(res))
result.forEach((item: any) => {
item.userImg =
'https://cdn.lirimall.com//lirigo/filetempImage/新鲜水果_1661668973048.png'
})
currentInfo.value.messages = result.map((item: any) => {
return {
...item,
}
})
messages.value = result
}
getUseUserStore.setCustomerInfo(currentInfo.value)
setSrollHeight()
} catch (error) {
......@@ -356,8 +360,7 @@ const getCheckMesssages = async (res: any) => {
//监听聊天数据的改变
watch(
() => getUseUserStore.userList,
(newVal, oldValue) => {
console.log(getUseUserStore.userList, '监听')
(newVal) => {
// 执行其他逻辑...
list.value = newVal
if (newVal && newVal.length > 0 && currentInfo.value.username) {
......@@ -372,7 +375,13 @@ watch(
deep: true,
},
)
watch(
messages,
(newVal) => {
if (newVal?.length > 0) setSrollHeight()
},
{ deep: true },
)
//让聊天滑动窗口滑到底部
const setSrollHeight = () => {
nextTick(() => {
......@@ -380,7 +389,6 @@ const setSrollHeight = () => {
if (div) div.scrollTop = div?.scrollHeight
})
}
//切换聊天人
const handleMenuClick = (item: object) => {
getCheckMesssages(item)
......@@ -405,7 +413,7 @@ const handleButtonClick = () => {
group_id: '',
toCode: currentInfo.value.username,
fromCode: getUseUserStore.userInfo.username,
createTime: getShortDate(),
time: getShortDate(),
to: currentInfo.value.username,
from: getUseUserStore.userInfo.username,
}
......@@ -414,47 +422,8 @@ const handleButtonClick = () => {
automaticPromptRef.value.setState('')
}
// const handleMessageClick = (event: any) => {
// const target = event.target
// if (target.tagName === 'A') {
// // 点击的是超链接
// // 执行相应的操作
// if (target.innerHTML === '解决') {
// alert('感谢您的使用')
// } else if (target.innerHTML === '未解决') {
// alert('很抱歉未能解决你的问题')
// } else {
// handleLinkClick(target.innerHTML)
// }
// } else if (target.tagName === 'IMG') {
// // 点击的图片进行放大操作
// ImageViewer({
// //切记额images这个参数是数组，我的target.valueof().src值是一个http的图片地址
// images: [target.valueOf().src],
// curIndex: 0,
// zIndex: 2000,
// showDownload: true,
// showThumbnail: true,
// handlePosition: 'bottom',
// maskBgColor: 'rgba(0,0,0,0.7)',
// onClose: () => {
// console.log('close')
// },
// })
// }
// }
//点击消息弹窗
// const showContextMenu = (e: any, item: any) => {
// e.preventDefault()
// const { closeMenu, openMenu, isShow } = openCountextMenus(e)
// if (isShow) closeMenu()
// openMenu(e)
// }
//提交询价单
const sumbitFuleForm = (formEl: FormInstance | undefined) => {
let query = {}
if (!formEl) return
formEl.validate(async (valid: boolean) => {
if (valid) {
......@@ -474,9 +443,6 @@ const sumbitFuleForm = (formEl: FormInstance | undefined) => {
}
})
}
// const handleLinkClick = (msg: string) => {
// messages.value.push({ content: msg, isSent: true })
// }
//消息框样式动态选择
const getMessageClass = (message: any) => {
return isSelf.value(message)
......@@ -640,7 +606,7 @@ const getMenuItem = (item: any) => {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
max-width: 120px;
max-width: 80px;
font-size: 16px;
color: rgba(0, 0, 0, 0.65);
margin-right: 10px;
......@@ -651,10 +617,9 @@ const getMenuItem = (item: any) => {
}
.user-reply {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
text-overflow: ellipsis;
max-width: 150px;
overflow: hidden;
color: #798494;
font-feature-settings: 'clig' off, 'liga' off;
......@@ -826,6 +791,8 @@ const getMenuItem = (item: any) => {
color: #000;
font-size: 14px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
.img-wraper img {
max-width: 100%;
height: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论