no message

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

@@ -2,8 +2,34 @@
     <div class="chat-input-wrapper" :class="modeClass">
         <div ref="editor"></div>
         <div class="chat-input-toolbar">
+            <slot name="toolbarBefore"/>
+
+            <ETooltip placement="top" :content="$L('表情')"><i class="taskfont" @click="onToolbar('emoji')">&#xe7ad;</i></ETooltip>
+            <ETooltip placement="top" :content="$L('选择会员')"><i class="taskfont" @click="onToolbar('user')">&#xe78f;</i></ETooltip>
+            <ETooltip placement="top" :content="$L('选择任务')"><i class="taskfont" @click="onToolbar('task')">&#xe7d6;</i></ETooltip>
+
+            <EDropdown
+                trigger="hover"
+                placement="top"
+                @command="onToolbar">
+                <i class="taskfont">&#xe790;</i>
+                <EDropdownMenu slot="dropdown" class="chat-input-dropdown-menu">
+                    <EDropdownItem command="image">
+                        <i class="taskfont">&#xe64a;</i>
+                        {{$L('图片')}}
+                    </EDropdownItem>
+                    <EDropdownItem command="file">
+                        <i class="taskfont">&#xe786;</i>
+                        {{$L('文件')}}
+                    </EDropdownItem>
+                </EDropdownMenu>
+            </EDropdown>
+
+            <div class="toolbar-spacing"></div>
+
             <Loading v-if="loading"/>
-            <Icon v-else :class="[value ? '' : 'disabled']" type="md-send" @click="send"/>
+            <ETooltip v-else placement="top" :content="$L('发送')"><Icon :class="[value ? '' : 'disabled']" type="md-send" @click="send"/></ETooltip>
+
             <slot name="toolbarAfter"/>
         </div>
     </div>
@@ -243,6 +269,39 @@ export default {
             this.$emit('on-send', this.quill)
         },
 
+        onToolbar(action) {
+            switch (action) {
+                case 'user':
+                    this.openMenu("@");
+                    break;
+
+                case 'task':
+                    this.openMenu("#");
+                    break;
+
+                case 'image':
+                case 'file':
+                    this.$emit('on-more', action)
+                    break;
+            }
+        },
+
+        openMenu(char) {
+            if (!this.quill) {
+                return;
+            }
+            if (this.value.length === 0 || this.value.endsWith("<p><br></p>")) {
+                this.quill.getModule("mention").openMenu(char);
+            } else {
+                let str = this.value.replace(/<[^>]+>/g,"");
+                if (str.length === 0 || str.endsWith(" ")) {
+                    this.quill.getModule("mention").openMenu(char);
+                } else {
+                    this.quill.getModule("mention").openMenu(` ${char}`);
+                }
+            }
+        },
+
         getSource(mentionChar) {
             return new Promise(resolve => {
                 switch (mentionChar) {

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

@@ -90,7 +90,8 @@
                     v-model="msgText"
                     :maxlength="20000"
                     @on-focus="onEventFocus"
-                    @on-blur="onEventblur"
+                    @on-blur="onEventBlur"
+                    @on-more="onEventMore"
                     @on-send="sendMsg"
                     :placeholder="$L('输入消息...')"/>
                 <slot name="inputAfter"/>
@@ -476,11 +477,17 @@ export default {
             this.$emit("on-focus", e)
         },
 
-        onEventblur(e) {
+        onEventBlur(e) {
             this.inputFocus = false;
             this.$emit("on-blur", e)
         },
 
+        onEventMore(e) {
+            if (['image', 'file'].includes(e)) {
+                this.$refs.chatUpload.handleClick()
+            }
+        },
+
         onActive() {
             this.$emit("on-active");
         },

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

@@ -301,7 +301,7 @@
                         </ul>
                         <ul class="item-content">
                             <li>
-                                <div class="add-button" @click="$refs.upload.handleClick()">
+                                <div class="add-button" @click="onUploadClick(true)">
                                     <i class="taskfont">&#xe6f2;</i>{{$L('添加附件')}}
                                 </div>
                             </li>
@@ -405,6 +405,7 @@
                             :loading="sendLoad > 0"
                             :maxlength="20000"
                             :placeholder="$L('输入消息...')"
+                            @on-more="onEventMore"
                             @on-send="msgDialog">
                             <Badge slot="toolbarAfter" :count="taskDetail.msg_num"/>
                         </ChatInput>
@@ -515,6 +516,7 @@ export default {
             },
 
             dialogDrag: false,
+            imageAttachment: true,
             receiveTaskSubscribe: null,
         }
     },
@@ -1044,7 +1046,7 @@ export default {
                     break;
 
                 case 'file':
-                    this.$refs.upload.handleClick();
+                    this.onUploadClick(true)
                     break;
 
                 case 'subtask':
@@ -1056,6 +1058,17 @@ export default {
             }
         },
 
+        onEventMore(e) {
+            if (['image', 'file'].includes(e)) {
+                this.onUploadClick(false)
+            }
+        },
+
+        onUploadClick(attachment) {
+            this.imageAttachment = !!attachment;
+            this.$refs.upload.handleClick()
+        },
+
         msgDialog() {
             if (this.sendLoad > 0) {
                 return;
@@ -1106,7 +1119,7 @@ export default {
             if (this.msgFile.length > 0) {
                 this.$refs.dialog.sendFileMsg(this.msgFile.map(file => Object.assign(file, {
                     ajaxExtraData: {
-                        image_attachment: 1
+                        image_attachment: this.imageAttachment ? 1 : 0
                     }
                 })));
             } else if (this.msgText) {

resources/assets/sass/pages/components/chat-input.scss

@@ -29,7 +29,7 @@
         display: block;
         float: left;
         max-width: 100%;
-        min-width: calc(100% - 28px);
+        min-width: calc(100% - 175px);
 
         .ql-editor {
             padding: 4px 7px;
@@ -47,6 +47,9 @@
                     right: 7px;
                     color: #ccc;
                     font-style: normal;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                 }
             }
         }
@@ -186,19 +189,46 @@
         align-items: center;
         justify-content: flex-end;
         float: right;
-        width: 28px;
+        width: 175px;
         height: 28px;
         padding: 0 2px;
         .common-loading {
             width: 18px;
             height: 18px;
         }
+        .toolbar-spacing {
+            width: 1px;
+            height: 14px;
+            margin: 2px 7px 0;
+            background-color: #cccccc;
+        }
         > i {
-            font-size: 18px;
+            cursor: pointer;
+            padding: 0 5px;
+            font-size: 20px;
             &.disabled {
                 opacity: 0.5;
             }
+            &:last-child {
+                margin-right: -5px;
+            }
+        }
+        .el-dropdown {
+            padding: 0 5px;
+            > i {
+                cursor: pointer;
+                font-size: 20px;
+            }
+        }
+    }
+}
+.chat-input-dropdown-menu {
+    > li {
+        display: flex;
+        align-items: center;
+        > i {
+            font-size: 20px;
+            margin-right: 8px;
         }
     }
-
 }