添加批量接待

components/chat-list-model.vue

@@ -11,26 +11,31 @@
                         @click="goToChatRoom(item)"
                     >
                         <div class="chat-info">
-                            <div
-                                class="
-                                    chat-info-left
-                                    d-flex
-                                    justify-content-between
-                                    align-items-center
-                                "
-                            >
+                            <div class="checkbox-wrap" @click.stop v-if="showItemCheckbox">
+                                <el-checkbox v-model="item.checked"></el-checkbox>
+                            </div>
+                            <div>
                                 <div
-                                    class="chat-name flex-fill text-dot-dot-dot"
+                                    class="
+                                        chat-info-left
+                                        d-flex
+                                        justify-content-between
+                                        align-items-center
+                                    "
                                 >
-                                    <span>{{ item.title }}</span>
+                                    <div
+                                        class="chat-name flex-fill text-dot-dot-dot"
+                                    >
+                                        <span>{{ item.title }}</span>
+                                    </div>
+                                    <div v-if="item.last_msg_ts" class="chat-time">
+                                        {{ formatTimestamp(item.last_msg_ts) }}
+                                    </div>
                                 </div>
-                                <div v-if="item.last_msg_ts" class="chat-time">
-                                    {{ formatTimestamp(item.last_msg_ts) }}
+                                <div class="chat-msg text-dot-dot-dot">
+                                    {{userNames[item.last_msg_sender] ? userNames[item.last_msg_sender] + ": " : ""}}{{ parseMesage(item) }}
                                 </div>
                             </div>
-                            <div class="chat-msg text-dot-dot-dot">
-                                {{userNames[item.last_msg_sender] ? userNames[item.last_msg_sender] + ": " : ""}}{{ parseMesage(item) }}
-                            </div>
                         </div>
                     </div>
                     <div
@@ -40,10 +45,8 @@
                         无接待
                     </div>
                 </el-scrollbar>
-                <el-button class="refresh-btn" title="刷新列表" @click="getList">
-                    <i class="el-icon-refresh-right"></i>
-                </el-button>
                 <el-pagination
+                    class="page-comp"
                     background
                     small
                     @size-change="handleSizeChange"
@@ -55,6 +58,12 @@
                     :pager-count="5"
                     layout="total, prev, pager, next"
                 ></el-pagination>
+                <div class="action-row">
+                    <el-button @click="getList">刷新</el-button>
+                    <el-button v-if="!showItemCheckbox" @click="showItemCheckbox = true">批量接待</el-button>
+                    <el-button v-if="showItemCheckbox" @click="batchStartReception">确定接待</el-button>
+                    <el-button v-if="showItemCheckbox" @click="showItemCheckbox = false">取消</el-button>
+                </div>
             </div>
         </div>
     </div>
@@ -68,8 +77,8 @@ import { Chat as ChatType } from "@/customer-service/xim/models/chat";
 import { EVENTS } from "@/EventConsts"
 
 export function parserMessage(type: string, rawMsg: string) {
-    if (!type) return "";
-    if (!rawMsg) return "";
+    if (!type) return "[空]";
+    if (!rawMsg) return "[空]";
     const msg = JSON.parse(rawMsg);
     if (type === "text") {
         return msg.text;
@@ -82,13 +91,17 @@ export function parserMessage(type: string, rawMsg: string) {
     }
 }
 
+interface SelectChatType extends ChatType {
+    checked?: boolean;
+}
+
 @Component({ components: {} })
 export default class ModelChatList extends Vue {
 
     @chatStore.Action(ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN)
     private readonly _createChat!: ChatStore.ACTION_CREATE_NEW_CHAT_BY_SERVICE_MAN;
 
-    private chatList: ChatType[] = [];
+    private chatList: SelectChatType[] = [];
 
     @chatStore.Mutation(ChatStore.MUTATION_SAVE_MYSELF_ID)
     private readonly saveMyId!: ChatStore.MUTATION_SAVE_MYSELF_ID;
@@ -122,7 +135,7 @@ export default class ModelChatList extends Vue {
     private total = 0;
     private currentPage = 1;
     private sseTs = 0;
-    
+    private showItemCheckbox = false;
 
     private get chatRooms() {
         return this.chatList || [];
@@ -197,6 +210,7 @@ export default class ModelChatList extends Vue {
         if (this.sseTs) {
             return
         }
+        this.sseTs = new Date().getTime();
         setTimeout(() => {
             this.sseTs = 0;
             this.getList();
@@ -248,6 +262,24 @@ export default class ModelChatList extends Vue {
             `/${this.$route.params.project}/${this.$route.params.entrance}/detail/${model_name}/key/${keyvalue}`
         );
     }
+
+    private batchStartReception() {
+        let chats = this.chatRooms.filter(chat => chat.checked);
+        if (chats.length === 0) {
+            this.$message.warning("请先勾选要接待的会话")
+            return
+        }
+        chats.forEach(chat => {
+            const { model_name, obj_id } = chat.business_data;
+            this.sdk
+                .model(model_name)
+                .chat(+obj_id, this.global.org.id.toString())
+                .startChat();
+            chat.checked = false;
+        })
+        this.showItemCheckbox = false;
+        this.clearActiveId();
+    }
 }
 </script>
 
@@ -275,7 +307,7 @@ export default class ModelChatList extends Vue {
         padding-top: 100%;
     }
     .list-scroll {
-        height: calc(100% - 88px);
+        height: calc(100% - 110px);
     }
 }
 .keyword-input {
@@ -313,13 +345,17 @@ export default class ModelChatList extends Vue {
             margin-right: 5px;
         }
         .chat-info {
-            display: inline-block;
+            display: flex;
             vertical-align: middle;
             width: calc(100% - 10px);
             .chat-name {
                 line-height: 35px;
                 font-size: 15px;
             }
+            .checkbox-wrap {
+                padding-top: 18px;
+                padding-right: 8px;
+            }
         }
         .chat-info-left {
             text-align: start;
@@ -342,22 +378,13 @@ export default class ModelChatList extends Vue {
             text-align: start;
             font-size: 12px;
             margin-top: -13px;
+            min-height: 16px;
         }
     }
 }
 .chat-check-detail {
     margin-left: 10px;
 }
-.refresh-btn {
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border-color: #ccc;
-}
 .need-update-tip {
     background: #fff2e6;
     color: #e87005;
@@ -368,4 +395,13 @@ export default class ModelChatList extends Vue {
     text-align: center;
     cursor: pointer;
 }
+.page-comp {
+    padding: 15px 0;
+}
+.action-row {
+    .el-button {
+        padding: 8px 14px;
+        border-radius: 15px;
+    }
+}
 </style>