perf: 项目版面成员显示

xiaofan-linux · Jan 6, 2022 · 7f454f2 · 7f454f2
1 parent 267c09f
commit 7f454f2
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 12 deletions.
diff --git a/app/Http/Controllers/Api/ProjectController.php b/app/Http/Controllers/Api/ProjectController.php
@@ -67,8 +67,6 @@ class ProjectController extends AbstractController
                 "owner": 1,         // 是否项目负责人
                 "owner_userid": 1,  // 项目负责人ID
 
-                "project_user": [], // 为空，数据在one接口返回
-
                 "task_num": 9,
                 "task_complete": 0,
                 "task_percent": 0,
@@ -118,9 +116,7 @@ public function lists()
         //
         $list = $builder->orderByDesc('projects.id')->paginate(Base::getPaginate(100, 50));
         $list->transform(function (Project $project) use ($user) {
-            return array_merge($project->toArray(), $project->getTaskStatistics($user->userid), [
-                'project_user' => []
-            ]);
+            return array_merge($project->toArray(), $project->getTaskStatistics($user->userid));
         });
         //
         $data = $list->toArray();

diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -8,13 +8,30 @@
                     <div v-if="projectLoad > 0" class="project-load"><Loading/></div>
                 </div>
                 <ul class="project-icons">
-                    <li>
-                        <UserAvatar :userid="projectData.owner_userid" :size="36">
-                            <p>{{$L('项目负责人')}}</p>
-                        </UserAvatar>
+                    <li class="project-avatar" @click="projectDropdown('user')">
+                        <ul>
+                            <li>
+                                <UserAvatar :userid="projectData.owner_userid" :size="36" :borderWitdh="2">
+                                    <p>{{$L('项目负责人')}}</p>
+                                </UserAvatar>
+                            </li>
+                            <template v-if="projectUser.length > 0">
+                                <li v-for="(item, index) in projectUser" :key="index" v-if="index < projectUserShowNum">
+                                    <UserAvatar :userid="item.userid" :size="36" :borderWitdh="2"/>
+                                </li>
+                                <li v-if="projectUser.length > projectUserShowNum" class="more">
+                                    <Icon type="ios-more"/>
+                                </li>
+                                <li class="add">
+                                    <Icon type="md-person-add"/>
+                                </li>
+                            </template>
+                        </ul>
                     </li>
                     <li class="project-icon" @click="addTaskOpen(0)">
-                        <Icon class="menu-icon" type="md-add" />
+                        <ETooltip :content="$L('添加任务')">
+                            <Icon class="menu-icon" type="md-add" />
+                        </ETooltip>
                     </li>
                     <li :class="['project-icon', searchText!='' ? 'active' : '']">
                         <Tooltip :always="searchText!=''" theme="light">
@@ -65,7 +82,7 @@
             <Draggable
                 :list="columnList"
                 :animation="150"
-                :disabled="sortDisabled || $store.state.windowMax768"
+                :disabled="sortDisabled || windowMax768"
                 class="column-list"
                 tag="ul"
                 draggable=".column-item"
@@ -121,7 +138,7 @@
                         <Draggable
                             :list="column.tasks"
                             :animation="150"
-                            :disabled="sortDisabled || $store.state.windowMax768"
+                            :disabled="sortDisabled || windowMax768"
                             class="task-list"
                             draggable=".task-draggable"
                             group="task"
@@ -519,6 +536,8 @@ export default {
 
     computed: {
         ...mapState([
+            'windowMax768',
+
             'userId',
             'dialogs',
 
@@ -569,6 +588,18 @@ export default {
             }
         },
 
+        projectUser() {
+            const {projectData} = this;
+            if (!projectData.project_user) {
+                return [];
+            }
+            return projectData.project_user.filter(({userid}) => userid != projectData.owner_userid)
+        },
+
+        projectUserShowNum() {
+            return this.windowMax768 ? 3 : 10;
+        },
+
         columnList() {
             const {projectId, columns, tasks} = this;
             const list = columns.filter(({project_id}) => {

diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js
@@ -521,6 +521,9 @@ export default {
             if (index > -1) {
                 state.projects.splice(index, 1, Object.assign({}, state.projects[index], data));
             } else {
+                if (typeof data.project_user === "undefined") {
+                    data.project_user = []
+                }
                 state.projects.push(data);
             }
             setTimeout(() => {

diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
@@ -50,6 +50,56 @@
                     &:hover {
                         box-shadow: 0 0 6px #cccccc;
                     }
+                    &.project-avatar {
+                        width: auto;
+                        min-width: 36px;
+                        &:hover {
+                            box-shadow: none;
+                        }
+                        > ul {
+                            display: flex;
+                            align-items: center;
+                            > li {
+                                list-style: none;
+                                margin-left: -6px;
+                                transition: transform 0.2s;
+                                &:hover {
+                                    transform: scale(1.1);
+                                }
+                                &:first-child {
+                                    margin-left: 0;
+                                }
+                                &.more,
+                                &.add {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    font-size: 17px;
+                                    width: 32px;
+                                    height: 32px;
+                                    border-radius: 50%;
+                                    color: #b4bcce;
+                                    background-color: #fff;
+                                    font-weight: 700;
+                                    border: 2px dashed #8bcf70;
+                                    cursor: pointer;
+                                    z-index: 1;
+                                    > i {
+                                        color: #8bcf70
+                                    }
+                                }
+                                &.more {
+                                    width: 30px;
+                                    transform: translateX(-1px);
+                                    background-color: transparent;
+                                    border-color: transparent;
+                                    &:hover {
+                                        transform: scale(1);
+                                    }
+                                }
+                            }
+                        }
+                    }
                     &.project-icon {
                         border-radius: 50%;
                         background-color: #F2F3F5;