Create calendar.vue
This commit is contained in:
sakuya
parent
1ade809e05
commit
eea5a675a0
|
|
@ -0,0 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-main class="nopadding">
|
||||||
|
<el-calendar v-model="toDay">
|
||||||
|
<template #dateCell="{data}">
|
||||||
|
<div class="calendar-item">
|
||||||
|
<h2>{{ data.day.split('-')[2] }}</h2>
|
||||||
|
<div v-if="getData(data.day) && data.type=='current-month'" class="calendar-item-info">
|
||||||
|
<p><el-progress :percentage="getData(data.day).plan" :show-text="false"></el-progress></p>
|
||||||
|
<p><el-progress :percentage="getData(data.day).complete" status="success" :show-text="false"></el-progress></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-main>
|
||||||
|
<el-aside style="width: 400px;border-left: 1px solid #e6e6e6;">
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<h2 class="dayTitle"><i class="el-icon-date"></i>{{day}}</h2>
|
||||||
|
</el-header>
|
||||||
|
<el-main>
|
||||||
|
<div class="task-list">
|
||||||
|
<template v-if="dayItem">
|
||||||
|
<el-card shadow="hover" v-for="task in dayItem.tasks" :class="stateMap[task.state]">
|
||||||
|
<h2>{{task.title}}</h2>
|
||||||
|
<div class="task-bottom">
|
||||||
|
<div class="tags">
|
||||||
|
<el-tag type="info" size="mini">#{{task.id}}</el-tag>
|
||||||
|
<el-tag v-if="task.state=='open'" type="info" size="mini">{{task.state}}</el-tag>
|
||||||
|
<el-tag v-if="task.state=='complete'" type="success" size="mini">{{task.state}}</el-tag>
|
||||||
|
<el-tag v-if="task.state=='timeout'" type="danger" size="mini">{{task.state}}</el-tag>
|
||||||
|
</div>
|
||||||
|
<el-avatar :size="20" :src="task.avatar"></el-avatar>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<el-empty description="无工作任务" :image-size="100"></el-empty>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-aside>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'calendar',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
stateMap: {
|
||||||
|
open: "open",
|
||||||
|
complete: "complete",
|
||||||
|
timeout: "timeout"
|
||||||
|
},
|
||||||
|
toDay: new Date(this.demoDay()),
|
||||||
|
data: {
|
||||||
|
[this.demoDay()]: {
|
||||||
|
plan: 80,
|
||||||
|
complete: 66,
|
||||||
|
tasks: [
|
||||||
|
{
|
||||||
|
id: "3601",
|
||||||
|
title: "vite2 on demand loading popconfirm style missing",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "complete"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3602",
|
||||||
|
title: "Switch prevent switching invalid",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "complete"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3603",
|
||||||
|
title: "The use of paging in vue3 is inconsistent with the official UI display",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "timeout"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
[this.demoDay(1)]: {
|
||||||
|
plan: 80,
|
||||||
|
complete: 0,
|
||||||
|
tasks: [
|
||||||
|
{
|
||||||
|
id: "3604",
|
||||||
|
title: "el-switch @change is auto triggered when page load",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "open"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
[this.demoDay(2)]: {
|
||||||
|
plan: 80,
|
||||||
|
complete: 0,
|
||||||
|
tasks: [
|
||||||
|
{
|
||||||
|
id: "3605",
|
||||||
|
title: "locale plugin problem happen in production mode when install element-plus on demand",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "open"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3606",
|
||||||
|
title: "table uses fixed=right, which leads to the dislocation of hover style",
|
||||||
|
avatar: "img/avatar.jpg",
|
||||||
|
state: "open"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
day(){
|
||||||
|
return this.$TOOL.dateFormat(this.toDay);
|
||||||
|
},
|
||||||
|
dayItem(){
|
||||||
|
return this.getData(this.day)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData(date){
|
||||||
|
return this.data[date]
|
||||||
|
},
|
||||||
|
demoDay(n=0){
|
||||||
|
var curDate = new Date()
|
||||||
|
var oneDayTime = 24*60*60*1000
|
||||||
|
var rDate = new Date(curDate.getTime() + (oneDayTime*n) )
|
||||||
|
return this.$TOOL.dateFormat(rDate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.calendar-item h2 {font-size: 14px;}
|
||||||
|
.calendar-item-info {margin-top: 15px;}
|
||||||
|
.calendar-item-info p {margin-top: 5px;}
|
||||||
|
|
||||||
|
.task-list .el-card {margin-bottom: 15px;border-left: 5px solid #ddd;cursor: pointer;}
|
||||||
|
|
||||||
|
.task-list .el-card.open {border-color: #ddd;}
|
||||||
|
.task-list .el-card.complete {border-color: #67C23A;}
|
||||||
|
.task-list .el-card.timeout {border-color: #f56c6c;}
|
||||||
|
|
||||||
|
.task-list h2 {font-size: 14px;font-weight: normal;}
|
||||||
|
.task-bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
|
||||||
|
.task-bottom .tags .el-tag {margin-right: 5px;}
|
||||||
|
.dayTitle {font-size: 14px;}
|
||||||
|
.dayTitle i {color: #999;margin-right: 10px;}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue