From bcfeb9001c6aa385e9eb18802126e5cbced7c3e1 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:04:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=97=A5=E5=8E=86=E5=A4=87?=
 =?UTF-8?q?=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/calendar/{okBk.txt => Bk.txt}      | 336 ++++++++++++++++++
 1 file changed, 336 insertions(+)
 rename src/views/system/calendar/{okBk.txt => Bk.txt} (57%)

diff --git a/src/views/system/calendar/okBk.txt b/src/views/system/calendar/Bk.txt
similarity index 57%
rename from src/views/system/calendar/okBk.txt
rename to src/views/system/calendar/Bk.txt
index 92d9118..3ce40b1 100644
--- a/src/views/system/calendar/okBk.txt
+++ b/src/views/system/calendar/Bk.txt
@@ -487,3 +487,339 @@ onMounted( async ()=> {
   font-size: 10px;
 }
 </style>
+
+--------------------------------------------bk2
+<template>
+  <ContentWrap>
+
+    <el-button-group style="display: flex; justify-content: space-between;">
+      <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-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 }">
+            <el-popover placement="right" :width="200" 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()+'(今天22)':data.date.getDate() }}
+                  </span>
+                </div>
+              </template>
+
+              <el-form
+                ref="formRef"
+                :model="formDataCaln"
+                label-width="100px"
+              >
+                <el-form-item label="状态" >
+                  <el-input v-model="formDataCaln.isWorkday" type="text" placeholder="请输入状态" />
+                </el-form-item>
+                <el-form-item label="假期内容" >
+                  <el-input v-model="formDataCaln.content" type="text" placeholder="请输入假期内容" />
+                </el-form-item>
+              </el-form>
+              <el-button size="small" @click="submitForm(data)" type="primary">确定</el-button>
+            </el-popover>
+            <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>
+          </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,
+  content: undefined,
+  createTime: [],
+})
+
+const formDataCaln = ref({
+  id: undefined,
+  date: undefined,
+  isWorkday: undefined,
+  content: undefined,
+})
+const formRef = ref() // 表单 Ref
+
+/** 创建数据 */
+// 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,
+      content: item.content,
+      date: item.date,
+      id: item.id
+    }
+    return map;
+  }, {});
+}
+const daa = ref();
+// 处理日期选择
+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("只能更改今年日期")
+    return;
+  }
+
+  //获取选中日期,创建更新世界
+  const da = `${SelectDate.getFullYear()}-${(SelectDate.getMonth() + 1).toString().padStart(2, '0')}-${SelectDate.getDate().toString().padStart(2, '0')}`;
+  daa.value = da
+  const dataClan = formDataCaln.value as unknown as CalendarVO
+  //更新数据状态
+  // formDataCaln.value.id = holidayDate.value[da].id;
+  // formDataCaln.value.date = holidayDate.value[da].date
+  // formDataCaln.value.isWorkday = holidayDate.value[da].isWorkday === 1?0:1;
+  // //更新数据状态
+  dataClan.id = holidayDate.value[da].id;
+  dataClan.date = holidayDate.value[da].date
+  dataClan.isWorkday = holidayDate.value[da].isWorkday;
+  // 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 (date:any)=> {
+  const SelectDate = date.date
+  const year  = SelectDate.getFullYear().toString()
+  const toYear = new Date().getFullYear().toString()
+  if (year !== toYear){
+    message.error("只能更改今年日期")
+    return;
+  }
+  //获取选中日期,创建更新世界
+  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;
+
+  // await CalendarApi.updateCalendar(formDataCaln.value)
+  //更改展示状态
+  holidayDate.value[da] = {
+    ...holidayDate.value[da],
+    isWorkday: formDataCaln.value.isWorkday,
+  };
+  // holidayDate.value[da].isWorkday = formDataCaln.value.isWorkday;
+  // holidayDate.value[daa.value].isWorkday = wd;
+  // console.log("holidayDate.value:  " + holidayDate.value["2024-01-10"].isWorkday)
+}
+
+// 获取日期时间 年月日
+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;
+}
+
+.custom-calendar .is-today {
+  width: 100%;
+  height: 100%;
+  background-color: #f56c6c;
+  font-size: 16px;
+}
+.holidayWork {
+  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>
+
+
+-----------------------------------------------------------------------
+
+<el-popover 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()+'(今天22)':data.date.getDate() }}
+      </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 ddd"
+          :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>
+
+const ddd = ref([
+  {
+    value:1,
+    label:"工作"
+  },
+  {
+    value:0,
+    label:"休息"
+  }
+  ]);
+
+//更改展示状态
+if (formDataCaln.value.isWorkday == 1){
+holidayDate.value[daa.value].isWorkday = 1;
+}else if (formDataCaln.value.isWorkday == 0) {
+holidayDate.value[daa.value].isWorkday = 0;
+}
+holidayDate.value[daa.value] = { ...holidayDate.value[daa.value] };
+