perf: 优化项目面板

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

@@ -81,7 +81,7 @@
             </div>
             <div class="project-switch">
                 <div v-if="completedCount > 0" class="project-checkbox">
-                    <Checkbox :value="projectData.cacheParameter.completedTask" @on-change="toggleCompleted">{{$L('显示已完成')}}</Checkbox>
+                    <Checkbox :value="projectData.cacheParameter.completedTask" @on-change="toggleParameter('completedTask')">{{$L('显示已完成')}}</Checkbox>
                 </div>
                 <div class="project-select">
                     <Cascader ref="flow" :data="flowData" @on-change="flowChange" transfer-class-name="project-panel-flow-cascader" transfer>
@@ -249,7 +249,12 @@
                 </li>
             </Draggable>
         </div>
-        <Scrollbar v-else-if="tabTypeActive === 'table'" class="project-table" enable-x>
+        <Scrollbar
+            v-else-if="tabTypeActive === 'table'"
+            ref="projectTableScroll"
+            class="project-table"
+            enable-x
+            @on-scroll="handleTaskScroll">
             <div class="project-table-head">
                 <Row class="task-row">
                     <Col span="12">
@@ -294,7 +299,13 @@
                     <Col span="3"></Col>
                     <Col span="3"></Col>
                 </Row>
-                <TaskRow v-if="projectData.cacheParameter.showMy" :list="transforTasks(myList)" open-key="my" @on-priority="addTaskOpen" fast-add-task/>
+                <TaskRow
+                    v-if="projectData.cacheParameter.showMy"
+                    :list="transforTasks(myList)"
+                    :task-visibilitys="taskRowVisibilitys"
+                    open-key="my"
+                    @on-priority="addTaskOpen"
+                    fast-add-task/>
             </div>
             <!--协助的任务-->
             <div v-if="helpList.length" :class="['project-table-body', !projectData.cacheParameter.showHelp ? 'project-table-hide' : '']">
@@ -309,7 +320,12 @@
                     <Col span="3"></Col>
                     <Col span="3"></Col>
                 </Row>
-                <TaskRow v-if="projectData.cacheParameter.showHelp" :list="helpList" open-key="help" @on-priority="addTaskOpen"/>
+                <TaskRow
+                    v-if="projectData.cacheParameter.showHelp"
+                    :list="helpList"
+                    :task-visibilitys="taskRowVisibilitys"
+                    open-key="help"
+                    @on-priority="addTaskOpen"/>
             </div>
             <!--未完成任务-->
             <div v-if="projectData.task_num > 0" :class="['project-table-body', !projectData.cacheParameter.showUndone ? 'project-table-hide' : '']">
@@ -324,7 +340,12 @@
                     <Col span="3"></Col>
                     <Col span="3"></Col>
                 </Row>
-                <TaskRow v-if="projectData.cacheParameter.showUndone" :list="unList" open-key="undone" @on-priority="addTaskOpen"/>
+                <TaskRow
+                    v-if="projectData.cacheParameter.showUndone"
+                    :list="unList"
+                    :task-visibilitys="taskRowVisibilitys"
+                    open-key="undone"
+                    @on-priority="addTaskOpen"/>
             </div>
             <!--已完成任务-->
             <div v-if="projectData.task_num > 0" :class="['project-table-body', !projectData.cacheParameter.showCompleted ? 'project-table-hide' : '']">
@@ -341,7 +362,13 @@
                         <div class="ellipsis">{{projectData.task_num > 0 && projectData.cacheParameter.showCompleted ? $L('完成时间') : ''}}</div>
                     </Col>
                 </Row>
-                <TaskRow v-if="projectData.cacheParameter.showCompleted" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
+                <TaskRow
+                    v-if="projectData.cacheParameter.showCompleted"
+                    :list="completedList"
+                    :task-visibilitys="taskRowVisibilitys"
+                    open-key="completed"
+                    @on-priority="addTaskOpen"
+                    showCompleteAt/>
             </div>
         </Scrollbar>
         <div v-else-if="tabTypeActive === 'gantt'" class="project-gantt">
