From 88c4619a64a2e270b78bccda050a6582e96a1202 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:02:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=97=A5=E5=8E=86=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/calendar/index.vue | 112 ++++++++++++++++++++++------
 1 file changed, 89 insertions(+), 23 deletions(-)

diff --git a/src/views/system/calendar/index.vue b/src/views/system/calendar/index.vue
index 5669986..f313ba7 100644
--- a/src/views/system/calendar/index.vue
+++ b/src/views/system/calendar/index.vue
@@ -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>
 <!-- 样式很重要 -->