cloudfile-ui/src/views/liveChat/index.vue

<script>
export default {
  name: "index",
};
</script>
<script setup>
import { ref, reactive, toRaw, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
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 { parseTime } from "@/utils/ruoyi";
import store from "@/store";
import {
  msgFriend,
  userTree,
  userInfo,
  msgSend,
  msgRecord,
  delMsg,
  dirTree,
  fileTree,
  spaceInfo,
  fileDownload,
} 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";
const route = useRoute();
const websoctStore = useWebsoctStore();
//====
const { proxy } = getCurrentInstance();
const userIds = useUserStore();
const height = ref(document.documentElement.clientHeight - 74 + "px;");
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 showCircel = ref(""); //是否 显示圆点
const chatRecords = reactive({ data: [] });
const loading = ref(false);
const sendCont = reactive({
  //发送聊天内容数据组装
  data: {
    content: "",
    fileList: [],
    toId: 0,
    msgType: "",
  },
});
const searchText = ref(""); //搜
const searchData = ref([]);

//聊天列表数据模拟
const personList = reactive({ data: [] });
//获取好友列表
const getMsgList = async () => {
  const resFriend = await msgFriend();
  personList.data = resFriend.rows;
  // .filter(
  //   (item) => item.toId !== useUserStore().uid
  // );

  searchData.value = personList.data;
    //圆点======
    searchData.value.map((i) => {
       if(i.fromId==websoctStore.messOne?.fromId){i.showCircel=true}else{
        i.showCircel=false
       }
    });
  //圆点======
  sendCont.data.toId =
    personList.data[0]?.toId == userIds.uid
      ? personList.data[0].fromId
      : personList.data[0].toId;
  headerName.value =
    personList.data[0]?.toId == userIds.uid
      ? personList.data[0].fromName
      : personList.data[0].toName;
  if (sendCont.data.toId) {
    //调用聊天记录
    msgRecordEvent(sendCont.data.toId);
  }
};
//获取用户的聊天记录
const msgRecordEvent = async (toIdValue) => {
  const queryParams = {
    pageNum: 1,
    pageSize: 10,
  };
  const resMsgData = await msgRecord(toIdValue, queryParams);
  resMsgData.rows.map((i) => (i.isForward = false));
  chatRecords.data = resMsgData.rows.reverse();
  const nowtime = parseTime(new Date().getTime(), "{y}-{m}-{d}");
  chatRecords.data.map((i) => {
    if (nowtime == i.createTime.substr(0, 10))
      i.createTime = i.createTime.substring(11);
  });
  total.value = resMsgData.total;
};
//点击左侧新建聊天
const open = ref(false);
const userTreeData = reactive({ data: [] });
const clickNewPerson = async () => {
  const res = await userTree();
  userTreeData.data = res;
  toRaw(userTreeData.data);
  open.value = true;
};
//点击左侧聊天列表
const clickPersonIndex = ref("");
const clickPerson = (index, item) => {
  sendCont.data.toId = item.userId
    ? item.userId
    : item.toId == userIds.uid
    ? item.fromId
    : item.toId;
  headerName.value = item.nickName
    ? item.nickName
    : item.toId == userIds.uid
    ? item.fromName
    : item.toName;
  noMes.value = false;
  clickPersonIndex.value = index;
  //点击某个人就不显示红点
  searchData.value.map((i) => {
       if(i.fromId==websoctStore.messOne?.fromId){i.showCircel=false}
    });
  msgRecordEvent(sendCont.data.toId);
};
//删除聊天
const delClick = (msgId) => {
  proxy.$modal
    .confirm("删除后，将清空该聊天的消息记录")
    .then(function () {
      return delMsg(msgId);
    })
    .then(() => {
      getMsgList();
      proxy.$modal.msgSuccess("删除成功");
    });
};

//树选中的人传过来的选中人的信息，push进入列表中
const changeMsg = async (val) => {
  const resInfo = await userInfo(val.id);
  if (searchData.value.length > 0) {
    //判断是否有相同的聊天人
    const filerData = searchData.value.filter(
      (vPerson) =>
        (vPerson.toId && vPerson.toId == resInfo.userId) ||
        (vPerson.userId && vPerson.userId == resInfo.userId)
    );
    if (filerData.length > 0) {
      return ElMessage({ message: "该聊天已存在", type: "error" });
    } else {
      searchData.value.unshift(resInfo);
    }
  } else {
    //为空数组的时候无需判断
    searchData.value.unshift(resInfo);
  }
  sendCont.data.toId = resInfo.userId;
  msgRecordEvent(sendCont.data.toId);
  headerName.value = resInfo.nickName;
};

//发送聊天
const msgSendClick = () => {
  noMes.value = false;
  if (messageText.value.trim() == "") {
    return ElMessage({ message: "不能发送空白消息", type: "error" });
  }
  const message = {
    content: messageText.value,
    msgType: "2",
    fileList: [],
    toId: sendCont.data.toId,
  };
  websoctStore.sendMessage(message);
  //发送消息后滚动到最底部显示最新消息
  const chatContainer = document.querySelector(".right-container");
  // 计算滚动的目标位置
  const targetScrollTop = chatContainer.scrollHeight;
  // 设置滚动位置
  chatContainer.scrollTop = targetScrollTop;
  messageText.value = "";
};
//发送文件确认按钮
const fileChangeMsg = async (val) => {
  const message = {
    content: val.id,
    msgType: "1",
    fileList: [],
    toId: sendCont.data.toId,
  };
  sendId.value = val.id;
  websoctStore.sendMessage(message);
};
//点击发送文件图标
const fileUserTreeData = reactive({ data: {} });
const sendFileClick = async () => {
  const resDir = await fileTree(3);
  fileUserTreeData.data = resDir;
  toRaw(fileUserTreeData.data);
  openFile.value = true;
};
//获取用户聊天记录
const handleNewMessage = async () => {
  if (websoctStore.newMessage) {
    msgRecordEvent(sendCont.data.toId); //获取用户的聊天记录
    getMsgList();
    websoctStore.newMessage = false; // 重置新消息标记
  }
};
watchEffect(() => {
  if (websoctStore.messOne?.fromId) {
    msgRecordEvent(websoctStore.messOne.fromId);
    getMsgList();
  }
});
// 滚动翻页========
const noMes = ref(false);
const handleScroll = (event) => {
  // 在滚动到顶部时，加载上一页的聊天记录
  const mainContainer = document.querySelector(".right-container");
  if (
    event.deltaY < 0 &&
    mainContainer.scrollTop <= 1 &&
    !noMes.value &&
    !loading.value
  ) {
    loading.value = true;
    loadPreviousPage();
  }
};
const loadPreviousPage = async () => {
  const currentPageNum = Math.ceil(chatRecords.data.length / 10) + 1;
  const queryParams = {
    pageNum: currentPageNum,
    pageSize: 10,
  };
  const resMsgData = await msgRecord(sendCont.data.toId, queryParams);
  const previousPageData = resMsgData.rows.reverse();
  chatRecords.data = [...previousPageData, ...chatRecords.data];
  const nowtime2 = parseTime(new Date().getTime(), "{y}-{m}-{d}");
  chatRecords.data.map((i) => {
    if (nowtime2 == i.createTime.substr(0, 10))
      i.createTime = i.createTime.substring(11);
  });
  noMes.value = false;
  if (currentPageNum * 10 >= resMsgData.total && !noMes.value) {
    loading.value = false;
    noMes.value = true;
    return;
  }
  // 将加载的上一页聊天记录插入到 chatRecords.data 的前面
  loading.value = false;
};
const transferFiles = (forwardVal, msgIds, indexs) => {
  chatRecords.data.map((i, index) => {
    if (i.msgId == msgIds && i.msgType == "1" && indexs == index) {
      i.isForward = true;
    } else {
      i.isForward = false;
    }
  });
};
// 点击转存
const forwardTreeData = reactive({ data: {} });
const spaceId = ref("");
const docId = ref("");
const forwardClick = async (indexs, docIds) => {
  docId.value = docIds ? docIds.toString() : "";
  const resDir = await dirTree(3);
  forwardTreeData.data = resDir;
  toRaw(forwardTreeData.data);
  //获取最上层树的id
  const topSpaceid = await spaceInfo(3);
  spaceId.value = topSpaceid.data.spaceId.toString();
  openForwardFile.value = true;
};
const forwardChangeMsg = async (val) => {};
//点击下载
const downClick = async (fileId) => {
  location.href = `${import.meta.env.VITE_APP_BASE_API}/api/download/${fileId}`;
};
//搜索的点击事件
const SearchChat = () => {
  if (searchText.value) {
    searchData.value = personList.data.filter((i) => {
      return i.toName == searchText.value;
    });
  } else {
    getMsgList();
  }
};
// 滚动翻页========
onMounted(() => {
  getMsgList();
  websoctStore.connect();
  setInterval(handleNewMessage, 1000); // 每秒钟检查是否有新消息
});
</script>

<template>
  <div class="main" :style="'height:' + height">
    <!-- 左侧用户列表 -->
    <div class="left-main">
      <div class="left-top search">
        <el-input
          v-model="searchText"
          maxlength="32"
          class="w-50 m-2"
          size="small"
          clearable
          placeholder="搜索聊天"
          suffix-icon="Search"
          @change="SearchChat"
        />
        <!-- 添加聊天人员 -->
        <el-icon
          size="24"
          color="#505870"
          @click="clickNewPerson"
          style="margin-right: 8px"
          ><Plus
        /></el-icon>
        <!-- 新建聊天弹框 -->
        <Addperson
          :open="open"
          @close="open = false"
          :userTreeData="userTreeData.data"
          @changeMsg="changeMsg"
        ></Addperson>
      </div>
      <!-- 列表 -->
      <div
        :class="
          clickPersonIndex == index
            ? 'activ-left-container left-container'
            : 'left-container'
        "
        v-for="(item, index) in searchData"
        :key="index"
        @click="clickPerson(index, item)"
      >
        <img :src="cebian" class="cebian" v-if="clickPersonIndex == index" />
        <!-- <button
          class="del-chat"
          v-if="clickPersonIndex == index"
          @click="delClick(item.msgId)"
        >
          删除聊天
        </button> -->
        <div>
          <img :src="item.avatar ? item.avatar : chat" class="head-sculpture" />
        </div>
        <div class="spill">
          <span class="person-name">{{
            item.nickName
              ? item.nickName
              : item.toId == userIds.uid
              ? item.fromName
              : item.toName
          }}</span
          ><span class="person-cont spill">
            {{ item.file?.fileName ? item.file?.fileName : item.content }}</span
          >
        </div>
        <span
          class="yuandian"
          v-if="item.showCircel&& $route.path == '/index'"
        ></span>
      </div>
    </div>
    <!-- 右侧聊天 -->
    <div class="right-main">
      <div
        class="common-layout"
        style="display: flex; flex-direction: column; height: 100vh"
      >
        <el-container>
          <el-header height="64px" class="right-header flex-buju">{{
            headerName
          }}</el-header>
          <!-- 聊天 -->
          <el-main
            class="right-container"
            @mousewheel="handleScroll"
            ref="mainContainer"
          >
            <div v-loading="loading"></div>
            <!-- <div v-if="noMes" style="color:#9fa1a5 ;">无更多聊天记录</div> -->
            <div
              class="message-container"
              v-for="(record, index) in chatRecords.data"
              :class="{
                'message-left': useUserStore().uid == record.toId,
                'message-right': useUserStore().uid !== record.toId,
              }"
              :key="index"
            >
              <div
                v-if="useUserStore().uid !== record.toId"
                :class="
                  record.msgType == '1'
                    ? 'file-msg right-back'
                    : 'time-text right-back'
                "
              >
                <img
                  :src="word"
                  v-if="record.msgType == '1'"
                  class="head-sculpture"
                />
                <div
                  :class="
                    record.msgType == '2' ? 'clip-path' : 'clip-path-right'
                  "
                >
                  <div
                    style="color: #c1cce3; font-size: 12px; margin-bottom: 4px"
                  >
                    {{ record.createTime.slice(0, -3) }}
                  </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 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, index)"
                >
                  <img
                    v-if="record.msgType == '1'"
                    :src="word"
                    class="head-sculpture"
                  />
                  <div
                    :class="
                      record.msgType == '2' ? 'clip-path' : 'clip-path-left'
                    "
                  >
                    <div
                      style="
                        color: #7a89ba;
                        font-size: 12px;
                        margin-bottom: 4px;
                      "
                    >
                      {{ record.createTime.slice(0, -3) }}
                    </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(index, record.file?.docId)"
                />
                <img
                  :src="downFile"
                  class="zhuanfa downf"
                  alt="下载"
                  v-if="record.isForward"
                  @click="downClick(record.file.fileId)"
                />
              </div>
            </div>
          </el-main>
          <!-- 底部 -->
          <el-footer height="72px" class="right-footer">
            <!-- 发送文件 -->
            <img
              :src="sendFile"
              class="send-info-file"
              @click="sendFileClick"
            />
            <FileTreeChoice
              :openFile="openFile"
              @close="openFile = false"
              :fileUserTreeData="fileUserTreeData.data"
              @fileChangeMsg="fileChangeMsg"
            ></FileTreeChoice>
            <el-input
              v-model="messageText"
              class="w-50 m-2"
              clearable
              size="small"
              placeholder="请输入聊天内容"
              maxlength="800"
              @keydown.enter="msgSendClick"
            />
            <!-- 发送按钮 -->
            <img :src="send" class="send-info" @click="msgSendClick" />
          </el-footer>
        </el-container>
      </div>
    </div>
  </div>
  <forwordTree
    :openForwardFile="openForwardFile"
    :docId="docId"
    :spaceId="spaceId"
    @close="openForwardFile = false"
    :forwardTreeData="forwardTreeData.data"
    @forwardChangeMsg="forwardChangeMsg"
  ></forwordTree>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/my-common.scss";
.left-container {
  position: relative;
}
.yuandian {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  top: 6px;
  background: #fa5151;
  border-radius: 4px;
}
</style>