添加批量接待

e6154502 · 吴云建 · 952dd869 · e6154502
Commit e6154502 authored Aug 31, 2021 by 吴云建
Showing with 55 additions and 19 deletions
components/chat-list-model.vue
--- a/components/chat-list-model.vue
+++ b/components/chat-list-model.vue
@@ -11,6 +11,10 @@
                        @click="goToChatRoom(item)"
                    >
                        <div class="chat-info">
+                            <div class="checkbox-wrap" @click.stop v-if="showItemCheckbox">
+                                <el-checkbox v-model="item.checked"></el-checkbox>
+                            </div>
+                            <div>
                                <div
                                    class="
                                        chat-info-left
@@ -33,6 +37,7 @@
                                </div>
                            </div>
                        </div>
+                    </div>
                    <div
                        class="empty"
                        v-if="chatRooms && chatRooms.length <= 0"
@@ -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 (!type) return "[空]";
-    if (!rawMsg) 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>