perf: 支持取消发送中的消息

package.json

@@ -55,7 +55,7 @@
         "stylus-loader": "^7.1.0",
         "tinymce": "^5.10.3",
         "tui-calendar-hi": "^1.15.1-5",
-        "view-design-hi": "^4.7.0-49",
+        "view-design-hi": "^4.7.0-50",
         "vite": "^2.9.15",
         "vite-plugin-file-copy": "^1.0.0",
         "vite-plugin-require": "^1.1.10",

resources/assets/js/functions/common.js

@@ -1970,9 +1970,14 @@ const localforage = require("localforage");
             if (typeof params.success === 'undefined') params.success = () => { };
             if (typeof params.error === 'undefined') params.error = () => { };
             if (typeof params.header == 'undefined') params.header = {};
+            const key = $A.randomString(16);
             //
             params.before();
-            $A.ihttp({
+            $A.__ajaxList.push({
+                key,
+                id: params.requestId || null,
+                url: params.url,
+                request: $A.ihttp({
                     url: params.url,
                     data: params.data,
                     cache: params.cache,
@@ -1983,17 +1988,39 @@ const localforage = require("localforage");
                     dataType: params.dataType,
                     timeout: params.timeout,
                     success: function (data, status, xhr) {
+                        $A.__ajaxList = $A.__ajaxList.filter(val => val.key !== key);
                         params.complete();
                         params.success(data, status, xhr);
                         params.after(true);
                     },
                     error: function (xhr, status) {
+                        $A.__ajaxList = $A.__ajaxList.filter(val => val.key !== key);
                         params.complete();
                         params.error(xhr, status);
                         params.after(false);
                     }
+                })
             });
+        },
+        ajaxcCancel(requestId) {
+            if (!requestId) {
+                return 0;
             }
+            let num = 0;
+            $A.__ajaxList.forEach((val, index) => {
+                if (val.id === requestId) {
+                    num++;
+                    if (val.request) {
+                        val.request.abort();
+                    }
+                }
+            });
+            if (num > 0) {
+                $A.__ajaxList = $A.__ajaxList.filter(val => val.id !== requestId);
+            }
+            return num;
+        },
+        __ajaxList: [],
     });
 
     window.$A = $;

resources/assets/js/pages/manage/components/DialogUpload.vue

@@ -187,6 +187,11 @@ export default {
             //手动传file
             this.$refs.upload.upload(file);
         },
+
+        cancel(uid) {
+            //取消上传
+            return this.$refs.upload.cancel(uid);
+        }
     }
 }
 </script>

resources/assets/js/pages/manage/components/DialogView.vue

@@ -437,9 +437,6 @@ export default {
 
     methods: {
         handleLongpress(event, el) {
-            if (!this.msgData.created_at) {
-                return;
-            }
             this.$emit("on-longpress", {event, el, msgData: this.msgData})
         },
 
@@ -515,7 +512,7 @@ export default {
         fileStyle(percentage) {
             if (percentage) {
                 return {
-                    width: (100 - percentage) + '%'
+                    width: `${percentage}%`
                 };
             }
             return {};

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -273,6 +273,17 @@
                 transfer>
                 <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
                 <DropdownMenu slot="list">
+                    <template v-if="!operateItem.created_at">
+                        <DropdownItem name="action">
+                            <ul class="operate-action cancel">
+                                <li @click="onOperate('cancel')">
+                                    <i class="taskfont">&#xe6eb;</i>
+                                    <span>{{ $L('取消发送') }}</span>
+                                </li>
+                            </ul>
+                        </DropdownItem>
+                    </template>
+                    <template v-else>
                         <DropdownItem name="action">
                             <ul class="operate-action">
                                 <li v-if="msgId === 0" @click="onOperate('reply')">
@@ -341,6 +352,7 @@
                                 </li>
                             </ul>
                         </DropdownItem>
+                    </template>
                 </DropdownMenu>
             </Dropdown>
         </div>
@@ -1493,6 +1505,7 @@ export default {
                 this.$nextTick(this.onToBottom)
                 //
                 this.$store.dispatch("call", {
+                    requestId: tempMsg.id,
                     url: 'dialog/msg/sendtext',
                     data: {
                         dialog_id: tempMsg.dialog_id,
@@ -1536,6 +1549,7 @@ export default {
             this.$nextTick(this.onToBottom)
             //
             this.$store.dispatch("call", {
+                requestId: tempMsg.id,
                 url: 'dialog/msg/sendrecord',
                 data: Object.assign(msg, {
                     dialog_id: this.dialogId,
@@ -1992,6 +2006,7 @@ export default {
                     }
                     const tempMsg = {
                         id: file.tempId,
+                        file_uid: file.uid,
                         dialog_id: this.dialogData.id,
                         reply_id: this.quoteId,
                         type: 'file',
@@ -2772,6 +2787,10 @@ export default {
             this.operateVisible = false;
             this.$nextTick(_ => {
                 switch (action) {
+                    case "cancel":
+                        this.onCancelSend()
+                        break;
+
                     case "reply":
                         this.onReply()
                         break;
@@ -2833,6 +2852,39 @@ export default {
             })
         },
 
+        onCancelSend() {
+            $A.modalConfirm({
+                title: '取消发送',
+                content: '你确定要取消发送吗？',
+                loading: true,
+                onOk: () => {
+                    return new Promise((resolve, reject) => {
+                        if (this.operateItem.created_at) {
+                            reject("消息已发送，不可取消");
+                            return
+                        }
+                        if (this.operateItem.type === 'file') {
+                            // 取消文件上传
+                            if (this.$refs.chatUpload.cancel(this.operateItem.file_uid)) {
+                                this.forgetTempMsg(this.operateItem.id)
+                                resolve();
+                            } else {
+                                reject("取消失败");
+                            }
+                        } else {
+                            // 取消消息发送
+                            this.$store.dispatch('callCancel', this.operateItem.id).then(() => {
+                                this.forgetTempMsg(this.operateItem.id)
+                                resolve();
+                            }).catch(() => {
+                                reject("取消失败");
+                            });
+                        }
+                    })
+                }
+            });
+        },
+
         onReply(type) {
             this.setQuote(this.operateItem.id, type)
             this.inputFocus()

resources/assets/js/store/actions.js

@@ -325,6 +325,22 @@ export default {
         })
     },
 
+    /**
+     * 取消请求
+     * @param state
+     * @param requestId
+     * @returns {Promise<unknown>}
+     */
+    callCancel({state}, requestId) {
+        return new Promise((resolve, reject) => {
+            if ($A.ajaxcCancel(requestId)) {
+                resolve()
+            } else {
+                reject()
+            }
+        })
+    },
+
     /**
      * 获取系统设置
      * @param dispatch