日历修改,可分别修改多日期内容

src/views/system/calendar/Bk.txt

@@ -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}}&nbsp;年
+        </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>

src/views/system/calendar/index.vue

@@ -46,13 +46,13 @@
               <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() }}
+                    {{ 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+')'}}
+                    ({{dictData[holidayDate[data.day]?.content].label}})
                   </span>
                 </div>
               </template>
@@ -66,12 +66,12 @@
               </el-button>
               <el-form
                 ref="formRef"
-                :model="formDataCaln"
+                :model="holidayDate[data.day]"
                 style="margin-top: 20px"
                 label-width="70px"
               >
                 <el-form-item label="状态" >
-                  <el-radio-group v-model="formDataCaln.isWorkday">
+                  <el-radio-group v-model="holidayDate[data.day].isWorkday">
                     <el-radio
                       v-for="dict in nowWork"
                       :key="dict.value"
@@ -82,9 +82,9 @@
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item label="假期内容" >
-                  <el-select v-model="formDataCaln.content" placeholder="请选择假期内容" :teleported="false">
+                  <el-select v-model="holidayDate[data.day].content" placeholder="请选择假期内容" :teleported="false">
                     <el-option
-                      v-for="dict in getIntDictOptions(DICT_TYPE.CALENDAR_CONTENT)"
+                      v-for="dict in dictData"
                       :key="dict.value"
                       :label="dict.label"
                       :value="dict.value"
@@ -107,7 +107,7 @@
 <script setup lang="ts">
 import {CalendarInstance} from "element-plus";
 import {CalendarApi, CalendarVO} from "@/api/home/calendar";
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import {getIntDictOptions, DICT_TYPE, NumberDictDataType} from '@/utils/dict'
 import {Close} from "@element-plus/icons-vue";
 
 defineOptions({ name: 'CalendarAgendaIndex' })
@@ -219,14 +219,6 @@ const handleSelect = async (date:any) => {
     message.error("未找到对应的假期数据");
     return;
   }
-  // 更新数据
-  formDataCaln.value = {
-    ...formDataCaln.value,
-    id: holidayData.id,
-    date: holidayData.date,
-    isWorkday: holidayData.isWorkday,
-    content: holidayData.content
-  };
 
   //关闭或开启弹窗
   holidayData.visible = !holidayData.visible;
@@ -236,20 +228,24 @@ const handleSelect = async (date:any) => {
 const submitForm = async (date:any)=> {
   // 判断更改是否符合
   await getDate(date);
-  const dataClan = formDataCaln.value as unknown as CalendarVO
+  const updatedHoliday = holidayDate.value[sDate.value];
+
+  let dataClan = formDataCaln.value as unknown as CalendarVO
   // 更新后台数据
   try {
+    // 更新数据
+    dataClan = {
+      ...dataClan,
+      id: updatedHoliday.id,
+      date: updatedHoliday.date,
+      isWorkday: updatedHoliday.isWorkday,
+      content: updatedHoliday.content
+    };
     await CalendarApi.updateCalendar(dataClan);
   } catch (error) {
     message.error("更新失败");
     return;
   }
-  const updatedHoliday = holidayDate.value[sDate.value];
-  // 更改展示状态
-  updatedHoliday.isWorkday = formDataCaln.value.isWorkday
-  updatedHoliday.content = formDataCaln.value.content
-  // 重新赋值触发新渲染 本来需要重新渲染才更新不知道怎么好了留着
-  // holidayDate.value = { ...holidayDate.value};
   // 关闭弹窗
   updatedHoliday.visible = false;
 }
@@ -285,8 +281,16 @@ 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()
 })