|
|
@@ -6,10 +6,12 @@ export default {
|
|
|
<script setup>
|
|
|
import { ref, reactive, toRaw, toRefs } from "vue";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
-import word from "@/assets/images/word.png";
|
|
|
+import word from "@/assets/images/word2.png";
|
|
|
import chat from "@/assets/images/profile.jpg";
|
|
|
import cebian from "@/assets/images/cebian.png";
|
|
|
import send from "@/assets/images/send.png";
|
|
|
+import downFile from "@/assets/images/down-file.png";
|
|
|
+import forwardFile from "@/assets/images/forward-file.png";
|
|
|
import sendFile from "@/assets/images/send-file.png";
|
|
|
import store from "@/store";
|
|
|
import {
|
|
|
@@ -21,10 +23,10 @@ import {
|
|
|
delMsg,
|
|
|
dirTree,
|
|
|
fileTree,
|
|
|
- getConfigKeys,
|
|
|
} from "@/api/chat/msg";
|
|
|
import Addperson from "@/components/AddPerson/index.vue"; //添加人员的弹框
|
|
|
import FileTreeChoice from "@/components/FileTreeChoice/index.vue"; //选择文件发送的列表
|
|
|
+import forwordTree from "@/components/forwordTree/index.vue"; //选择文件发送的列表
|
|
|
//websocket连接====
|
|
|
import useWebsoctStore from "@/store/modules/websocket";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
@@ -37,7 +39,9 @@ const messageText = ref(""); //发送的内容
|
|
|
const headerName = ref("");
|
|
|
const total = ref(0);
|
|
|
const sendId = ref(""); //选择发送的文件id
|
|
|
+const isForward=ref(false)
|
|
|
const openFile = ref(false); //文件目录
|
|
|
+const openForwardFile = ref(false); //转发目录
|
|
|
const chatRecords = reactive({ data: [] });
|
|
|
const sendCont = reactive({
|
|
|
//发送聊天内容数据组装
|
|
|
@@ -90,26 +94,9 @@ const msgRecordEvent = async (toIdValue) => {
|
|
|
pageSize: 10,
|
|
|
};
|
|
|
const resMsgData = await msgRecord(toIdValue, queryParams);
|
|
|
+ resMsgData.rows.map(i=>i.isForward=false)
|
|
|
chatRecords.data = resMsgData.rows.reverse();
|
|
|
total.value = resMsgData.total;
|
|
|
- console.log('sendId.value',sendId.value)
|
|
|
- if (sendId.value) {
|
|
|
- //转换文件名称
|
|
|
- const res = await getConfigKeys(sendId.value);
|
|
|
-
|
|
|
- chatRecords.data.forEach((i) => {
|
|
|
- console.log('i.content', i.content,res.docId)
|
|
|
- if (i.content == res.docId) {
|
|
|
- console.log("res.docId======", res.docId);
|
|
|
- i.content = res.fileName;
|
|
|
- i.fileType = res.fileType;
|
|
|
- i.dirId = res.dirId;
|
|
|
- i.fileSize = res.fileSize;
|
|
|
- }
|
|
|
- });
|
|
|
- sendId.value = "";
|
|
|
- }
|
|
|
-
|
|
|
};
|
|
|
//点击左侧新建聊天
|
|
|
const open = ref(false);
|
|
|
@@ -139,7 +126,6 @@ const clickPerson = (index, item) => {
|
|
|
};
|
|
|
//删除聊天
|
|
|
const delClick = (msgId) => {
|
|
|
- console.log("msgId", msgId);
|
|
|
proxy.$modal
|
|
|
.confirm("删除后，将清空该聊天的消息记录")
|
|
|
.then(function () {
|
|
|
@@ -169,7 +155,6 @@ const changeMsg = async (val) => {
|
|
|
//为空数组的时候无需判断
|
|
|
searchData.value.unshift(resInfo);
|
|
|
}
|
|
|
- console.log("first", searchData.value);
|
|
|
sendCont.data.toId = resInfo.userId;
|
|
|
msgRecordEvent(sendCont.data.toId);
|
|
|
headerName.value = resInfo.nickName;
|
|
|
@@ -182,22 +167,20 @@ const msgSendClick = () => {
|
|
|
msgType: "2",
|
|
|
fileList: [],
|
|
|
toId: sendCont.data.toId,
|
|
|
- }
|
|
|
+ };
|
|
|
websoctStore.sendMessage(message);
|
|
|
messageText.value = "";
|
|
|
};
|
|
|
//发送文件确认按钮
|
|
|
const fileChangeMsg = async (val) => {
|
|
|
- const ids=toRefs(val)
|
|
|
const message = {
|
|
|
- content: ids.value,
|
|
|
+ content: val.id,
|
|
|
msgType: "1",
|
|
|
fileList: [],
|
|
|
toId: sendCont.data.toId,
|
|
|
};
|
|
|
- sendId.value =ids.value;
|
|
|
+ sendId.value = val.id;
|
|
|
websoctStore.sendMessage(message);
|
|
|
- console.log('sendId.value',sendId.value)
|
|
|
};
|
|
|
//点击发送文件图标
|
|
|
const fileUserTreeData = reactive({ data: {} });
|
|
|
@@ -215,7 +198,6 @@ const handleNewMessage = () => {
|
|
|
}
|
|
|
};
|
|
|
watchEffect(() => {
|
|
|
- console.log("first", websoctStore.messOne);
|
|
|
if (websoctStore.messOne?.fromId) {
|
|
|
msgRecordEvent(websoctStore.messOne.fromId);
|
|
|
}
|
|
|
@@ -244,6 +226,30 @@ const loadPreviousPage = async () => {
|
|
|
// 将加载的上一页聊天记录插入到 chatRecords.data 的前面
|
|
|
chatRecords.data = [...previousPageData, ...chatRecords.data];
|
|
|
};
|
|
|
+const transferFiles=(forwardVal,msgIds)=>{
|
|
|
+ chatRecords.data.map(i=>{
|
|
|
+ if(i.msgId==msgIds&&i.msgType=='1'){
|
|
|
+ i.isForward=true
|
|
|
+ }else{
|
|
|
+ i.isForward=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 点击转发
|
|
|
+const forwardTreeData = reactive({ data: {} });
|
|
|
+const forwardClick=async ()=>{
|
|
|
+ const resDir = await dirTree(3);
|
|
|
+ forwardTreeData.data = resDir;
|
|
|
+ toRaw(forwardTreeData.data);
|
|
|
+ openFile.value = true;
|
|
|
+}
|
|
|
+const forwardChangeMsg = async (val) => {
|
|
|
+
|
|
|
+};
|
|
|
+//点击下载
|
|
|
+const downClick=()=>{
|
|
|
+
|
|
|
+}
|
|
|
// 滚动翻页========
|
|
|
onMounted(() => {
|
|
|
getMsgList();
|
|
|
@@ -340,16 +346,44 @@ onMounted(() => {
|
|
|
>
|
|
|
<div
|
|
|
v-if="useUserStore().uid !== record.toId"
|
|
|
- class="time-text right-back"
|
|
|
+ :class="record.msgType == '1'?'file-msg right-back':'time-text right-back'"
|
|
|
>
|
|
|
- <div>{{ record.createTime }}</div>
|
|
|
- <span>{{ record.content }}</span>
|
|
|
+ <img :src="word" v-if="record.msgType == '1'" class="head-sculpture" />
|
|
|
+ <div :class="record.msgType == '2'?'clip-path':'clip-path-right'">
|
|
|
+ <div>{{ record.createTime }}</div>
|
|
|
+ <span v-if="record.msgType == '1'">{{
|
|
|
+ record.file?.fileName
|
|
|
+ }}</span>
|
|
|
+ <span v-else-if="record.msgType == '2'">{{
|
|
|
+ record.content
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<img :src="chat" class="head-sculpture" />
|
|
|
- <div v-if="useUserStore().uid == record.toId" class="left-back">
|
|
|
- <div>{{ record.createTime }}</div>
|
|
|
- <span>{{ record.content }}</span>
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
+ <div v-if="useUserStore().uid == record.toId" :class="record.msgType == '1'?'file-msg left-back':'left-back'" @click="transferFiles(record.msgType,record.msgId)">
|
|
|
+ <img
|
|
|
+ v-if="record.msgType == '1'"
|
|
|
+ :src="word"
|
|
|
+ class="head-sculpture"
|
|
|
+ />
|
|
|
+ <div :class="record.msgType == '2'?'clip-path':'clip-path-left'">
|
|
|
+ <div>{{ record.createTime }}</div>
|
|
|
+ <span v-if="record.msgType == '1'">{{
|
|
|
+ record.file?.fileName
|
|
|
+ }}</span>
|
|
|
+ <span v-else-if="record.msgType == '2'">{{ record.content }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <img :src="forwardFile" class="zhuanfa forwd" alt="转存" v-if="record.isForward" @click="forwardClick">
|
|
|
+ <img :src="downFile" class="zhuanfa downf" alt="下载" v-if="record.isForward" @click="downClick">
|
|
|
+ <forwordTree
|
|
|
+ :openForwardFile="openForwardFile"
|
|
|
+ @close="openForwardFile = false"
|
|
|
+ :forwardTreeData="forwardTreeData.data"
|
|
|
+ @forwardChangeMsg="forwardChangeMsg"
|
|
|
+ ></forwordTree>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
<!-- 底部 -->
|
“yueshang”
