From 34d0738ad70ca445e50c5e460c94b9cbec079ca7 Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Tue, 22 Oct 2024 16:24:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=8E=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/calendar/agenda/index.ts         |  21 +++
 src/views/calendar/agenda/AgendaForm.vue |  13 ++
 src/views/calendar/agenda/index-bk.vue   | 141 +++++++++++++++++++
 src/views/calendar/agenda/index-bk2.vue  | 136 ++++++++++++++++++
 src/views/calendar/agenda/index.vue      | 171 +++++++++++++++++++----
 src/views/infra/file/index.vue           |  10 +-
 6 files changed, 461 insertions(+), 31 deletions(-)
 create mode 100644 src/api/calendar/agenda/index.ts
 create mode 100644 src/views/calendar/agenda/AgendaForm.vue
 create mode 100644 src/views/calendar/agenda/index-bk.vue
 create mode 100644 src/views/calendar/agenda/index-bk2.vue

diff --git a/src/api/calendar/agenda/index.ts b/src/api/calendar/agenda/index.ts
new file mode 100644
index 0000000..ae264b5
--- /dev/null
+++ b/src/api/calendar/agenda/index.ts
@@ -0,0 +1,21 @@
+import request from "@/config/axios";
+
+export interface CalendarDate {
+  isSelected: boolean
+  type: string
+  day: string
+  date: Date
+}
+
+/**
+ * 工作日历API
+ */
+export const AgendaApi = {
+  /**
+   * 获取工作Day
+   * @param params
+   */
+  getAgendaPage: async (params: any) => {
+    return await request.get({ url: `/calendar/agenda/page`, params })
+  },
+}
diff --git a/src/views/calendar/agenda/AgendaForm.vue b/src/views/calendar/agenda/AgendaForm.vue
new file mode 100644
index 0000000..3c51db5
--- /dev/null
+++ b/src/views/calendar/agenda/AgendaForm.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+defaultOptions({name:"AgendaForm"})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/calendar/agenda/index-bk.vue b/src/views/calendar/agenda/index-bk.vue
new file mode 100644
index 0000000..a37d00e
--- /dev/null
+++ b/src/views/calendar/agenda/index-bk.vue
@@ -0,0 +1,141 @@
+<template>
+  <ContentWrap>
+    <el-row :gutter="20">
+      <el-col v-for="(month, index) in months" :key="index" :span="6" >
+        <h3 class="month-title">{{ month }}</h3>
+        <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-col :span="8" style="text-align: center;">-->
+<!--                <el-button-group style="display: flex; justify-content: space-between;">-->
+<!--                  <el-button size="small" @click="selectDate('prev-year')">上年</el-button>-->
+<!--                  <el-button size="small" @click="selectDate('prev-month')">上月</el-button>-->
+<!--                  <el-button size="small" @click="selectDate('today')">今天</el-button>-->
+<!--                  <el-button size="small" @click="selectDate('next-year')">下年</el-button>-->
+<!--                  <el-button size="small" @click="selectDate('next-month')">下月</el-button>-->
+<!--                </el-button-group>-->
+            </el-row>
+          </template>
+
+          <template #date-cell="{ data }">
+            <div v-if="holidays[data.day]" @click="handleSelect(data.date)" class="holiday">
+<!--              {{ data.day + ": " + holidays[data.day] }}-->
+              {{ data.date.getDay() }}
+            </div>
+<!--            <div v-if="schedules[data.day]" @click="handleSelect(schedules[data.day])" class="schedule">-->
+<!--              {{ data.day + ": " + schedules[data.day] }}-->
+<!--            </div>-->
+          </template>
+        </el-calendar>
+      </el-col>
+    </el-row>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import {CalendarDateType, CalendarInstance} from "element-plus";
+
+defineOptions({ name: 'CalendarAgendaIndex' })
+
+const message = useMessage() // 消息弹窗
+// const { t } = useI18n() // 国际化
+
+// const workdays = {};
+const calendar = ref<CalendarInstance>()
+// const selectedDate = ref(""); // 选择的日期
+const currentYear = ref(new Date().getFullYear()) // 获取当前年份
+const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
+
+// const selectDate = (val: CalendarDateType) => {
+//   if (!calendar.value) return
+//   calendar.value.selectDate(val)
+// }
+
+// 处理日期选择
+const handleSelect = (date: Date) => {
+  date.getDay()
+  date.getFullYear()
+  date.getMonth()
+  message.success(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDay()}`)
+  // selectedDate.value = date;
+};
+
+// 节假日数据
+const holidays = ref({
+  '2024-01-01': '元旦',
+  '2024-01-21': '春节',
+  '2024-02-10': '春节假期',
+  '2024-04-04': '清明节',
+  '2024-05-01': '劳动节',
+  '2024-06-10': '端午节',
+  '2024-08-10': '中元节',
+  '2024-09-29': '中秋节',
+  '2024-10-01': '国庆节',
+  '2024-10-02': '国庆假期',
+  '2024-10-03': '国庆假期',
+  '2024-10-04': '国庆假期',
+  '2024-10-05': '国庆假期',
+});
+
+// 日常安排数据
+// const schedules = ref({
+//   '2024-10-15': '工作',
+//   '2024-10-16': '工作',
+//   '2024-10-17': '工作',
+//   '2024-10-18': '工作',
+//   '2024-10-19': '工作',
+//   '2024-10-20': '代码提交截止',
+//   '2024-11-20': '代码提交截止',
+//   '2024-12-20': '代码提交截止',
+// });
+
+const getDate = () => {
+
+}
+onMounted(()=> {
+  getDate();
+})
+</script>
+<style>
+.custom-calendar .el-calendar-day {
+  padding: 0 !important;
+}
+.custom-calendar {
+  border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
+  border-radius: 5px; /* 可选：添加圆角 */
+}
+</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: 10px
+}
+.header-date {
+  text-align: center;
+  font-size: 10px;
+}
+</style>
diff --git a/src/views/calendar/agenda/index-bk2.vue b/src/views/calendar/agenda/index-bk2.vue
new file mode 100644
index 0000000..a84e0e3
--- /dev/null
+++ b/src/views/calendar/agenda/index-bk2.vue
@@ -0,0 +1,136 @@
+<template>
+  <ContentWrap>
+    <el-row :gutter="20">
+      <el-col v-for="(month, index) in months" :key="index" :span="6" >
+        <h3 class="month-title">{{ month }}</h3>
+        <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': holidays[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";
+
+defineOptions({ name: 'CalendarAgendaIndex' })
+
+const message = useMessage() // 消息弹窗
+
+const calendar = ref<CalendarInstance>()
+// const selectedDate = ref(""); // 选择的日期
+// const today = ref("")
+const currentYear = ref(new Date().getFullYear()) // 获取当前年份
+const months = reactive(['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'])
+
+// const selectDate = (val: CalendarDateType) => {
+//   if (!calendar.value) return
+//   calendar.value.selectDate(val)
+// }
+
+// 处理日期选择
+const handleSelect = (date:CalendarDate) => {
+  const date2 = date.date
+  // message.info(`${date2.getFullYear()}-${date2.getMonth()+1}-${date2.getDate()}`)
+  // selectedDate.value = date;
+};
+
+// 节假日数据
+const holidays = ref({
+  '2024-01-01': '元旦',
+  '2024-01-21': '春节',
+  '2024-02-10': '春节假期',
+  '2024-04-04': '清明节',
+  '2024-05-01': '劳动节',
+  '2024-06-10': '端午节',
+  '2024-08-10': '中元节',
+  '2024-09-29': '中秋节',
+  '2024-10-01': '国庆节',
+  '2024-10-02': '国庆假期',
+  '2024-10-03': '国庆假期',
+  '2024-10-04': '国庆假期',
+  '2024-10-05': '国庆假期',
+});
+
+// 日常安排数据
+// const schedules = ref({
+//   '2024-10-15': '工作',
+//   '2024-10-16': '工作',
+//   '2024-10-17': '工作',
+//   '2024-10-18': '工作',
+//   '2024-10-19': '工作',
+//   '2024-10-20': '代码提交截止',
+//   '2024-11-20': '代码提交截止',
+//   '2024-12-20': '代码提交截止',
+// });
+
+const getDate = () => {
+  // const d = new Date();
+  // today.value=`${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
+  // console.log(today.value)
+}
+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: 5px; /* 可选：添加圆角 */
+}
+</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: 10px
+}
+.header-date {
+  text-align: center;
+  font-size: 10px;
+}
+</style>
diff --git a/src/views/calendar/agenda/index.vue b/src/views/calendar/agenda/index.vue
index 99ceb7d..795ea50 100644
--- a/src/views/calendar/agenda/index.vue
+++ b/src/views/calendar/agenda/index.vue
@@ -1,40 +1,161 @@
 <template>
   <ContentWrap>
