从会话导航到数据详情

15024190 · panjiangyi · 585e1c18 · 15024190 · 15024190 · 15024190
Commit 15024190 authored Jul 17, 2021 by panjiangyi
Showing with 143 additions and 72 deletions
chat-list.vue
store/index.ts
store/model.ts
utils/chat-info.ts
xim/models/chat.ts
--- a/chat-list.vue
+++ b/chat-list.vue
@@ -11,7 +11,7 @@
                @clear="search"
            ></el-input>
            <div class="chat-list-scroll">
-                <el-scrollbar class="h-100 no-bottom-scrollbar">
+                <el-scrollbar ref="scrollbar" class="h-100 no-bottom-scrollbar">
                    <div
                        v-for="item in chatRooms"
                        :key="item.chat_id"
@@ -52,6 +52,18 @@
                                <div v-if="item.last_msg_ts" class="chat-time">
                                    {{ formatTimestamp(item.last_msg_ts) }}
                                </div>
+                                <el-button
+                                    type="text"
+                                    class="chat-check-detail"
+                                    v-if="item.business_data"
+                                    @click.native.stop="
+                                        goToDetail(
+                                            item.business_data.model_name,
+                                            item.business_data.obj_id
+                                        )
+                                    "
+                                    >查看</el-button
+                                >
                            </div>
                            <div class="chat-msg text-dot-dot-dot">
                                {{ parseMesage(item) }}
@@ -71,15 +83,16 @@
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Ref, Vue } from "vue-property-decorator";
 import buttonThrottle from "./utils/button-throttle";
+import { getChatModelInfo } from "./utils/chat-info";
 import avatar from "@/customer-service/components/avatar.vue";
 import { chatStore, ChatStore } from "@/customer-service/store/model";
-// import { popupService } from "@/views/common-module/component/element-upgrades/fast-service-popup";
 import { formatTime, TimeFormatRule } from "@/customer-service/utils/time";
-import Chat from "@/customer-service/xim";
+import { Chat as ChatType } from "@/customer-service/xim/models/chat";
 export function parserMessage(type: string, rawMsg: string) {
    if (!type) return "";
    if (!rawMsg) return "";
@@ -94,7 +107,6 @@ export function parserMessage(type: string, rawMsg: string) {
        return `[不支持的消息格式]`;
    }
 }
