工作日历前端数据交互完成

src/api/home/calendar/index.ts

@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+// 工作日历数据 VO
+export interface CalendarVO {
+  id: number // id
+  date: string // 字符串日期
+  isWorkday: number // 是否是节假日
+}
+
+// 工作日历数据 API
+export const CalendarApi = {
+  // 查询工作日历数据分页
+  getCalendarPage: async (params: any) => {
+    return await request.get({ url: `/home/calendar/page`, params })
+  },
+
+  // 查询工作日历数据详情
+  getCalendar: async (id: number) => {
+    return await request.get({ url: `/home/calendar/get?id=` + id })
+  },
+
+  // 新增工作日历数据
+  createCalendar: async (data: CalendarVO) => {
+    return await request.post({ url: `/home/calendar/create`, data })
+  },
+
+  // 修改工作日历数据
+  updateCalendar: async (data: CalendarVO) => {
+    return await request.put({ url: `/home/calendar/update`, data })
+  },
+
+  // 删除工作日历数据
+  deleteCalendar: async (id: number) => {
+    return await request.delete({ url: `/home/calendar/delete?id=` + id })
+  },
+
+  // 导出工作日历数据 Excel
+  exportCalendar: async (params) => {
+    return await request.download({ url: `/home/calendar/export-excel`, params })
+  },
+}

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>

src/views/system/calendar/okBk.txt

@@ -0,0 +1,489 @@
+<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 size="large" @click="submitForm()">生成</el-button>-->
+      <el-button @click="getListDate()">获取</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': holidayDate2[data.day]?.isWorkday }">
+<!--            <div @click="handleSelect(data)" >-->
+            <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 {CalendarDateType, CalendarInstance} from "element-plus";
+import {CalendarApi, CalendarVO} from "@/api/home/calendar";
+import {AgendaApi, CalendarDate} from "@/api/home/hysgl/hysinfo";
+// import {AgendaApi,CalendarDate} from "@/api/calendar/agenda";
+
+defineOptions({ name: 'CalendarAgendaIndex' })
+
+// const message = useMessage() // 消息弹窗
+
+const loading = ref(false) // 列表的加载中
+const list = ref<CalendarVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParamsDate = reactive({
+  pageNo: 1,
+  pageSize: 1,
+  id: undefined,
+  date: [],
+  isWorkday: undefined,
+  createTime: [],
+})
+/** 查询列表 */
+const getListDate = async () => {
+  loading.value = false
+  try {
+    const data =await CalendarApi.getCalendarPage(queryParamsDate)
+    list.value = data.list
+    await mapDate()
+    // console.log("holidayDate2.value123",holidayDate2.value);
+    total.value = data.total
+  } finally {
+    loading.value = true
+  }
+}
+const holidayDate2 = ref()
+const mapDate = async ()=> {
+  holidayDate2.value = list.value.reduce((map, item) => {
+    // console.log("item:  " + item.isWorkday)
+    // console.log("map:  " + item.date)
+    // map[item.date] = item.isWorkday;
+    map[item.date] = {
+      isWorkday: item.isWorkday,
+      date: item.date,
+      id: item.id
+    }
+    return map;
+  }, {});
+  // holidayDate.value = holidaysMap
+  // console.log("holidaysMap:  " + holidayDate2.value["2024-05-09"].isHoliday)
+  // console.log("holidaysMap:  " + holidayDate2.value["2024-05-09"].id)
+}
+
+const formData = ref({
+  id: undefined,
+  date: undefined,
+  isWorkday: undefined,
+})
+// const submitForm = async () => {
+//   const data = formData.value as unknown as CalendarVO
+//   data.date="2024-12-03"
+//   data.isWorkday=0
+//   await CalendarApi.createCalendar(data)
+// }
+
+
+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
+
+// 获取日期时间 年月日
+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: 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 formDataCaln = ref({
+  id: undefined,
+  date: undefined,
+  isWorkday: undefined,
+})
+// 处理日期选择
+const handleSelect = async (date:CalendarDate) => {
+  loading.value = false
+  try {
+    const date2 = date.date
+    const year  = date2.getFullYear().toString()
+      const toYear = new Date().getFullYear().toString()
+      if (year !== toYear){
+        message.error("只能更改今年日期")
+      }
+    const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
+    const id = holidayDate2.value[da].id
+    const dataClan = formDataCaln.value as unknown as CalendarVO
+    dataClan.id = id;
+    dataClan.date = holidayDate2.value[da].date
+    dataClan.isWorkday = holidayDate2.value[da].isWorkday === 1?0:1;
+    console.log(holidayDate2.value[da].isWorkday)
+    console.log(dataClan)
+    // console.log("da",da)
+    await CalendarApi.updateCalendar(dataClan)
+    await getListDate()
+  } finally {
+    loading.value = true
+  }
+  // const date2 = date.date
+  // const da = `${date2.getFullYear()}-${(date2.getMonth() + 1).toString().padStart(2, '0')}-${date2.getDate().toString().padStart(2, '0')}`;
+  // const id = holidayDate2.value[da].id
+  // holidays2[da] = !holidays2[da]
+  // console.log("da",da)
+  // console.log("holidays[da]",holidayDate2.value[da].id)
+  // console.log("date2",date2)
+  // console.log("holidays2",holidays2)
+};
+
+
+// const submitForm = async () => {
+//   // 校验表单
+//   await formRef.value.validate()
+//   // 提交请求
+//   formLoading.value = true
+//   try {
+//     const data = formData.value as unknown as CalendarVO
+//     if (formType.value === 'create') {
+//       await CalendarApi.createCalendar(data)
+//       message.success(t('common.createSuccess'))
+//     } else {
+//       await CalendarApi.updateCalendar(data)
+//       message.success(t('common.updateSuccess'))
+//     }
+//     dialogVisible.value = false
+//     // 发送操作成功的事件
+//     emit('success')
+//   } finally {
+//     formLoading.value = false
+//   }
+// }
+
+// 节假日数据
+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( async ()=> {
+    await getListDate()
+})
+</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>
+
+------------------------------------------------------------------------------------------------------------- 修改完成版
+
+<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-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: [],
+  isWorkday: undefined,
+  createTime: [],
+})
+
+const formDataCaln = ref({
+  id: undefined,
+  date: undefined,
+  isWorkday: undefined,
+})
+
+/** 查询列表 */
+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>