会话控制

8d36ee61 · Sixong.Zhu · 3347be3d · 8d36ee61 · 8d36ee61 · 8d36ee61
Commit 8d36ee61 authored Oct 26, 2021 by Sixong.Zhu
Showing with 76 additions and 23 deletions
components/chat-room.vue
components/chat-title.vue
components/message-input.vue
components/message-item/file-controller.ts
components/message-list.vue
hybrid-input/index.vue
store/index.ts
store/model.ts
--- a/components/chat-room.vue
+++ b/components/chat-room.vue
--- a/components/chat-title.vue
+++ b/components/chat-title.vue
--- a/components/message-input.vue
+++ b/components/message-input.vue
@@ -128,7 +128,7 @@
                        };
                        img.remove();
                    }
-                    uploadFile(file)
+                    return uploadFile(file)
                        .then((r) => {
                            if (r) {
                                const msg = {
@@ -150,6 +150,7 @@
                                });
                                this.removeSendingMessages(index);
                                URL.revokeObjectURL(src.url);
+                                return index;
                            } else {
                                this.setMsg2Failed(index);
                            }

--- a/components/message-item/file-controller.ts
+++ b/components/message-item/file-controller.ts
@@ -196,6 +196,7 @@ export const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
 export const MAX_IMAGE_SIZE_STRING = "5MB";
 export const MESSAGE_IMAGE_TOO_LARGE = `您发送的图片大小超过 ${MAX_IMAGE_SIZE_STRING}。`;
 export const MESSAGE_FILE_EMPTY = "不能发送空文件。";
+export const ERROR_IMAGE = "发送的不是图片";
 /**
 * 最大文件大小

--- a/components/message-list.vue
+++ b/components/message-list.vue
@@ -69,9 +69,6 @@
        @chatStore.Action(ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID)
        private readonly getNextPageMsg!: ChatStore.ACTION_GET_CHAT_MESSAGES_AFTER_SPECIFIC_ID;
-        @chatStore.Action(ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA)
-        private readonly clearChatId!: ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA;
        @chatStore.Mutation(ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM)
        private readonly saveScrollToBottomFunc!: ChatStore.MUTATION_SAVE_FUNC_SCROLL_TO_BOTTOM;
@@ -87,6 +84,9 @@
        @chatStore.Mutation(ChatStore.MUTATION_WITHDRAW)
        private readonly executeWithDraw!: ChatStore.MUTATION_WITHDRAW;
+        @chatStore.Action(ChatStore.ACTION_SET_CHAT_ERROR)
+        private readonly setError!: ChatStore.ACTION_SET_CHAT_ERROR;
        @Prop({ default: "circle" })
        private shape!: string;
@@ -148,6 +148,14 @@
            }
        }
+        @Watch("chatId")
+        private onChatChanged(o: number, n: number) {
+            o && n && this.messages.length
+                ? this.fetchNewMsg()
+                : setTimeout(() => this.fetchNewMsg(), 300);
+            this.scroll2End(this.messages.length ? 0 : 100);
+        }
        private raiseFileOpen(value: boolean) {
            this.$emit("file-open", value);
        }
@@ -204,7 +212,6 @@
                this.scollWrapper.removeEventListener("scroll", this.handleScroll);
            this.clearScrollToBottomFunc();
            this.clearNewMessage();
-            // this.clearChatId();
        }
        public scroll2End(delay?: number) {
@@ -325,13 +332,25 @@
            if (msg.length === 0) return;
            this.startLoadingNew();
            const msgId = getLastMessageId(msg);
-            const data = await this.getNextPageMsg(msgId);
+            return this.getNextPageMsg(msgId)
-            if (data.length === 0) {
+                .then((data) => {
-                // eslint-disable-next-line no-console
+                    if (data.length === 0) {
-                console.log("没有更多新消息了");
+                        // eslint-disable-next-line no-console
-            }
+                        console.log("没有更多新消息了");
-            this.$emit("next-page", msgId);
+                    }
-            this.endLoadingNew();
+                    this.$emit("next-page", msgId);
+                    this.endLoadingNew();
+                })
+                .catch((e) => {
+                    if (
+                        e &&
+                        e.message &&
+                        (e.message as string).includes("sql: no rows in result set")
+                    ) {
+                        this.setError(this.chatId);
+                    }
+                })
+                .finally(() => this.endLoadingNew());
        }
        private format2Time(time: number) {

--- a/hybrid-input/index.vue
+++ b/hybrid-input/index.vue
@@ -18,9 +18,17 @@
                    src="@/customer-service/imgs/pic.png"
                />
            </label>
-            <!-- <label for="chat-upload-file" :title="tip4File" @click="allowLoadFile">
+            <label
-        <img class="tool-bar-icon" src="@/customer-service/imgs/file.png" />
+                for="chat-upload-file"
-      </label> -->
+                :title="tip4File"
+                @click="allowLoadFile"
+                v-if="enableFileSelection"
+            >
+                <img
+                    class="tool-bar-icon"
+                    src="@/customer-service/imgs/file.png"
+                />
+            </label>
            <input
                @change="onChange"
@@ -63,6 +71,7 @@
    import { Component, Ref, Vue, Watch } from "vue-property-decorator";
    import { namespace } from "vuex-class";
    import {
+        ERROR_IMAGE,
        getFileType,
        getSvg,
        MAX_FILE_SIZE,
@@ -130,6 +139,8 @@
        private tip4Image = `发送图片(最大${MAX_IMAGE_SIZE_STRING})`;
        private tip4File = `发送文件(最大${MAX_FILE_SIZE_STRING})`;
+        private enableFileSelection = false;
        private emoji: EmojiItem[] = [];
        @Watch("chatId")
@@ -489,6 +500,15 @@
                                this.$emit("error", MESSAGE_FILE_EMPTY);
                                return;
                            }
+                            if (
+                                this.enableFileSelection &&
+                                file.size >= MAX_FILE_SIZE
+                            ) {
+                                this.$emit("error", MESSAGE_FILE_TOO_LARGE);
+                                return;
+                            }
                            if (this.isImage(file)) {
                                if (file.size >= MAX_IMAGE_SIZE) {
                                    this.$emit("error", MESSAGE_IMAGE_TOO_LARGE);
@@ -496,11 +516,11 @@
                                }
                                html += this.buildImageHtml(file);
                            } else {
-                                if (file.size >= MAX_FILE_SIZE) {
+                                if (this.enableFileSelection) {
-                                    this.$emit("error", MESSAGE_FILE_TOO_LARGE);
+                                    html += this.buildFileHtml(file);
-                                    return;
+                                } else {
+                                    return this.$emit("error", ERROR_IMAGE);
                                }
-                                html += this.buildFileHtml(file);
                            }
                        }

--- a/store/index.ts
+++ b/store/index.ts
@@ -31,7 +31,7 @@ function uniqueMessages(
    messages: NonNullable<ChatStore.STATE_CHAT_MSG_HISTORY>
 ) {
    const arr = [...messages];
-    return unique(arr, function(item, all) {
+    return unique(arr, function (item, all) {
        return all.findIndex((k) => k.id === item.id);
    });
 }
@@ -119,6 +119,7 @@ export default {
        [ChatStore.STATE_CHAT_DIALOG_VISIBLE]: false,
        [ChatStore.STATE_CHAT_DIALOG_IS_SINGLE]: false,
        [ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER]: false,
+        [ChatStore.STATE_CHAT_CURRENT_IS_CHAT_ERROR]: null,
        [ChatStore.STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID]: null,
        [ChatStore.STATE_CHAT_CURRENT_USER_UID]: null,
        [ChatStore.STATE_CHAT_MSG_HISTORY]: null,
@@ -326,7 +327,7 @@ export default {
                state[ChatStore.STATE_CHAT_SENDING_MESSAGES] = [...current];
            }
        },
-        [ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING]: (function() {
+        [ChatStore.MUTATION_SAVE_CURRENT_CHAT_INPUTING]: (function () {
            const setTimeoutId: { [key: string]: number } = {};
            return (
                state: ChatStoreState,
@@ -683,13 +684,15 @@ export default {
            );
            commit(ChatStore.MUTATION_INITING_CHAT_DONE);
            commit(ChatStore.MUTATION_SCROLL_TO_BOTTOM);
+            state[ChatStore.STATE_CHAT_CURRENT_IS_CHAT_ERROR] = null;
        },
-        async [ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA]({ commit }) {
+        async [ChatStore.ACTION_CLEAR_CURRENT_CHAT_DATA]({ commit, state }) {
            commit(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_ID);
            commit(ChatStore.MUTATION_CLEAR_MYSELF_ID);
            commit(ChatStore.MUTATION_CLEAR_CHAT_MSG_HISTORY);
            commit(ChatStore.MUTATION_CLEAR_CHAT_TITLE);
            commit(ChatStore.MUTATION_CLEAR_CURRENT_CHAT_MEMBERS);
+            state[ChatStore.STATE_CHAT_CURRENT_IS_CHAT_ERROR] = null;
        },
        async [ChatStore.ACTION_GET_CHAT_MEMBERS]({ commit, state }) {
            const chatId = state[ChatStore.STATE_CHAT_CURRENT_CHAT_ID];
@@ -729,7 +732,7 @@ export default {
            }
            commit(
                ChatStore.MUTATION_SAVE_CURRENT_CHAT_MEMBERS,
-                unique(newChatMembers, function(item, all) {
+                unique(newChatMembers, function (item, all) {
                    return all.findIndex((k) => k.eid === item.eid);
                })
            );
@@ -916,6 +919,9 @@ export default {
                .updateChat(p)
                .finally(() => dispatch(ChatStore.ACTION_GET_MY_CHAT_LIST));
        },
+        [ChatStore.ACTION_SET_CHAT_ERROR]: ({ state }, chat: number) => {
+            state[ChatStore.STATE_CHAT_CURRENT_IS_CHAT_ERROR] = chat;
+        },
    },
    getters: {
        [ChatStore.STATE_CHAT_MSG_HISTORY](state) {

--- a/store/model.ts
+++ b/store/model.ts
@@ -44,6 +44,9 @@ export namespace ChatStore {
        "当前用户类型状态，25-普通用户，92-客服";
    export type STATE_CHAT_CURRENT_USER_TYPE = string | null;
+    export const STATE_CHAT_CURRENT_IS_CHAT_ERROR = "当前会话是否错误";
+    export type STATE_CHAT_CURRENT_IS_CHAT_ERROR = number | null;
    export const STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID = "当前chat的Uniplat id";
    export type STATE_CHAT_CURRENT_CHAT_UNIPLAT_ID = string | null;
@@ -344,6 +347,9 @@ export namespace ChatStore {
        value: dto.MessageHandled;
    }) => void;
+    export const ACTION_SET_CHAT_ERROR = "标记会话关键性错误";
+    export type ACTION_SET_CHAT_ERROR = (chat: number) => void;
    export interface ChatUpdateParameter {
        chat: number;
        type?: dto.MessageType;