feat(首页): 添加工作日历功能及交互优化

src/api/home/index.js

@@ -116,4 +116,16 @@ export async function getMyTaskTotal(params) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 工作日历
+ * @params params
+ */
+export async function getMyWorkCalendar(params) {
+  const res = await request.get(`/system/account/v1/getMyWorkCalendar`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
 }

src/views/home/indexNew.vue

@@ -187,14 +187,14 @@
           <div slot="header" class="clearfix">
             <span>工作日历</span>
           </div>
-          <div class="card-content">
+          <div class="card-content calendar-content">
             <el-calendar class="calendar" v-model="currentDate" :range="calendarRange">
               <template
                 slot="dateCell"
                 slot-scope="{date, data}">
                 <div class="calendar-day-content">
-                  <div :class="data.isSelected ? 'is-selected-day' : ''">{{ data.day.split('-')[2] }} </div>
-                  <div class="dot-container"><span class="dot"></span></div>
+                  <div :class="data.isSelected ? 'is-selected-day' : ''" @click="handleDateClick(data.day)">{{ data.day.split('-')[2] }} </div>
+                  <div class="dot-container" v-if="hasSchedule(data.day)"><span class="dot"></span></div>
                 </div>
               </template>
             </el-calendar>
@@ -204,30 +204,17 @@
             </div>
 
             <div class="schedule">
-              <div class="schedule-item">
-                <el-row :gutter="20">
-                  <el-col :span="8">
-                    <div class="schedule-item-time">
-                      09:00-10:00
-                    </div>
-                  </el-col>
-                  <el-col :span="16">
-                    <div class="schedule-item-name">
-                      出差申请
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-               <div class="schedule-item">
+              <div class="schedule-item" v-for="(item, index) in getScheduleListByDate()" :key="index">
                 <el-row :gutter="20">
                   <el-col :span="8">
                     <div class="schedule-item-time">
-                      10:00-11:00
+                      <div>{{ item.startTime }}</div>
+                      <div>{{ item.endTime }}</div>
                     </div>
                   </el-col>
                   <el-col :span="16">
                     <div class="schedule-item-name">
-                      出差申请
+                      {{ item.title || item.name || '日程安排' }}
                     </div>
                   </el-col>
                 </el-row>
@@ -254,7 +241,8 @@ import {
     getList,
     getMyProjectTotal,
     getMyWorkOrderTotal,
-    getMyTaskTotal
+    getMyTaskTotal,
+    getMyWorkCalendar
   } from '@/api/home';
 import { deepClone } from 'ele-admin/lib/utils/core';
 import { mapGetters } from 'vuex';
@@ -281,7 +269,10 @@ export default {
       commonDialogFlag: false,
       myProjectList: {},
       myWorkOrderList: {},
-      myTaskList: {}
+      myTaskList: {},
+      myWorkCalendar: {},
+      groupedWorkCalendar: {}, // 分组后的工作日历数据
+      selectedScheduleDate: '', // 当前选中的日期
     };
   },
   computed: {
@@ -291,6 +282,20 @@ export default {
       return notifications;
     }
   },
+  watch: {
+    currentDate: {
+      handler(newVal, oldVal) {
+        // 检查月份是否变化
+        if (newVal.getMonth() !== oldVal.getMonth() || newVal.getFullYear() !== oldVal.getFullYear()) {
+          // 重新计算日期范围
+          this.calendarRange = this.getMonthRange();
+          // 重新获取日程数据
+          this.getMyWorkCalendar();
+        }
+      },
+      deep: true
+    }
+  },
   created() {
     this.calendarRange = this.getWeekRange();
     this.getPortalsList();
@@ -299,8 +304,66 @@ export default {
     this.getMyWorkOrderTotal();
     this.getMyTaskTotal();
     this.getMessageList();
+    this.getMyWorkCalendar();
   },
   methods: {
+    async getMyWorkCalendar() {
+      const res = await getMyWorkCalendar({
+        startDate: this.calendarRange[0],
+        endDate: this.calendarRange[1]
+      });
+      console.log('myWorkCalendar~~~', res);
+
+      // 数据分组
+      if (res) {
+        const groupedData = {};
+        res.forEach(item => {
+          if (item.startTime) {
+            // 分割 startTime 为日期和时间
+            const dateTime = item.startTime.split(' ');
+            const date = dateTime[0];
+            const time = dateTime[1] || '';
+            
+            // 添加日期和时间属性
+            item.date = date;
+            item.time = time;
+            
+            // 按日期分组
+            if (!groupedData[date]) {
+              groupedData[date] = [];
+            }
+            groupedData[date].push(item);
+          }
+        });
+        console.log('分组后的数据:', groupedData);
+        // 可以将分组后的数据存储到一个新的变量中，以便在模板中使用
+        this.groupedWorkCalendar = groupedData;
+        
+        // 获取当天日期并设置为选中日期
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, '0');
+        const day = String(today.getDate()).padStart(2, '0');
+        const todayStr = `${year}-${month}-${day}`;
+        
+        // 如果当天有日程，则自动选中当天
+        if (groupedData[todayStr] && groupedData[todayStr].length > 0) {
+          this.selectedScheduleDate = todayStr;
+        }
+      }
+    },
+    hasSchedule(day) {
+      return this.groupedWorkCalendar && this.groupedWorkCalendar[day] && this.groupedWorkCalendar[day].length > 0;
+    },
+    handleDateClick(day) {
+      this.selectedScheduleDate = day;
+    },
+    getScheduleListByDate() {
+      if (this.selectedScheduleDate && this.groupedWorkCalendar[this.selectedScheduleDate]) {
+        return this.groupedWorkCalendar[this.selectedScheduleDate];
+      }
+      return [];
+    },
     handleTo(key) {
       switch(key) {
         case '测试项目':
@@ -423,10 +486,11 @@ export default {
       this.calendarShowMore = !this.calendarShowMore;
       console.log(this.getMonthRange());
       if (this.calendarShowMore) {
-        this.calendarRange = [];
+        this.calendarRange = this.getMonthRange();
       } else {
         this.calendarRange = this.getWeekRange();
       }
+      this.getMyWorkCalendar();
     },
     handleTabClick() {
       // 切换标签页时重置页码
@@ -541,6 +605,31 @@ export default {
       }
     }
     
+    &.calendar-content {
+      max-height: 332px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-right: 8px;
+      
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 3px;
+      }
+      
+      &::-webkit-scrollbar-thumb:hover {
+        background: #a8a8a8;
+      }
+    }
+    
     .common-function {
       display: flex;
       flex-wrap: wrap;