perf: 添加任务弹窗

package.json

@@ -58,7 +58,7 @@
         "stylus-loader": "^6.2.0",
         "tinymce": "^5.10.2",
         "tui-calendar-hi": "^1.15.1-1",
-        "view-design-hi": "^4.7.0-2",
+        "view-design-hi": "^4.7.0-3",
         "vue": "^2.6.14",
         "vue-clipboard2": "^0.3.3",
         "vue-emoji-picker": "^1.0.3",

resources/assets/js/pages/manage.vue

@@ -123,6 +123,19 @@
             </div>
         </Modal>
 
+        <!--添加任务-->
+        <Modal
+            v-model="addTaskShow"
+            :title="$L('添加任务')"
+            :styles="{
+                width: '90%',
+                maxWidth: '640px'
+            }"
+            :mask-closable="false"
+            footer-hide>
+            <TaskAdd ref="addTask" v-model="addTaskShow"/>
+        </Modal>
+
         <!--任务详情-->
         <Modal
             :value="taskId > 0"
@@ -181,9 +194,13 @@ import TeamManagement from "./manage/components/TeamManagement";
 import ProjectManagement from "./manage/components/ProjectManagement";
 import DrawerOverlay from "../components/DrawerOverlay";
 import DragBallComponent from "../components/DragBallComponent";
