withdraw controll

components/message.vue

@@ -16,32 +16,58 @@
             >
                 {{ isQuestionAnswerMessage ? "" : userName }}
             </div>
-            <div
-                class="content-avatar d-flex align-items-start"
-                :class="{
-                    'justify-content-end': isMyMessage,
-                    'cs-flex-direction': !isMyMessage,
-                }"
-            >
-                <component
-                    :is="messageComponent"
-                    :user-name="userName"
+            <div class="d-flex">
+                <template
+                    v-if="backend && showReadSummary && !isWithdrawMessage"
+                >
+                    <div v-if="isMyMessage" class="msg-read pos-rel">
+                        <span
+                            @click="openReaderList"
+                            class="pointer"
+                            :class="{ all: isAllRead }"
+                        >
+                            <template v-if="isAllRead">全部已读</template>
+                            <template v-else-if="data.read_count > 0"
+                                >{{ data.read_count }}人已读</template
+                            >
+                            <template v-else>未读</template>
+                        </span>
+                        <who-read-list
+                            v-if="readListVisibility"
+                            @blur="readListVisibility = false"
+                            :msgId="data.id"
+                            :class="{ offset: readerListOffset }"
+                        />
+                    </div>
+                </template>
+                <div
+                    class="content-avatar d-flex align-items-start"
                     :class="{
-                        'my-message': isMyMessage,
+                        'justify-content-end': isMyMessage,
+                        'cs-flex-direction': !isMyMessage,
                     }"
-                    v-if="messageComponent"
-                    v-model="data"
-                    @open="openFile"
-                />
-                <avatar
-                    v-if="!isQuestionAnswerMessage && !isWithdrawMessage"
-                    :src="
-                        chatRole === 'admin' || chatRole === 'customer-service'
-                            ? defaultAvatar
-                            : avatar
-                    "
-                    shape="circle"
-                />
+                >
+                    <component
+                        :is="messageComponent"
+                        :user-name="userName"
+                        :class="{
+                            'my-message': isMyMessage,
+                        }"
+                        v-if="messageComponent"
+                        v-model="data"
+                        @open="openFile"
+                    />
+                    <avatar
+                        v-if="!isQuestionAnswerMessage && !isWithdrawMessage"
+                        :src="
+                            chatRole === 'admin' ||
+                            chatRole === 'customer-service'
+                                ? defaultAvatar
+                                : avatar
+                        "
+                        shape="circle"
+                    />
+                </div>
             </div>
         </div>
 
@@ -52,36 +78,17 @@
         ></i>
         <i class="el-icon-loading" v-else-if="isSendingMessage"></i>
 
-        <template v-if="backend && showReadSummary && !isWithdrawMessage">
-            <div v-if="isMyMessage" class="msg-read pos-rel">
-                <span
-                    @click="openReaderList"
-                    class="pointer"
-                    :class="{ all: isAllRead }"
-                >
-                    <template v-if="isAllRead">全部已读</template>
-                    <template v-else-if="data.read_count > 0"
-                        >{{ data.read_count }}人已读</template
-                    >
-                    <template v-else>未读</template>
-                </span>
-                <who-read-list
-                    v-if="readListVisibility"
-                    @blur="readListVisibility = false"
-                    :msgId="data.id"
-                    :class="{ offset: readerListOffset }"
-                />
-            </div>
-        </template>
-
         <span
             class="withdraw"
             v-if="
                 isMyMessage &&
                 canWithdraw &&
+                isWithdraw &&
                 !isWithdrawMessage &&
-                !isQuestionAnswerMessage
+                !isQuestionAnswerMessage &&
+                !isChatMember
             "
+            @mouseenter="hoverWithdraw"
             @click="withdraw"
             >撤回此消息</span
         >
@@ -147,6 +154,7 @@
     import xim from "./../xim";
     import { ChatRole } from "@/customer-service/model";
     import { getUserMapping } from "../utils/user-info";
+    import Xim from "@/customer-service/xim";
 
     const twoMinutes = 2 * 60 * 1000;
 
@@ -202,6 +210,9 @@
         @chatStore.Getter(ChatStore.GETTER_CURRENT_CURRENT_CHAT)
         private readonly currentChat!: ChatStore.GETTER_CURRENT_CURRENT_CHAT;
 
+        @chatStore.State(ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER)
+        private readonly isChatMember!: ChatStore.STATE_CHAT_CURRENT_IS_CHAT_MEMBER;
+
         @Prop({ type: Object, default: () => Object.create(null) })
         private readonly data!: dto.Message;
 
@@ -227,6 +238,11 @@
         private readerListOffset = false;
         private defaultMessageHandledStatus = dto.MessageHandled.Default;
 
+        private isWithdraw = true;
+
+        private overTwoMinutes =
+            new Date().valueOf() - this.data.ts * 1000 < twoMinutes;
+
         private get canWithdraw() {
             if (this.backend && this.data) {
                 return new Date().valueOf() - this.data.ts * 1000 < twoMinutes;
@@ -297,7 +313,8 @@
 
         private getFilterUsername(name: string) {
             if (
-                this.currentChat && this.currentChat.catalog === "福利宝" &&
+                this.currentChat &&
+                this.currentChat.catalog === "福利宝" &&
                 this.chatRole === "customer-service"
             ) {
                 return `采购顾问 ${name}`;
@@ -398,6 +415,10 @@
         }
 
         private withdraw() {
+            if (new Date().valueOf() - this.data.ts * 1000 > twoMinutes) {
+                Xim.error("超过两分钟的消息不能撤回");
+                return;
+            }
             ximInstance.withdraw(this.chatId!, this.data.id).finally(() => {
                 dbController
                     .removeMessage(this.chatId!, this.data.id)
@@ -408,6 +429,11 @@
             });
         }
 
+        private hoverWithdraw() {
+            this.isWithdraw =
+                new Date().valueOf() - this.data.ts * 1000 < twoMinutes;
+        }
+
         private openReaderList(e: MouseEvent) {
             this.readerListOffset = e.x < 450;
             this.readListVisibility = true;