效果图:
<template>
<app-page>
<app-table-layout #table>
<el-calendar ref="calendar" :v-model="new Date()">
<template #header="{ date }">
<span>编辑节假日</span>
<span>{{ date }}</span>
<el-button-group>
<el-button size="mini" @click="selectDate('prev-year')">上一年</el-button>
<el-button size="mini" @click="selectDate('prev-month')">上个月</el-button>
<el-button size="mini" @click="selectDate('today')">今天</el-button>
<el-button size="mini" @click="selectDate('next-month')">下个月</el-button>
<el-button size="mini" @click="selectDate('next-year')">下一年</el-button>
</el-button-group>
</template>
<template #dateCell="{ data }">
<div style="height: 100%;width: 100%;" @click="showEdit(textContent(data.day), data.day)">
<el-row :class="data.isSelected ? 'is-selected' : ''" style="display: inherit;">
{{ data.day.split('-').slice(1).join('-') }}
{{ data.isSelected ? '✔️' : '' }}
<el-button v-if="textContent(data.day) != undefined" type="danger" @click.stop="onDelete(textContent(data.day).id)" :icon="Delete" circle style="width: 20px;height: 20px;float: right;background-color: #ccc;border-color: #ccc;" />
</el-row>
<div v-if="textContent(data.day) != undefined">
<el-row style="margin-bottom: 4px;">
<el-col class="center">
<el-tag type="warning" class="tag">
<el-row>
<el-col :span="17" class="tag">
<el-tooltip v-if="textContent(data.day).holidayName != '' && textContent(data.day).holidayName.length > 8" class="box-item" effect="dark" :content="textContent(data.day).holidayName"
placement="top">
<span>{{ textContent(data.day).holidayName.substring(0, 8) + '...' }}</span>
</el-tooltip>
<span v-else>{{ textContent(data.day).holidayName != '' ? textContent(data.day).holidayName : '-' }}</span>
</el-col>
</el-row>
</el-tag>
</el-col>
</el-row>
<el-row>
<el-col class="center">
<el-tag type="primary" class="tag">
<el-row>
<el-col :span="17" class="tag">
<span>等级:{{ textContent(data.day).grade }}</span>
</el-col>
</el-row>
</el-tag>
</el-col>
</el-row>
</div>
</div>
</template>
</el-calendar>
</app-table-layout>
<HolidaySettingEdit ref="holidaySettingEdit" @success="showList" />
</app-page>
</template>
<script lang="ts" setup>
import { onMounted, nextTick, ref } from "vue"
import HolidaySettingEdit from "./HolidaySettingEdit.vue"
import { UIFactory } from "jingjian-uicomponent-elementplus"
import { HttpResult } from "jingjian-https"
import { dayjs } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
const calendar = ref()
const holidaySettingEdit = ref();
const holidaySettingData = ref<any>([]);
const showListUrl = '/deployment/holidaySetting/list'
const onDeleteUrl = '/deployment/holidaySetting/delete'
onMounted(() => nextTick(() => showList()))
const onDelete = async (id: any) =>
{
try
{
if (!await UIFactory.confirm('您确定要删除吗')) return
const res: HttpResult<any> = await jingjian.https.post(onDeleteUrl, { ids: [id] })
if (!res.success) throw Error(res.msg)
UIFactory.success('删除成功')
showList()
}
catch(ex: any)
{
UIFactory.error(ex.message)
}
}
const selectDate = (value: any) => calendar.value.selectDate(value)
const showList = async () => {
try {
let request = {
page: 1,
limit: 999999999
}
const res: HttpResult<any> = await jingjian.https.get(showListUrl, request);
if (!res.success) throw new Error(res.msg);
holidaySettingData.value = res.data;
}
catch (error: any) {
UIFactory.error(error.message);
}
}
const showEdit = (entity?: any, date?: any) => holidaySettingEdit.value.show(entity, date)
const textContent = (date?: any) => holidaySettingData.value.filter((item: any) => dayjs(item.settingDate).format('YYYY-MM-DD') == date)[0]
</script>
<style lang="less" scoped>
:deep(.el-calendar-table thead th) {
text-align: center;
}
:deep(tbody){
background-color: #fbfbfb;
}
.is-selected {
color: #1989fa;
}
</style>