116 lines
2.9 KiB
Vue
116 lines
2.9 KiB
Vue
|
<template>
|
|||
|
|
<Card title="进度任务">
|
|||
|
|
<div class="tabs">
|
|||
|
|
<div :class="['tab', { checked: activeTab == 0 }]" @click="handleTabClick(0)">待办事项</div>
|
|||
|
|
<div :class="['tab', { checked: activeTab == 1 }]" @click="handleTabClick(1)">未来提醒</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" style="position: relative;">
|
|||
|
|
<vue-scroll v-if="todoList.length">
|
|||
|
|
<div class="list-item" v-for="(item, i) in todoList" :key="i">
|
|||
|
|
<div class="todo">{{ item.subitemProjectName }}</div>
|
|||
|
|
<div class="startTime">
|
|||
|
|
<span class="grey">计划开始时间：</span><span class="blue">{{ item.startTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="endTime">
|
|||
|
|
<span class="grey">计划结束时间：</span><span class="blue">{{ item.endTime }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="delay orange" v-if="item.deferreddays > 0">已延期 {{ item.deferreddays }} 天</div>
|
|||
|
|
</div>
|
|||
|
|
</vue-scroll>
|
|||
|
|
<div v-else class="empty" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);">
|
|||
|
|
<img src="@/assets/images/noData3.png">
|
|||
|
|
<div style="text-align: center;color: #5b626b;font-size: 14px;">暂无数据</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
|
|||
|
|
import { mapState } from 'vuex'
|
|||
|
|
|
|||
|
|
import Card from '../components/Card.vue'
|
|||
|
|
export default {
|
|||
|
|
components: { Card },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 激活的tab
|
|||
|
|
activeTab: 0,
|
|||
|
|
// 待办事项列表
|
|||
|
|
todoList: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(['projectSn'])
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 查询待办事项列表 */
|
|||
|
|
getList() {
|
|||
|
|
if (this.activeTab == 0) {
|
|||
|
|
listProgressOfTheTask({ projectSn: this.projectSn, state: 1 }).then(res => {
|
|||
|
|
console.log('查询待办事项列表: ', res);
|
|||
|
|
this.todoList = res.result;
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
listProgressOfTheTask({ projectSn: this.projectSn, state: 0 }).then(res => {
|
|||
|
|
console.log('查询未来提醒列表: ', res);
|
|||
|
|
this.todoList = res.result;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/** tab点击事件 */
|
|||
|
|
handleTabClick(index) {
|
|||
|
|
if (this.activeTab == index) return
|
|||
|
|
this.activeTab = index;
|
|||
|
|
this.getList()
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.tabs {
|
|||
|
|
display: flex;
|
|||
|
|
color: #fff;
|
|||
|
|
.tab {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
&.checked {
|
|||
|
|
color: #2de1fa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list {
|
|||
|
|
padding-left: 20px;
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
color: #fff;
|
|||
|
|
.list-item {
|
|||
|
|
&:not(:last-child) {
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
&:not(:first-child) {
|
|||
|
|
font-size: 12px;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grey {
|
|||
|
|
color: #ccc;
|
|||
|
|
}
|
|||
|
|
.blue {
|
|||
|
|
color: #2de1fa;
|
|||
|
|
}
|
|||
|
|
.orange {
|
|||
|
|
color: #f56c36;
|
|||
|
|
}
|
|||
|
|
</style>
|