即时通信嵌入开发完成，期待下次开发将ui嵌入navbar中，以及完成拉起群聊以及群聊系统开发

2024-10-29 16:46:27 +08:00
parent 7a73f4d2b5
commit 8662ce971d
21 changed files with 967 additions and 32 deletions
--- a/ruoyi-ui/src/api/system/message.js
+++ b/ruoyi-ui/src/api/system/message.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询对话信息列表
+export function listMessage(query) {
+  return request({
+    url: '/system/message/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询对话信息详细
+export function getMessage(id) {
+  return request({
+    url: '/system/message/' + id,
+    method: 'get'
+  })
+}
+
+// 新增对话信息
+export function addMessage(data) {
+  return request({
+    url: '/system/message',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改对话信息
+export function updateMessage(data) {
+  return request({
+    url: '/system/message',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除对话信息
+export function delMessage(id) {
+  return request({
+    url: '/system/message/' + id,
+    method: 'delete'
+  })
+}
--- a/ruoyi-ui/src/components/Message/index.vue
+++ b/ruoyi-ui/src/components/Message/index.vue
@@ -0,0 +1,40 @@
+
+
+<template>
+
+</template>
+<script >
+
+
+export default {
+  name: 'Message',
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.destroy()
+  },
+  methods: {
+    click() {
+      this.$router
+    },
+    change() {
+
+    },
+    init() {
+
+    },
+    destroy() {
+
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+
+</style>
--- a/ruoyi-ui/src/layout/components/Navbar.vue
+++ b/ruoyi-ui/src/layout/components/Navbar.vue
@@ -11,23 +11,15 @@

        <search id="header-search" class="right-menu-item" />

-<!--        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
+        <div style="position: absolute;top: 0;right: 280px;font-weight: 200">
+          <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>
+          <i class="el-icon-s-comment" @click="chat = true" style=""></i>

+        </div>
        <screenfull id="screenfull" class="right-menu-item hover-effect" />
        <el-tooltip content="用户" effect="dark" placement="bottom">
          <div class="right-menu-item hover-effect" >{{roleGroup}} / {{user.nickName}}</div>
        </el-tooltip>
-
-<!--        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>-->
-
      </template>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
@@ -48,6 +40,80 @@
        </el-dropdown-menu>
      </el-dropdown>
    </div>
+
+
+    <el-drawer
+
+      :visible.sync="chat"
+      :with-header="false">
+<!--        好友列表-->
+      <el-aside width="" style="background-color: white">
+        <el-container>
+          <el-header>
+            <el-row>
+              <el-col :span="24">
+                <el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人" v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
+              </el-col>
+            </el-row>
+            <el-row style="margin-top: 5px">
+              <!-- TODO 这里搞一个弹窗去搜索用户表 从而进行添加好友操作 -->
+              <el-button size="mini">添加联系人</el-button>
+
+            </el-row>
+            <el-row style="margin-top: 5px">
+              <el-button size="mini">全部</el-button>
+              <el-button size="mini">个人</el-button>
+              <el-button size="mini">群聊</el-button>
+            </el-row>
+          </el-header>
+          <div v-loading="contactListLoading" style="margin-top: 30px">
+            <el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750" :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
+              <el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId" :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
+                <el-col :span="6">
+                  <el-image :src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar" fit="fill" style="width: 70%;border-radius: 50%;"/>
+                </el-col>
+                <el-col :span="18">
+                  <el-row>
+                    <el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{item.user.nickName}}</span></el-col>
+                    <el-col :span="5">
+                      <el-divider direction="vertical"/>
+                    </el-col>
+                  </el-row>
+                  <el-row>
+                    <el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
+                      <span><i class="el-icon-circle-check"></i>  {{item.endMsg}}</span>
+                    </el-col>
+                    <el-col :span="5" style="float: right">
+                      <el-dropdown class="hover_down_menu">
+                        <span class="el-dropdown-link">
+                          <i class="el-icon-arrow-down el-icon-more"></i>
+                        </span>
+                        <el-dropdown-menu slot="dropdown">
+                          <el-dropdown-item>置顶</el-dropdown-item>
+                          <el-dropdown-item>删除</el-dropdown-item>
+                        </el-dropdown-menu>
+                      </el-dropdown>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-main>
+            <el-main v-else class="msgListMain_empty">
+              <el-row>
+                <el-col :span="24">
+                  <img src="@/assets/images/contact.png" style="width: 80%; height: 80%"/>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                  <span style="color: gray">暂无联系人</span>
+                </el-col>
+              </el-row>
+            </el-main>
+          </div>
+        </el-container>
+      </el-aside>
+    </el-drawer>
  </div>
 </template>

@@ -62,7 +128,9 @@ import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
 import {getUserProfile} from "@/api/system/user";
-
+import {getContact, listContact} from "../../api/system/contact";
+import {addMessage} from "../../api/system/message";
+import {parseTime} from "../../utils/ruoyi";
 export default {
  components: {
    Breadcrumb,
@@ -82,6 +150,7 @@ export default {
    ]),
    setting: {
      get() {
+
        return this.$store.state.settings.showSettings
      },
      set(val) {
@@ -100,12 +169,38 @@ export default {
  data() {
    return {
      user: {},
+      chat:false,
      roleGroup: {},
      // postGroup: {},
+
+      //联系人列表
+      contactList: [],
+      contactListTotal: 0,
+      contactListLoading: false,
+      //消息记录
+      msgList: [],
+      msgListTotal: 0,
+      msgListLoading: false,
+      inputVal: '',
+      search: '',
+      contactUserId: null,
+      userId: null,
+      contactQueryParams: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      currentContact: {}
    };
  },
+  mounted() {
+    window.addEventListener("onmessageWS", this.subscribeMessage);
+  },
  created() {
+
    this.getUser();
+    this.userId = this.$store.state.user.id;
+    this.subscribeMessage();
+    this.getContactList();
  },
  methods: {
    toggleSideBar() {
@@ -129,6 +224,99 @@ export default {
          location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
        })
      }).catch(() => {});
+    },
+
+    /***********************************************************************/
+
+    getContactList() {
+      this.contactListLoading = true;
+      this.contactQueryParams.userId = this.userId;
+      listContact(this.contactQueryParams).then(response => {
+        if (response.code === 200) {
+          this.contactList = response.rows;
+          this.contactListTotal = response.total;
+          const contactUserId = this.$route.query.userId;
+          if (contactUserId) {
+            this.contactUserId = contactUserId;
+            let contact = response.rows.find(row => row.contactUserId == contactUserId);
+            this.loadMessage(contact.id);
+          }
+        }
+        this.contactListLoading = false;
+      })
+    },
+    contactLoadMore() {
+      // this.contactQueryParams.pageSize = 5;
+      // this.contactQueryParams.pageNum++;
+      this.getContactList();
+    },
+    loadMessage(concatId) {
+      this.msgListLoading = true;
+      getContact(concatId).then(response => {
+        if (response.code === 200) {
+          console.log(response.data)
+          this.currentContact = response.data;
+
+          this.msgList = response.data.messages;
+        }
+        this.msgListLoading = false;
+        this.fleshScroll();
+      })
+    },
+    insertEmoji(emoji) {
+      this.inputVal += emoji.data;
+    },
+    send() {
+      console.log("发送数据")
+      const message = {
+        contactId: this.currentContact.id,
+        userId: this.userId,
+        content: this.inputVal,
+        roomId: this.currentContact.roomId
+      }
+      this.msgList.push({
+        ...message,
+        id: this.msgList.length + 1,
+        createTime: parseTime(new Date())
+      })
+      this.fleshLastMsg();
+      addMessage(message)
+      const msg = {
+        sendUserId: this.userId,
+        sendUserName: this.$store.state.user.name,
+        userId: this.currentContact.contactUserId,
+        type: "chat",
+        detail: this.inputVal
+      }
+      this.$webSocket.sendWebsocket(JSON.stringify(msg));
+      this.inputVal = '';
+      this.fleshScroll();
+    },
+    subscribeMessage(res) {
+
+      if (res) {
+        const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
+        const message = {
+          id: 1,
+          contactId: userId,
+          userId: sendUserId,
+          content: detail,
+          roomId: this.currentContact.roomId,
+          createTime: parseTime(new Date())
+        }
+        this.msgList.push(message);
+        this.fleshLastMsg();
+        this.fleshScroll();
+      }
+    },
+    fleshLastMsg() {
+      const index = this.contactList.findIndex(e => e.id === this.currentContact.id);
+      this.contactList[index].endMsg = this.msgList[this.msgList.length - 1].content;
+    },
+    fleshScroll() {
+      this.$nextTick(() => {
+        document.getElementById("message_content_end").scrollIntoView();
+      })
    }
  }
 }
@@ -222,4 +410,84 @@ export default {
    }
  }
 }
+.app-container {
+  background: linear-gradient(180deg, rgba(0, 190, 189, .1), rgba(136, 255, 254, .2) 50%, rgba(242, 244, 247, .1));
+}
+.app {
+  background-color: white;
+  border-radius: 12px 12px 0 0;
+}
+.msgListMain {
+  height: 500px;
+  overflow-y:auto;
+  margin-top: 15px;
+}
+.msgUserList {
+  border-radius: 10px;
+}
+.msgListMain_empty {
+  display: flex;
+  height: 500px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.hover_down_menu {
+  display: none;
+}
+.msgUserList:hover {
+  background-color: #f2f2f2;
+  cursor: pointer;
+}
+.msgUserList:hover .hover_down_menu{
+  display: block;
+}
+.el-dropdown-link {
+  cursor: pointer;
+}
+.el-icon-arrow-down {
+  font-size: 15px;
+  font-weight: 500;
+}
+.main {
+  background-color: white;
+  height: 600px;
+  margin-left: 5px;
+}
+.main_empty {
+  display: flex;
+  background-color: white;
+  height: 600px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.main_empty .el-row {
+  text-align: center;
+}
+.main_empty img {
+  width: 25%;
+}
+.msg_content {
+  margin-top: 30px;
+  height: 390px;
+  overflow: auto;
+  //background-color: gray;
+}
+.chat_bubble {
+  float: right;
+  margin-right: 35px;
+  color: #333;
+  background-color: rgba(0, 190, 189, .2);
+  height: 40px;
+  line-height: 40px;
+  padding: 0 12px 0 12px;
+  border-radius: 5px;
+}
+.input_top_menu_img{
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
 </style>
--- a/ruoyi-ui/src/layout/index.vue
+++ b/ruoyi-ui/src/layout/index.vue
@@ -30,7 +30,7 @@ export default {
    RightPanel,
    Settings,
    Sidebar,
-    TagsView
+    TagsView,
  },
  mixins: [ResizeMixin],
  computed: {
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -112,7 +112,7 @@ let newVue =  new Vue({
    },
    closeSocket() {
      //关闭websocket连接
-      this.$websocket.close();
+      this.$webSocket.close();
    }
  },
  router,
--- a/ruoyi-ui/src/utils/websocket.js
+++ b/ruoyi-ui/src/utils/websocket.js
@@ -95,7 +95,6 @@ const webSocketOnError = (e) => {
 //服务器返回的数据
 const webSocketOnMessage = (e)=> {
  //判断是否登录
-  console.log("111111111111"+e)
  if (getToken()) {
    //window自定义事件
    window.dispatchEvent(
--- a/ruoyi-ui/src/views/oa/webSocket/index.vue
+++ b/ruoyi-ui/src/views/oa/webSocket/index.vue
@@ -212,7 +212,9 @@ export default {
      this.msgListLoading = true;
      getContact(concatId).then(response => {
        if (response.code === 200) {
+          console.log(response.data)
          this.currentContact = response.data;
+
          this.msgList = response.data.messages;
        }
        this.msgListLoading = false;
@@ -223,6 +225,7 @@ export default {
      this.inputVal += emoji.data;
    },
    send() {
+      console.log("发送数据")
      const message = {
        contactId: this.currentContact.id,
        userId: this.userId,
@@ -235,7 +238,7 @@ export default {
        createTime: parseTime(new Date())
      })
      this.fleshLastMsg();
-      addMessage(message);
+      addMessage(message)
      const msg = {
        sendUserId: this.userId,
        sendUserName: this.$store.state.user.name,
@@ -243,12 +246,12 @@ export default {
        type: "chat",
        detail: this.inputVal
      }
-      this.$websocket.sendWebsocket(JSON.stringify(msg));
+      this.$webSocket.sendWebsocket(JSON.stringify(msg));
      this.inputVal = '';
      this.fleshScroll();
    },
    subscribeMessage(res) {
-      console.log(res);
+
      if (res) {
        const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
        const message = {