feat: 项目任务支持优先级、到期时间排序

This commit is contained in:
kuaifan 2021-12-23 15:41:48 +08:00
parent a11adad23f
commit d1814a4e0f
2 changed files with 88 additions and 20 deletions

View File

@ -232,9 +232,25 @@
<Row class="task-row">
<Col span="12"># {{$L('任务名称')}}</Col>
<Col span="3">{{$L('列表')}}</Col>
<Col span="3">{{$L('优先级')}}</Col>
<Col span="3">
<div class="sort" @click="onSort('level')">
{{$L('优先级')}}
<div class="task-sort">
<Icon :class="{on:sortField=='level' && sortType=='asc'}" type="md-arrow-dropup" />
<Icon :class="{on:sortField=='level' && sortType=='desc'}" type="md-arrow-dropdown" />
</div>
</div>
</Col>
<Col span="3">{{$L('负责人')}}</Col>
<Col span="3">{{$L('到期时间')}}</Col>
<Col span="3">
<div class="sort" @click="onSort('end_at')">
{{$L('到期时间')}}
<div class="task-sort">
<Icon :class="{on:sortField=='end_at' && sortType=='asc'}" type="md-arrow-dropup" />
<Icon :class="{on:sortField=='end_at' && sortType=='desc'}" type="md-arrow-dropdown" />
</div>
</div>
</Col>
</Row>
</div>
<!--我的任务-->
@ -425,6 +441,9 @@ export default {
completeJust: [],
sortField: 'end_at',
sortType: 'desc',
searchText: '',
addShow: false,
@ -513,7 +532,7 @@ export default {
},
myList() {
const {projectId, tasks, searchText, userId, completeJust} = this;
const {projectId, tasks, searchText, userId, completeJust, sortField, sortType} = this;
const array = tasks.filter((task) => {
if (task.project_id != projectId) {
return false;
@ -531,17 +550,19 @@ export default {
return task.task_user && task.task_user.find(({userid, owner}) => userid == userId && owner == 1);
});
return array.sort((a, b) => {
if (a.p_level != b.p_level) {
return a.p_level - b.p_level;
if (sortType == 'asc') {
[a, b] = [b, a];
}
if (sortField == 'level') {
return a.p_level - b.p_level;
} else if (sortField == 'end_at') {
return $A.Date(a.end_at) - $A.Date(b.end_at);
}
let at1 = $A.Date(a.end_at),
at2 = $A.Date(b.end_at);
return at1 - at2;
});
},
helpList() {
const {projectId, tasks, searchText, userId, completeJust} = this;
const {projectId, tasks, searchText, userId, completeJust, sortField, sortType} = this;
const array = tasks.filter((task) => {
if (task.project_id != projectId) {
return false;
@ -559,17 +580,19 @@ export default {
return task.task_user && task.task_user.find(({userid, owner}) => userid == userId && owner == 0);
});
return array.sort((a, b) => {
if (a.p_level != b.p_level) {
return a.p_level - b.p_level;
if (sortType == 'asc') {
[a, b] = [b, a];
}
if (sortField == 'level') {
return a.p_level - b.p_level;
} else if (sortField == 'end_at') {
return $A.Date(a.end_at) - $A.Date(b.end_at);
}
let at1 = $A.Date(a.end_at),
at2 = $A.Date(b.end_at);
return at1 - at2;
});
},
undoneList() {
const {projectId, tasks, searchText, completeJust} = this;
const {projectId, tasks, searchText, completeJust, sortField, sortType} = this;
const array = tasks.filter((task) => {
if (task.project_id != projectId) {
return false;
@ -587,12 +610,14 @@ export default {
return !task.complete_at || completeJust.find(id => id == task.id);
});
return array.sort((a, b) => {
if (a.p_level != b.p_level) {
return a.p_level - b.p_level;
if (sortType == 'asc') {
[a, b] = [b, a];
}
if (sortField == 'level') {
return a.p_level - b.p_level;
} else if (sortField == 'end_at') {
return $A.Date(a.end_at) - $A.Date(b.end_at);
}
let at1 = $A.Date(a.end_at),
at2 = $A.Date(b.end_at);
return at1 - at2;
});
},
@ -931,6 +956,11 @@ export default {
});
},
onSort(field) {
this.sortField = field;
this.sortType = this.sortType == 'desc' ? 'asc' : 'desc';
},
onSetting() {
this.settingLoad++;
this.$store.dispatch("call", {

View File

@ -543,6 +543,44 @@
color: #888888;
font-size: 13px;
font-weight: 500;
.sort {
display: flex;
align-items: center;
cursor: pointer;
}
.task-sort {
display: inline-block;
width: 14px;
height: 12px;
margin-top: -1px;
margin-left: 1px;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
position: relative;
> i {
display: block;
height: 6px;
line-height: 6px;
overflow: hidden;
position: absolute;
color: #c5c8ce;
transition: color .2s ease-in-out;
font-size: 16px;
&.on {
color: #2d8cf0
}
&:hover {
color: inherit
}
&:first-child {
top: 0
}
&:last-child {
bottom: 0
}
}
}
}
}
}