gitee/dootask
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: 项目版面成员显示

Browse Source
This commit is contained in:
kuaifan 2022-01-06 14:28:23 +08:00
parent 267c09f20c
commit 7f454f279c
4 changed files with 92 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/Api/ProjectController.php
View File

@ -67,8 +67,6 @@ class ProjectController extends AbstractController
"owner": 1, // 是否项目负责人 "owner": 1, // 是否项目负责人
"owner_userid": 1, // 项目负责人ID "owner_userid": 1, // 项目负责人ID
"project_user": [], // 为空，数据在one接口返回
"task_num": 9, "task_num": 9,
"task_complete": 0, "task_complete": 0,
"task_percent": 0, "task_percent": 0,
@ -118,9 +116,7 @@ class ProjectController extends AbstractController
// //
$list = $builder->orderByDesc('projects.id')->paginate(Base::getPaginate(100, 50)); $list = $builder->orderByDesc('projects.id')->paginate(Base::getPaginate(100, 50));
$list->transform(function (Project $project) use ($user) { $list->transform(function (Project $project) use ($user) {
return array_merge($project->toArray(), $project->getTaskStatistics($user->userid), [ return array_merge($project->toArray(), $project->getTaskStatistics($user->userid));
'project_user' => []
]);
}); });
// //
$data = $list->toArray(); $data = $list->toArray();

45
resources/assets/js/pages/manage/components/ProjectList.vue
View File

@ -8,13 +8,30 @@
<div v-if="projectLoad > 0" class="project-load"><Loading/></div> <div v-if="projectLoad > 0" class="project-load"><Loading/></div>
</div> </div>
<ul class="project-icons"> <ul class="project-icons">
<li> <li class="project-avatar" @click="projectDropdown('user')">
<UserAvatar :userid="projectData.owner_userid" :size="36"> <ul>
<p>{{$L('项目负责人')}}</p> <li>
</UserAvatar> <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>
<li class="project-icon" @click="addTaskOpen(0)"> <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>
<li :class="['project-icon', searchText!='' ? 'active' : '']"> <li :class="['project-icon', searchText!='' ? 'active' : '']">
<Tooltip :always="searchText!=''" theme="light"> <Tooltip :always="searchText!=''" theme="light">
@ -65,7 +82,7 @@
<Draggable <Draggable
:list="columnList" :list="columnList"
:animation="150" :animation="150"
:disabled="sortDisabled || $store.state.windowMax768" :disabled="sortDisabled || windowMax768"
class="column-list" class="column-list"
tag="ul" tag="ul"
draggable=".column-item" draggable=".column-item"
@ -121,7 +138,7 @@
<Draggable <Draggable
:list="column.tasks" :list="column.tasks"
:animation="150" :animation="150"
:disabled="sortDisabled || $store.state.windowMax768" :disabled="sortDisabled || windowMax768"
class="task-list" class="task-list"
draggable=".task-draggable" draggable=".task-draggable"
group="task" group="task"
@ -519,6 +536,8 @@ export default {
computed: { computed: {
...mapState([ ...mapState([
'windowMax768',
'userId', 'userId',
'dialogs', '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() { columnList() {
const {projectId, columns, tasks} = this; const {projectId, columns, tasks} = this;
const list = columns.filter(({project_id}) => { const list = columns.filter(({project_id}) => {

3
resources/assets/js/store/actions.js vendored
View File

@ -521,6 +521,9 @@ export default {
if (index > -1) { if (index > -1) {
state.projects.splice(index, 1, Object.assign({}, state.projects[index], data)); state.projects.splice(index, 1, Object.assign({}, state.projects[index], data));
} else { } else {
if (typeof data.project_user === "undefined") {
data.project_user = []
}
state.projects.push(data); state.projects.push(data);
} }
setTimeout(() => { setTimeout(() => {

50
resources/assets/sass/pages/components/project-list.scss vendored
View File

@ -50,6 +50,56 @@
&:hover { &:hover {
box-shadow: 0 0 6px #cccccc; 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 { &.project-icon {
border-radius: 50%; border-radius: 50%;
background-color: #F2F3F5; background-color: #F2F3F5;