-    <el-calendar ref="calendar" class="custom-calendar">
-      <template #header = "{date}">
-        <el-row>
-          <el-col :span="8" style="text-align: center;">
-            <span style="display: inline-block;font-size: 10px">{{ date }}</span>
-          </el-col>
-          <el-col :span="8" style="text-align: center;">
-            1
-          </el-col>
-          <el-col :span="8" style="text-align: center;">
-            <el-button-group style="display: flex; justify-content: space-between;">
-              <el-button size="small" @click="selectDate('prev-year')">上年</el-button>
-              <el-button size="small" @click="selectDate('prev-month')">上月</el-button>
-              <el-button size="small" @click="selectDate('today')">今天</el-button>
-              <el-button size="small" @click="selectDate('next-year')">下年</el-button>
-              <el-button size="small" @click="selectDate('next-month')">下月</el-button>
-            </el-button-group>
-          </el-col>
-        </el-row>
-      </template>
-    </el-calendar>
+    <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 scoped lang="scss">
-
+<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>
diff --git a/src/views/infra/file/index.vue b/src/views/infra/file/index.vue
index 3fcda6e..da70c7f 100644
--- a/src/views/infra/file/index.vue
+++ b/src/views/infra/file/index.vue
@@ -65,23 +65,21 @@
       <el-table-column label="文件内容" align="center" prop="url" width="110px">
         <template #default="{ row }">
           <el-image
-            v-if="row.type.includes('image')"
             class="h-80px w-80px"
             lazy
-            :src="row.url"
-            :preview-src-list="[row.url]"
+            :src="`${row.url}?id=${row.id}`"
+            :preview-src-list="[`${row.url}?id=${row.id}`]"
             preview-teleported
             fit="cover"
           />
           <el-link
-            v-else-if="row.type.includes('pdf')"
             type="primary"
-            :href="row.url"
+            :href="`${row.url}?id=${row.id}`"
             :underline="false"
             target="_blank"
             >预览</el-link
           >
-          <el-link v-else type="primary" download :href="row.url" :underline="false" target="_blank"
+          <el-link type="primary" download :href="`${row.url}?id=${row.id}`" :underline="false" target="_blank"
             >下载</el-link
           >
         </template>