eslint

049a2228 · Sixong.Zhu · a2b13d43 · 049a2228 · 049a2228 · 049a2228
Commit 049a2228 authored Sep 09, 2021 by Sixong.Zhu
Showing with 296 additions and 74 deletions
chat.vue
components/chat-container.vue
components/chat-list-model.vue
components/chat-list.vue
components/chat-members.vue
components/chat-room.vue
components/chat-title.vue
components/create-chat.vue
components/msg-shortcut.vue
database/index.ts
store/index.ts
store/model.ts
xim/index.ts
--- a/chat.vue
+++ b/chat.vue
@@ -44,8 +44,10 @@
    </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import remarkList from "../components/common/remarkList.vue";
 import ChatMembers from "./components/chat-members.vue";
 import ChatRoom from "./components/chat-room.vue";
 import ChatTitle from "./components/chat-title.vue";
@@ -108,7 +110,7 @@ export default class Chat extends Vue {
        this.refreshFlag = true;
        this.$nextTick(() => {
            this.refreshFlag = false;
-        })
+        });
    }
    @Prop(String) modelName: string;

--- a/components/chat-container.vue
+++ b/components/chat-container.vue
@@ -39,9 +39,10 @@
 <script lang="ts">
 import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
-import ChatList from "@/customer-service/components/chat-list.vue";
-import ChatListModel from "@/customer-service/components/chat-list-model.vue";
 import chat from "@/customer-service/chat.vue";
