src/views/system/calendar/index.vue

@@ -1,21 +1,13 @@
 <template>
   <ContentWrap>
-    <el-row>
+
-      <el-col :span="4">
+    <el-button-group style="display: flex; justify-content: space-between;">
-        <span style="font-size: 24px">
+      <el-button size="large" @click="selectDate(-1)">上年</el-button>
-        {{currentYear}}&nbsp;年
+      <el-button size="large" @click="toYear()">今年</el-button>
-        </span>
+      <el-button size="large" @click="selectDate(1)">下年</el-button>
-      </el-col>
+      <el-button size="large" @click="getListDate()">刷新</el-button>
-      <el-col :span="20">
+<!--      <el-button size="small" @click="createDate()">创建</el-button>-->
-        <el-button-group style="display: flex; justify-content: space-between;">
+    </el-button-group>
-          <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" >
@@ -23,6 +15,7 @@
         <h5 class="month-title">{{ month }}</h5>
 
         <el-calendar
+          v-loading="!loading"
           ref="calendar"
           class="custom-calendar"
           :model-value="new Date(currentYear, index)"
@@ -36,38 +29,20 @@
           </template>
 
           <template #date-cell="{ data }">
-            <el-popover
+            <el-popover :visible="holidayDate[data.day]?.visible"  placement="right" :width="240" trigger="click">
-              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">
+                  <span style="font-size: 14px">
                     {{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
                   </span>
-                  <span
+                  <span v-if="holidayDate[data.day]?.content !== ''&&holidayDate[data.day]?.content !== null&&holidayDate[data.day]?.content !== undefined" style="font-size: 12px">
-                    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-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="formDataCaln"
-                style="margin-top: 20px"
                 label-width="70px"
               >
                 <el-form-item label="状态" >
@@ -75,7 +50,7 @@
                     <el-radio
                       v-for="dict in nowWork"
                       :key="dict.value"
-                      :value="dict.value"
+                      :label="dict.value"
                     >
                       {{ dict.label }}
                     </el-radio>
@@ -92,7 +67,7 @@
                   </el-select>
                 </el-form-item>
               </el-form>
-              <el-button size="small" @click="submitForm(data);" type="primary">确定</el-button>
+              <el-button size="small" @click="submitForm();" type="primary">确定</el-button>
             </el-popover>
           </template>
 
@@ -108,7 +83,6 @@
 import {CalendarInstance} from "element-plus";
 import {CalendarApi, CalendarVO} from "@/api/home/calendar";
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import {Close} from "@element-plus/icons-vue";
 
 defineOptions({ name: 'CalendarAgendaIndex' })
 
@@ -153,22 +127,17 @@ const formDataCaln = ref({
 //   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;
+  loading.value = false
   try {
-    const data = await CalendarApi.getCalendarPage(queryParamsDate);
+    const data = await CalendarApi.getCalendarPage(queryParamsDate)
-    list.value = data.list;
+    list.value = data.list
-    mapDate();
+    mapDate()
-    total.value = data.total;
+    total.value = data.total
   } finally {
-    loading.value = true;
+    loading.value = true
   }
 }
 
@@ -232,9 +201,7 @@ const handleSelect = async (date:any) => {
 };
 
 //提交更改
-const submitForm = async (date:any)=> {
+const submitForm = async ()=> {
-  // 判断更改是否符合
-  await getDate(date);
   const dataClan = formDataCaln.value as unknown as CalendarVO
   // 更新后台数据
   try {
@@ -252,14 +219,7 @@ const submitForm = async (date:any)=> {
   // 关闭弹窗
   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)
@@ -286,14 +246,7 @@ onMounted( async ()=> {
 </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; /* 可选：添加圆角 */