当时接到的需求就是有一个日历组件,上面可以展示当前这个月的任务列表,点击任务展示具体详情
如果任务超过两个,会自动隐藏并展示 ...
javascript
<template>
<div>
<el-calendar ref="calender" v-model="nowDay">
<template slot="dateCell" slot-scope="{date,data}">
<div :style="isIncludes(data,scheduleData[data.day]) ? { backgroundColor : generateRandomColors(Number(data.day.split('-').slice(2).join('-'))) } : {}" class="dataContent"
@click="handleCalendarClick">
<p style="text-align: center">{{ data.day.split('-').slice(1).join('-') }}</p>
<div v-for="(item,index) in scheduleData[data.day]" :key="item.id">
<p v-if="index <= 1 && (item.workingDay.indexOf(data.day.split('-').slice(2).join('-')) !== -1)" class="mission-items"
@click.prevent="gotoMissionDetail(item)">
{{ item.content }}
<!--如果有任务状态-->
<span v-if="item.isStatus">:{{ item.statusName }}</span>
</p>
<!--超过两个时候如何展示-->
<i @click.stop="showAllMission(scheduleData[data.day])" v-if="index > 1 && (item.workingDay.indexOf(data.day.split('-').slice(2).join('-')) !== -1)" class="el-icon-caret-bottom calender-caret" ></i>
</div>
</div>
</template>
</el-calendar>
<p style="color:#F0973D;">含有<i class="el-icon-caret-bottom calender-caret"></i>: 当日任务超过两个,可以点击查看箭头查看所有任务</p>
<el-dialog
title="任务"
:visible.sync="centerDialogVisible"
width="30%"
>
<span>这里展示所有的任务列表?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "calender-mission",
props: {
nowDay: {
type: String || Number,
default: new Date()
},
scheduleData: {
type: Object,
default: () => {}
}
},
data(){
return {
centerDialogVisible:false,
}
},
mounted() {
this.$nextTick(() => {
const t = this.$refs.calender.$el && this.$refs.calender.$el.getElementsByClassName('el-calendar-table')[0].children[0].children
for (let i = 0; i < t.length; i++) {
t[i].innerHTML = '周' + t[i].innerHTML
}
})
},
methods: {
showAllMission(allDayMission){
console.log(allDayMission)
this.centerDialogVisible = true
},
isIncludes(data, arr = []) {
const nowDay = data.day.split('-').slice(2).join('-')
const arrDay = arr.map(i => i.workingDay)
return arrDay.indexOf(nowDay) !== -1
},
gotoMissionDetail(item) {
console.log(item, 'item')
},
handleCalendarClick() {
// 阻止事件冒泡和默认行为
event.stopPropagation();
event.preventDefault();
},
generateRandomColors(num) {
let colors = []; // 存放生成的颜色数组
for (let i = 0; i < num; i++) {
let red = Math.floor(Math.random() * 256);
let green = Math.floor(Math.random() * 256);
let blue = Math.floor(Math.random() * 256);
let color = red + ", " + green + ", " + blue;
if (!colors.includes(color)) {
colors.push(color);
} else {
i--;
}
}
return `rgba(${colors[0].split(',')[0]},${colors[0].split(',')[1]},${colors[0].split(',')[2]},.5)`;
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-calendar-table:has(.is-range) td.prev,
::v-deep .el-calendar-table:has(.is-range) td.next {
cursor: not-allowed;
pointer-events: none;
// display: none;
}
::v-deep .el-calendar-table:not(.is-range) td.prev,
::v-deep .el-calendar-table:not(.is-range) td.next {
cursor: not-allowed;
pointer-events: none;
// display: none;
}
.prev > .el-calendar-day > .dateContent {
display: none;
}
.next > .el-calendar-day > .dateContent {
display: none;
}
// 隐藏月份后多一行
::v-deep .el-calendar-table:not(.is-range) td.next { /*隐藏下个月的日期*/
visibility: hidden;
}
// 隐藏上个月 今天 下个月按钮
::v-deep .el-calendar__button-group {
display: none;
}
::v-deep .el-calendar-table:not(.is-range) td.prev { /*隐藏上个月的日期*/
visibility: hidden;
}
::v-deep {
.el-calendar__header {
justify-content: center;
border-bottom: 0;
}
.el-calendar-table {
.el-calendar-table__row {
.current {
.el-calendar-day {
padding: 0;
.dataContent {
width: 100%;
height: 100%;
padding: 8px;
box-sizing: border-box;
& > p {
line-height: 1;
margin: 0 0 5px 0;
padding: 0;
}
& > div {
text-align: center;
.mission-items {
padding: 0;
margin: 0;
&:nth-child(1) {
margin-top: 4px;
}
}
}
}
}
}
.next {
.el-calendar-day {
display: none !important;
}
}
}
}
}
</style>