From 7f4f5361d2c3ae5ea2c980b2d2936d502a5dffd3 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:10:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=97=A5=E5=8E=86=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E6=95=B0=E6=8D=AE=E4=BA=A4=E4=BA=92=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 | 210 ++++++++++++++++++++++++++++
 1 file changed, 210 insertions(+)
 create mode 100644 src/views/system/calendar/index.vue

diff --git a/src/views/system/calendar/index.vue b/src/views/system/calendar/index.vue
new file mode 100644
index 0000000..92ebbc4
--- /dev/null
+++ b/src/views/system/calendar/index.vue
@@ -0,0 +1,210 @@
+<template>
+  <ContentWrap>
+
+    <el-button-group style="display: flex; justify-content: space-between;">
+      <el-button size="small" @click="selectDate(-1)">上年</el-button>
+      <el-button size="small" @click="toYear()">今年</el-button>
+      <el-button size="small" @click="selectDate(1)">下年</el-button>
+      <el-button size="small" @click="getListDate()">刷新</el-button>
+<!--      <el-button size="small" @click="createDate()">创建</el-button>-->
+    </el-button-group>
+
+    <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
+          v-loading="!loading"
+          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 }">
+            <div @click="handleSelect(data)" :class="{ 'holiday': holidayDate[data.day]?.isWorkday }">
+              <span style="font-size: 14px">
+                {{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
+              </span>
+            </div>
+          </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";
+
+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,
+  createTime: [],
+})
+
+const formDataCaln = ref({
+  id: undefined,
+  date: undefined,
+  isWorkday: 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 getListDate = async () => {
+  loading.value = false
+  try {
+    const data = await CalendarApi.getCalendarPage(queryParamsDate)
+    list.value = data.list
+    await mapDate()
+    total.value = data.total
+  } finally {
+    loading.value = true
+  }
+}
+
+//处理获取到的数据
+const mapDate = async ()=> {
+  holidayDate.value = list.value.reduce((map, item) => {
+    map[item.date] = {
+      isWorkday: item.isWorkday,
+      date: item.date,
+      id: item.id
+    }
+    return map;
+  }, {});
+}
+
+// 处理日期选择
+const handleSelect = async (date:any) => {
+  const SelectDate = date.date
+  const year  = SelectDate.getFullYear().toString()
+  const toYear = new Date().getFullYear().toString()
+  if (year !== toYear){
+    message.error("只能更改今年日期")
+  }
+
+  //获取选中日期,创建更新世界
+  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
+
+  //更新数据状态
+  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;
+};
+
+// 获取日期时间 年月日
+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()
+}
+//打开获取数据处理数据来渲染
+onMounted( async ()=> {
+    await getListDate()
+})
+</script>
+<!-- 样式很重要 -->
+<style lang="scss">
+
+.custom-calendar {
+  border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
+  border-radius: 10px; /* 可选：添加圆角 */
+}
+
+.custom-calendar .el-calendar-day {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+}
+
+.custom-calendar .is-today {
+  width: 100%;
+  height: 100%;
+  background-color: #f56c6c;
+  font-size: 16px;
+}
+.holiday {
+  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>