日历备份
This commit is contained in:
XaoLi717
parent
1178f84422
commit
1c7d372c4e
@ -823,3 +823,370 @@ holidayDate.value[daa.value].isWorkday = 0;
|
||||
}
|
||||
holidayDate.value[daa.value] = { ...holidayDate.value[daa.value] };
|
||||
|
||||
``````````````````````````````````````````````````````````````
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<span style="font-size: 24px">
|
||||
{{currentYear}} 年
|
||||
</span>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-button-group style="display: flex; justify-content: space-between;">
|
||||
<el-button size="large" @click="selectDate(-1)">上年</el-button>
|
||||
<el-button size="large" @click="toYear()">今年</el-button>
|
||||
<el-button size="large" @click="selectDate(1)">下年</el-button>
|
||||
<el-button size="large" @click="getListDate()">刷新</el-button>
|
||||
<!-- <el-button size="small" @click="createDate()">创建</el-button>-->
|
||||
</el-button-group>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row v-if="loading" :gutter="10">
|
||||
<el-col v-for="(month, index) in months" :key="index" :span="6" >
|
||||
|
||||
<h5 class="month-title">{{ month }}</h5>
|
||||
|
||||
<el-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date(currentYear, index)"
|
||||
>
|
||||
<template #header="{ date }">
|
||||
<el-row>
|
||||
<el-col :span="24" class="header-date">
|
||||
<span class="cl-title"> {{ date }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<template #date-cell="{ data }">
|
||||
<el-popover
|
||||
v-if="isCurrentMonth(data,index)"
|
||||
:visible="holidayDate[data.day]?.visible"
|
||||
placement="right"
|
||||
:width="240"
|
||||
trigger="click"
|
||||
>
|
||||
<template #reference>
|
||||
<div @click="handleSelect(data)" :class="{ 'holidayWork': holidayDate[data.day]?.isWorkday }">
|
||||
<span style="font-size: 12px">
|
||||
{{ formatDate2(data.date) === current? `${data.date.getDate()}(今天)`:data.date.getDate() }}
|
||||
</span>
|
||||
<span
|
||||
v-if="holidayDate[data.day]?.content !== ''&&holidayDate[data.day]?.content !== null&&holidayDate[data.day]?.content !== undefined"
|
||||
style="font-size: 12px"
|
||||
>
|
||||
({{dictData[holidayDate[data.day]?.content].label}})
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 右上角关闭按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
class="close-But"
|
||||
@click="closePopover(data)"
|
||||
>
|
||||
<el-icon style="margin-right: 3px;margin-left: 3px;" class="el-icon--right"><Close /></el-icon>
|
||||
</el-button>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="holidayDate[data.day]"
|
||||
style="margin-top: 20px"
|
||||
label-width="70px"
|
||||
>
|
||||
<el-form-item label="状态" >
|
||||
<el-radio-group v-model="holidayDate[data.day].isWorkday">
|
||||
<el-radio
|
||||
v-for="dict in nowWork"
|
||||
:key="dict.value"
|
||||
:value="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="假期内容" >
|
||||
<el-select v-model="holidayDate[data.day].content" placeholder="请选择假期内容" :teleported="false">
|
||||
<el-option
|
||||
v-for="dict in dictData"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button size="small" @click="submitForm(data);" type="primary">确定</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
</el-calendar>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {CalendarInstance} from "element-plus";
|
||||
import {CalendarApi, CalendarVO} from "@/api/home/calendar";
|
||||
import {getIntDictOptions, DICT_TYPE, NumberDictDataType} from '@/utils/dict'
|
||||
import {Close} from "@element-plus/icons-vue";
|
||||
|
||||
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const calendar = ref<CalendarInstance>()
|
||||
const currentYear = ref(new Date().getFullYear()) // 获取当前年份
|
||||
const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
|
||||
|
||||
const currentDay = ref(new Date().getDate().toString().padStart(2, '0'));
|
||||
const currentMonth2 = ref(new Date().getMonth()+1)
|
||||
const current = currentYear.value+"-"+currentMonth2.value+"-"+currentDay.value
|
||||
|
||||
const holidayDate = ref()
|
||||
|
||||
const loading = ref(false) // 列表的加载中
|
||||
const list = ref<CalendarVO[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const queryParamsDate = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 1,
|
||||
id: undefined,
|
||||
date: [currentYear.value+"-01-01",currentYear.value+"-12-31"],//只获取本年的数据
|
||||
isWorkday: undefined,
|
||||
content: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
|
||||
const formDataCaln = ref({
|
||||
id: undefined,
|
||||
date: undefined,
|
||||
isWorkday: undefined,
|
||||
content: undefined,
|
||||
})
|
||||
|
||||
/** 创建数据 */
|
||||
// const createDate = async () => {
|
||||
// const dda = formDataCaln.value as unknown as CalendarVO
|
||||
// dda.id = 1;
|
||||
// dda.date = "2024-01-12"
|
||||
// dda.isWorkday = 0
|
||||
// const data = await CalendarApi.createCalendar(dda)
|
||||
// console.log(data)
|
||||
// }
|
||||
|
||||
//判断是否渲染当前日期更改组件
|
||||
const isCurrentMonth = (date:any,index:number) => {
|
||||
const SelectDate = date.date;
|
||||
return SelectDate.getMonth() === index;
|
||||
};
|
||||
|
||||
/** 查询列表 */
|
||||
const getListDate = async () => {
|
||||
loading.value = false;
|
||||
try {
|
||||
const data = await CalendarApi.getCalendarPage(queryParamsDate);
|
||||
list.value = data.list;
|
||||
mapDate();
|
||||
total.value = data.total;
|
||||
} finally {
|
||||
loading.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
//处理获取到的数据
|
||||
const mapDate = ()=> {
|
||||
holidayDate.value = list.value.reduce((map, item) => {
|
||||
map[item.date] = {
|
||||
visible: false,
|
||||
isWorkday: item.isWorkday,
|
||||
content: item.content,
|
||||
date: item.date,
|
||||
id: item.id
|
||||
}
|
||||
return map;
|
||||
}, {});
|
||||
}
|
||||
|
||||
//单选框可选的内容
|
||||
const nowWork = ref([
|
||||
{ value:1, label:"工作" },
|
||||
{ value:0, label:"休息" }
|
||||
]);
|
||||
|
||||
// 获取到的日期
|
||||
const sDate = ref();
|
||||
|
||||
// 判断更改年份,获得当前日期
|
||||
const getDate = async (date:any)=> {
|
||||
const SelectDate = date.date
|
||||
const sYear = SelectDate.getFullYear().toString()
|
||||
const toYear = new Date().getFullYear().toString()
|
||||
if (sYear !== toYear){
|
||||
message.error("只能更改今年日期")
|
||||
return;
|
||||
}
|
||||
//获取选中日期,创建更新时间
|
||||
sDate.value = `${SelectDate.getFullYear()}-${(SelectDate.getMonth() + 1).toString().padStart(2, '0')}-${SelectDate.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// 处理日期选择
|
||||
const handleSelect = async (date:any) => {
|
||||
// 判断更改是否符合
|
||||
await getDate(date);
|
||||
// 提前处理数据，只更新必要的部分
|
||||
const holidayData = holidayDate.value[sDate.value];
|
||||
if (!holidayData) {
|
||||
message.error("未找到对应的假期数据");
|
||||
return;
|
||||
}
|
||||
// 更新数据
|
||||
// formDataCaln.value = {
|
||||
// ...formDataCaln.value,
|
||||
// id: holidayData.id,
|
||||
// date: holidayData.date,
|
||||
// isWorkday: holidayData.isWorkday,
|
||||
// content: holidayData.content
|
||||
// };
|
||||
|
||||
//关闭或开启弹窗
|
||||
holidayData.visible = !holidayData.visible;
|
||||
};
|
||||
|
||||
//提交更改
|
||||
const submitForm = async (date:any)=> {
|
||||
// 判断更改是否符合
|
||||
await getDate(date);
|
||||
const updatedHoliday = holidayDate.value[sDate.value];
|
||||
|
||||
// 更改展示状态
|
||||
// updatedHoliday.isWorkday = formDataCaln.value.isWorkday
|
||||
// updatedHoliday.content = formDataCaln.value.content
|
||||
// 重新赋值触发新渲染 本来需要重新渲染才更新不知道怎么好了留着
|
||||
// holidayDate.value = { ...holidayDate.value};
|
||||
|
||||
let dataClan = formDataCaln.value as unknown as CalendarVO
|
||||
// 更新后台数据
|
||||
try {
|
||||
// 更新数据
|
||||
dataClan = {
|
||||
...dataClan,
|
||||
id: updatedHoliday.id,
|
||||
date: updatedHoliday.date,
|
||||
isWorkday: updatedHoliday.isWorkday,
|
||||
content: updatedHoliday.content
|
||||
};
|
||||
console.log("dataClan: ",dataClan)
|
||||
await CalendarApi.updateCalendar(dataClan);
|
||||
} catch (error) {
|
||||
message.error("更新失败");
|
||||
return;
|
||||
}
|
||||
// 关闭弹窗
|
||||
updatedHoliday.visible = false;
|
||||
}
|
||||
|
||||
const closePopover = async (date:any)=> {
|
||||
// 判断更改是否符合
|
||||
await getDate(date);
|
||||
//获取选择日期
|
||||
const updatedHoliday = holidayDate.value[sDate.value];
|
||||
// 关闭弹窗
|
||||
updatedHoliday.visible = false;
|
||||
}
|
||||
|
||||
// 获取日期时间 年月日
|
||||
function formatDate2(dat: number|Date) {
|
||||
const date = new Date(dat)
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
//更具不同按钮传递不同的值 来处理展示的 年份
|
||||
const selectDate = (val:number) => {
|
||||
if (!val){
|
||||
return
|
||||
}
|
||||
currentYear.value += val
|
||||
}
|
||||
|
||||
//toYear Button change data go to year
|
||||
const toYear = () => {
|
||||
currentYear.value = new Date().getFullYear()
|
||||
}
|
||||
|
||||
//字典数据
|
||||
let dictData:NumberDictDataType[] = [];
|
||||
//获取字典数据
|
||||
const getDict = async ()=> {
|
||||
dictData = getIntDictOptions(DICT_TYPE.CALENDAR_CONTENT);
|
||||
}
|
||||
|
||||
//打开获取数据处理数据来渲染
|
||||
onMounted( async ()=> {
|
||||
await getDict()
|
||||
await getListDate()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<!-- 样式很重要 -->
|
||||
<style lang="scss">
|
||||
.close-But {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.custom-calendar {
|
||||
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||
border-radius: 10px; /* 可选：添加圆角 */
|
||||
}
|
||||
|
||||
.custom-calendar .el-calendar-day {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.custom-calendar .is-today {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f56c6c;
|
||||
font-size: 16px;
|
||||
}
|
||||
.holidayWork {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #15bc83;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #CCFFCC;
|
||||
color: #3b3e55;
|
||||
font-size: 12px;
|
||||
}
|
||||
.month-title {
|
||||
text-align: center
|
||||
}
|
||||
.cl-title {
|
||||
display: inline-block;
|
||||
font-size: 12px
|
||||
}
|
||||
.header-date {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user