+import ChatListModel from "@/customer-service/components/chat-list-model.vue";
+import ChatList from "@/customer-service/components/chat-list.vue";
 import { ChatStore, chatStore } from "@/customer-service/store/model";
 @Component({

--- a/components/chat-list-model.vue
+++ b/components/chat-list-model.vue
@@ -104,11 +104,13 @@
 <script lang="ts">
 import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import { parserMessage } from "./controller";
+import { EVENTS } from "@/EventConsts";
 import { chatStore, ChatStore } from "@/customer-service/store/model";
 import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
 import { Chat as ChatType } from "@/customer-service/xim/models/chat";
-import { EVENTS } from "@/EventConsts";
-import { parserMessage } from "./controller";
 interface SelectChatType extends ChatType {
    checked?: boolean;
@@ -222,7 +224,7 @@ export default class ModelChatList extends Vue {
    }
    onTransportMessage(e: any) {
-        let index = e.dataUpdates.findIndex(
+        const index = e.dataUpdates.findIndex(
            (it) =>
                it.action === "startChat" ||
                it.action === "createChat" ||
@@ -232,7 +234,7 @@ export default class ModelChatList extends Vue {
                (it.action === "sendMsg" &&
                    this.listName === "group_before_handle" &&
                    this.chatList.findIndex(
-                        (chat) => chat.id == it.selectedList[0]
+                        (chat) => chat.id === it.selectedList[0]
                    ) > -1)
        );
        if (index > -1) {
@@ -267,7 +269,7 @@ export default class ModelChatList extends Vue {
    }
    private async goToChatRoom(data: ChatType) {
-        const chatInfo = await this._createChat({
+        await this._createChat({
            modelName: data.business_data.model_name,
            selectedListId: data.business_data.obj_id,
            uids: [],
@@ -281,7 +283,7 @@ export default class ModelChatList extends Vue {
    }
    private parseMesage(data: ChatType) {
-        if (data.last_msg_sender && data.last_msg_sender != "0") {
+        if (data.last_msg_sender && data.last_msg_sender !== "0") {
            if (this.userNames[data.last_msg_sender] === undefined) {
                this.updateUserName({ id: data.last_msg_sender, name: "" });
                this.sdk
@@ -311,7 +313,7 @@ export default class ModelChatList extends Vue {
    }
    private batchStartReception() {
-        let chats = this.chatRooms.filter((chat) => chat.checked);
+        const chats = this.chatRooms.filter((chat) => chat.checked);
        if (chats.length === 0) {
            this.$message.warning("请先勾选要接待的会话");
            return;

--- a/components/chat-list.vue
+++ b/components/chat-list.vue
@@ -53,11 +53,13 @@
 <script lang="ts">
 import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import Controller from "./controller/chat-list";
+import { EVENTS } from "@/EventConsts";
 import avatar from "@/customer-service/components/avatar.vue";
 import { ChatStore } from "@/customer-service/store/model";
 import { Chat as ChatType } from "@/customer-service/xim/models/chat";
-import { EVENTS } from "@/EventConsts";
-import Controller from "./controller/chat-list";
 @Component({ components: { avatar } })
 export default class ChatList extends Controller {

--- a/components/chat-members.vue
+++ b/components/chat-members.vue
@@ -37,26 +37,33 @@ export default class ChatMembers extends Vue {
    @chatStore.Action(ChatStore.ACTION_CHAT_REMOVE_CS)
    private readonly _getoutCs!: ChatStore.ACTION_CHAT_REMOVE_CS;
-    private async getout(item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]) {
+    private async getout(
+        item: ChatStore.GETTER_CURRENT_CHAT_PRESENT_MEMBERS[number]
+    ) {
        await this.$confirm(`确定要移除${item.name}？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        });
        // xim里的eid等于uniplat里的uid
-        if (item.type == 25) { // 普通成员
+        if (item.type === 25) {
-            this._getout([item.eid])
+            // 普通成员
-        } else if (item.type == 92) { // 可否
+            this._getout([item.eid]);
-            this._getoutCs([item.eid])
+        } else if (item.type === 92) {
+            // 可否
+            this._getoutCs([item.eid]);
        }
    }
    private memberTypeStr(type: string | number) {
        if (type.toString() === "25") {
-            return ""
+            return "";
-        } else if (type.toString() === "92") {
+        }
-            return "客服"
+        if (type.toString() === "92") {
-        } else if (type.toString() === "85") {
+            return "客服";
-            return "管理员"
+        }
+        if (type.toString() === "85") {
+            return "管理员";
        }
    }
 }

--- a/components/chat-room.vue
+++ b/components/chat-room.vue
@@ -24,7 +24,7 @@
                ></div>
                <div
                    ref="bottom"
-                    class="chat-input flex-none overflow-hidden"
+                    class="chat-input flex-none overflow-hidden h-100"
                    v-if="isChatMember"
                >
                    <message-input @error="onError" />
@@ -37,10 +37,10 @@
 import {
    Component,
    Prop,
+    Provide,
    Ref,
-    Watch,
    Vue,
-    Provide,
+    Watch,
 } from "vue-property-decorator";
 import MessageInput from "@/customer-service/components/message-input.vue";
@@ -156,8 +156,9 @@ export default class ChatRoom extends Vue {
    }
    mounted() {
-        (this.refBottom as HTMLElement).style.height =
+        this.refBottom &&
-            this.chatBox.clientHeight - this.refTop.clientHeight + "px";
+            ((this.refBottom as HTMLElement).style.height =
+                this.chatBox.clientHeight - this.refTop.clientHeight + "px");
    }
 }
 </script>

--- a/components/chat-title.vue
+++ b/components/chat-title.vue
@@ -55,6 +55,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import ChatCreator from "@/customer-service/components/create-chat.vue";
 import { ChatStore, chatStore } from "@/customer-service/store/model";
@@ -130,7 +131,7 @@ export default class ChatTitle extends Vue {
    private async exitChat() {
        try {
-            if (this.operatorType == "25") {
+            if (this.operatorType === "25") {
                await this._userExitChat();
            } else if (+this.operatorType > 25) {
                await this._csExitChat();

--- a/components/create-chat.vue
+++ b/components/create-chat.vue
@@ -57,12 +57,13 @@
    </el-dialog>
 </template>
 <script lang="ts">
-import { ListEasy, ListTypes } from "uniplat-sdk";
+import { ListEasy, ListTypes, TagManagerTypes } from "uniplat-sdk";
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import GeneralTagSelectForFilter from "@/components/statistic/GeneralTagSelectForFilter.vue"
 import buttonThrottle from "../utils/button-throttle";
+import GeneralTagSelectForFilter from "@/components/statistic/GeneralTagSelectForFilter.vue";
 import avatar from "@/customer-service/components/avatar.vue";
-import { TagManagerTypes } from "uniplat-sdk"
 import chat from "@/customer-service/xim/index";
 type User = {
    id: string;
@@ -103,9 +104,9 @@ export default class ChatCreator extends Vue {
        if (this.$refs.generalTagSelect) {
            return (
                this.$refs.generalTagSelect as GeneralTagSelectForFilter
-            ).getSelectedTags()
+            ).getSelectedTags();
        }
-        return []
+        return [];
    }
    private async getUserList(searchText: string | null = null) {
@@ -127,7 +128,7 @@ export default class ChatCreator extends Vue {
        this.getList = getList;
        this.userList = this.exactUserList(pageData.rows);
        this.loading = false;
-        this.tagGroups = pageData.tagGroups || []
+        this.tagGroups = pageData.tagGroups || [];
    }
    private exactUserList(rows: any[]) {

--- a/components/msg-shortcut.vue
+++ b/components/msg-shortcut.vue
 <template>
    <div class="msg-short-cut-wrap">
        <div class="btn-group top-btn-group">
-            <el-button type="text" @click="replyInputVisible = true" v-if="!replyInputVisible">添加</el-button>
+            <el-button
-            <el-button v-show="replyInputVisible" @click="addReply" size="small" type="text">提交</el-button>
+                type="text"
-            <el-button v-show="replyInputVisible" @click="hideReplyInput" size="small" type="text">取消</el-button>
+                @click="replyInputVisible = true"
-            <br>
+                v-if="!replyInputVisible"
-            <el-input class="remark-input" type="textarea" v-show="replyInputVisible" v-model="addReplyStr" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
+                >添加</el-button
+            >
+            <el-button
+                v-show="replyInputVisible"
+                @click="addReply"
+                size="small"
+                type="text"
+                >提交</el-button
+            >
+            <el-button
+                v-show="replyInputVisible"
+                @click="hideReplyInput"
+                size="small"
+                type="text"
+                >取消</el-button
+            >
+            <br />
+            <el-input
+                class="remark-input"
+                type="textarea"
+                v-show="replyInputVisible"
+                v-model="addReplyStr"
+                maxlength="200"
+                minlength="2"
+                :show-word-limit="true"
+            ></el-input>
        </div>
-        <div class="shortcut pointer" v-for="(reply, index) in replyList" :key="reply.id">
+        <div
-            <span class="rep-index">{{index + 1}}.</span>
+            class="shortcut pointer"
-            <span class="rep-content" v-if="!editingItem[reply.id]">{{ reply.content }}</span>
+            v-for="(reply, index) in replyList"
-            <el-input v-if="editingItem[reply.id]" class="remark-input" type="textarea" v-model="editingItemContent[reply.id]" maxlength="200" minlength="2" :show-word-limit="true"></el-input>
+            :key="reply.id"
+        >
+            <span class="rep-index">{{ index + 1 }}.</span>
+            <span class="rep-content" v-if="!editingItem[reply.id]">{{
+                reply.content
+            }}</span>
+            <el-input
+                v-if="editingItem[reply.id]"
+                class="remark-input"
+                type="textarea"
+                v-model="editingItemContent[reply.id]"
+                maxlength="200"
+                minlength="2"
+                :show-word-limit="true"
+            ></el-input>
            <div class="btn-group">
-                <el-button type="text" @click="sendMsg(reply)" v-if="!editingItem[reply.id]">发送</el-button>
+                <el-button
-                <el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="editing(reply)">编辑</el-button>
+                    type="text"
-                <el-button type="text" v-if="uid === reply.created_by && !editingItem[reply.id]" @click="delReply(reply)">删除</el-button>
+                    @click="sendMsg(reply)"
-                <el-button v-if="editingItem[reply.id]" @click="editDone(reply)" type="text">确定</el-button>
+                    v-if="!editingItem[reply.id]"
-                <el-button v-if="editingItem[reply.id]" @click="editCancel(reply)" type="text">取消</el-button>
+                    >发送</el-button
+                >
+                <el-button
+                    type="text"
+                    v-if="uid === reply.created_by && !editingItem[reply.id]"
+                    @click="editing(reply)"
+                    >编辑</el-button
+                >
+                <el-button
+                    type="text"
+                    v-if="uid === reply.created_by && !editingItem[reply.id]"
+                    @click="delReply(reply)"
+                    >删除</el-button
+                >
+                <el-button
+                    v-if="editingItem[reply.id]"
+                    @click="editDone(reply)"
+                    type="text"
+                    >确定</el-button
+                >
+                <el-button
+                    v-if="editingItem[reply.id]"
+                    @click="editCancel(reply)"
+                    type="text"
+                    >取消</el-button
+                >
            </div>
        </div>
    </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { ChatStore, chatStore } from "../store/model";
 import buttonThrottle from "../utils/button-throttle";
@@ -30,8 +95,8 @@ interface Reply {
    sort: string;
    id: string;
    content: string;
-    uniplat_version: string
+    uniplat_version: string;
-    created_by: string
+    created_by: string;
 }
 const ReplyModelName = "uniplat_chat_reply";
@@ -48,15 +113,17 @@ export default class MsgShortCut extends Vue {
    private uid = this.sdk.global.uid;
    private replyInputVisible = false;
    private addReplyStr = "";
-    private editingItem: {[key: string]: boolean} = {};
+    private editingItem: { [key: string]: boolean } = {};
-    private editingItemContent: {[key: string]: string} = {};
+    private editingItemContent: { [key: string]: string } = {};
    async mounted() {
        await this.getReplyList();
    }
    private async getReplyList() {
-        this.replyList = await this.sdk.domainService("uniplat_base", "chat.chat", "reply").request("get");
+        this.replyList = await this.sdk
+            .domainService("uniplat_base", "chat.chat", "reply")
+            .request("get");
    }
    @buttonThrottle()
@@ -73,33 +140,47 @@ export default class MsgShortCut extends Vue {
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
-            this.sdk.model(ReplyModelName).action("delete").updateInitialParams({
+            this.sdk
-                selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
+                .model(ReplyModelName)
-            }).execute().then(() => {
+                .action("delete")
-                const index = this.replyList.findIndex(it => it === reply);
+                .updateInitialParams({
-                this.replyList.splice(index, 1);
+                    selected_list: [
-            })
+                        { v: +reply.uniplat_version, id: +reply.id },
+                    ],
                })
+                .execute()
+                .then(() => {
+                    const index = this.replyList.findIndex(
+                        (it) => it === reply
+                    );
+                    this.replyList.splice(index, 1);
+                });
+        });
    }
    private hideReplyInput() {
        this.replyInputVisible = false;
-        this.addReplyStr = ""
+        this.addReplyStr = "";
    }
    private addReply() {
-        let addReplyStr = this.addReplyStr.trim()
+        const addReplyStr = this.addReplyStr.trim();
        if (addReplyStr.length < 2 || addReplyStr.length > 200) {
            this.$message.warning("回复在2-200个字符之间");
-            return
+            return;
        }
-        this.sdk.model(ReplyModelName).action("insert_my").addInputs_parameter({
+        this.sdk
+            .model(ReplyModelName)
+            .action("insert_my")
+            .addInputs_parameter({
                category: "毕节客服工作台",
                org_id: this.sdk.global.initData.orgId,
                model: ReplyModelName,
                content: addReplyStr,
-            sort: 0
+                sort: 0,
-        }).execute().then(() => {
+            })
+            .execute()
+            .then(() => {
                this.getReplyList();
                this.hideReplyInput();
            });
@@ -115,12 +196,14 @@ export default class MsgShortCut extends Vue {
    }
    private editDone(reply: Reply) {
-        let addReplyStr = this.editingItemContent[reply.id].trim();
+        const addReplyStr = this.editingItemContent[reply.id].trim();
        if (addReplyStr.length < 2 || addReplyStr.length > 200) {
            this.$message.warning("回复在2-200个字符之间");
-            return
+            return;
        }
-        this.sdk.model(ReplyModelName).action("update")
+        this.sdk
+            .model(ReplyModelName)
+            .action("update")
            .updateInitialParams({
                selected_list: [{ v: +reply.uniplat_version, id: +reply.id }],
            })
@@ -131,8 +214,10 @@ export default class MsgShortCut extends Vue {
                content: addReplyStr,
                sort: 0,
                is_enabled: 1,
-                uniplat_uid: this.sdk.global.uid
+                uniplat_uid: this.sdk.global.uid,
-            }).execute().then(() => {
+            })
+            .execute()
+            .then(() => {
                reply.content = addReplyStr;
                reply.uniplat_version = (+reply.uniplat_version + 1).toString();
                this.editCancel(reply);
@@ -143,7 +228,7 @@ export default class MsgShortCut extends Vue {
 <style lang="less" scoped>
 .shortcut {
    position: relative;
-    padding:10px 10px;
+    padding: 10px 10px;
    font-size: 14px;
    white-space: normal;
    color: #999;

--- a/database/index.ts
+++ b/database/index.ts
+import { Chat, Message } from "./../xim/models/chat";
+class ChatCacheDatabaseController {
+    private db: IDBDatabase;
+    private readonly version = new Date().valueOf();
+    private readonly chatListKey = "chat-list";
+    private readonly chatMessageKey = "chat-message";
+    public setup(uid: string) {
+        return new Promise<void>((resolve) => {
+            if (uid && indexedDB) {
+                const r = indexedDB.open(uid, this.version);
+                const that = this;
+                const setupDb = () => {
+                    if (that.db) {
+                        that.buildTables(that.db, that.chatListKey);
+                        that.buildTables(that.db, that.chatMessageKey);
+                    }
+                    resolve();
+                };
+                r.onsuccess = function (e) {
+                    that.db = (e.target as any).result;
+                };
+                r.onupgradeneeded = function (e) {
+                    that.db = (e.target as any).result;
+                    setupDb();
+                };
+            } else {
+                resolve();
+            }
+        });
+    }
+    private buildTables(database: IDBDatabase, key: string, path?: string) {
+        if (!database.objectStoreNames.contains(key)) {
+            database.createObjectStore(key, { keyPath: path });
+        }
+    }
+    private buildTransaction(key: string) {
+        return this.db.transaction(key, "readwrite");
+    }
+    private buildStore(key: string) {
+        const transaction = this.buildTransaction(key);
+        return transaction.objectStore(key);
+    }
+    public saveChatList(items: Chat[]) {
+        if (this.db) {
+            const store = this.buildStore(this.chatListKey);
+            for (const item of items) {
+                store.add(item, item.id);
+            }
+        }
+    }
+    public getChatList() {
+        return new Promise<Chat[]>((resolve) => {
+            if (!this.db) {
+                return resolve([]);
+            }
+            const store = this.buildStore(this.chatListKey);
+            const r = store.getAll();
+            r.onsuccess = (o) => {
+                resolve((o.target as any).result);
+            };
+            r.onerror = () => resolve([]);
+        });
+    }
+    public saveChatMessages(chat: number, items: Message[]) {
+        if (this.db && items) {
+            const store = this.buildStore(this.chatMessageKey);
+            store.add(items, chat);
+        }
+    }
+    public getChatMessages(chat: number) {
+        return new Promise<Message[]>((resolve) => {
+            if (!this.db) {
+                return resolve([]);
+            }
+            const store = this.buildStore(this.chatMessageKey);
+            const r = store.get(chat);
+            r.onsuccess = (o) => {
+                resolve((o.target as any).result);
+            };
+            r.onerror = () => resolve([]);
+        });
+    }
+    public appendMessages(chat: number, items: Message[]) {
+        return new Promise<void>((resolve) => {
+            if (!this.db || !items.length) {
+                return resolve();
+            }
+            const store = this.buildStore(this.chatMessageKey);
+            const r = store.get(chat);
+            r.onsuccess = (o) => {
+                const cache = (o.target as any).result as Message[];
+                for (const item of items) {
+                    if (!cache.find((i) => i.id === item.id)) {
+                        cache.push(item);
+                    }
+                }
+                const sort = cache.sort((i) => i.ts);
+                store.put(sort, chat);
+                resolve();
+            };
+            r.onerror = () => resolve();
+        });
+    }
+}
+export const dbController = new ChatCacheDatabaseController();
--- a/store/index.ts
+++ b/store/index.ts
--- a/store/model.ts
+++ b/store/model.ts
@@ -246,7 +246,7 @@ export namespace ChatStore {
    export const ACTION_GET_MY_CHAT_LIST = "获取我的会话列表";
    export type ACTION_GET_MY_CHAT_LIST = (
        keyword?: string
-    ) => Promise<ChatStore.STATE_MY_CHAT_ROOM_LIST>;
+    ) => Promise<ChatType[]>;
    export const ACTION_JOIN_CHAT = "加入某个会话";
    export type ACTION_JOIN_CHAT = (chatId: number) => void;

--- a/xim/index.ts
+++ b/xim/index.ts
@@ -6,6 +6,7 @@ import { ChatOption, TokenStringGetter } from "./../model";
 import { ChatLoggerService } from "./logger";
 import tokenManager from "./token";
 import xim from "./xim";
+import { dbController } from "../database";
 class Chat {
    private _sdk?: () => UniplatSdk;
@@ -30,6 +31,8 @@ class Chat {
        this._sdk = option.sdk;
        this._orgId = option.orgId;
+        dbController.setup(this._sdk().global.uid);
        this.token = async () => option.sdk().global.jwtToken;
        tokenManager.save(this.token);