会话群调整

src/store/modules/socket.js

@@ -120,7 +120,14 @@ const socket = {
         conversationMessage: {},
         controlTransfer: {},
         operationModeApplyList: [], // 模式转换消息列表
-        conversationGroup: {} // 群组消息
+        conversationGroup: { // 群组
+            JOIN: {}, // 创建或加入群组
+            UPDATE_NAME: {}, // 更新名称
+            UPDATE_MEMBER: {}, // 更新群成员
+            EXIT: {}, // 退群
+            MESSAGE: {}, // 消息
+            MESSAGE_STATUS: {} // 消息状态
+        }
     },
     getters: {
     },
@@ -409,7 +416,9 @@ const socket = {
             });
         },
         setConversationGroup: (state, message) => {
-            state.conversationGroup = message;
+            if (state.conversationGroup[message.messageType] !== undefined) {
+                state.conversationGroup[message.messageType] = message;
+            }
         }
     },
 

src/views/newMap/display/newChat/chatDialog.vue

@@ -39,20 +39,27 @@
             </div>
           </div>
           <div class="middleMain">
-            <div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === groupIdActive}" @click="groupClick(item)">
+            <div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)">
               <div class="groupIcon"><img :src="getImgUrl(item.imageUrl)" alt=""></div>
               <div class="groupInfo">
                 <div class="text"><b>{{ item.name }}</b></div>
-                <div class="text">{{ item.message }}</div>
+                <div class="text">{{ getLastMsg(item.messageList) }}</div>
               </div>
               <div class="groupMarke">
-                <div class="time">{{ item.time }}</div>
+                <div class="time">{{ getLastTime(item.messageList) }}</div>
                 <i v-if="item.isMute" class="el-icon-close-notification" />
               </div>
             </div>
           </div>
         </div>
-        <div class="right">消息</div>
+        <div class="right">
+          <div v-for="(item, index) in activeMessageList" :key="index">
+            <span>{{ item.time }}</span>
+            <span>{{ item.content }}</span>
+          </div>
+          <el-input v-model="inputMsg" />
+          <el-button @click="sendMsg">发送</el-button>
+        </div>
       </div>
       <div v-else-if="tabActive==1">文档</div>
       <div v-else-if="tabActive==2">工作台</div>
@@ -63,7 +70,8 @@
 
 <script>
 import {mapGetters} from 'vuex';
-import { getGroupList } from '@/api/newChat';
+import { getGroupList, sendText } from '@/api/newChat';
+import { timestampFormat } from '@/utils/date';
 export default {
     name: '',
     components: {
@@ -74,6 +82,7 @@ export default {
     },
     data() {
         return {
+            inputMsg: '',
             logoImgUrl: '',
             dialogVisible: false,
             tabs: [
@@ -92,23 +101,52 @@ export default {
             ],
             filterActive: 0,
             groupList: [
-                {name: '分公司领导', imageUrl: '', time: '15:36', message: '控制中心消息：【I 类】'},
+                // {name: '分公司领导', imageUrl: '', memberList:[], messageList: [{content: '控制中心消息：【I 类】', time: '2023-04-20 15:08:55'}]},
-                {name: '集团公司', imageUrl: '', time: '04-17', message: '【演练结束】2号线二期：14:58 Y04列车演练结束', isMute: true}
+                // {name: '集团公司', imageUrl: '', memberList:[],messageList: [{content: '【演练结束】2号线二期：14:58 Y04列车演练结束', time: '2023-04-20 15:08:55'}], isMute: true}
             ],
-            groupIdActive: 0
+            id: 0 // 当前的群组id
         };
     },
     computed: {
         ...mapGetters('projectConfig', ['loginProLogo']),
         groupId() {
             return this.$route.query.group;
+        },
+        activeMessageList() {
+            let list = [];
+            const find = this.groupList.find(item => {
+                return item.id == this.id;
+            });
+            if (find) {
+                list = find.messageList;
+            }
+            return list;
         }
     },
     watch: {
-        '$store.state.socket.conversationGroup': function(val) {
+        '$store.state.socket.conversationGroup.MESSAGE': function(val) {
-            if (val) {
+            const find = this.groupList.find(item => {
-                console.log('🚀 ~ file: chatDialog.vue:110 ~ val:', val);
+                return item.id == val.id;
-
+            });
+            if (find) {
+                find.messageList.push(val.message);
+            }
+        },
+        '$store.state.socket.conversationGroup.MESSAGE_STATUS': function(val) {
+            const find = this.groupList.find(item => {
+                return item.id == val.id;
+            });
+            if (find) {
+                const index = find.messageList.findIndex(item => {
+                    return item.id == val.message.id;
+                });
+                if (index > -1) {
+                    const obj = {
+                        ...find.messageList[index],
+                        ...val.message
+                    };
+                    find.messageList.splice(index, 1, obj);
+                }
             }
         }
     },
@@ -122,12 +160,53 @@ export default {
         this.handleClose();
     },
     methods: {
+        sendMsg() {
+            sendText(this.groupId, {id: this.id, content:this.inputMsg}).then(res => {
+                console.log(res, '--res--');
+                this.inputMsg = '';
+            }).catch(err => {
+                console.log(err, '--err--');
+            });
+        },
+        getLastMsg(list) {
+            let msg = '';
+            if (list.length) {
+                msg = list[list.length - 1].content;
+            }
+            return msg;
+        },
+        getLastTime(list) {
+            let time = '';
+            if (list.length) {
+                time = list[list.length - 1].time;
+            }
+            return this.timestampFormat(time);
+        },
+        timestampFormat(time) {
+            let timeStr = '';
+            if (time) {
+                const t = new Date(time).getTime();
+                const todayTime = new Date(new Date().toLocaleDateString()).getTime();
+                const tomorrow = todayTime + 24 * 3600 * 1000;
+                const yesterday = todayTime - 24 * 3600 * 1000;
+                if (t >= tomorrow) {
+                    timeStr = timestampFormat('MM-DD', time);
+                } else if (tomorrow > t && t >= todayTime) {
+                    timeStr = timestampFormat('HH:mm', time);
+                } else if (todayTime > t && t >= yesterday) {
+                    timeStr = '昨天';
+                } else if (yesterday > t) {
+                    timeStr = timestampFormat('MM-DD', time);
+                }
+            }
+            return timeStr;
+        },
         getGroupList() {
             getGroupList(this.groupId).then(res => {
                 console.log(res, '---res--');
                 this.groupList = res.data;
                 if (this.groupList && this.groupList[0].id) {
-                    this.groupIdActive = this.groupList[0].id;
+                    this.id = this.groupList[0].id;
                 }
             }).catch(err => {
                 console.log(err, '---获取群组列表失败--');
@@ -146,8 +225,7 @@ export default {
             this.filterActive = index;
         },
         groupClick(item) {
-            console.log('🚀 ~ file: chatDialog.vue:149 ~ groupClick ~ item:', item);
+            this.id = item.id;
-            this.groupIdActive = item.id;
         },
         handleClose() {
             this.$store.dispatch('training/setChatBoxMin', true);