perf: 优化项目筛选工作流

package.json

@@ -64,7 +64,7 @@
         "stylus-loader": "^6.2.0",
         "tinymce": "^5.10.2",
         "tui-calendar-hi": "^1.15.1-5",
-        "view-design-hi": "^4.7.0-11",
+        "view-design-hi": "^4.7.0-12",
         "vue": "^2.6.14",
         "vue-clipboard2": "^0.3.3",
         "vue-emoji-picker": "^1.0.3",

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

@@ -1,80 +0,0 @@
-<template>
-    <li
-        :id="'view_' + dialogMsg.id"
-        :class="{self:dialogMsg.userid === userId, 'history-tip': topId === dialogMsg.id}"
-        @mouseover="listHover(true)"
-        @mouseleave="listHover(false)">
-        <em v-if="topId === dialogMsg.id" class="history-text">{{$L('历史消息')}}</em>
-        <div class="dialog-avatar">
-            <UserAvatar :userid="dialogMsg.userid" :tooltip-disabled="dialogMsg.userid === userId" :size="30"/>
-        </div>
-        <DialogView :msg-data="dialogMsg" :dialog-type="dialogData.type"/>
-        <div class="dialog-action" v-show="showAction">
-            <Tooltip v-if="parseInt(dialogMsg.userid) === parseInt(userId)" :content="$L('撤回')" placement="top">
-                <Button type="text" icon="md-undo" @click="messageWithdraw"/>
-            </Tooltip>
-        </div>
-    </li>
-</template>
-
-<script>
-import {mapState} from "vuex";
-import DialogView from "./DialogView";
-
-export default {
-    name: "DialogList",
-    components: {DialogView},
-    props: {
-        dialogMsg: {
-            type: Object,
-            default: {}
-        },
-        topId: {
-            type: Number,
-            default: 0
-        },
-        dialogData: {
-            type: Object,
-            default: {}
-        },
-    },
-
-    data() {
-        return {
-            showAction: false
-        }
-    },
-
-    computed: {
-        ...mapState([
-            'userId',
-        ]),
-    },
-
-    watch: {
-    },
-
-    methods: {
-        listHover(act) {
-            this.showAction = act === true;
-        },
-        messageWithdraw(){
-            this.$store.dispatch("call", {
-                url: 'dialog/msg/withdraw',
-                data: {
-                    msg_id: this.dialogMsg.id
-                },
-                method: 'get',
-            }).then(({data, msg}) => {
-                // data 结果数据
-                $A.messageSuccess("消息已撤回");
-                this.$store.dispatch("getDialogMsgs", this.dialogData.id);
-                // msg 结果描述
-            }).catch(({msg}) => {
-                // msg 错误原因
-                $A.messageError(msg);
-            });
-        }
-    }
-}
-</script>

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

@@ -69,17 +69,16 @@
                     </li>
                 </ul>
             </div>
-            <div class="project-subbox">
+            <div class="project-subbox clearfix">
                 <div class="project-subtitle">{{projectData.desc}}</div>
                 <div class="project-switch">
                     <div v-if="completedCount > 0" class="project-checkbox">
                         <Checkbox :value="projectParameter('completedTask')" @on-change="toggleCompleted">{{$L('显示已完成')}}</Checkbox>
                     </div>
-                    <div v-if="flowList && flowList.length > 0" class="project-select">
+                    <div v-if="flowList.length > 0" class="project-select">
-                        <Select v-model="flowId" :placeholder="this.$L('进度')">
+                        <Cascader :data="flowData" @on-change="flowChange" transfer-class-name="project-list-flow-cascader" transfer>
-                            <Option value="0">{{this.$L('全部')}}</Option>
+                            <span :class="`project-flow ${flowInfo.status}`">{{ flowTitle }}</span>
-                            <Option v-for="item in flowList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+                        </Cascader>
-                        </Select>
                     </div>
                     <div :class="['project-switch-button', !projectParameter('card') ? 'menu' : '']" @click="$store.dispatch('toggleProjectParameter', 'card')">
                         <div><i class="taskfont">&#xe60c;</i></div>
