diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index 2771b43d..682791be 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -282,24 +282,11 @@ export default { this.msgText = ''; }, - chatKeydown(e) { - if (e.keyCode === 13) { - 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(); + sendFileMsg(files) { + if (files.length > 0) { 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() { - this.pasteFile.some(file => { - this.$refs.chatUpload.upload(file) - }); + chatKeydown(e) { + if (e.keyCode === 13) { + 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) { - this.dialogDrag = false; - 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 => { - 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 - } - }); - } + pasteSend() { + this.pasteFile.some(file => { + this.$refs.chatUpload.upload(file) + }); }, chatFile(type, file) { diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue index 05ae9152..ed2d2e31 100644 --- a/resources/assets/js/pages/manage/components/TaskDetail.vue +++ b/resources/assets/js/pages/manage/components/TaskDetail.vue @@ -66,7 +66,12 @@ -
+
{{$L('暂无消息')}}
- -
+ @on-keydown="msgKeydown" + @on-input-paste="msgPasteDrag"/> +
@@ -396,6 +402,9 @@
+
+
{{$L('拖动到这里发送')}}
+
@@ -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(); - this.msgDialog(); + 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() { - if (this.sendLoad > 0) { + sendDialogMsg() { + 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++; - // - this.$store.dispatch("call", { - url: 'project/task/dialog', - data: { - task_id: this.taskDetail.id, - }, - }).then(({data}) => { - this.sendLoad--; - this.$store.dispatch("saveTask", data); - this.$store.dispatch("getDialogOne", data.dialog_id).catch(() => {}) - if ($A.isSubElectron) { - this.resizeDialog(); - } else { - this.$nextTick(() => { - this.goForward({path: '/manage/messenger', query: {sendmsg: this.msgText}}); - $A.setStorage("messenger::dialogId", data.dialog_id) - this.$store.state.dialogOpenId = data.dialog_id; - this.$store.dispatch('openTask', 0); - }); + const files = type === 'drag' ? e.dataTransfer.files : e.clipboardData.files; + this.msgFile = Array.prototype.slice.call(files); + if (this.msgFile.length > 0) { + e.preventDefault(); + this.msgDialog() + } + }, + + taskPasteDrag(e, type) { + this.dialogDrag = false; + this.msgPasteDrag(e, type); + }, + + taskDragOver(show, e) { + let random = (this.__dialogDrag = $A.randomString(8)); + if (!show) { + setTimeout(() => { + if (random === this.__dialogDrag) { + this.dialogDrag = show; + } + }, 150); + } else { + if (e.dataTransfer.effectAllowed === 'move') { + return; } - }).catch(({msg}) => { - this.sendLoad--; - $A.modalError(msg); - }); + this.dialogDrag = true; + } }, deleteFile(file) { @@ -1112,26 +1139,25 @@ export default { }, resizeDialog() { - this.$Electron.ipcRenderer.sendSync('windowSize', { - width: Math.max(1100, window.innerWidth), - height: Math.max(720, window.innerHeight), - minWidth: 800, - minHeight: 600, - autoZoom: true, - }); - if (this.msgText) { + return new Promise(resolve => { + this.$Electron.ipcRenderer.sendSync('windowSize', { + width: Math.max(1100, window.innerWidth), + height: Math.max(720, window.innerHeight), + minWidth: 800, + minHeight: 600, + autoZoom: true, + }); 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); - this.msgText = ""; + resolve() } } }, 100); - } + }) }, downFile(file) { diff --git a/resources/assets/js/pages/manage/components/TaskUpload.vue b/resources/assets/js/pages/manage/components/TaskUpload.vue index 2c45ce8d..0821dfd0 100644 --- a/resources/assets/js/pages/manage/components/TaskUpload.vue +++ b/resources/assets/js/pages/manage/components/TaskUpload.vue @@ -2,23 +2,18 @@ + :on-exceeded-size="handleMaxSize" + :before-upload="handleBeforeUpload"> diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss index 746d36bd..b57b0113 100644 --- a/resources/assets/sass/pages/components/task-detail.scss +++ b/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;