优化待办、回复抽屉

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

@@ -56,18 +56,6 @@ export default {
                 return {}
             }
         },
-        hidePercentage: {
-            type: Boolean,
-            default: false
-        },
-        hideReply: {
-            type: Boolean,
-            default: false
-        },
-        isReply: {
-            type: Boolean,  // 是否回复对象
-            default: false
-        },
         operateVisible: {
             type: Boolean,
             default: false
@@ -78,6 +66,18 @@ export default {
                 return {}
             }
         },
+        simpleView: {
+            type: Boolean,
+            default: false
+        },
+        isMyDialog: {
+            type: Boolean,
+            default: false
+        },
+        msgId: {
+            type: Number,
+            default: 0
+        },
     },
 
     data() {
@@ -90,15 +90,28 @@ export default {
         ...mapState(['userId']),
 
         isRightMsg() {
-            return !this.isReply && this.source.userid == this.userId
+            return this.source.userid == this.userId
+        },
+
+        isReply() {
+            return this.simpleView || this.msgId === this.source.id
+        },
+
+        hidePercentage() {
+            return this.simpleView || this.isMyDialog || this.isReply
+        },
+
+        hideReply() {
+            return this.simpleView || this.msgId > 0
         },
 
         classArray() {
             return {
                 'dialog-item': true,
+                'reply-item': this.isReply,
                 'self': this.isRightMsg,
             }
-        }
+        },
     },
 
     watch: {

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

@@ -88,7 +88,7 @@
             :data-component="msgItem"
 
             :item-class-add="itemClassAdd"
-            :extra-props="{dialogData, operateVisible, operateItem, hidePercentage: isMyDialog, hideReply: msgId > 0}"
+            :extra-props="{dialogData, operateVisible, operateItem, isMyDialog, msgId}"
             :estimate-size="78"
             :keeps="50"
             :disabled="scrollDisabled"
@@ -124,9 +124,8 @@
             <div v-if="todoShow" class="chat-todo">
                 <div class="todo-label">{{$L('待办')}}:</div>
                 <ul class="scrollbar-hidden">
-                    <li v-for="item in todoList" @click.stop="onClickTodo(item, $event)">
+                    <li v-for="item in todoList" @click.stop="onViewTodo(item)">
                         <div class="todo-desc">{{$A.getMsgSimpleDesc(item.msg_data)}}</div>
-                        <div v-if="item.click" class="todo-done">{{$L('完成')}}</div>
                     </li>
                 </ul>
             </div>
@@ -293,24 +292,41 @@
         <DrawerOverlay
             v-model="replyListShow"
             placement="right"
-            class-name="dialog-wrapper-reply-list"
+            class-name="dialog-wrapper-drawer-list"
             :size="500">
             <DialogWrapper
-                v-if="replyListShow && replyListItem"
+                v-if="replyListShow"
                 :dialogId="dialogId"
                 :msgId="replyListId"
-                class="reply-list">
+                class="drawer-list">
-                <div slot="head" class="dialog-scroller">
+                <div slot="head" class="drawer-title">{{$L('回复消息')}}</div>
+            </DialogWrapper>
+        </DrawerOverlay>
+
+        <!--待办完成-->
+        <DrawerOverlay
+            v-model="todoViewShow"
+            placement="right"
+            class-name="dialog-wrapper-drawer-list"
+            :size="500">
+            <div class="dialog-wrapper drawer-list">
+                <div class="dialog-nav">
+                    <div class="drawer-title">{{$L('待办消息')}}</div>
+                </div>
+                <div class="dialog-scroller scrollbar-overlay">
                     <DialogItem
-                        :source="replyListItem"
+                        v-if="todoViewMsg"
+                        :source="todoViewMsg"
                         @on-view-text="onViewText"
                         @on-view-file="onViewFile"
                         @on-emoji="onEmoji"
-                        hidePercentage
+                        simpleView/>
-                        hideReply
+                    <Button class="original-button" icon="md-exit" type="text" @click="onPosTodo">{{ $L("回到原文") }}</Button>
-                        isReply/>
                 </div>
-            </DialogWrapper>
+                <div class="todo-button">
+                    <Button type="primary" size="large" icon="md-checkbox-outline" @click="onDoneTodo" :loading="todoViewLoad" long>{{ $L("完成") }}</Button>
+                </div>
+            </div>
         </DrawerOverlay>
     </div>
 </template>
@@ -405,6 +421,11 @@ export default {
             replyListShow: false,
             replyListId: 0,
 
+            todoViewLoad: false,
+            todoViewShow: false,
+            todoViewMid: 0,
+            todoViewId: 0,
+
             scrollDisabled: false,
             scrollDirection: null,
             scrollAction: 0,
@@ -454,22 +475,24 @@ export default {
         },
 
         allMsgList() {
-            const dialogMsgList = this.dialogMsgList.filter(item => this.msgFilter(item))
+            const array = [];
-            if (this.tempMsgList.length > 0) {
+            array.push(...this.dialogMsgList.filter(item => this.msgFilter(item)));
-                const ids = dialogMsgList.map(({id}) => id)
+            if (this.msgId > 0) {
-                const tempMsgList = this.tempMsgList.filter(item => !ids.includes(item.id) && this.msgFilter(item))
+                const msgItem = this.dialogMsgs.find(item => item.id == this.msgId)
-                if (tempMsgList.length > 0) {
+                if (msgItem) {
-                    const array = [];
+                    array.unshift(msgItem)
-                    array.push(...dialogMsgList);
-                    array.push(...tempMsgList)
-                    return array.sort((a, b) => {
-                        return a.id - b.id;
-                    });
                 }
             }
-            return dialogMsgList.sort((a, b) => {
+            if (this.tempMsgList.length > 0) {
+                const ids = array.map(({id}) => id)
+                const tempMsgList = this.tempMsgList.filter(item => !ids.includes(item.id) && this.msgFilter(item))
+                if (tempMsgList.length > 0) {
+                    array.push(...tempMsgList)
+                }
+            }
+            return array.sort((a, b) => {
                 return a.id - b.id;
-            });
+            })
         },
 
         loadMsg() {
@@ -609,8 +632,8 @@ export default {
             return this.replyId ? this.dialogMsgs.find(({id}) => id === this.replyId) : null
         },
 
-        replyListItem() {
+        todoViewMsg() {
-            return this.replyListId ? this.dialogMsgs.find(item => item.id == this.replyListId) : null
+            return this.todoViewMid ? this.dialogMsgs.find(item => item.id == this.todoViewMid) : null
         }
     },
 
@@ -964,43 +987,57 @@ export default {
             })
         },
 
-        onClickTodo(item, event) {
+        onViewTodo(item) {
-            if (event && event.target.classList.contains('todo-done')) {
+            if (this.operateVisible) {
-                // 完成
+                return
-                this.$store.dispatch("setLoad", {
-                    key: `msg-${item.msg_id}`,
-                    delay: 600
-                })
-                this.$store.dispatch("call", {
-                    url: 'dialog/msg/done',
-                    data: {
-                        id: item.id,
-                    },
-                }).then(({data}) => {
-                    this.$store.dispatch("saveDialogTodo", {
-                        id: item.id,
-                        done_at: $A.formatDate("Y-m-d H:i:s")
-                    })
-                    if (data.add) {
-                        this.sendSuccess(data.add)
-                    }
-                    if (this.todoList.length === 0) {
-                        this.$store.dispatch("getDialogTodo", item.dialog_id)
-                    }
-                }).catch(({msg}) => {
-                    $A.modalError(msg)
-                }).finally(_ => {
-                    this.$store.dispatch("cancelLoad", `msg-${item.msg_id}`)
-                });
-            } else {
-                // 定位
-                this.onPositionId(item.msg_id).then(_ => {
-                    this.$store.dispatch("saveDialogTodo", {
-                        id: item.id,
-                        click: true
-                    })
-                })
             }
+            this.todoViewId = item.id
+            this.todoViewMid = item.msg_id
+            this.todoViewShow = true
+        },
+
+        onCloseTodo() {
+            this.todoViewLoad = false
+            this.todoViewShow = false
+            this.todoViewMid = 0
+            this.todoViewId = 0
+        },
+
+        onPosTodo() {
+            if (!this.todoViewMid) {
+                return
+            }
+            this.onPositionId(this.todoViewMid).then(this.onCloseTodo)
+        },
+
+        onDoneTodo() {
+            if (!this.todoViewId || this.todoViewLoad) {
+                return
+            }
+            this.todoViewLoad = true
+            //
+            this.$store.dispatch("call", {
+                url: 'dialog/msg/done',
+                data: {
+                    id: this.todoViewId,
+                },
+            }).then(({data}) => {
+                this.$store.dispatch("saveDialogTodo", {
+                    id: this.todoViewId,
+                    done_at: $A.formatDate("Y-m-d H:i:s")
+                })
+                if (data.add) {
+                    this.sendSuccess(data.add)
+                }
+                if (this.todoList.length === 0) {
+                    this.$store.dispatch("getDialogTodo", this.dialogId)
+                }
+                this.onCloseTodo()
+            }).catch(({msg}) => {
+                $A.modalError(msg)
+            }).finally(_ => {
+                this.todoViewLoad = false
+            });
         },
 
         itemClassAdd(index) {
@@ -1452,6 +1489,7 @@ export default {
         onReply() {
             const {tail} = this.scrollInfo()
             this.replyActiveId = this.operateItem.id
+            this.replyActiveUpdate = false
             this.inputFocus()
             if (tail <= 10) {
                 requestAnimationFrame(this.onToBottom)

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -13,28 +13,46 @@
         overflow: hidden;
     }
 
-    &.reply-list {
+    &.drawer-list {
         border-radius: 18px 0 0 18px;
         overflow: hidden;
 
         .dialog-nav {
-            position: relative;
+            .drawer-title {
+                text-align: center;
+                height: 56px;
+                line-height: 56px;
+                border-bottom: 1px solid #eeeeee;
+                font-size: 16px;
+                font-weight: 500;
+            }
+        }
 
-            &:before {
+        .dialog-scroller {
-                content: "";
+            padding: 16px 20px 0;
-                position: absolute;
+
-                left: 0;
+            .reply-item {
-                bottom: 0;
+                border-bottom: 1px solid #eeeeee;
-                width: 100%;
+                margin-bottom: 16px;
-                height: 1px;
-                z-index: 1;
-                background-color: #f4f5f5;
             }
 
-            .dialog-scroller {
+            .original-button {
-                padding-right: 16px;
+                display: block;
+                margin: 0 auto;
+                box-shadow: none;
             }
+        }
 
+        .todo-button {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 18px 24px;
+            cursor: pointer;
+            > button {
+                margin: 0 8px;
+            }
         }
     }
 
@@ -791,9 +809,6 @@
                         .common-loading {
                             margin: 0 3px 0 0;
                         }
-                        > i {
-                            color: $primary-color;
-                        }
                     }
 
                     .reply {
@@ -1041,30 +1056,13 @@
                     cursor: pointer;
                     display: flex;
                     align-items: center;
+
                     .todo-desc {
                         max-width: 150px;
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: nowrap;
                     }
-                    .todo-done {
-                        flex-shrink: 1;
-                        font-weight: 500;
-                        color: $primary-color;
-                        position: relative;
-                        margin-left: 7px;
-                        padding-left: 8px;
-                        &:before {
-                            content: "";
-                            position: absolute;
-                            top: 50%;
-                            left: 0;
-                            height: 10px;
-                            width: 1px;
-                            transform: translateY(-50%) scaleX(0.5);
-                            background-color: #cccccc;
-                        }
-                    }
                 }
             }
         }
@@ -1312,7 +1310,7 @@
     }
 }
 
-.dialog-wrapper-reply-list {
+.dialog-wrapper-drawer-list {
     position: absolute !important;
     overflow: hidden !important;
 }
@@ -1320,6 +1318,15 @@
 @media (max-width: 768px) {
     .dialog-wrapper {
         background-color: #f8f8f8;
+        &.drawer-list {
+            .dialog-nav {
+                .drawer-title {
+                    height: 52px;
+                    line-height: 52px;
+                    border-bottom: 0;
+                }
+            }
+        }
         .dialog-nav {
             .nav-wrapper {
                 height: 52px;