工作日历修改完成
This commit is contained in:
XaoLi717
parent
bcfeb9001c
commit
88c4619a64
@ -29,11 +29,46 @@
|
||||
</template>
|
||||
|
||||
<template #date-cell="{ data }">
|
||||
<div @click="handleSelect(data)" :class="{ 'holidayWork': holidayDate[data.day]?.isWorkday }">
|
||||
<span style="font-size: 14px">
|
||||
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
|
||||
</span>
|
||||
</div>
|
||||
<el-popover :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: 14px">
|
||||
{{ 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">
|
||||
{{'('+getIntDictOptions(DICT_TYPE.CALENDAR_CONTENT)[holidayDate[data.day]?.content].label+')'}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formDataCaln"
|
||||
label-width="70px"
|
||||
>
|
||||
<el-form-item label="状态" >
|
||||
<el-radio-group v-model="formDataCaln.isWorkday">
|
||||
<el-radio
|
||||
v-for="dict in nowWork"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="假期内容" >
|
||||
<el-select v-model="formDataCaln.content" placeholder="请选择假期内容" :teleported="false">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.CALENDAR_CONTENT)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button size="small" @click="submitForm();" type="primary">确定</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
</el-calendar>
|
||||
@ -47,6 +82,7 @@
|
||||
<script setup lang="ts">
|
||||
import {CalendarInstance} from "element-plus";
|
||||
import {CalendarApi, CalendarVO} from "@/api/home/calendar";
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
|
||||
defineOptions({ name: 'CalendarAgendaIndex' })
|
||||
|
||||
@ -98,7 +134,7 @@ const getListDate = async () => {
|
||||
try {
|
||||
const data = await CalendarApi.getCalendarPage(queryParamsDate)
|
||||
list.value = data.list
|
||||
await mapDate()
|
||||
mapDate()
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = true
|
||||
@ -106,9 +142,10 @@ const getListDate = async () => {
|
||||
}
|
||||
|
||||
//处理获取到的数据
|
||||
const mapDate = async ()=> {
|
||||
const mapDate = ()=> {
|
||||
holidayDate.value = list.value.reduce((map, item) => {
|
||||
map[item.date] = {
|
||||
visible: false,
|
||||
isWorkday: item.isWorkday,
|
||||
content: item.content,
|
||||
date: item.date,
|
||||
@ -118,30 +155,59 @@ const mapDate = async ()=> {
|
||||
}, {});
|
||||
}
|
||||
|
||||
// 处理日期选择
|
||||
const handleSelect = async (date:any) => {
|
||||
//单选框可选的内容
|
||||
const nowWork = ref([
|
||||
{ value:1, label:"工作" },
|
||||
{ value:0, label:"休息" }
|
||||
]);
|
||||
|
||||
// 获取到的日期
|
||||
const sDate = ref();
|
||||
|
||||
// 判断更改年份,获得当前日期
|
||||
const getDate = async (date:any)=> {
|
||||
const SelectDate = date.date
|
||||
const year = SelectDate.getFullYear().toString()
|
||||
const sYear = SelectDate.getFullYear().toString()
|
||||
const toYear = new Date().getFullYear().toString()
|
||||
if (year !== toYear){
|
||||
if (sYear !== toYear){
|
||||
message.error("只能更改今年日期")
|
||||
return;
|
||||
}
|
||||
//获取选中日期,创建更新时间
|
||||
sDate.value = `${SelectDate.getFullYear()}-${(SelectDate.getMonth() + 1).toString().padStart(2, '0')}-${SelectDate.getDate().toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
//获取选中日期,创建更新世界
|
||||
const da = `${SelectDate.getFullYear()}-${(SelectDate.getMonth() + 1).toString().padStart(2, '0')}-${SelectDate.getDate().toString().padStart(2, '0')}`;
|
||||
const dataClan = formDataCaln.value as unknown as CalendarVO
|
||||
// 处理日期选择
|
||||
const handleSelect = async (date:any) => {
|
||||
// 判断更改是否符合
|
||||
await getDate(date);
|
||||
// 提前处理数据，只更新必要的部分
|
||||
const holidayData = holidayDate.value[sDate.value];
|
||||
// 更新更新数据
|
||||
formDataCaln.value.id = holidayDate.value[sDate.value].id;
|
||||
formDataCaln.value.date = holidayDate.value[sDate.value].date
|
||||
formDataCaln.value.isWorkday = holidayDate.value[sDate.value].isWorkday;
|
||||
formDataCaln.value.content = holidayDate.value[sDate.value].content;
|
||||
|
||||
//更新数据状态
|
||||
dataClan.id = holidayDate.value[da].id;
|
||||
dataClan.date = holidayDate.value[da].date
|
||||
dataClan.isWorkday = holidayDate.value[da].isWorkday === 1?0:1;
|
||||
await CalendarApi.updateCalendar(dataClan)
|
||||
|
||||
//更改展示状态
|
||||
holidayDate.value[da].isWorkday = holidayDate.value[da].isWorkday === 1?0:1;
|
||||
//关闭或开启弹窗
|
||||
holidayData.visible = !holidayData.visible;
|
||||
};
|
||||
|
||||
//提交更改
|
||||
const submitForm = async ()=> {
|
||||
const dataClan = formDataCaln.value as unknown as CalendarVO
|
||||
// 更新后台数据
|
||||
await CalendarApi.updateCalendar(dataClan);
|
||||
// 更改展示状态
|
||||
holidayDate.value[sDate.value].isWorkday = formDataCaln.value.isWorkday
|
||||
// 重新赋值触发新渲染
|
||||
holidayDate.value = { ...holidayDate.value};
|
||||
// 前端直接赋值内容避免需要刷新
|
||||
holidayDate.value[sDate.value].content = formDataCaln.value.content
|
||||
// 关闭弹窗
|
||||
holidayDate.value[sDate.value].visible = false;
|
||||
}
|
||||
|
||||
// 获取日期时间 年月日
|
||||
function formatDate2(dat: number|Date) {
|
||||
const date = new Date(dat)
|
||||
@ -163,7 +229,7 @@ const toYear = () => {
|
||||
}
|
||||
//打开获取数据处理数据来渲染
|
||||
onMounted( async ()=> {
|
||||
await getListDate()
|
||||
await getListDate()
|
||||
})
|
||||
</script>
|
||||
<!-- 样式很重要 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user