perf: 优化任务窗口

resources/assets/js/pages/manage.vue

@@ -305,8 +305,8 @@
             :mask-closable="false"
             :footer-hide="true"
             @on-visible-change="taskVisibleChange">
-            <div class="page-manage-task-modal" :style="taskStyle">
+            <div class="page-manage-task-modal">
-                <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData"/>
+                <TaskDetail ref="taskDetail" :task-id="taskId" :open-task="taskData" modalMode/>
             </div>
         </Modal>
 

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

@@ -70,7 +70,8 @@
     <!--主任务-->
     <div
         v-else-if="ready"
-        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}">
+        :class="{'task-detail':true, 'open-dialog': hasOpenDialog, 'completed': taskDetail.complete_at}"
+        :style="taskDetailStyle">
         <div v-show="taskDetail.id > 0" class="task-info">
             <div class="head">
                 <TaskMenu
@@ -454,6 +455,11 @@ export default {
             type: Boolean,
             default: true
         },
+        // 是否Modal模式
+        modalMode: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -625,6 +631,16 @@ export default {
             }
         },
 
+        taskDetailStyle() {
+            const {modalMode, innerHeight, hasOpenDialog} = this;
+            if (modalMode && hasOpenDialog) {
+                return {
+                    maxHeight: (innerHeight - (innerHeight > 900 ? 200 : 70) - 30) + 'px'
+                }
+            }
+            return {}
+        },
+
         cutTime() {
             const {taskDetail} = this;
             let start_at = $A.Date(taskDetail.start_at, true);

resources/assets/js/pages/single/task.vue

@@ -11,12 +11,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: auto;
     .task-detail {
         flex: 1;
         margin: 0;
         padding: 18px 22px;
         border-radius: 0;
+        overflow: auto;
     }
 }
 </style>

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

@@ -504,6 +504,7 @@
                             .percent {
                                 display: none;
                                 margin-left: 4px;
+                                align-items: center;
                                 cursor: pointer;
                             }
                         }
@@ -628,7 +629,7 @@
                                 }
 
                                 .percent {
-                                    display: inline-block;
+                                    display: flex;
                                 }
                             }
                         }

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

@@ -4,7 +4,6 @@
     margin: 0 -32px 12px -10px;
     padding: 0 22px 12px 0;
     min-height: 120px;
-    overflow: auto;
     .task-info {
         flex: 3;
         display: flex;
@@ -492,6 +491,7 @@
         flex-shrink: 0;
         display: flex;
         flex-direction: column;
+        justify-content: flex-end;
         margin-top: 22px;
         position: relative;
         .head {
@@ -671,16 +671,8 @@
             margin: 0 0 0 18px;
             min-width: 320px;
             max-width: 450px;
-            &:before {
+            border-left: 1px solid #f4f5f5;
-                content: "";
+            
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                z-index: 1;
-                width: 1px;
-                background-color: #f4f5f5;
-            }
             .head {
                 &:before {
                     left: 18px;