You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.3 KiB
118 lines
3.3 KiB
<template> |
|
<div class="container"> |
|
<header> |
|
<el-form :label-width="120"> |
|
<el-form-item label="年份"> |
|
<el-date-picker |
|
v-model="year" |
|
type="year" |
|
value-format="YYYY" |
|
placeholder="请选择年份" |
|
:disabled-date="disabledDate" |
|
/> |
|
</el-form-item> |
|
</el-form> |
|
</header> |
|
<div> |
|
<el-row :gutter="20"> |
|
<el-col :span="8" v-for="item in holidays" :key="item.month"> |
|
<div class="calendar-month"> |
|
<header>{{ year }}年{{ item.month }}月</header> |
|
<div class="calendar-week flex wrap"> |
|
<div |
|
class="calendar-cell calendar-cell_week flex center" |
|
v-for="week in weeks" |
|
:key="week" |
|
> |
|
<div class="cell">{{ week }}</div> |
|
</div> |
|
<div |
|
class="calendar-cell flex center calendar-body" |
|
v-for="(day, index) in item.days" |
|
:key="index" |
|
> |
|
<div |
|
class="cell" |
|
:disabled="!day.day" |
|
:isHoliday="day.flag" |
|
> |
|
{{ day.day }} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</el-col> |
|
</el-row> |
|
</div> |
|
</div> |
|
</template> |
|
<script setup> |
|
import moment from "moment"; |
|
import { listHolidays } from "@/api/system/holiday"; |
|
|
|
const year = ref(moment().year() + ''); |
|
const holidays = ref([]); |
|
|
|
const weeks = ["一", "二", "三", "四", "五", "六", "日"]; |
|
|
|
const disabledDate = (time) => { |
|
return time.getFullYear() < 2023 |
|
} |
|
|
|
function getHolidays() { |
|
listHolidays(year.value).then((data) => { |
|
holidays.value = data; |
|
}); |
|
} |
|
|
|
onMounted(() => { |
|
getHolidays(); |
|
}) |
|
|
|
watch(year, () => { |
|
getHolidays(); |
|
}) |
|
</script> |
|
<style lang="scss" scoped> |
|
.calendar-month { |
|
background: #fbfcff; |
|
box-shadow: inset 0px -1px 0px 0px #e9ebfd; |
|
border: 1px solid #e9ebfd; |
|
margin-bottom: 20px; |
|
padding: 20px; |
|
header { |
|
font-size: 18px; |
|
margin-bottom: 10px; |
|
font-weight: 700; |
|
} |
|
} |
|
.calendar-cell { |
|
width: 14.26%; |
|
text-align: center; |
|
margin-bottom: 16px; |
|
font-weight: 700; |
|
.cell { |
|
width: 36px; |
|
height: 36px; |
|
line-height: 36px; |
|
border-radius: 50%; |
|
} |
|
&.calendar-body { |
|
.cell[disabled="false"]:hover { |
|
background-color: #eee; |
|
cursor: pointer; |
|
} |
|
.cell[isHoliday="true"] { |
|
background-color: #ff5722; |
|
color: #fff; |
|
&:hover { |
|
background-color: #f9825d; |
|
} |
|
} |
|
} |
|
&.calendar-cell_week { |
|
color: #777; |
|
font-family: SourceHanSansCN, SourceHanSansCN; |
|
} |
|
} |
|
</style> |