+import TaskAdd from "./manage/components/TaskAdd";
+import {Store} from "le5le-store";
 
 export default {
-    components: {DragBallComponent, DrawerOverlay, ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
+    components: {
+        TaskAdd,
+        DragBallComponent, DrawerOverlay, ProjectManagement, TeamManagement, ProjectArchived, TaskDetail},
     data() {
         return {
             loadIng: 0,
@@ -197,6 +214,9 @@ export default {
             },
             addRule: {},
 
+            addTaskShow: false,
+            addTaskSubscribe: null,
+
             columns: [],
 
             projectKeyValue: '',
@@ -229,11 +249,34 @@ export default {
         this.notificationInit();
         this.onVisibilityChange();
         //
+        this.addTaskSubscribe = Store.subscribe('addTask', (data) => {
+            this.$refs.addTask.defaultPriority();
+            this.$refs.addTask.setData($A.isJson(data) ? data : {
+                'owner': this.userId,
+                'column_id': data,
+            });
+            this.addTaskShow = true;
+            this.$nextTick(() => {
+                this.$refs.addTask.$refs.input.focus();
+            })
+        });
+        //
+        document.addEventListener('keydown', this.shortcutEvent);
+        //
         if (this.isElectron) {
             this.$electron.ipcRenderer.send('setDockBadge', 0);
         }
     },
 
+    beforeDestroy() {
+        if (this.addTaskSubscribe) {
+            this.addTaskSubscribe.unsubscribe();
+            this.addTaskSubscribe = null;
+        }
+        //
+        document.removeEventListener('keydown', this.shortcutEvent);
+    },
+
     deactivated() {
         this.addShow = false;
     },
@@ -526,6 +569,15 @@ export default {
             })
         },
 
+        shortcutEvent(e) {
+            if (e.keyCode === 75 || e.keyCode === 78) {
+                if (e.metaKey || e.ctrlKey) {
+                    e.preventDefault();
+                    Store.set('addTask', 0);
+                }
+            }
+        },
+
         taskVisibleChange(visible) {
             if (!visible) {
                 this.$store.dispatch('openTask', 0)

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

@@ -315,23 +315,6 @@
             </div>
         </div>
 
-        <!--添加任务-->
-        <Modal
-            v-model="addShow"
-            :title="$L('添加任务')"
-            :styles="{
-                width: '90%',
-                maxWidth: '640px'
-            }"
-            :mask-closable="false">
-            <TaskAdd ref="add" @on-add="onAddTask"/>
-            <div slot="footer">
-                <Button type="default" @click="addShow=false">{{$L('取消')}}</Button>
-                <Button type="primary" :loading="addLoad > 0" @click="onAddTask">{{$L('添加')}}</Button>
-                <Button type="primary" :loading="addLoad > 0" @click="onAddTask(true)">{{$L('添加并继续')}}</Button>
-            </div>
-        </Modal>
-
         <!--项目设置-->
         <Modal
             v-model="settingShow"
@@ -454,9 +437,6 @@ export default {
 
             searchText: '',
 
-            addShow: false,
-            addLoad: 0,
-
             addColumnShow: false,
             addColumnName: '',
 
@@ -490,12 +470,6 @@ export default {
         this.projectDialogsubscribe = Store.subscribe('onProjectDialogBack', () => {
             this.$store.dispatch('toggleTablePanel', 'chat');
         });
-        //
-        document.addEventListener('keydown', this.shortcutAdd);
-    },
-
-    beforeDestroy () {
-        document.removeEventListener('keydown', this.shortcutAdd);
     },
 
     destroyed() {
@@ -749,16 +723,6 @@ export default {
             });
         },
 
-        onAddTask(again) {
-            this.addLoad++;
-            this.$refs.add.onAdd((success) => {
-                this.addLoad--;
-                if (success && again !== true) {
-                    this.addShow = false;
-                }
-            }, again)
-        },
-
         addTopShow(id, show) {
             this.$set(this.columnTopShow, id, show);
             if (show) {
@@ -767,16 +731,7 @@ export default {
         },
 
         addTaskOpen(column_id) {
-            this.$refs.add.defaultPriority();
+            Store.set('addTask', column_id);
-            this.$refs.add.setData($A.isJson(column_id) ? column_id : {
-                'owner': this.userId,
-                'column_id': column_id,
-            });
-            this.$Modal.resetIndex();
-            this.addShow = true;
-            this.$nextTick(() => {
-                this.$refs.add.$refs.input.focus();
-            })
         },
 
         addColumnOpen() {
@@ -1188,17 +1143,6 @@ export default {
             this.completeJust = [];
         },
 
-        shortcutAdd(e) {
-            if (this.projectId && this.projectId == this.$route.params.id) {
-                if (e.keyCode === 75 || e.keyCode === 78) {
-                    if (e.metaKey || e.ctrlKey) {
-                        e.preventDefault();
-                        this.addTaskOpen(0);
-                    }
-                }
-            }
-        },
-
         formatTime(date) {
             let time = Math.round($A.Date(date).getTime() / 1000),
                 string = '';

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

@@ -37,6 +37,7 @@
                 </ul>
             </div>
         </div>
+
         <Form v-if="advanced" class="task-add-advanced" label-width="auto" @submit.native.prevent>
             <FormItem :label="$L('任务列表')">
                 <Select
@@ -113,6 +114,21 @@
                     :placeholder="$L('+ 输入子任务，回车添加子任务')"/>
             </div>
         </Form>
+
+        <div class="ivu-modal-footer">
+            <Button type="default" @click="close">{{$L('取消')}}</Button>
+            <ButtonGroup class="page-manage-add-task-button-group">
+                <Button type="primary" :loading="loadIng > 0" @click="onAdd">{{$L('添加')}}</Button>
+                <Dropdown @on-click="onAdd(true)">
+                    <Button type="primary" :loading="loadIng > 0">
+                        <Icon type="ios-arrow-down"></Icon>
+                    </Button>
+                    <DropdownMenu slot="list">
+                        <DropdownItem>{{$L('添加并继续')}}</DropdownItem>
+                    </DropdownMenu>
+                </Dropdown>
+            </ButtonGroup>
+        </div>
     </div>
 </template>
 
@@ -124,6 +140,12 @@ import UserInput from "../../../components/UserInput";
 export default {
     name: "TaskAdd",
     components: {UserInput, TEditor},
+    props: {
+        value: {
+            type: Boolean,
+            default: false
+        },
+    },
     data() {
         return {
             addData: {
@@ -168,10 +190,12 @@ export default {
             timeOptions: {
                 shortcuts: []
             },
+
+            loadIng: 0,
         }
     },
     mounted() {
-        this.$refs.input.focus();
+        //
     },
     computed: {
         ...mapState(['userId', 'projectId', 'columns', 'taskPriority']),
@@ -232,6 +256,9 @@ export default {
                 }]
             };
         },
+        close() {
+            this.$emit("input", !this.value)
+        },
         columnCreate(val) {
             if (!this.columnAdd.find(({id}) => id == val)) {
                 this.columnAdd.push({
@@ -254,7 +281,7 @@ export default {
                     return;
                 }
                 e.preventDefault();
-                this.$emit("on-add")
+                this.onAdd();
             }
         },
         addSubTask() {
@@ -287,15 +314,16 @@ export default {
         setData(data) {
             this.addData = Object.assign({}, this.addData, data);
         },
-        onAdd(callback, again) {
+        onAdd(again) {
             if (!this.addData.name) {
                 $A.messageError("任务描述不能为空");
-                callback(false)
                 return;
             }
+            this.loadIng++;
             this.$store.dispatch("taskAdd", Object.assign(this.addData, {
                 project_id: this.projectId
             })).then(({msg}) => {
+                this.loadIng--;
                 $A.messageSuccess(msg);
                 if (again === true) {
                     this.addData = Object.assign({}, this.addData, {
@@ -316,11 +344,11 @@ export default {
                         p_name: '',
                         p_color: '',
                     };
+                    this.close()
                 }
-                callback(true)
             }).catch(({msg}) => {
+                this.loadIng--;
                 $A.modalError(msg);
-                callback(false)
             });
         }
     }

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

@@ -1,5 +1,4 @@
 .task-add {
-    margin-bottom: 6px;
     .task-add-form,
     .task-add-advanced {
         .title {
@@ -25,7 +24,7 @@
             }
         }
         .advanced-option {
-            margin-top: 24px;
+            margin-top: 42px;
             z-index: 1;
             display: flex;
             align-items: center;
@@ -56,7 +55,7 @@
     }
     .task-add-advanced {
         margin: -16px 0 0;
-        padding: 34px 32px 6px;
+        padding: 46px 32px 6px;
         border-radius: 8px;
         border: 1px solid #e8e8e8;
         .subtasks {
@@ -92,6 +91,9 @@
             width: 100%;
         }
     }
+    .ivu-modal-footer {
+        padding: 26px 0 22px !important;
+    }
 }
 .task-add-advanced-transfer {
     .task-drop-prepend {

resources/assets/sass/pages/page-manage.scss

@@ -271,6 +271,17 @@
     }
 }
 
+.page-manage-add-task-button-group {
+    margin-left: 8px !important;
+    .ivu-dropdown {
+        .ivu-btn {
+            min-width: auto !important;
+            padding: 0 4px;
+            border-radius: 0 4px 4px 0;
+        }
+    }
+}
+
 
 @media (max-width: 768px) {
     .page-manage {