添加消息事件触发

components/chat-list-model.vue

@@ -3,6 +3,7 @@
         <div class="chat-list h-100">
         <div class="chat-list h-100">
             <div class="chat-list-scroll">
             <div class="chat-list-scroll">
                 <el-scrollbar ref="scrollbar" class="list-scroll no-bottom-scrollbar">
                 <el-scrollbar ref="scrollbar" class="list-scroll no-bottom-scrollbar">
+                    <div v-if="needUpdate" class="need-update-tip" @click="refreshFirstPage">数据有更新，请刷新</div>
                     <div
                     <div
                         v-for="item in chatRooms"
                         v-for="item in chatRooms"
                         :key="'room_' + item.id"
                         :key="'room_' + item.id"
@@ -101,6 +102,9 @@ export default class ModelChatList extends Vue {
     @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
     @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
     private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
     private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
 
 
+    @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
+    private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
+
     @Prop({ type: Number, default: -1 })
     @Prop({ type: Number, default: -1 })
     private selected!: number;
     private selected!: number;
 
 
@@ -113,6 +117,7 @@ export default class ModelChatList extends Vue {
     private pageSize = 10;
     private pageSize = 10;
     private total = 0;
     private total = 0;
     private currentPage = 1;
     private currentPage = 1;
+    private needUpdate = false;
     
     
 
 
     private get chatRooms() {
     private get chatRooms() {
@@ -125,8 +130,8 @@ export default class ModelChatList extends Vue {
 
 
     private async getList() {
     private async getList() {
         const result = await this.sdk.model(this.modelName).list(this.listName || undefined).query({
         const result = await this.sdk.model(this.modelName).list(this.listName || undefined).query({
-            pageIndex: 1,
-            item_size: 50
+            pageIndex: this.currentPage,
+            item_size: this.pageSize
         })
         })
         this.chatList = result.pageData.rows.map(it => {
         this.chatList = result.pageData.rows.map(it => {
             return {
             return {
@@ -143,16 +148,33 @@ export default class ModelChatList extends Vue {
                 title: it.title.value
                 title: it.title.value
             } as ChatType
             } as ChatType
         })
         })
+        this.needUpdate = false;
+        this.hideChat();
         this.total = result.pageData.record_count;
         this.total = result.pageData.record_count;
         this.$emit("update-page-info", {title: result.pageData.title})
         this.$emit("update-page-info", {title: result.pageData.title})
     }
     }
 
 
+    private async refreshFirstPage() {
+        this.currentPage = 1;
+        await this.getList();
+    }
+
     async created() {
     async created() {
         this.modelName = this.$route.params.modelName;
         this.modelName = this.$route.params.modelName;
         this.listName = this.$route.params.listName;
         this.listName = this.$route.params.listName;
         await this.getList();
         await this.getList();
         this.setSource(ChatStore.StateChatSourceDirection.Server);
         this.setSource(ChatStore.StateChatSourceDirection.Server);
         this.scrollbar.update();
         this.scrollbar.update();
+        this.$onBeforeDestroy(
+            await this.sdk.model("UniplatChat").registerOnChange(this.onTransportMessage)
+        )
+    }
+
+    onTransportMessage(e: any) {
+        let index = e.dataUpdates.findIndex(it => it.action === "startChat" || it.action === "csExitChat");
+        if (index > -1) {
+            this.needUpdate = true;
+        }        
     }
     }
 
 
     mounted() {
     mounted() {
@@ -302,4 +324,14 @@ export default class ModelChatList extends Vue {
     padding: 0;
     padding: 0;
     border-color: #ccc;
     border-color: #ccc;
 }
 }
+.need-update-tip {
+    background: #fff2e6;
+    color: #e87005;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 14px;
+    padding: 8px 0;
+    text-align: center;
+    cursor: pointer;
+}
 </style>
 </style>

components/chat-list.vue

@@ -101,6 +101,9 @@ export default class ChatList extends Vue {
     @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
     @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
     private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
     private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
 
 
+    @chatStore.Mutation(ChatStore.MUTATION_HIDE_CHAT)
+    private readonly hideChat: ChatStore.MUTATION_HIDE_CHAT;
+
     @Prop({ type: Number, default: -1 })
     @Prop({ type: Number, default: -1 })
     private selected!: number;
     private selected!: number;
 
 
@@ -123,6 +126,9 @@ export default class ChatList extends Vue {
         this.setSource(ChatStore.StateChatSourceDirection.Server);
         this.setSource(ChatStore.StateChatSourceDirection.Server);
         await this.selectFirstChat();
         await this.selectFirstChat();
         this.scrollbar.update();
         this.scrollbar.update();
+        this.$onBeforeDestroy(
+            await this.sdk.model("UniplatChat").registerOnChange(this.onTransportMessage)
+        )
     }
     }
 
 
     mounted() {
     mounted() {
@@ -130,6 +136,11 @@ export default class ChatList extends Vue {
         this.goToOnlyRoom();
         this.goToOnlyRoom();
     }
     }
 
 
+    onTransportMessage() {
+        this.getMyChatList()
+        // this.hideChat()
+    }
+
     private goToOnlyRoom() {
     private goToOnlyRoom() {
         if (this.chatRooms.length === 1) {
         if (this.chatRooms.length === 1) {
             const wantedChat = this.chatRooms[0];
             const wantedChat = this.chatRooms[0];