perf: 项目面板添加按标签筛选

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

@@ -85,7 +85,7 @@
                 </div>
                 <div class="project-select">
                     <Cascader ref="flow" :data="flowData" @on-change="flowChange" transfer-class-name="project-panel-flow-cascader" transfer>
-                        <span :class="`project-flow ${flowInfo.status || ''}`">{{ flowTitle }}</span>
+                        <span :class="`project-flow ${flowInfo.status || ''}`" :style="flowInfo.style">{{ flowTitle }}</span>
                     </Cascader>
                 </div>
                 <div class="project-switch-button">
@@ -539,7 +539,7 @@
         <DrawerOverlay
             v-model="archivedTaskShow"
             placement="right"
-            :size="1000">
+            :size="1100">
             <TaskArchived v-if="archivedTaskShow" :project-id="projectId"/>
         </DrawerOverlay>
 
@@ -547,7 +547,7 @@
         <DrawerOverlay
             v-model="deletedTaskShow"
             placement="right"
-            :size="1000">
+            :size="1100">
             <TaskDeleted v-if="deletedTaskShow" :project-id="projectId"/>
         </DrawerOverlay>
     </div>
@@ -737,6 +737,8 @@ export default {
                 }
                 if ($A.leftExists(flowInfo.value, "user:")) {
                     list = list.filter(({task_user}) => task_user.find(({userid, owner}) => userid === flowInfo.userid && owner));
+                } else if ($A.leftExists(flowInfo.value, "tag:")) {
+                    list = list.filter(({task_tag}) => task_tag.find(({id}) => id === flowInfo.tag_id));
                 } else if (flowInfo.value > 0) {
                     list = list.filter(({flow_item_id}) => flow_item_id === flowInfo.value);
                 } else if (flowInfo.value == -1) {
@@ -915,6 +917,18 @@ export default {
             }).length;
         },
 
+        tagList() {
+            const tags = [];
+            this.allTask.forEach(({task_tag}) => {
+                task_tag.forEach(tag => {
+                    if (!tags.find(item => item.id === tag.id)) {
+                        tags.push(tag);
+                    }
+                });
+            });
+            return tags;
+        },
+
         flowTitle() {
             const {flowInfo, flowData, allTask} = this;
             if (flowInfo.value==-1) {
@@ -962,10 +976,34 @@ export default {
             } else if (flows.length > 0) {
                 list.push(...flows)
             }
-            //
+            // 标签
+            if (this.tagList.length > 0) {
+                const tagItems = this.tagList.map(({id, name, color}) => {
+                    const length = allTask.filter(({task_tag}) => {
+                        return task_tag.find(tag => tag.id === id);
+                    }).length
+                    return {
+                        value: `tag:${id}`,
+                        label: `${name} (${length})`,
+                        status: 'tag-dot',
+                        style: {
+                            '--bg-color': color,
+                        },
+                        tag_id: id,
+                        length,
+                    }
+                })
+                if (tagItems.length > 0) {
+                    list.push(...tagItems.map((item, index)=>{
+                        item.class = `tag-dot tag-${index}`
+                        return item;
+                    }))
+                }
+            }
+            // 用户
             const {project_user} = this.projectData;
             if ($A.isArray(project_user)) {
-                let userItems = project_user.map((item, index) => {
+                const userItems = project_user.map((item) => {
                     const userInfo = cacheUserBasic.find(({userid}) => userid === item.userid) || {}
                     const length = allTask.filter(({task_user, complete_at}) => {
                         if (!this.projectData.cacheParameter.completedTask) {
@@ -978,19 +1016,19 @@ export default {
                     return {
                         value: `user:${userInfo.userid}`,
                         label: `${userInfo.nickname} (${length})`,
+                        status: 'user',
                         userid: userInfo.userid || 0,
                         length,
                     }
                 }).filter(({userid, length}) => userid > 0 && length > 0)
                 if (userItems.length > 0) {
-                    userItems.sort((a, b) => {
+                    userItems.sort((a) => {
                         return a.userid == this.userId ? -1 : 1
                     })
-                    userItems = userItems.map((item, index)=>{
+                    list.push(...userItems.map((item, index)=>{
                         item.class = `user-${index}`
                         return item;
-                    })
+                    }))
-                    list.push(...userItems)
                 }
             }
             //
@@ -1618,6 +1656,8 @@ export default {
         flowTask(task) {
             if ($A.leftExists(this.flowInfo.value, "user:") && !task.task_user.find(({userid, owner}) => userid === this.flowInfo.userid && owner)) {
                 return true;
+            } else if ($A.leftExists(this.flowInfo.value, "tag:") && !task.task_tag.find(({id}) => id === this.flowInfo.tag_id)) {
+                return true;
             } else if (this.flowInfo.value > 0 && task.flow_item_id !== this.flowInfo.value) {
                 return true;
             }else if (this.flowInfo.value == -1 && task.start_at) {

resources/assets/sass/pages/common.scss

@@ -923,3 +923,20 @@ body.window-portrait {
         }
     }
 }
+
+/*标签点*/
+.tag-dot {
+    position: relative;
+    padding-left: 18px;
+    &:after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: var(--bg-color);
+        transform: translateY(-50%);
+    }
+}

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

@@ -184,6 +184,13 @@
                         border-color: rgba($flow-status-end-color, 0.1);
                         color: $flow-status-end-color;
                     }
+                    &.tag-dot {
+                        position: relative;
+                        padding-left: 26px;
+                        &:after {
+                            left: 8px;
+                        }
+                    }
                 }
             }
             .project-switch-button {
@@ -995,6 +1002,15 @@
             color: $flow-status-end-color !important;
         }
 
+        &.tag-dot {
+            position: relative;
+            padding-left: 34px;
+            &:after {
+                left: 16px;
+            }
+        }
+
+        &.tag-0,
         &.user-0 {
             margin-top: 12px;
             position: relative;