<template>
|
<div class="dashborad-calendar">
|
<div class="header">
|
<div>日历</div>
|
<el-select
|
class="select"
|
v-model="value"
|
size="small"
|
>
|
<el-option
|
v-for="item in windowList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
<div class="content">
|
<el-calendar>
|
<template #date-cell="{ data }">
|
<p :class="isExistDate(data.day) ? 'is-selected' : ''">
|
{{ data.day.split('-').slice(2).join('-') }}
|
</p>
|
</template>
|
</el-calendar>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import moment from 'moment';
|
|
const value = ref('销量预测')
|
const windowList = [
|
{
|
value: '销量预测',
|
label: '销量预测',
|
},
|
{
|
value: '销量预估',
|
label: '销量预估',
|
},
|
{
|
value: '销量上报',
|
label: '销量上报',
|
},
|
];
|
|
const dateRange = [{cycleId: '202403', startData: '2024-03-01', endDate: '2024-03-25'}];
|
|
const isExistDate = (date) => {
|
const dateStr = moment(date, 'YYYY-MM-DD').format('YYYYMM');
|
const curDate = dateRange.find(e => e.cycleId === dateStr);
|
if (curDate) {
|
return moment(date).isBetween(curDate.startData, curDate.endDate);
|
}
|
return false;
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
.dashborad-calendar {
|
border-top: 3px solid var(--el-color-primary);
|
background: #fff;
|
box-sizing: border-box;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
border-radius: 6px;
|
width: 100%;
|
height: 328px;
|
|
.header {
|
padding: 8px 13px;
|
background-color: #fff;
|
border-bottom: 1px solid #e7e7e7;
|
font-size: 14px;
|
color: #303133;
|
font-weight: 500;
|
position: relative;
|
|
.select {
|
position: absolute;
|
right: 10px;
|
width: 100px;
|
top: 6px;
|
}
|
}
|
|
.content {
|
.is-selected {
|
color: #1989fa;
|
border-radius: 3px;
|
border: solid 1px var(--el-color-primary);
|
}
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.dashborad-calendar {
|
.el-calendar__body {
|
padding: 5px;
|
}
|
|
.el-calendar-table thead th {
|
padding: 0 0 5px 0;
|
}
|
|
.el-calendar {
|
height: 35px;
|
text-align: center;
|
}
|
|
.el-calendar-day {
|
padding: 9px;
|
height: 35px;
|
}
|
|
.el-calendar__header {
|
font-size: 13px;
|
padding: 5px 8px;
|
|
.el-button {
|
font-size: 12px;
|
padding: 6px 9px;
|
}
|
}
|
}
|
</style>
|
