消息撤回

.env.development

@@ -13,7 +13,7 @@ VUE_APP_LOG_URL =@/assets/logo/myhk.png
 ENV = 'development'
 
 # FS管理系统/开发环境
-VUE_APP_BASE_API ='http://company.jnmyunl.com/prod-api'
+VUE_APP_BASE_API ='/dev-api'
 
 #默认 1、会员 2、企微
 VUE_APP_COURSE_DEFAULT = 1
@@ -33,4 +33,4 @@ VUE_APP_PROJECT_FROM=dev
 VUE_APP_COURSE_COMPANY_NAME = 2
 
 # IM webSocket地址
-VUE_APP_IM_WS_URL = ws://qwipad.jnmyunl.com/qwImSocket
+VUE_APP_IM_WS_URL = ws://192.168.110.10:8667/qwImSocket

src/components/LemonUI/components/index.vue

@@ -84,7 +84,7 @@ export default {
     sendKey: Function,
     wrapKey: Function,
     sendText: String,
-    contextmenu: Array,
+    //contextmenu: Array,
     contactContextmenu: Array,
     avatarCricle: Boolean,
     user: {
@@ -145,6 +145,61 @@ export default {
     currentIsDefSidebar() {
       return DEFAULT_MENUS.includes(this.activeSidebar);
     },
+    contextmenu(){
+      const list =[ {
+                click: (e, instance, hide) => {
+                  const { message } = instance;
+                  const data = {
+                    id: generateUUID(),
+                    type: "event",
+                    //使用 jsx 时 click必须使用箭头函数（使上下文停留在vue内）
+                    content: (
+                      <div>
+                        <span>
+                          你撤回了一条消息{" "}
+                          <span
+                            v-show={message.type == "text"}
+                            style="color:#409EFF;cursor:pointer"
+                            content={message.content}
+                            on-click={e => {
+                              this.setEditorValue(e.target.getAttribute("content"));
+                            }}
+                          >
+                            重新编辑
+                          </span>
+                        </span>
+                      </div>
+                    ),
+
+                    toContactId: message.toContactId,
+                    sendTime: new Date().getTime(),
+                    fromUser: this.user,
+                    lastContent:message.content,
+                    msgId:message.id
+                  };
+                  this.removeMessage(message.id);
+                  this.appendMessage(data, true);
+                  hide();
+                  },
+                visible: instance => {
+                  const { message } = instance;
+                          // 1. 判断是否是自己发送的消息
+                          const isSelf = message.fromUser.id === this.user.id;
+                          if (!isSelf) return false;
+
+                          // 2. 计算消息发送时间与当前时间的差值（分钟）
+                          const sendTime = message.sendTime; // 消息发送时间（时间戳，毫秒）
+                          const currentTime = new Date().getTime(); // 当前时间戳
+                          const minuteDiff = (currentTime - sendTime) / (1000 * 60); // 转换为分钟
+
+                          // 3. 仅当发送时间小于 1 分钟时，显示撤回选项
+                          return minuteDiff < 1;
+                },
+                text: "撤回消息",
+              },
+              ]
+      return list;
+    },
     lastMessages() {
       // var data = this.contacts.filter(item => !isEmpty(item.lastContent));
       // data.sort((a1, a2) => {
@@ -186,14 +241,33 @@ export default {
      * 新增一条消息
      */
     appendMessage(message, scrollToBottom = false) {
+         console.log(message,'message233232')
         let messageList = allMessages[message.toContactId];
         // 如果是自己的消息需要push，发送的消息不再增加未读条数
         let conversation=this.findConversation(message.toContactId);
         let unread=conversation.unread!=undefined && conversation.unread>0?(conversation.unread+1):1;
-        if (message.type == 'event'){
-            // if(this.user.id == message.fromUser.id){}
-            unread = 0;
-        }
+        if (message.type === 'event'){
+          if(message.fromUser.id === this.user.id){
+            this._emitSend(message, () => {
+              this.updateContact({
+                id: message.toContactId,
+                lastContent: this.lastContentRender(message),
+                lastSendTime: message.sendTime,
+                unread:0
+              });
+              this.CacheDraft.remove(message.toContactId);
+            });
+            }
+          }
+        if (message.type === 'cancel'){
+         this.updateContact({
+           id: message.toContactId,
+           lastContent: this.lastContentRender(message),
+           lastSendTime: message.sendTime,
+           unread:0
+         });
+         return;
+      }
         if (messageList === undefined) {
           //console.log("qxj appendMessage messageList:"+messageList+",message"+JSON.stringify(message));
           conversation.id=message.toContactId;
@@ -206,7 +280,6 @@ export default {
           let hasMsg = messageList.some(({id})=>id == message.id);
           if (hasMsg) return;
           this._addMessage(message, message.toContactId, 1);
-
           conversation.lastContent=this.lastContentRender(message);
           conversation.lastSendTime=message.sendTime;
           if (message.toContactId == this.currentContactId) {
@@ -393,12 +466,13 @@ export default {
       };
     },
     _renderSidebarMessage() {
+
       return this._renderSidebar(
         [
           useScopedSlot(this.$scopedSlots["sidebar-message-top"], null, this),
           this.lastMessages.map(contact => {
             if (contact.type !== 'text' && isFunction(lastContentRender[contact.type])) {
-              contact.lastContent =  lastContentRender[contact.type].call(this, contact);
+               contact.lastContent =  lastContentRender[contact.type].call(this, contact);
             }
             return this._renderContact(
               {
@@ -419,7 +493,6 @@ export default {
       );
     },
     _renderContact(props, onClick, slot) {
-      //console.log(this.currentContactId,props,'prop')
       const {
         click: customClick,
         renderContainer,
@@ -1030,7 +1103,6 @@ export default {
      * @param {Array<Contact>} data 会话列表
      */
     initConversations(data) {
-      //console.log(data,'data')
       this.conversations = data;
       this.sortConversations();
     },
@@ -1122,9 +1194,11 @@ export default {
      * @param {Contact} data 修改的数据，根据 Contact.id 查找联系人并覆盖传入的值
      */
     updateContact(data) {
+          console.log(data,"datdhffff")
       const conversationId = data.conversationId;
       const index = this.findConversationIndexById(conversationId);
       if (index !== -1) {
+        console.log(data,'data111')
         // if(isString(data.unread)) {
         //     if (unread.indexOf("+") === 0 || unread.indexOf("-") === 0) {
         //       data.unread =parseInt(unread) + parseInt(this.conversations[index].unread);

src/components/LemonUI/components/message/cancel.vue

@@ -0,0 +1,36 @@
+<script>
+export default {
+  name: "lemonMessageCancel",
+  inheritAttrs: false,
+  inject: ["IMUI"],
+  render() {
+    const { content} = this.$attrs.message;
+    // return (
+    //   <div class="lemon-message lemon-message-cancel">
+    //     <span
+    //       class="lemon-message-cancel__content">
+    //       {content}
+    //     </span>
+    //   </div>
+    // );
+  },
+  methods: {
+    _emitClick(e, key) {
+      this.IMUI.$emit("message-click", e, key, this.$attrs.message, this.IMUI);
+    }
+  }
+};
+</script>
+<style lang="stylus">
+@import '../../styles/utils/index'
++b(lemon-message-cancel)
+  +e(content)
+    user-select none
+    display inline-block
+    // background #e9e9e9
+    color #84868C
+    font-size 12px
+    margin 0 auto
+    padding 5px 10px
+    border-radius 4px
+</style>

src/components/LemonUI/components/message/event.vue

@@ -4,14 +4,14 @@ export default {
   inheritAttrs: false,
   inject: ["IMUI"],
   render() {
-    const { content } = this.$attrs.message;
+    const { content} = this.$attrs.message;
     return (
       <div class="lemon-message lemon-message-event">
         <span
           class="lemon-message-event__content"
           on-click={e => this._emitClick(e, "content")}
         >
-          {content}
+         {content}
         </span>
       </div>
     );

src/components/LemonUI/components/messages.vue

@@ -83,6 +83,22 @@ export default {
                   },
                 }}
               />,
+              // <lemon-message-cancel
+              //   attrs={{
+              //     message: {
+              //       id: "__time__",
+              //       type: "cancel",
+              //       content: hoursTimeFormat(message.sendTime),
+              //     },
+              //   }}
+              // />,
+              <div v-show={message.type=='cancel'} class="lemon-message lemon-message-cancel">
+                <span
+                  class="lemon-message-cancel__content"
+                >
+                  {message.fromUser.id==this.reverseUserId?'你撤回了一条消息':message.fromUser.displayName+'撤回了一条消息'}
+                </span>
+              </div>
             );
           }
           let attrs;

src/components/LemonUI/index.js

@@ -12,6 +12,7 @@ import LemonMessageText from "./components/message/text";
 import lemonMessageImage from "./components/message/image";
 import lemonMessageFile from "./components/message/file";
 import lemonMessageEvent from "./components/message/event";
+import lemonMessageCancel from "./components/message/cancel";
 import LemonMessageVoice from "./components/message/voice";
 import LemonMessageVideo from "./components/message/video";
 import LemonMessageEmotionDynamic from "./components/message/emotionDynamic.vue";
@@ -39,6 +40,7 @@ const components = [
   lemonMessageImage,
   lemonMessageFile,
   lemonMessageEvent,
+  lemonMessageCancel,
   LemonMessageVoice,
   LemonMessageVideo,
   LemonRecords,

src/components/LemonUI/lastContentRender.js

@@ -15,8 +15,11 @@ export default {
   text(message) {
     return this.emojiNameToImage(clearHtml(message));
   },
+  cancel(){
+    return '[消息已撤回]';
+  },
   event(message){
-    return '[通知]';
+    return '[消息已撤回]';
   },
   emotionDynamic(message) {
     return '[自定义表情]';

src/views/qw/qwChat/qq.vue

@@ -169,17 +169,17 @@
           <div class="user-name">
             {{contact.displayName}}
           </div>
-<!--          <div @click="openDrawer('right')" style="position: absolute;right: 14px;top: 10px;">-->
-<!--            <i class="el-icon-more" style="cursor: pointer"/>-->
-<!--          </div>-->
-<!--          <div>-->
-<!--            <el-button-->
-<!--              type="primary"-->
-<!--              size="small"-->
-<!--              style="position: absolute;right: 14px;top: 10px;z-index: 1000"-->
-<!--              @click="showDetail(contact.extId)"-->
-<!--            >详情</el-button>-->
-<!--          </div>-->
+        <!-- <div @click="openDrawer('right')" style="position: absolute;right: 14px;top: 10px;">
+           <i class="el-icon-more" style="cursor: pointer"/>
+         </div>
+         <div>
+           <el-button
+             type="primary"
+             size="small"
+             style="position: absolute;right: 14px;top: 10px;z-index: 1000"
+             @click="showDetail(contact.extId)"
+           >详情</el-button>
+         </div> -->
         </template>
         <template #message-extend="contact">
            <div class="close-box">
@@ -265,6 +265,7 @@ export default {
       qwUserList:[],
       theme: "default",
       IMUI:null,
+      contextmenu: [],
       contactContextmenu: [],
       hideMenuAvatar: false,
       hideMenu: false,
@@ -491,7 +492,6 @@ export default {
         try {
           let message = JSON.parse(data);
           this.appendRemoteMessage(message);
-
           // 播放声音 暂时不播放声音
           // const audio = new Audio(notificationMp3);
           // audio.play().catch(err => {
@@ -854,7 +854,6 @@ export default {
     },
     handleChangeContact(contact) {
       const IMUI = this.$refs.IMUI;
-      console.log(contact,'contact')
       if(contact.conversationId==null){
         const data={
           id:contact.id,
@@ -913,8 +912,10 @@ export default {
         this.appendRemoteMessage(message);
       }
     },
+
     //发送消息
     handleSend(message, next, file) {
+      console.log(message,'message')
       const IMUI = this.$refs.IMUI;
       let params = {};
       if(message.type === "text"){  //text   image   voice   video
@@ -937,6 +938,27 @@ export default {
           }
         });
       }
+      //消息撤回
+     else if(message.type === "event"){
+        params = {"sessionId":message.toContactId,"appKey":this.qwUser.appKey,"content":message.lastContent, "msgType": 6,"msgId":message.msgId};
+        sendMsg(params).then(response => {
+          const {code, data} = response
+          if(code === 200){
+            this.appendRemoteMessage(data)
+            let conversation = IMUI.findConversation(message.toContactId);
+            conversation.lastSendTime = message.sendTime;
+            conversation.lastContent = IMUI.lastContentRender(message)
+            IMUI.topPopConversations(conversation);
+
+            // 更新缓存中的会话记录
+            this.updateSessionConversation(conversation);
+
+            next();
+          } else {
+            next({status:'failed'})
+          }
+        });
+      }
       // image
       else if(message.type === "image"){
         const formData = new FormData();
@@ -1017,6 +1039,7 @@ export default {
       player && player.play()
     },
     handleMessageClick(e, key, message, instance) {
+      // console.log("key"+key, message,instance)
       if (key === 'avatar') {
         this.qwUser.id !== message.fromUser.id && this.showDetail(message.extId)
         return
@@ -1132,12 +1155,37 @@ export default {
         if (!message.sendTime) {
           message.sendTime = new Date().getTime();
         }
-
+        // 对方撤回
+        if (message.type === "cancel" && message.fromUser.id!==this.qwUser.id) {
+            const data = {
+                    id: generateUUID(),
+                    type: "event",
+                    //使用 jsx 时 click必须使用箭头函数（使上下文停留在vue内）
+                    content: (
+                      <div>
+                        <span>
+                          {message.fromUser.displayName+'撤回了一条消息'}
+                        </span>
+                      </div>
+                    ),
+                    toContactId: message.toContactId,
+                    sendTime: getTime(),
+                    fromUser: message.fromUser,
+                    lastContent:message.content,
+                    msgId:message.id
+                  };
+                  IMUI.removeMessage(message.id);
+                  IMUI.appendMessage(data, true);
+        }
         // 根据消息类型处理
         switch (message.type) {
+
           case "text":
             // 文本消息不需要特殊处理
             break;
+            case "cancel":
+
+              break;
           case "image":
             // 确保图片消息有content或url字段
             if (!message.content && message.url) {
@@ -1173,7 +1221,6 @@ export default {
             console.warn("未知消息类型:", message.type);
             break;
         }
-
         // 添加消息到UI
         IMUI.appendMessage(message, true);
 
@@ -1247,7 +1294,7 @@ export default {
       // 重新获取会话列表
       getConversations(this.qwUser.id,this.pageParams).then(response => {
         this.conversationData = response.data.list;
-
+        console.log('-----')
         // 缓存会话记录
         this.qwUserSessions[appKey] = response.data.list;
 

vue.config.js

@@ -47,7 +47,7 @@ module.exports = {
 
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.10.125:8006`,
+        target: `http://192.168.110.10:8006`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''