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>
|