perf: 优化任务列表切换显示

resources/assets/js/functions/web.js

@@ -60,14 +60,13 @@
         /**
          * 项目配置模板
          * @param project_id
-         * @returns {{showMy: boolean, showUndone: boolean, project_id, chat: boolean, showHelp: boolean, showCompleted: boolean, cardInit: boolean, card: boolean, completedTask: boolean}}
+         * @returns {{showMy: boolean, showUndone: boolean, project_id, chat: boolean, showHelp: boolean, showCompleted: boolean, menuType: string, menuInit: boolean, completedTask: boolean}}
          */
         projectParameterTemplate(project_id) {
             return {
                 project_id,
-                card: true,
+                menuInit: false,
-                menuType: 'card',
+                menuType: 'column',
-                cardInit: false,
                 chat: false,
                 showMy: true,
                 showHelp: true,

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

@@ -82,14 +82,15 @@
                         </Cascader>
                     </div>
                     <div class="project-switch-button">
-                        <div @click="tabTypeChange('card')" :class="{ 'active': projectParameter('menuType') === 'card'}"><i class="taskfont">&#xe60c;</i></div>
+                        <div class="slider" :style="tabTypeStyle"></div>
-                        <div @click="tabTypeChange('menu')" :class="{ 'active': projectParameter('menuType') === 'menu'}"><i class="taskfont">&#xe66a;</i></div>
+                        <div @click="tabTypeChange('column')" :class="{ 'active': tabTypeActive === 'column'}"><i class="taskfont">&#xe60c;</i></div>
-                        <div @click="tabTypeChange('gantt')" :class="{ 'active': projectParameter('menuType') === 'gantt'}"><i class="taskfont">&#xe797;</i></div>
+                        <div @click="tabTypeChange('table')" :class="{ 'active': tabTypeActive === 'table'}"><i class="taskfont">&#xe66a;</i></div>
+                        <div @click="tabTypeChange('gantt')" :class="{ 'active': tabTypeActive === 'gantt'}"><i class="taskfont">&#xe797;</i></div>
                     </div>
                 </div>
             </div>
         </div>
-        <div v-if="projectParameter('menuType') === 'card'" class="project-column">
+        <div v-if="tabTypeActive === 'column'" class="project-column">
             <Draggable
                 :list="columnList"
                 :animation="150"
@@ -225,7 +226,7 @@
                 </li>
             </Draggable>
         </div>
-        <div v-if="projectParameter('menuType') === 'menu'" class="project-table overlay-y">
+        <div v-else-if="tabTypeActive === 'table'" class="project-table overlay-y">
             <div class="project-table-head">
                 <Row class="task-row">
                     <Col span="12"># {{$L('任务名称')}}</Col>
@@ -312,12 +313,12 @@
                 <TaskRow v-if="projectParameter('showCompleted')" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
             </div>
         </div>
-        <div v-if="projectParameter('menuType') === 'gantt'" class="project-table overlay-y" style="position: relative">
+        <div v-else-if="tabTypeActive === 'gantt'" class="project-gantt">
-            <!-- 甘特图 -->
+            <ProjectGantt
-            <ProjectGantt :lineData="ganttColumnList[0].tasks"
+                :lineData="ganttColumnList[0].tasks"
-                          :projectLabel="ganttColumnList"
+                :projectLabel="ganttColumnList"
-                          :lineTaskData="ganttColumnList[0].tasks"
+                :lineTaskData="ganttColumnList[0].tasks"
-                          :levelList="taskPriority"></ProjectGantt>
+                :levelList="taskPriority"/>
         </div>
         <!--项目设置-->
         <Modal
@@ -567,6 +568,28 @@ export default {
 
         ...mapGetters(['projectData', 'projectParameter', 'transforTasks']),
 
+        tabTypeActive() {
+            return this.projectParameter('menuType')
+        },
+
+        tabTypeStyle() {
+            let style = {}
+            switch (this.tabTypeActive) {
+                case 'column':
+                    style.left = '0'
+                    break
+                case 'table':
+                    style.left = '33.33%'
+                    break
+                case 'gantt':
+                    style.left = '66.66%'
+                    break
+                default:
+                    style.display = 'none'
+            }
+            return style
+        },
+
         userWaitRemove() {
             const {userids, useridbak} = this.userData;
             if (!userids) {
@@ -1400,18 +1423,18 @@ export default {
 
         tabTypeChange(type) {
             switch (type) {
-                case "card":
+                case "column":
                     this.$store.dispatch('toggleProjectParameter', {
                         project_id: this.projectId,
                         key: 'menuType',
-                        value: 'card'
+                        value: 'column'
                     });
                     break;
-                case "menu":
+                case "table":
                     this.$store.dispatch('toggleProjectParameter', {
                         project_id: this.projectId,
                         key: 'menuType',
-                        value: 'menu'
+                        value: 'table'
                     });
                     break;
                 case "gantt":

resources/assets/js/store/actions.js

@@ -162,11 +162,8 @@ export default {
                 index = state.cacheProjectParameter.findIndex(item => item.project_id == project_id)
             }
             const cache = state.cacheProjectParameter[index];
-            if (!$A.isJson(key) && !value) {
+            if (!$A.isJson(key)) {
-                key = {[key]: !cache[key]};
+                key = {[key]: value || !cache[key]};
-            }
-            if (value) {
-                key = {[key]: value};
             }
             state.cacheProjectParameter.splice(index, 1, Object.assign(cache, key))
             setTimeout(() => {
@@ -861,12 +858,12 @@ export default {
                 // 判断只有1列的时候默认版面为表格模式
                 if (state.cacheColumns.filter(item => item.project_id == project_id).length === 1) {
                     const cache = state.cacheProjectParameter.find(item => item.project_id == project_id) || {};
-                    if (typeof cache.cardInit === "undefined" || cache.cardInit === false) {
+                    if (typeof cache.menuInit === "undefined" || cache.menuInit === false) {
                         dispatch("toggleProjectParameter", {
                             project_id,
                             key: {
-                                card: false,
+                                menuInit: true,
-                                cardInit: true,
+                                menuType: 'table',
                             }
                         });
                     }

resources/assets/js/store/getters.js

@@ -34,6 +34,9 @@ export default {
                 cache = $A.projectParameterTemplate(state.projectId)
                 state.cacheProjectParameter.push(cache);
             }
+            if (key === 'menuType' && typeof cache[key] === "undefined") {
+                return 'column'
+            }
             return cache[key];
         }
     },

resources/assets/sass/pages/components/project-list.scss

@@ -193,9 +193,18 @@
                     border-radius: 6px;
                     height: 30px;
                     position: relative;
-                    transition: box-shadow 0.2s;
+                    transition: all 0.2s;
                     .active {
                         color: $primary-color;
+                    }
+                    .slider {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 33.3%;
+                        height: 100%;
+                        z-index: 0;
+                        color: $primary-color;
                         border-radius: 6px;
                         border: 1px solid $primary-color;
                         background-color: rgba($primary-color, 0.1);
@@ -204,15 +213,6 @@
                     &:hover {
                         box-shadow: 0 0 10px #e6ecfa;
                     }
-                    &:before {
-                        content: "";
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 33.3%;
-                        height: 100%;
-                        z-index: 0;
-                    }
                     > div {
                         z-index: 1;
                         width: 32px;
@@ -956,6 +956,10 @@
             }
         }
     }
+    .project-gantt {
+        height: 100%;
+        position: relative
+    }
 }
 .project-list-more-dropdown-menu {
     > li {