从会话导航到数据详情

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" })
-    private selected!: string;
+    @Prop({ type: Number, default: -1 })
+    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,
-            uniplatId,
+            v: data.uniplat_version,
+            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>

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,
             });

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: {
-            uniplatId: string;
-            chat_id: number;
-            msg: string;
-            customer_name: string;
-            customer_avatar_url: string;
-            uniplat_version: number;
-            msg_type: string;
-            is_finish: 0 | 1;
-        }[];
+        list: ChatType[];
         total: number;
     } | null
     export const STATE_CHAT_MSG_HISTORY = "某个会话聊天记录";

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;
+}

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;
-
-    // ext: string;
-    create_time: number;
-    update_time: number;
-    // exit_msg_id: number;
-    // is_exited: boolean;
-    // dnd: number;
+    app_id: string;
+    tag: string;
+    msg_id: number;
+    ext: string;
+    exit_msg_id: number;
+    is_exited: boolean;
+    dnd: number;
     is_top: boolean;
-    // label: string;
-    // join_msg_id: number;
-    // last_read_msg_id: number;
-    // biz_id: string;
-    // business_data: string;
-    // is_finish: boolean;
-    // is_deleted: boolean;
-    // is_remove: boolean;
-    // member_type: number;
-    // ref_id: number;
+    label: string;
+    join_msg_id: number;
+    last_read_msg_id: number;
+    biz_id: string;
+    business_data: {
+        model_name: string;
+        obj_id: string;
+    };
+    is_finish: boolean;
+    is_deleted: boolean;
+    is_remove: boolean;
+    member_type: number;
+    ref_id: number;
     unread_msg_count: number;
-    // at_me: boolean;
-    // at_all: boolean;
-    // last_login_oid: string;
-
-    last_msg_eid: string;
-    last_msg_name: string;
+    at_me: boolean;
+    at_all: boolean;
+    last_login_oid: string;
+    owner_oid: string;
+    owner_eid: 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;
-    msg_type: string;
-    msg: string;
+    members_updated: number;
+    user_updated: number;
+    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,