mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 11:19:56 +00:00
perf: 优化任务列表切换显示
This commit is contained in:
kuaifan
parent
735a9c8a5d
commit
b83ce02849
7
resources/assets/js/functions/web.js
vendored
7
resources/assets/js/functions/web.js
vendored
@ -60,14 +60,13 @@
|
||||
/**
|
||||
* 项目配置模板
|
||||
* @param project_id
|
||||
* @returns {{showMy: boolean, showUndone: boolean, project_id, chat: boolean, showHelp: boolean, showCompleted: boolean, cardInit: boolean, card: boolean, completedTask: boolean}}
|
||||
* @returns {{showMy: boolean, showUndone: boolean, project_id, chat: boolean, showHelp: boolean, showCompleted: boolean, menuType: string, menuInit: boolean, completedTask: boolean}}
|
||||
*/
|
||||
projectParameterTemplate(project_id) {
|
||||
return {
|
||||
project_id,
|
||||
card: true,
|
||||
menuType: 'card',
|
||||
cardInit: false,
|
||||
menuInit: false,
|
||||
menuType: 'column',
|
||||
chat: false,
|
||||
showMy: true,
|
||||
showHelp: true,
|
||||
|
||||
@ -82,14 +82,15 @@
|
||||
</Cascader>
|
||||
</div>
|
||||
<div class="project-switch-button">
|
||||
<div @click="tabTypeChange('card')" :class="{ 'active': projectParameter('menuType') === 'card'}"><i class="taskfont"></i></div>
|
||||
<div @click="tabTypeChange('menu')" :class="{ 'active': projectParameter('menuType') === 'menu'}"><i class="taskfont"></i></div>
|
||||
<div @click="tabTypeChange('gantt')" :class="{ 'active': projectParameter('menuType') === 'gantt'}"><i class="taskfont"></i></div>
|
||||
<div class="slider" :style="tabTypeStyle"></div>
|
||||
<div @click="tabTypeChange('column')" :class="{ 'active': tabTypeActive === 'column'}"><i class="taskfont"></i></div>
|
||||
<div @click="tabTypeChange('table')" :class="{ 'active': tabTypeActive === 'table'}"><i class="taskfont"></i></div>
|
||||
<div @click="tabTypeChange('gantt')" :class="{ 'active': tabTypeActive === 'gantt'}"><i class="taskfont"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="projectParameter('menuType') === 'card'" class="project-column">
|
||||
<div v-if="tabTypeActive === 'column'" class="project-column">
|
||||
<Draggable
|
||||
:list="columnList"
|
||||
:animation="150"
|
||||
@ -225,7 +226,7 @@
|
||||
</li>
|
||||
</Draggable>
|
||||
</div>
|
||||
<div v-if="projectParameter('menuType') === 'menu'" class="project-table overlay-y">
|
||||
<div v-else-if="tabTypeActive === 'table'" class="project-table overlay-y">
|
||||
<div class="project-table-head">
|
||||
<Row class="task-row">
|
||||
<Col span="12"># {{$L('任务名称')}}</Col>
|
||||
@ -312,12 +313,12 @@
|
||||
<TaskRow v-if="projectParameter('showCompleted')" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="projectParameter('menuType') === 'gantt'" class="project-table overlay-y" style="position: relative">
|
||||
<!-- 甘特图 -->
|
||||
<ProjectGantt :lineData="ganttColumnList[0].tasks"
|
||||
:projectLabel="ganttColumnList"
|
||||
:lineTaskData="ganttColumnList[0].tasks"
|
||||
:levelList="taskPriority"></ProjectGantt>
|
||||
<div v-else-if="tabTypeActive === 'gantt'" class="project-gantt">
|
||||
<ProjectGantt
|
||||
:lineData="ganttColumnList[0].tasks"
|
||||
:projectLabel="ganttColumnList"
|
||||
:lineTaskData="ganttColumnList[0].tasks"
|
||||
:levelList="taskPriority"/>
|
||||
</div>
|
||||
<!--项目设置-->
|
||||
<Modal
|
||||
@ -567,6 +568,28 @@ export default {
|
||||
|
||||
...mapGetters(['projectData', 'projectParameter', 'transforTasks']),
|
||||
|
||||
tabTypeActive() {
|
||||
return this.projectParameter('menuType')
|
||||
},
|
||||
|
||||
tabTypeStyle() {
|
||||
let style = {}
|
||||
switch (this.tabTypeActive) {
|
||||
case 'column':
|
||||
style.left = '0'
|
||||
break
|
||||
case 'table':
|
||||
style.left = '33.33%'
|
||||
break
|
||||
case 'gantt':
|
||||
style.left = '66.66%'
|
||||
break
|
||||
default:
|
||||
style.display = 'none'
|
||||
}
|
||||
return style
|
||||
},
|
||||
|
||||
userWaitRemove() {
|
||||
const {userids, useridbak} = this.userData;
|
||||
if (!userids) {
|
||||
@ -1400,18 +1423,18 @@ export default {
|
||||
|
||||
tabTypeChange(type) {
|
||||
switch (type) {
|
||||
case "card":
|
||||
case "column":
|
||||
this.$store.dispatch('toggleProjectParameter', {
|
||||
project_id: this.projectId,
|
||||
key: 'menuType',
|
||||
value: 'card'
|
||||
value: 'column'
|
||||
});
|
||||
break;
|
||||
case "menu":
|
||||
case "table":
|
||||
this.$store.dispatch('toggleProjectParameter', {
|
||||
project_id: this.projectId,
|
||||
key: 'menuType',
|
||||
value: 'menu'
|
||||
value: 'table'
|
||||
});
|
||||
break;
|
||||
case "gantt":
|
||||
|
||||
13
resources/assets/js/store/actions.js
vendored
13
resources/assets/js/store/actions.js
vendored
@ -162,11 +162,8 @@ export default {
|
||||
index = state.cacheProjectParameter.findIndex(item => item.project_id == project_id)
|
||||
}
|
||||
const cache = state.cacheProjectParameter[index];
|
||||
if (!$A.isJson(key) && !value) {
|
||||
key = {[key]: !cache[key]};
|
||||
}
|
||||
if (value) {
|
||||
key = {[key]: value};
|
||||
if (!$A.isJson(key)) {
|
||||
key = {[key]: value || !cache[key]};
|
||||
}
|
||||
state.cacheProjectParameter.splice(index, 1, Object.assign(cache, key))
|
||||
setTimeout(() => {
|
||||
@ -861,12 +858,12 @@ export default {
|
||||
// 判断只有1列的时候默认版面为表格模式
|
||||
if (state.cacheColumns.filter(item => item.project_id == project_id).length === 1) {
|
||||
const cache = state.cacheProjectParameter.find(item => item.project_id == project_id) || {};
|
||||
if (typeof cache.cardInit === "undefined" || cache.cardInit === false) {
|
||||
if (typeof cache.menuInit === "undefined" || cache.menuInit === false) {
|
||||
dispatch("toggleProjectParameter", {
|
||||
project_id,
|
||||
key: {
|
||||
card: false,
|
||||
cardInit: true,
|
||||
menuInit: true,
|
||||
menuType: 'table',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
3
resources/assets/js/store/getters.js
vendored
3
resources/assets/js/store/getters.js
vendored
@ -34,6 +34,9 @@ export default {
|
||||
cache = $A.projectParameterTemplate(state.projectId)
|
||||
state.cacheProjectParameter.push(cache);
|
||||
}
|
||||
if (key === 'menuType' && typeof cache[key] === "undefined") {
|
||||
return 'column'
|
||||
}
|
||||
return cache[key];
|
||||
}
|
||||
},
|
||||
|
||||
@ -193,9 +193,18 @@
|
||||
border-radius: 6px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
transition: box-shadow 0.2s;
|
||||
transition: all 0.2s;
|
||||
.active {
|
||||
color: $primary-color;
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
color: $primary-color;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $primary-color;
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
@ -204,15 +213,6 @@
|
||||
&:hover {
|
||||
box-shadow: 0 0 10px #e6ecfa;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 33.3%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
> div {
|
||||
z-index: 1;
|
||||
width: 32px;
|
||||
@ -956,6 +956,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.project-gantt {
|
||||
height: 100%;
|
||||
position: relative
|
||||
}
|
||||
}
|
||||
.project-list-more-dropdown-menu {
|
||||
> li {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user