From 86c19ce3550b1fef6bd7614a21f69a433d03c097 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 21 Jul 2022 10:44:35 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E5=8F=91=E9=80=81=E5=A4=B1=E8=B4=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/DialogItem.vue |  5 ++
 .../js/pages/manage/components/DialogView.vue | 11 +++-
 .../pages/manage/components/DialogWrapper.vue | 64 ++++++++++++-------
 .../sass/pages/components/dialog-wrapper.scss |  8 +++
 4 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogItem.vue b/resources/assets/js/pages/manage/components/DialogItem.vue
index 92ea521c8..582011139 100644
--- a/resources/assets/js/pages/manage/components/DialogItem.vue
+++ b/resources/assets/js/pages/manage/components/DialogItem.vue
@@ -38,6 +38,7 @@
                 @on-view-file="onViewFile"
                 @on-down-file="onDownFile"
                 @on-reply-list="onReplyList"
+                @on-error="onError"
                 @on-emoji="onEmoji"
                 @on-show-emoji-user="onShowEmojiUser"/>
         </template>
@@ -192,6 +193,10 @@ export default {
             this.dispatch("on-reply-list", data)
         },
 
+        onError(data) {
+            this.dispatch("on-error", data)
+        },
+
         onEmoji(data) {
             this.dispatch("on-emoji", data)
         },
diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index bca183f64..4f0839bc2 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -128,8 +128,11 @@
             <div v-if="msgData.modify" class="modify">
                 <i class="taskfont">&#xe779;</i>
             </div>
-            <!--等待/时间/阅读-->
-            <Loading v-if="isLoading"/>
+            <!--错误/等待/时间/阅读-->
+            <div v-if="msgData.error === true" class="error" @click="onError">
+                <Icon type="ios-alert" />
+            </div>
+            <Loading v-else-if="isLoading"/>
             <template v-else>
                 <!--时间-->
                 <div v-if="timeShow" class="time" @click="timeShow=false">{{msgData.created_at}}</div>
@@ -462,6 +465,10 @@ export default {
             })
         },
 
+        onError() {
+            this.$emit("on-error", this.msgData)
+        },
+
         onEmoji(symbol) {
             this.$emit("on-emoji", {
                 msg_id: this.msgData.id,
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index 0ec3f81b9..aa171ad7c 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -102,6 +102,7 @@
             @on-view-file="onViewFile"
             @on-down-file="onDownFile"
             @on-reply-list="onReplyList"
+            @on-error="onError"
             @on-emoji="onEmoji"
             @on-show-emoji-user="onShowEmojiUser">
             <template slot="header">
@@ -943,20 +944,12 @@ export default {
                         text: msgText,
                     },
                     method: 'post',
-                    complete: _ => this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
                 }).then(({data}) => {
+                    this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
                     this.sendSuccess(data)
-                }).catch(({msg}) => {
-                    $A.modalConfirm({
-                        icon: 'error',
-                        title: '发送失败',
-                        content: msg,
-                        cancelText: '取消',
-                        okText: '再次编辑',
-                        onOk: () => {
-                            this.msgText = msgText
-                        }
-                    })
+                }).catch(error => {
+                    this.$set(tempMsg, 'error', true)
+                    this.$set(tempMsg, 'errorData', {type: 'text', content: error.msg, msg: msgText})
                 });
             }
             if (emptied) {
@@ -992,20 +985,12 @@ export default {
                     reply_id: this.replyId,
                 }),
                 method: 'post',
-                complete: _ => this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
             }).then(({data}) => {
+                this.tempMsgs = this.tempMsgs.filter(({id}) => id != tempId)
                 this.sendSuccess(data);
             }).catch(error => {
-                $A.modalConfirm({
-                    icon: 'error',
-                    title: '发送失败',
-                    content: error.msg,
-                    cancelText: '取消',
-                    okText: '重新发送',
-                    onOk: () => {
-                        this.sendRecord(msg)
-                    }
-                })
+                this.$set(tempMsg, 'error', true)
+                this.$set(tempMsg, 'errorData', {type: 'record', content: error.msg, msg})
             });
         },
 
@@ -1929,6 +1914,39 @@ export default {
             this.replyListShow = true
         },
 
+        onError(data) {
+            if (data.error !== true) {
+                return
+            }
+            const {type, content, msg} = data.errorData
+            const config = {
+                icon: 'error',
+                title: '发送失败',
+                content,
+                cancelText: '取消发送',
+                onCancel: _ => {
+                    this.tempMsgs = this.tempMsgs.filter(({id}) => id != data.id)
+                }
+            }
+            if (type === 'text') {
+                config.okText = '再次编辑'
+                config.onOk = () => {
+                    this.tempMsgs = this.tempMsgs.filter(({id}) => id != data.id)
+                    this.msgText = msg
+                    this.inputFocus()
+                }
+            } else if (type === 'record') {
+                config.okText = '重新发送'
+                config.onOk = () => {
+                    this.tempMsgs = this.tempMsgs.filter(({id}) => id != data.id)
+                    this.sendRecord(msg)
+                }
+            } else {
+                return
+            }
+            $A.modalConfirm(config)
+        },
+
         onEmoji(data) {
             if (!$A.isJson(data)) {
                 data = {
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index e38413c0a..cc3c2a471 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -821,6 +821,14 @@
                     height: 21px;
                     line-height: 1;
 
+                    .error {
+                        cursor: pointer;
+                        color: #ED4014;
+                        > i {
+                            font-size: 14px;
+                        }
+                    }
+
                     .common-loading {
                         margin: 0 2px;
                         width: 10px;