备份原始版本工作日历

src/views/Home/hygl/hyinfo/agenda-bk.txt

@@ -0,0 +1,164 @@
+
+这是最原始展示一年工作日历的版本
+
+<template>
+  <ContentWrap>
+    <el-button-group style="display: flex; justify-content: space-between;">
+      <el-button size="large" @click="selectDate2(-1)">上年</el-button>
+      <el-button size="large" @click="toYear()">今年</el-button>
+      <el-button size="large" @click="selectDate2(1)">下年</el-button>
+    </el-button-group>
+    <el-row :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, 1)"
+        >
+          <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': holidays2[data.day] }">
+              {{ data.date.getDate()}}
+            </div>
+          </template>
+        </el-calendar>
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import {CalendarDateType, CalendarInstance} from "element-plus";
+import {AgendaApi,CalendarDate} from "@/api/calendar/agenda";
+
+defineOptions({ name: 'CalendarAgendaIndex' })
+
+// const message = useMessage() // 消息弹窗
+
+const calendar = ref<CalendarInstance>()
+const currentYear = ref(new Date().getFullYear()) // 获取当前年份
+const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
+
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+  console.log(calendar.value.selectDate(val))
+}
+const selectDate2 = (val:number) => {
+  if (!val){
+    return
+  }
+  currentYear.value += val
+}
+const toYear = () => {
+  currentYear.value = new Date().getFullYear()
+}
+
+// 处理日期选择
+const handleSelect = (date:CalendarDate) => {
+  const date2 = date.date
+  const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
+  holidays2[da] = !holidays2[da]
+  console.log("da",da)
+  console.log("holidays[da]",holidays2[da])
+  console.log("date2",date2)
+  console.log("holidays2",holidays2)
+};
+
+// 节假日数据
+const holidays = reactive({
+  '2024-01-01': 1,
+  '2024-01-21': 1,
+  '2024-02-10': 1,
+  '2024-04-04': 1,
+  '2024-05-01': 1,
+  '2024-06-10': 1,
+  '2024-08-10': 1,
+  '2024-09-29': 1,
+  '2024-10-01': 1,
+  '2024-10-02': 1,
+  '2024-10-03': 1,
+  '2024-10-04': 1,
+  '2024-10-05': 1,
+  '2024-10-06': 0,
+  '2024-10-07': 0,
+  '2024-10-08': 0,
+  '2024-10-09': 1,
+});
+const holidays2 = reactive({});
+const startDate = new Date('2024-01-01');
+const endDate = new Date('2024-12-31');
+
+for (let d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
+  const formattedDate = d.toISOString().split('T')[0]; // 格式化日期为 YYYY-MM-DD
+  holidays2[formattedDate] = Math.floor(Math.random() * 2); // 随机生成 0 或 1
+}
+
+console.log(holidays2);
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  id: undefined,
+  date:[]
+})
+
+const getDate = () => {
+  const data = AgendaApi.getAgendaPage(queryParams)
+}
+onMounted(()=> {
+  // getDate();
+})
+</script>
+<style>
+.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;
+}
+.custom-calendar {
+  border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
+  border-radius: 10px; /* 可选：添加圆角 */
+}
+</style>
+<style scoped lang="scss">
+.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>