@@ -503,7 +502,7 @@ export default {
 
             projectDialogSubscribe: null,
 
-            flowId: 0,
+            flowInfo: {},
             flowList: [],
         }
     },
@@ -568,15 +567,15 @@ export default {
         },
 
         panelTask() {
-            const {searchText, flowId} = this;
+            const {searchText, flowInfo} = this;
             return function (list) {
                 if (!this.projectParameter('completedTask')) {
                     list = list.filter(({complete_at}) => {
                         return !complete_at;
                     });
                 }
-                if (flowId > 0) {
+                if (flowInfo.value > 0) {
-                    list = list.filter(({flow_item_id}) => flow_item_id === flowId);
+                    list = list.filter(({flow_item_id}) => flow_item_id === flowInfo.value);
                 }
                 if (searchText) {
                     list = list.filter(({name, desc}) => {
@@ -599,8 +598,18 @@ export default {
             return this.windowWidth > 1200 ? 8 : 3;
         },
 
+        allTask() {
+            const {cacheTasks, projectId} = this;
+            return cacheTasks.filter(task => {
+                if (task.archived_at) {
+                    return false;
+                }
+                return task.project_id == projectId
+            })
+        },
+
         columnList() {
-            const {projectId, cacheColumns, cacheTasks} = this;
+            const {projectId, cacheColumns, allTask} = this;
             const list = cacheColumns.filter(({project_id}) => {
                 return project_id == projectId
             }).sort((a, b) => {
@@ -610,10 +619,7 @@ export default {
                 return a.id - b.id;
             });
             list.forEach((column) => {
-                column.tasks = this.transforTasks(cacheTasks.filter(task => {
+                column.tasks = this.transforTasks(allTask.filter(task => {
-                    if (task.archived_at) {
-                        return false;
-                    }
                     return task.column_id == column.id;
                 })).sort((a, b) => {
                     let at1 = $A.Date(a.complete_at),
@@ -631,8 +637,8 @@ export default {
         },
 
         myList() {
-            const {cacheTasks, taskCompleteTemps, sortField, sortType} = this;
+            const {allTask, taskCompleteTemps, sortField, sortType} = this;
-            let array = cacheTasks.filter(task => this.myFilter(task));
+            let array = allTask.filter(task => this.myFilter(task));
             let tmps = taskCompleteTemps.filter(task => this.myFilter(task, false));
             if (tmps.length > 0) {
                 array = $A.cloneJSON(array)
@@ -654,8 +660,8 @@ export default {
         },
 
         helpList() {
-            const {cacheTasks, taskCompleteTemps, sortField, sortType} = this;
+            const {allTask, taskCompleteTemps, sortField, sortType} = this;
-            let array = cacheTasks.filter(task => this.helpFilter(task));
+            let array = allTask.filter(task => this.helpFilter(task));
             let tmps = taskCompleteTemps.filter(task => this.helpFilter(task, false));
             if (tmps.length > 0) {
                 array = $A.cloneJSON(array)
@@ -677,15 +683,12 @@ export default {
         },
 
         unList() {
-            const {projectId, cacheTasks, searchText, sortField, sortType, flowId} = this;
+            const {allTask, searchText, sortField, sortType, flowInfo} = this;
-            const array = cacheTasks.filter(task => {
+            const array = allTask.filter(task => {
-                if (task.archived_at) {
+                if (task.parent_id > 0) {
                     return false;
                 }
-                if (task.project_id != projectId || task.parent_id > 0) {
+                if (flowInfo.value > 0 && task.flow_item_id !== flowInfo.value) {
-                    return false;
-                }
-                if (flowId > 0 && task.flow_item_id !== flowId) {
                     return false;
                 }
                 if (searchText) {
@@ -711,15 +714,12 @@ export default {
         },
 
         completedList() {
-            const {projectId, cacheTasks, searchText, flowId} = this;
+            const {allTask, searchText, flowInfo} = this;
-            const array = cacheTasks.filter(task => {
+            const array = allTask.filter(task => {
-                if (task.archived_at) {
+                if (task.parent_id > 0) {
                     return false;
                 }
-                if (task.project_id != projectId || task.parent_id > 0) {
+                if (flowInfo.value > 0 && task.flow_item_id !== flowInfo.value) {
-                    return false;
-                }
-                if (flowId > 0 && task.flow_item_id !== flowId) {
                     return false;
                 }
                 if (searchText) {
@@ -737,17 +737,55 @@ export default {
         },
 
         completedCount() {
-            const {projectId, cacheTasks} = this;
+            const {allTask} = this;
-            return cacheTasks.filter(task => {
+            return allTask.filter(task => {
-                if (task.archived_at) {
+                if (task.parent_id > 0) {
-                    return false;
-                }
-                if (task.project_id != projectId || task.parent_id > 0) {
                     return false;
                 }
                 return task.complete_at;
             }).length;
         },
+
+        flowTitle() {
+            const {flowInfo, allTask} = this;
+            if (flowInfo.value) {
+                return flowInfo.label;
+            }
+            return `${this.$L('全部')} (${allTask.length})`
+        },
+
+        flowData() {
+            const {flowList, allTask} = this;
+            let list = [{
+                value: 0,
+                label: `${this.$L('全部')} (${allTask.length})`,
+                children: []
+            }];
+            let flows = flowList.map(item1 => {
+                return {
+                    value: item1.id,
+                    label: item1.name,
+                    status: item1.status,
+                    children: item1.project_flow_item.map(item2 => {
+                        let length = allTask.filter(task => {
+                            return task.flow_item_id == item2.id;
+                        }).length
+                        return {
+                            value: item2.id,
+                            label: `${item2.name} (${length})`,
+                            status: item2.status,
+                            class: item2.status
+                        }
+                    })
+                }
+            });
+            if (flows.length === 1) {
+                list.push(...flows[0].children)
+            } else if (flows.length > 0) {
+                list.push(...flows)
+            }
+            return list
+        },
     },
 
     watch: {
@@ -812,10 +850,7 @@ export default {
                         sort = -1;
                         upTask.push(...item.task.map(id => {
                             sort++;
-                            upTask.push(...this.cacheTasks.filter(task => {
+                            upTask.push(...this.allTask.filter(task => {
-                                if (task.archived_at) {
-                                    return false;
-                                }
                                 return task.parent_id == id
                             }).map(({id}) => {
                                 return {
@@ -1153,14 +1188,14 @@ export default {
 
         taskIsHidden(task) {
             const {name, desc, complete_at} = task;
-            const {searchText, flowId} = this;
+            const {searchText, flowInfo} = this;
             if (!this.projectParameter('completedTask')) {
                 if (complete_at) {
                     return true;
                 }
             }
-            if (flowId > 0 && task.flow_item_id !== flowId) {
+            if (flowInfo.value > 0 && task.flow_item_id !== flowInfo.value) {
-                return false;
+                return true;
             }
             if (searchText) {
                 if (!($A.strExists(name, searchText) || $A.strExists(desc, searchText))) {
@@ -1201,15 +1236,16 @@ export default {
                     project_id: this.projectId,
                 },
             }).then(({data}) => {
-                let flowList = data.map(({project_flow_item}) => project_flow_item);
+                this.flowList = data;
-                if (flowList) {
-                    this.flowList = flowList[0];
-                }
             }).catch(() => {
                 this.flowList = [];
             });
         },
 
+        flowChange(value, data) {
+            this.flowInfo = data.pop();
+        },
+
         inviteCopy() {
             if (!this.inviteData.url) {
                 return;
@@ -1252,18 +1288,12 @@ export default {
         },
 
         myFilter(task, chackCompleted = true) {
-            if (task.archived_at) {
-                return false;
-            }
-            if (task.project_id != this.projectId) {
-                return false;
-            }
             if (!this.projectParameter('completedTask') && chackCompleted === true) {
                 if (task.complete_at) {
                     return false;
                 }
             }
-            if (this.flowId > 0 && task.flow_item_id !== this.flowId) {
+            if (this.flowInfo.value > 0 && task.flow_item_id !== this.flowInfo.value) {
                 return false;
             }
             if (this.searchText) {
@@ -1275,10 +1305,7 @@ export default {
         },
 
         helpFilter(task, chackCompleted = true) {
-            if (task.archived_at) {
+            if (task.parent_id > 0) {
-                return false;
-            }
-            if (task.project_id != this.projectId || task.parent_id > 0) {
                 return false;
             }
             if (!this.projectParameter('completedTask') && chackCompleted === true) {
@@ -1286,7 +1313,7 @@ export default {
                     return false;
                 }
             }
-            if (this.flowId > 0 && task.flow_item_id !== this.flowId) {
+            if (this.flowInfo.value > 0 && task.flow_item_id !== this.flowInfo.value) {
                 return false;
             }
             if (this.searchText) {

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

@@ -114,16 +114,15 @@
         }
         .project-subbox {
             width: 100%;
-            display: flex;
-            justify-content: space-between;
             .project-subtitle {
-                flex: 1;
+                float: left;
                 color: #999999;
                 line-height: 24px;
+                padding: 3px 0;
             }
             .project-switch {
-                margin-left: 80px;
+                float: right;
-                flex-shrink: 0;
+                margin-left: 32px;
                 display: flex;
                 align-items: flex-end;
                 .project-checkbox {
@@ -140,13 +139,34 @@
                     display: flex;
                     align-items: center;
                     margin-right: 14px;
-                    .ivu-select-single {
+                    opacity: 0.9;
-                        .ivu-select-selection {
                     height: 30px;
-                            .ivu-select-selected-value {
+                    .project-flow {
+                        font-size: 13px;
                         height: 28px;
-                                line-height: 28px;
+                        line-height: 26px;
+                        padding: 0 8px;
+                        border-radius: 4px;
+                        background: #f7f7f7;
+                        border: 1px solid #e8eaec;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        &.start {
+                            background-color: rgba(38, 38, 38, 0.05);
+                            border-color: rgba(38, 38, 38, 0.05);
+                            color: #595959;
                         }
+                        &.progress {
+                            background-color: rgba(27, 154, 238, 0.1);
+                            border-color: rgba(27, 154, 238, 0.1);
+                            color: #0171c2;
+                        }
+                        &.end {
+                            background-color: rgba(21, 173, 49, 0.1);
+                            border-color: rgba(21, 173, 49, 0.1);
+                            color: #038a24;
                         }
                     }
                 }
@@ -210,7 +230,7 @@
     .project-column {
         display: flex;
         height: 100%;
-        padding-top: 18px;
+        padding-top: 15px;
         overflow-x: auto;
         overflow-y: hidden;
         > ul {
@@ -936,6 +956,42 @@
     }
 }
 
+.project-list-flow-cascader {
+    .ivu-cascader-menu-item {
+        color: $primary-text-color !important;
+
+        &.start {
+            color: #595959 !important;
+        }
+
+        &.progress {
+            color: #0171c2 !important;
+        }
+
+        &.end {
+            color: #038a24 !important;
+        }
+
+        &:hover,
+        &.ivu-cascader-menu-item-active {
+            &.project-list-flow-cascader-item {
+
+                &.start {
+                    background-color: rgba(38, 38, 38, 0.05);
+                }
+
+                &.progress {
+                    background-color: rgba(27, 154, 238, 0.1);
+                }
+
+                &.end {
+                    background-color: rgba(21, 173, 49, 0.1);
+                }
+            }
+        }
+    }
+}
+
 @media (max-width: 768px) {
     .project-list {
         .project-head {