-type Chat = NonNullable<ChatStore.STATE_MY_CHAT_ROOM_LIST>["list"][number];
 @Component({ components: { avatar } })
 export default class ChatList extends Vue {
@@ -125,8 +137,11 @@ export default class ChatList extends Vue {
    @chatStore.Mutation(ChatStore.MUTATION_SHOW_CHAT)
    private readonly showChat: ChatStore.MUTATION_SHOW_CHAT;
-    @Prop({ type: String, default: "-1" })
+    @Prop({ type: Number, default: -1 })
-    private selected!: string;
+    private selected!: number;
+    @Ref("scrollbar")
+    private scrollbar: Vue & { update: () => void };
    private searchKeyword = "";
@@ -134,17 +149,18 @@ export default class ChatList extends Vue {
        return this.chatList?.list || [];
    }
-    private isSelected(item: Chat) {
+    private isSelected(item: ChatType) {
        if (this.chatId) {
            return item.chat_id === this.chatId;
        }
-        return this.selected === item.uniplatId;
+        return this.selected === item.chat_id;
    }
    async created() {
        await this.getMyChatList();
        this.setSource(ChatStore.StateChatSourceDirection.Server);
-        this.selectFirstChat();
+        await this.selectFirstChat();
+        this.scrollbar.update();
    }
    mounted() {
@@ -159,14 +175,22 @@ export default class ChatList extends Vue {
        }
    }
-    private selectFirstChat() {
+    private async selectFirstChat() {
        if (this.chatId != null) return;
        if (!this.chatRooms.length) return;
-        const { chat_id, uniplat_version, uniplatId } = this.chatRooms[0];
+        const { chat_id, business_data } = this.chatRooms[0];
+        if (business_data == null) {
+            this.$message.error("该会话为脏数据");
+            return;
+        }
+        const data = await getChatModelInfo(
+            business_data.model_name,
+            business_data.obj_id
+        );
        this.saveChatId({
            chatId: chat_id,
-            v: uniplat_version,
+            v: data.uniplat_version,
-            uniplatId,
+            uniplatId: data.uniplatId,
        });
    }
@@ -180,7 +204,7 @@ export default class ChatList extends Vue {
        }
    }
-    private goToChatRoom(data: Chat) {
+    private async goToChatRoom(data: ChatType) {
        if (this.chatId === data.chat_id) {
            this.showChat();
            return;
@@ -189,7 +213,15 @@ export default class ChatList extends Vue {
            (k) => k.chat_id === data.chat_id
        );
        if (wantedChatRoom == null) return;
-        console.log("fuck", wantedChatRoom);
+        if (wantedChatRoom.business_data == null) {
+            this.$message.error("该会话为脏数据");
+            return;
+        }
+        const info = await getChatModelInfo(
+            wantedChatRoom.business_data.model_name,
+            wantedChatRoom.business_data.obj_id
+        );
+        console.log("testing getChatInfo", info);
        this.saveChatId({
            chatId: wantedChatRoom.chat_id,
            v: data.uniplat_version,
@@ -206,13 +238,22 @@ export default class ChatList extends Vue {
        this.$emit("change");
    }
-    private parseMesage(data: Chat) {
+    private parseMesage(data: ChatType) {
        return parserMessage(data.msg_type, data.msg);
    }
    private formatTimestamp(v: number) {
        return formatTime(v, { short: true, rule: TimeFormatRule.Hour12 });
    }
+    private goToDetail(model_name: string, keyvalue: string) {
+        // console.log("fuck", model_name, keyvalue, {
+        //         ...this.$route.params,
+        //         model_name,
+        //         keyvalue,
+        //     });
+        this.$router.push(`/${this.$route.params.project}/${this.$route.params.entrance}/detail/${model_name}/key/${keyvalue}`);
+    }
 }
 </script>
@@ -229,7 +270,7 @@ export default class ChatList extends Vue {
    text-align: center;
 }
 .chat-list-scroll {
-    height: calc(100% - 50px);
+    height: calc(100% - 250px);
    .empty {
        margin-top: 100%;
@@ -309,4 +350,7 @@ export default class ChatList extends Vue {
        }
    }
 }
+.chat-check-detail {
+    margin-left: 10px;
+}
 </style>
--- a/store/index.ts
+++ b/store/index.ts
@@ -8,6 +8,7 @@ import { decode } from "../utils/jwt";
 import { getUserInfo } from "../utils/user-info";
 import Chat from "../xim";
 import chatType from "../xim/chat-type";
+import { Chat as ChatType } from "../xim/models/chat";
 import xim, { ChatNotifyListener } from "../xim/xim";
 import { ChatMemberType, ChatStatus, ChatStore, ChatStoreState } from "./model";
@@ -286,12 +287,21 @@ export default {
        }) /* ...params: Parameters<ChatStore.ACTION_GET_MY_CHAT_LIST> */ {
            const data = await xim.fetchChatList();
            const chatList = data.args[0];
+            console.log("testing", chatList);
            commit(ChatStore.MUTATION_SAVE_CHAT_LIST, {
-                list: chatList.map(chat => {
+                list: chatList.map((chat) => {
+                    let business_data;
+                    if (chat.business_data) {
+                        business_data = JSON.parse(chat.business_data);
+                    }
+                    if (business_data?.model_name == null) {
+                        business_data = null;
+                    }
                    return {
                        ...chat,
                        chat_id: chat.id,
-                    };
+                        business_data
+                    } as ChatType;
                }),
                total: 9999,
            });

--- a/store/model.ts
+++ b/store/model.ts
 import { namespace } from "vuex-class";
 import * as dto from "../model";
+import { Chat as ChatType } from "../xim/models/chat";
 import * as chatDto from "../xim/models/chat";
 export enum ChatStatus {
    opening = 0,
@@ -17,16 +18,7 @@ export namespace ChatStore {
    export type STATE_CHAT_DIALOG_VISIBLE = boolean
    export const STATE_MY_CHAT_ROOM_LIST = "我的会话列表";
    export type STATE_MY_CHAT_ROOM_LIST = {
-        list: {
+        list: ChatType[];
-            uniplatId: string;
-            chat_id: number;
-            msg: string;
-            customer_name: string;
-            customer_avatar_url: string;
-            uniplat_version: number;
-            msg_type: string;
-            is_finish: 0 | 1;
-        }[];
        total: number;
    } | null
    export const STATE_CHAT_MSG_HISTORY = "某个会话聊天记录";

--- a/utils/chat-info.ts
+++ b/utils/chat-info.ts
+import Chat from "../xim";
+export type ChatInfo = {
+    [eid: string]: any;
+};
+const chatInfo: ChatInfo = {};
+export const getChatModel = () => chatInfo;
+export async function getChatModelInfo(modelName: string, id: string) {
+    if (chatInfo[id] != null) return chatInfo[id];
+    const info = await Chat.getSdk().model(modelName).detail(id).query();
+    const data = info;
+    chatInfo[id] = data;
+    return data;
+}
--- a/xim/models/chat.ts
+++ b/xim/models/chat.ts
 export interface Chat {
+    id: number;
+    org_id: string;
+    uid: string;
+    oid: string;
+    eid: string;
    type: string;
-    chat_id: number;
-    service_id: number;
    title: string;
-    // tag: string;
+    app_id: string;
+    tag: string;
-    // ext: string;
+    msg_id: number;
-    create_time: number;
+    ext: string;
-    update_time: number;
+    exit_msg_id: number;
-    // exit_msg_id: number;
+    is_exited: boolean;
-    // is_exited: boolean;
+    dnd: number;
-    // dnd: number;
    is_top: boolean;
-    // label: string;
+    label: string;
-    // join_msg_id: number;
+    join_msg_id: number;
-    // last_read_msg_id: number;
+    last_read_msg_id: number;
-    // biz_id: string;
+    biz_id: string;
-    // business_data: string;
+    business_data: {
-    // is_finish: boolean;
+        model_name: string;
-    // is_deleted: boolean;
+        obj_id: string;
-    // is_remove: boolean;
+    };
-    // member_type: number;
+    is_finish: boolean;
-    // ref_id: number;
+    is_deleted: boolean;
+    is_remove: boolean;
+    member_type: number;
+    ref_id: number;
    unread_msg_count: number;
-    // at_me: boolean;
+    at_me: boolean;
-    // at_all: boolean;
+    at_all: boolean;
-    // last_login_oid: string;
+    last_login_oid: string;
+    owner_oid: string;
-    last_msg_eid: string;
+    owner_eid: string;
-    last_msg_name: string;
+    is_act: true;
+    last_read_id: number;
+    msg_count_after_leave: number;
+    create_time: number;
+    update_time: number;
    last_msg_ts: number;
-    msg_id: number;
+    members_updated: number;
-    msg_type: string;
+    user_updated: number;
-    msg: string;
+    chat_id: number;
 }
 export interface Message {
@@ -107,7 +116,7 @@ export type ChatMessageType =
    | "forward"
    | "quote"
    | "comment.forward"
-    | "time"
+    | "time";
 export type ChatInputBoxData = { key: string } & (
    | { at_id: string; type: "text"; body: TextMessageBody }
@@ -116,11 +125,11 @@ export type ChatInputBoxData = { key: string } & (
    | { type: "video"; body: VideoMessageBody }
    | { at_id: string; type: "quote"; body: QuoteMessageBody }
    | { at_id: string; type: "tm-at-member"; body: TextMessageBody }
-)
+);
 export type TextMessageBody = {
    text: string;
-}
+};
 export type FileMessageBody = {
    name: string;
@@ -135,7 +144,7 @@ export type FileMessageBody = {
        source_icon: string; // 来源图标（若为团队小站文件，此处传入团队icon的url）
        extra?: { [prop: string]: any }; // 附加信息
    };
-}
+};
 export type ImageMessageBody = {
    name: string;
@@ -146,14 +155,14 @@ export type ImageMessageBody = {
    thumbnail?: string; // 缩略图地址
    preview?: string; // 预览图地址
    remark: string;
-}
+};
 export type VoiceMessageBody = {
    name: string;
    url: string;
    size: number;
    duration: number; // 语音时间：单位-ms
-}
+};
 // 第一顺序 default_text 第二顺序 operator_text、receiver_text
 export type NotifyMessageBody = {
@@ -162,13 +171,13 @@ export type NotifyMessageBody = {
    default_text: string; // 默认文本
    operator_text: string; // 操作人文本
    receiver_text: string; // 处理人文本
-}
+};
 export type TextNoticeMessageBody = {
    title: string;
    text: string;
    is_at_all: boolean; // 是否@全部人
-}
+};
 export type VideoMessageBody = {
    name: string;
@@ -179,7 +188,7 @@ export type VideoMessageBody = {
    w: number;
    h: number;
    isNeedUploaded?: boolean; // pc客户端自定义属性（只有生消息的消息体才有该属性, 值为false时不需要上传, true和undefined时需要上传）
-}
+};
 export type UrlMessageBody = {
    title: string;
@@ -193,14 +202,14 @@ export type UrlMessageBody = {
        source_icon: string; // 来源图标（若为团队小站文件，此处传入团队icon的url）
        extra?: { [prop: string]: any }; // 附加信息
    };
-}
+};
 export type ForwardMessageBody = {
    snap: string;
    chat_type: string; // 会话类型
    chat_id: number; // 会话id
    msg_ids: number[]; // 消息id集合
-}
+};
 export type QuoteMessageBody = {
    text: string;
@@ -208,14 +217,14 @@ export type QuoteMessageBody = {
    quote_msg_type: string;
    quote_eid: string;
    quote_msg_id: number; // 引用id
-}
+};
 export type CommentForwardMessageBody = {
    snap: string;
    channel_id: number; // 团队工作站id
    topic_id: number; // 主题id
    comment_ids: number[]; // 评论id集合
-}
+};
 // export type SpecifiedChatRecordMsg = SpecifiedChatRecord & {
 //     message?: Message | undefined | null,