@@ -624,8 +651,9 @@ export default {
             flowInfo: {},
             flowList: [],
 
-            columnVisibility: {},
+            columnVisibilitys: {},
-            taskVisibility: {},
+            taskVisibilitys: {},
+            taskRowVisibilitys: {},
         }
     },
 
@@ -971,6 +999,21 @@ export default {
     },
 
     watch: {
+        projectId: {
+            handler(id) {
+                if (id > 0) {
+                    this.getFlowData();
+                    this.handleColumnDebounce();
+                }
+            },
+            immediate: true,
+        },
+        'allTask.length'() {
+            this.handleColumnDebounce();
+        },
+        windowWidth() {
+            this.handleColumnDebounce();
+        },
         projectData() {
             this.sortData = this.getSort();
         },
@@ -984,24 +1027,6 @@ export default {
                 this.loading = false;
             }
         },
-        projectId: {
-            handler(val) {
-                if (val > 0) {
-                    this.getFlowData();
-                    this.handleColumnDebounce();
-                }
-            },
-            immediate: true,
-        },
-        'allTask.length'() {
-            this.handleColumnDebounce();
-        },
-        'projectData.cacheParameter.completedTask'() {
-            this.handleColumnDebounce();
-        },
-        windowWidth() {
-            this.handleColumnDebounce();
-        }
     },
 
     methods: {
@@ -1507,8 +1532,9 @@ export default {
             });
         },
 
-        flowChange(value, data) {
+        flowChange(_, data) {
             this.flowInfo = data.pop() || {};
+            this.handleColumnDebounce();
         },
 
         inviteCopy() {
@@ -1525,10 +1551,6 @@ export default {
             });
         },
 
