github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-13 20:12:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 仪表盘任务列表支持折叠

Browse Source
This commit is contained in:
kuaifan 2024-09-16 08:51:26 +03:00
parent a967493d77
commit 511b98ab5b
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/assets/js/pages/manage/dashboard.vue
View File

@ -40,8 +40,16 @@
v-for="column in columns" v-for="column in columns"
v-if="column.list.length > 0"> v-if="column.list.length > 0">
<div :ref="`type_${column.type}`" class="dashboard-ref"></div> <div :ref="`type_${column.type}`" class="dashboard-ref"></div>
<div class="dashboard-title">{{column.title}}</div> <div class="dashboard-title" :class="{'title-close': column.hidden}" @click="onDashboardHidden(column.type)">
<ul class="dashboard-ul"> <span>
{{column.title}}
<template v-if="column.hidden">
({{column.list.length}})
</template>
</span>
<i class="taskfont">&#xe702;</i>
</div>
<ul class="dashboard-ul" :class="{'ul-hidden': column.hidden}">
<li <li
v-for="(item, index) in column.list" v-for="(item, index) in column.list"
:key="index" :key="index"
@ -103,6 +111,8 @@ export default {
dashboard: 'today', dashboard: 'today',
warningMsg: '', warningMsg: '',
hiddenColumns: [],
} }
}, },
@ -127,13 +137,14 @@ export default {
return this.$route.name return this.$route.name
}, },
columns() { columns({hiddenColumns}) {
const list = []; const list = [];
['today', 'overdue', 'all'].some(type => { ['today', 'overdue', 'all'].some(type => {
let data = this.transforTasks(this.dashboardTask[type]); let data = this.transforTasks(this.dashboardTask[type]);
list.push({ list.push({
type, type,
title: this.getTitle(type), title: this.getTitle(type),
hidden: hiddenColumns.includes(type),
list: data.sort((a, b) => { list: data.sort((a, b) => {
return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59"); return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
}) })
@ -142,6 +153,7 @@ export default {
list.push({ list.push({
type: 'assist', type: 'assist',
title: this.getTitle('assist'), title: this.getTitle('assist'),
hidden: hiddenColumns.includes('assist'),
list: this.assistTask.sort((a, b) => { list: this.assistTask.sort((a, b) => {
return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59"); return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
}) })
@ -200,6 +212,15 @@ export default {
} }
}, },
onDashboardHidden(type) {
let index = this.hiddenColumns.indexOf(type);
if (index === -1) {
this.hiddenColumns.push(type)
} else {
this.hiddenColumns.splice(index, 1)
}
},
openTask(task) { openTask(task) {
this.$store.dispatch("openTask", task) this.$store.dispatch("openTask", task)
}, },

20
resources/assets/sass/pages/page-dashboard.scss vendored
View File

@ -134,11 +134,31 @@
font-weight: 600; font-weight: 600;
font-size: 15px; font-size: 15px;
background-color: #ffffff; background-color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
> i {
font-weight: normal;
margin-right: 4px;
opacity: 0.8;
transform: rotate(180deg);
transition: transform 0.3s;
}
&.title-close {
> i {
opacity: 1;
transform: rotate(90deg);
}
}
} }
.dashboard-ul { .dashboard-ul {
margin: 0 auto 18px; margin: 0 auto 18px;
padding: 6px 12px 0; padding: 6px 12px 0;
overflow: hidden; overflow: hidden;
&.ul-hidden {
margin: 0;
max-height: 0;
}
> li { > li {
position: relative; position: relative;
list-style: none; list-style: none;