工作日历修改完成

src/views/system/calendar/index.vue

@@ -29,12 +29,47 @@
           </template>
 
           <template #date-cell="{ data }">
+            <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 handleSelect = async (date:any) => {
-  const dataClan = formDataCaln.value as unknown as CalendarVO
+  // 判断更改是否符合
+  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;
+  holidayData.visible = !holidayData.visible;
-  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;
 };
 
+//提交更改
+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)