-        toggleCompleted() {
-            this.toggleParameter('completedTask');
-        },
-
         workflowBeforeClose() {
             return new Promise(resolve => {
                 if (!this.$refs.workflow) {
@@ -1629,15 +1651,16 @@ export default {
         },
 
         toggleParameter(data) {
-            if (data === 'completedTask') {
+            if (data === 'chat') {
-                this.$store.dispatch("forgetTaskCompleteTemp", true);
-            } else if (data === 'chat') {
                 if (this.windowPortrait) {
                     this.$store.dispatch('openDialog', this.projectData.dialog_id)
                     return;
                 }
+            } else if (data === 'completedTask') {
+                this.$store.dispatch("forgetTaskCompleteTemp", true);
             }
             this.$store.dispatch('toggleProjectParameter', data);
+            this.handleColumnDebounce();
         },
 
         onBack() {
@@ -1654,7 +1677,7 @@ export default {
         },
 
         taskItemVisible({id, column_id}) {
-            return this.columnVisibility[column_id] && this.taskVisibility[id]?.visible
+            return this.columnVisibilitys[column_id] && this.taskVisibilitys[id]?.visible
         },
 
         taskItemStyle({id, column_id, color}) {
@@ -1663,7 +1686,7 @@ export default {
                 style.backgroundColor = color;
             }
             if (!this.taskItemVisible({id, column_id})) {
-                style.height = (this.taskVisibility[id]?.height || 146) + 'px';
+                style.height = (this.taskVisibilitys[id]?.height || 146) + 'px';
             }
             return style;
         },
@@ -1671,9 +1694,16 @@ export default {
         handleColumnDebounce() {
             if (!this.columnDebounceInvoke) {
                 this.columnDebounceInvoke = debounce(_ => {
-                    if (this.tabTypeActive === 'column') {
+                    this.$nextTick(_ => {
-                        this.$nextTick(this.handleColumnScroll)
+                        switch (this.tabTypeActive) {
+                            case 'column':
+                                this.handleColumnScroll()
+                                break;
+                            case 'table':
+                                this.handleTaskScroll({target: this.$refs.projectTableScroll?.$el})
+                                break;
                         }
+                    })
                 }, 10);
             }
             this.columnDebounceInvoke();
@@ -1690,8 +1720,8 @@ export default {
             if (!columnContainer) {
                 return
             }
-            const columnId = parseInt(columnContainer.getAttribute('data-id'))
+            const dataId = columnContainer.getAttribute('data-id')
-            if (!columnId) {
+            if (!dataId) {
                 return
             }
             const mainContainer = this.$refs.projectColumn;
@@ -1711,11 +1741,9 @@ export default {
                 columnRect.bottom > mainRect.top
             )
             if (visible) {
-                this.handleTaskScroll({
+                this.handleTaskScroll({target: columnContainer.querySelector('.task-scrollbar')})
-                    target: columnContainer.querySelector('.task-scrollbar')
-                })
             }
-            this.$set(this.columnVisibility, columnId, visible)
+            this.$set(this.columnVisibilitys, dataId, visible)
         },
 
         async handleTaskScroll({target}) {
@@ -1726,14 +1754,25 @@ export default {
             if (!targetItem.length) {
                 return
             }
+            let visibleType = null;
+            switch (this.tabTypeActive) {
+                case 'column':
+                    visibleType = 'taskVisibilitys'
+                    break;
+                case 'table':
+                    visibleType = 'taskRowVisibilitys'
+                    break;
+                default:
+                    return
+            }
             const targetRect = target.getBoundingClientRect();
             for (const item of targetItem) {
-                const taskId = parseInt(item.getAttribute('data-id'));
+                const dataId = item.getAttribute('data-id');
-                if (!taskId) {
+                if (!dataId) {
                     continue;
                 }
                 const taskRect = item.getBoundingClientRect();
-                const originalVisible = this.taskVisibility[taskId]?.visible || false;
+                const originalVisible = this[visibleType][dataId]?.visible || false;
                 const currentVisible = (
                     taskRect.top >= targetRect.top - taskRect.height &&
                     taskRect.bottom <= targetRect.bottom + taskRect.height
@@ -1741,8 +1780,8 @@ export default {
                 if (currentVisible === originalVisible) {
                     continue;
                 }
-                const firstVisible = this.taskVisibility[taskId] === undefined && currentVisible;
+                const firstVisible = this[visibleType][dataId] === undefined && currentVisible;
-                this.$set(this.taskVisibility, taskId, {
+                this.$set(this[visibleType], dataId, {
                     visible: currentVisible,
                     height: taskRect.height
                 });
@@ -1750,7 +1789,7 @@ export default {
                     await this.$nextTick();
                 }
             }
-        }
+        },
     }
 }
 </script>

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

@@ -1,7 +1,15 @@
 <template>
     <div class="task-rows">
-        <div v-for="(item, key) in list" :key="key" :ref="`task_${item.id}`">
+        <div
-            <Row class="task-row" :style="item.color ? {backgroundColor: item.color, borderBottomColor: item.color} : {}">
+            v-for="(item, key) in list"
+            :key="key"
+            :ref="`task_${item.id}`"
+            :data-id="`${openKey}_${item.id}`"
+            class="task-item">
+            <Row
+                class="task-row"
+                :style="taskItemStyle(item)">
+                <template v-if="taskItemVisible(`${openKey}_${item.id}`)">
                     <em v-if="item.p_name" class="priority-color" :style="{backgroundColor:item.p_color}"></em>
                     <Col span="12" :class="['row-name', item.complete_at ? 'complete' : '']">
                         <Icon
@@ -93,6 +101,7 @@
                         </ETooltip>
                         <div v-else-if="showCompleteAt && item.complete_at" :title="item.complete_at">{{completeAtFormat(item.complete_at)}}</div>
                     </Col>
+                </template>
             </Row>
             <TaskRow
                 v-if="taskOpen[item.id]===true"
@@ -139,6 +148,10 @@ export default {
             type: Boolean,
             default: false
         },
+        taskVisibilitys: {
+            type: Object,
+            default: () => ({})
+        }
     },
     data() {
         return {
@@ -279,6 +292,23 @@ export default {
             } else {
                 return time.format('YYYY-MM-DD')
             }
+        },
+
+        taskItemVisible(key) {
+            return this.parentId > 0 || this.taskVisibilitys[key]?.visible
+        },
+
+        taskItemStyle({id, color}) {
+            const style = {}
+            if (color) {
+                style.backgroundColor = color;
+                style.borderBottomColor = color;
+            }
+            const key = `${this.openKey}_${id}`;
+            if (!this.taskItemVisible(key)) {
+                style.height = (this.taskVisibilitys[key]?.height || 49) + 'px';
+            }
+            return style;
         }
     }
 }