fix: 任务中没有聊天记录时，发送图片无法成功

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

@@ -282,24 +282,11 @@ export default {
             this.msgText = '';
         },
 
-        chatKeydown(e) {
+        sendFileMsg(files) {
-            if (e.keyCode === 13) {
+            if (files.length > 0) {
-                if (e.shiftKey) {
-                    return;
-                }
-                e.preventDefault();
-                this.sendMsg();
-            }
-        },
-
-        pasteDrag(e, type) {
-            const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
-            const postFiles = Array.prototype.slice.call(files);
-            if (postFiles.length > 0) {
-                e.preventDefault();
                 this.pasteFile = [];
                 this.pasteItem = [];
-                postFiles.some(file => {
+                files.some(file => {
                     let reader = new FileReader();
                     reader.readAsDataURL(file);
                     reader.onload = ({target}) => {
@@ -316,10 +303,28 @@ export default {
             }
         },
 
-        pasteSend() {
+        chatKeydown(e) {
-            this.pasteFile.some(file => {
+            if (e.keyCode === 13) {
-                this.$refs.chatUpload.upload(file)
+                if (e.shiftKey) {
-            });
+                    return;
+                }
+                e.preventDefault();
+                this.sendMsg();
+            }
+        },
+
+        pasteDrag(e, type) {
+            const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
+            const postFiles = Array.prototype.slice.call(files);
+            if (postFiles.length > 0) {
+                e.preventDefault();
+                this.sendFileMsg(postFiles);
+            }
+        },
+
+        chatPasteDrag(e, type) {
+            this.dialogDrag = false;
+            this.pasteDrag(e, type);
         },
 
         chatDragOver(show, e) {
@@ -338,29 +343,10 @@ export default {
             }
         },
 
-        chatPasteDrag(e, type) {
+        pasteSend() {
-            this.dialogDrag = false;
+            this.pasteFile.some(file => {
-            const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
+                this.$refs.chatUpload.upload(file)
-            const postFiles = Array.prototype.slice.call(files);
-            if (postFiles.length > 0) {
-                e.preventDefault();
-                this.pasteFile = [];
-                this.pasteItem = [];
-                postFiles.some(file => {
-                    let reader = new FileReader();
-                    reader.readAsDataURL(file);
-                    reader.onload = ({target}) => {
-                        this.pasteFile.push(file)
-                        this.pasteItem.push({
-                            type: $A.getMiddle(file.type, null, '/'),
-                            name: file.name,
-                            size: file.size,
-                            result: target.result
-                        })
-                        this.pasteShow = true
-                    }
             });
-            }
         },
 
         chatFile(type, file) {

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

@@ -66,7 +66,12 @@
         </Poptip>
     </li>
     <!--主任务-->
-    <div v-else-if="ready" :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}">
+    <div
+        v-else-if="ready"
+        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}"
+        @drop.prevent="taskPasteDrag($event, 'drag')"
+        @dragover.prevent="taskDragOver(true, $event)"
+        @dragleave.prevent="taskDragOver(false, $event)">
         <div v-show="taskDetail.id > 0" class="task-info">
             <div class="head">
                 <TaskMenu
@@ -377,7 +382,7 @@
                 <div v-else class="no-dialog">
                     <div class="no-tip">{{$L('暂无消息')}}</div>
                     <div class="no-input">
-                        <Input
+                        <DragInput
                             class="dialog-input"
                             v-model="msgText"
                             type="textarea"
@@ -386,8 +391,9 @@
                             :autosize="{ minRows: 1, maxRows: 3 }"
                             :maxlength="255"
                             :placeholder="$L('输入消息...')"
-                            @on-keydown="msgKeydown"/>
+                            @on-keydown="msgKeydown"
-                        <div class="no-send" @click="openSend">
+                            @on-input-paste="msgPasteDrag"/>
+                        <div class="no-send" @click="msgDialog">
                             <Loading v-if="sendLoad > 0"/>
                             <Icon v-else type="md-send" />
                         </div>
@@ -396,6 +402,9 @@
             </div>
         </div>
         <div v-if="!taskDetail.id" class="task-load"><Loading/></div>
+        <div v-if="dialogDrag" class="drag-over" @click="dialogDrag=false">
+            <div class="drag-text">{{$L('拖动到这里发送')}}</div>
+        </div>
     </div>
 </template>
 
@@ -409,10 +418,11 @@ import DialogWrapper from "./DialogWrapper";
 import ProjectLog from "./ProjectLog";
 import {Store} from "le5le-store";
 import TaskMenu from "./TaskMenu";
+import DragInput from "../../../components/DragInput";
 
 export default {
     name: "TaskDetail",
-    components: {TaskMenu, ProjectLog, DialogWrapper, TaskUpload, UserInput, TaskPriority, TEditor},
+    components: {DragInput, TaskMenu, ProjectLog, DialogWrapper, TaskUpload, UserInput, TaskPriority, TEditor},
     props: {
         taskId: {
             type: Number,
@@ -461,6 +471,7 @@ export default {
             innerHeight: Math.min(1100, window.innerHeight),
 
             msgText: '',
+            msgFile: [],
             navActive: 'dialog',
             logLoadIng: false,
 
@@ -489,6 +500,7 @@ export default {
                 toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
             },
 
+            dialogDrag: false,
             receiveTaskSubscribe: null,
         }
     },
@@ -524,6 +536,8 @@ export default {
             'taskContents',
             'taskFiles',
             'taskPriority',
+
+            'windowMax768'
         ]),
 
         projectName() {
@@ -582,7 +596,7 @@ export default {
         },
 
         hasOpenDialog() {
-            return this.taskDetail.dialog_id > 0 && !this.$store.state.windowMax768;
+            return this.taskDetail.dialog_id > 0 && !this.windowMax768;
         },
 
         dialogStyle() {
@@ -988,14 +1002,13 @@ export default {
                     return;
                 }
                 e.preventDefault();
+                if (this.msgText) {
                     this.msgDialog();
                 }
+            }
         },
 
         msgDialog() {
-            if (!this.msgText) {
-                return;
-            }
             if (this.sendLoad > 0) {
                 return;
             }
@@ -1011,18 +1024,20 @@ export default {
                 this.$store.dispatch("getDialogOne", data.dialog_id).then(() => {
                     this.sendLoad--;
                     if ($A.isSubElectron) {
-                        this.resizeDialog();
+                        this.resizeDialog().then(() => {
+                            this.sendDialogMsg();
+                        });
                     } else {
                         this.$nextTick(() => {
-                            if (this.$store.state.windowMax768) {
+                            if (this.windowMax768) {
                                 this.goForward({path: '/manage/messenger', query: {sendmsg: this.msgText}});
+                                this.msgText = "";
                                 $A.setStorage("messenger::dialogId", data.dialog_id)
                                 this.$store.state.dialogOpenId = data.dialog_id;
                                 this.$store.dispatch('openTask', 0);
                             } else {
-                                this.$refs.dialog.sendMsg(this.msgText);
+                                this.sendDialogMsg();
                             }
-                            this.msgText = "";
                         });
                     }
                 }).catch(({msg}) => {
@@ -1035,35 +1050,47 @@ export default {
             });
         },
 
-        openSend() {
+        sendDialogMsg() {
-            if (this.sendLoad > 0) {
+            if (this.msgFile.length > 0) {
+                this.$refs.dialog.sendFileMsg(this.msgFile);
+            } else if (this.msgText) {
+                this.$refs.dialog.sendMsg(this.msgText);
+            }
+            this.msgFile = [];
+            this.msgText = "";
+        },
+
+        msgPasteDrag(e, type) {
+            if (this.windowMax768) {
                 return;
             }
-            this.sendLoad++;
+            const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files;
-            //
+            this.msgFile = Array.prototype.slice.call(files);
-            this.$store.dispatch("call", {
+            if (this.msgFile.length > 0) {
-                url: 'project/task/dialog',
+                e.preventDefault();
-                data: {
+                this.msgDialog()
-                    task_id: this.taskDetail.id,
+            }
-                },
+        },
-            }).then(({data}) => {
+
-                this.sendLoad--;
+        taskPasteDrag(e, type) {
-                this.$store.dispatch("saveTask", data);
+            this.dialogDrag = false;
-                this.$store.dispatch("getDialogOne", data.dialog_id).catch(() => {})
+            this.msgPasteDrag(e, type);
-                if ($A.isSubElectron) {
+        },
-                    this.resizeDialog();
+
-                } else {
+        taskDragOver(show, e) {
-                    this.$nextTick(() => {
+            let random = (this.__dialogDrag = $A.randomString(8));
-                        this.goForward({path: '/manage/messenger', query: {sendmsg: this.msgText}});
+            if (!show) {
-                        $A.setStorage("messenger::dialogId", data.dialog_id)
+                setTimeout(() => {
-                        this.$store.state.dialogOpenId = data.dialog_id;
+                    if (random === this.__dialogDrag) {
-                        this.$store.dispatch('openTask', 0);
+                        this.dialogDrag = show;
-                    });
+                    }
+                }, 150);
+            } else {
+                if (e.dataTransfer.effectAllowed === 'move') {
+                    return;
+                }
+                this.dialogDrag = true;
             }
-            }).catch(({msg}) => {
-                this.sendLoad--;
-                $A.modalError(msg);
-            });
         },
 
         deleteFile(file) {
@@ -1112,6 +1139,7 @@ export default {
         },
 
         resizeDialog() {
+            return new Promise(resolve => {
                 this.$Electron.ipcRenderer.sendSync('windowSize', {
                     width: Math.max(1100, window.innerWidth),
                     height: Math.max(720, window.innerHeight),
@@ -1119,19 +1147,17 @@ export default {
                     minHeight: 600,
                     autoZoom: true,
                 });
-            if (this.msgText) {
                 let num = 0;
                 let interval = setInterval(() => {
                     num++;
                     if (this.$refs.dialog || num > 20) {
                         clearInterval(interval);
                         if (this.$refs.dialog) {
-                            this.$refs.dialog.sendMsg(this.msgText);
+                            resolve()
-                            this.msgText = "";
                         }
                     }
                 }, 100);
-            }
+            })
         },
 
         downFile(file) {

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

@@ -2,23 +2,18 @@
     <Upload
         name="files"
         ref="upload"
-        :action="actionUrl"
+        action=""
-        :headers="headers"
-        :data="params"
         multiple
         :format="uploadFormat"
         :show-upload-list="false"
         :max-size="maxSize"
-        :on-progress="handleProgress"
-        :on-success="handleSuccess"
         :on-format-error="handleFormatError"
-        :on-exceeded-size="handleMaxSize">
+        :on-exceeded-size="handleMaxSize"
+        :before-upload="handleBeforeUpload">
     </Upload>
 </template>
 
 <script>
-import {mapState} from "vuex";
-
 export default {
     name: 'TaskUpload',
     props: {
@@ -31,54 +26,10 @@ export default {
     data() {
         return {
             uploadFormat: ['jpg', 'jpeg', 'png', 'gif', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'esp', 'pdf', 'rar', 'zip', 'gz', 'ai', 'avi', 'bmp', 'cdr', 'eps', 'mov', 'mp3', 'mp4', 'pr', 'psd', 'svg', 'tif'],
-            actionUrl: $A.apiUrl('project/task/upload'),
         }
     },
 
-    computed: {
-        ...mapState(['userToken', 'taskId', 'taskFiles']),
-
-        headers() {
-            return {
-                fd: $A.getStorageString("userWsFd"),
-                token: this.userToken,
-            }
-        },
-
-        params() {
-            return {
-                task_id: this.taskId,
-            }
-        },
-    },
-
     methods: {
-        handleProgress(event, file) {
-            //上传时
-            if (typeof file.tempId === "undefined") {
-                file.tempId = $A.randomString(8);
-                file.task_id = this.taskId;
-                this.taskFiles.push(file);
-            }
-        },
-
-        handleSuccess({ret, data, msg}, file) {
-            //上传完成
-            let index = this.taskFiles.findIndex(({tempId}) => tempId == file.tempId);
-            if (index > -1) {
-                this.taskFiles.splice(index, 1);
-            }
-            if (ret === 1) {
-                this.taskFiles.push(data);
-            } else {
-                this.$refs.upload.fileList.pop();
-                $A.modalWarning({
-                    title: '发送失败',
-                    content: '文件 ' + file.name + ' 发送失败，' + msg
-                });
-            }
-        },
-
         handleFormatError(file) {
             //上传类型错误
             $A.modalWarning({
@@ -95,15 +46,16 @@ export default {
             });
         },
 
+        handleBeforeUpload(file) {
+            // 拦截上传
+            this.$emit("on-select-file", file)
+            return false;
+        },
+
         handleClick() {
             //手动上传
             this.$refs.upload.handleClick()
         },
-
-        upload(file) {
-            //手动传file
-            this.$refs.upload.upload(file);
-        },
     }
 }
 </script>

resources/assets/sass/pages/components/task-detail.scss

@@ -593,6 +593,33 @@
             height: 32px;
         }
     }
+    .drag-over {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 3;
+        background-color: rgba(255, 255, 255, 0.78);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:before {
+            content: "";
+            position: absolute;
+            top: 16px;
+            left: 16px;
+            right: 16px;
+            bottom: 16px;
+            border: 2px dashed #7b7b7b;
+            border-radius: 12px;
+        }
+        .drag-text {
+            padding: 12px;
+            font-size: 18px;
+            color: #666666;
+        }
+    }
 
     &.open-dialog {
         flex-direction: row;