修改日 周 月视图

apps/web-ele/src/views/schedule/view/components/day/index.vue

@@ -249,14 +249,7 @@ function hexToRgb(hex) {
           class="flex items-center justify-between rounded-b-lg border border-t-0 border-gray-200 p-4"
           :style="{ backgroundColor: `rgba(${hexToRgb(task.color)}, 0.35)` }"
         >
-          <div class="flex min-w-0 flex-1 items-center">
-            <div class="min-w-0">
-              <div class="truncate font-medium">
-                {{ task.title }}
-              </div>
-            </div>
-          </div>
-          <div class="flex items-center">
+          <div class="flex items-center" style="margin-right: 8px">
             <span
               class="flex-none rounded px-2 py-0.5 text-xs font-medium"
               :class="{
@@ -268,6 +261,13 @@ function hexToRgb(hex) {
               {{ task.status }}
             </span>
           </div>
+          <div class="flex min-w-0 flex-1 items-center">
+            <div class="min-w-0">
+              <div class="truncate font-medium">
+                {{ task.title }}
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -295,12 +295,7 @@ function hexToRgb(hex) {
           class="flex items-center justify-between rounded-b-lg border border-t-0 border-gray-200 p-4"
           :style="{ backgroundColor: `rgba(${hexToRgb(task.color)}, 0.35)` }"
         >
-          <div class="flex min-w-0 flex-1 items-center">
-            <div class="min-w-0">
-              <div class="truncate font-medium">{{ task.title }}</div>
-            </div>
-          </div>
-          <div class="flex items-center">
+          <div class="flex items-center" style="margin-right: 8px">
             <span
               v-if="task.status"
               class="flex-none rounded px-2 py-0.5 text-xs font-medium"
@@ -313,6 +308,11 @@ function hexToRgb(hex) {
               {{ task.status }}
             </span>
           </div>
+          <div class="flex min-w-0 flex-1 items-center">
+            <div class="min-w-0">
+              <div class="truncate font-medium">{{ task.title }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -340,12 +340,7 @@ function hexToRgb(hex) {
           class="flex items-center justify-between rounded-b-lg border border-t-0 border-gray-200 p-4"
           :style="{ backgroundColor: `rgba(${hexToRgb(task.color)}, 0.35)` }"
         >
-          <div class="flex min-w-0 flex-1 items-center">
-            <div class="min-w-0">
-              <div class="truncate font-medium">{{ task.title }}</div>
-            </div>
-          </div>
-          <div class="flex items-center">
+          <div class="flex items-center" style="margin-right: 8px">
             <span
               v-if="task.status"
               class="flex-none rounded px-2 py-0.5 text-xs font-medium"
@@ -358,6 +353,11 @@ function hexToRgb(hex) {
               {{ task.status }}
             </span>
           </div>
+          <div class="flex min-w-0 flex-1 items-center">
+            <div class="min-w-0">
+              <div class="truncate font-medium">{{ task.title }}</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

apps/web-ele/src/views/schedule/view/components/month/index.vue

@@ -1,15 +1,14 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, defineEmits } from 'vue';
 import { ElCalendar, ElTooltip } from 'element-plus';
-
+import dayjs from 'dayjs';
 // Props from parent component
-const props = defineProps({
-  month: {
-    type: Number,
-    required: true,
-    default: '',
-  },
-});
+const props = defineProps(['month']);
+// const emit = defineEmits(['update:month']);
+// 控制展开状态
+const expandedDates = ref({});
+// 最大显示任务数
+const MAX_DISPLAY_TASKS = 4;
 // 模拟任务数据
 const tasks = ref([
   {
@@ -252,8 +251,47 @@ const tasks = ref([
     status: 'cancelled',
     department: '人力资源部',
   },
+  {
+    id: 31,
+    name: '龙飞街量缸试水检查',
+    date: '2025-12-17',
+    start: '07:59',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 32,
+    name: '龙飞街量缸试水检查',
+    date: '2025-12-17',
+    start: '07:59',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 33,
+    name: '龙飞街量缸试水检查',
+    date: '2025-12-17',
+    start: '07:59',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 34,
+    name: '龙飞街量缸试水检查',
+    date: '2025-12-17',
+    start: '07:59',
+    status: 'processable',
+    department: '管理部',
+  },
+  {
+    id: 35,
+    name: '龙飞街量缸试水检查',
+    date: '2025-12-17',
+    start: '07:59',
+    status: 'processable',
+    department: '管理部',
+  },
 ]);
-
 // Get task status class based on task properties
 const getTaskStatusClass = (task) => {
   switch (task.status) {
@@ -275,7 +313,6 @@ const getTaskStatusClass = (task) => {
     }
   }
 };
-
 // Get tasks for a specific date
 const getTasksForDate = (date) => {
   const dateStr = date.toISOString().split('T')[0];
@@ -286,7 +323,28 @@ const getTasksForDate = (date) => {
     return false;
   });
 };
+// Toggle expand/collapse for a date
+const toggleExpand = (date) => {
+  const dateStr = date.toISOString().split('T')[0];
+  expandedDates.value[dateStr] = !expandedDates.value[dateStr];
+};
 
+// Get filtered tasks based on expand state
+const getFilteredTasks = (date) => {
+  const allTasks = getTasksForDate(date);
+  const dateStr = date.toISOString().split('T')[0];
+  const isExpanded = expandedDates.value[dateStr] || false;
+
+  if (isExpanded || allTasks.length <= MAX_DISPLAY_TASKS) {
+    return allTasks;
+  }
+  return allTasks.slice(0, MAX_DISPLAY_TASKS);
+};
+// Check if a date is expanded
+const isDateExpanded = (date) => {
+  const dateStr = date.toISOString().split('T')[0];
+  return expandedDates.value[dateStr] || false;
+};
 // 状态对应颜色（与其他视图保持一致）
 const statusColor = (status) => {
   switch (status) {
@@ -302,27 +360,31 @@ const statusColor = (status) => {
       return '#CCCCCC';
   }
 };
-
-// Set initial calendar value based on props
-const initialCalendarValue = computed(() => {
-  if (props.month) {
-    // If month prop is provided, use it to set the calendar month
-    return new Date(`2025-${props.month.toString().padStart(2, '0')}-01`);
-  }
-  // Default to December 2025 where there are tasks
-  return new Date('2025-12-01');
-});
+const todayWeek = computed(() => dayjs().day() - 1);
+// const handleDateClick = (data)=>{
+//   console.log(new Date(data.day));
+  
+//   emit('update:month', new Date(data.day));
+// }
+// const isSelectedDate = (dayStr) => {
+//   return dayjs(dayStr).isSame(dayjs(props.month), 'day')
+// }
 </script>
 
 <template>
   <div class="month-schedule">
-    <ElCalendar :model-value="initialCalendarValue">
+    <ElCalendar v-model="props.month">
       <template #date-cell="{ data }">
-        <div class="calendar-cell">
-          <div class="cell-date-number">{{ data.date.getDate() }}</div>
+        <div
+          class="calendar-cell"
+          :class="{ expanded: isDateExpanded(data.date) }"
+        >
+          <div class="cell-date-number">
+            {{ data.date.getDate() }}
+          </div>
           <div class="tasks-container">
             <div
-              v-for="task in getTasksForDate(data.date)"
+              v-for="task in getFilteredTasks(data.date)"
               :key="task.id"
               class="task-item"
               :class="getTaskStatusClass(task)"
@@ -336,13 +398,25 @@ const initialCalendarValue = computed(() => {
                     class="task-dot"
                     :style="{ backgroundColor: statusColor(task.status) }"
                   ></span>
-                  <span v-if="task.start || task.time" class="task-time">{{
-                    task.start || task.time
-                  }}</span>
+                  <span v-if="task.start || task.time" class="task-time">
+                    {{ task.start || task.time }}
+                  </span>
                   <span class="task-name">{{ task.name }}</span>
                 </div>
               </ElTooltip>
             </div>
+            <!-- Expand/Collapse button -->
+            <div
+              v-if="getTasksForDate(data.date).length > MAX_DISPLAY_TASKS"
+              class="expand-button"
+              @click="toggleExpand(data.date)"
+            >
+              {{
+                expandedDates[data.date.toISOString().split('T')[0]]
+                  ? '收起'
+                  : `还有 ${getTasksForDate(data.date).length - MAX_DISPLAY_TASKS} 个日程...`
+              }}
+            </div>
           </div>
         </div>
       </template>
@@ -354,6 +428,71 @@ const initialCalendarValue = computed(() => {
 :deep(.el-calendar__button-group) {
   display: none;
 }
+:deep(.el-calendar-table thead th) {
+  text-align: left;
+  padding-left: 10px;
+  color: #d61111;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+/* 今天对应的星期标题高亮 */
+:deep(.el-calendar-table thead th:nth-child(1)) {
+  /* background-color: v-bind("todayWeek === 0 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 0 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(2)) {
+  /* background-color: v-bind("todayWeek === 1 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 1 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(3)) {
+  /* background-color: v-bind("todayWeek === 2 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 2 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(4)) {
+  /* background-color: v-bind("todayWeek === 3 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 3 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(5)) {
+  /* background-color: v-bind("todayWeek === 4 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 4 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(6)) {
+  /* background-color: v-bind("todayWeek === 5 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 5 ? '#409eff' : '#959DA8'");
+}
+:deep(.el-calendar-table thead th:nth-child(7)) {
+  /* background-color: v-bind("todayWeek === 6 ? '#409eff' : 'transparent'"); */
+  color: v-bind("todayWeek === 6 ? '#409eff' : '#959DA8'");
+}
+
+:deep(.el-calendar-table thead th:nth-child(1)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(2)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(3)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(4)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(5)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(6)):before {
+  content: '周';
+}
+
+:deep(.el-calendar-table thead th:nth-child(7)):before {
+  content: '周';
+}
 .month-schedule {
   width: 100%;
   overflow-x: auto;
@@ -368,16 +507,39 @@ const initialCalendarValue = computed(() => {
   flex-direction: column;
 }
 
+.calendar-cell.expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: #f9f9f9;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 6px 6px 4px 6px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: auto !important;
+  min-height: 150px;
+}
+
+::v-deep .el-calendar-day {
+  position: relative;
+}
+
 .cell-date-number {
   position: absolute;
   top: 6px;
   left: 8px;
   font-size: 12px;
-  color: #666;
+  /* color: #666; */
   font-weight: 600;
   z-index: 3;
 }
-
+.selected {
+  color: #409eff;
+}
 .tasks-container {
   margin-top: 22px;
 }
@@ -409,7 +571,7 @@ const initialCalendarValue = computed(() => {
 }
 
 .status-indicator.processable {
-  background-color: #000;
+  background-color: #67c23a !important;
 }
 
 .status-indicator.overdue {
@@ -439,14 +601,27 @@ const initialCalendarValue = computed(() => {
   flex-direction: column;
 } */
 
+::v-deep .el-calendar-table__row {
+  height: 150px !important;
+}
+
 ::v-deep .el-calendar-table__row .current {
   height: 150px;
 }
 
 ::v-deep .el-calendar-table__row .el-calendar-day {
+  height: 150px !important;
+  min-height: 150px;
+}
+
+::v-deep .el-calendar-table__row .el-calendar-day.expanded {
   height: 150px;
 }
 
+::v-deep .el-calendar-day {
+  position: relative;
+}
+
 .date-text {
   font-weight: bold;
   margin-bottom: 4px;
@@ -454,6 +629,10 @@ const initialCalendarValue = computed(() => {
 
 .tasks-container {
   flex: 1;
+  overflow-y: visible;
+}
+
+.calendar-cell:not(.expanded) .tasks-container {
   overflow-y: auto;
 }
 
@@ -494,6 +673,20 @@ const initialCalendarValue = computed(() => {
   flex: 0 0 40px;
 }
 
+/* Expand button styles */
+.expand-button {
+  font-size: 11px;
+  color: #409eff;
+  cursor: pointer;
+  margin-top: 4px;
+  padding: 2px 0;
+}
+
+.expand-button:hover {
+  /* color: #409eff; */
+  text-decoration: underline;
+}
+
 /* Task status styles */
 .task-item.not-started {
   color: #999;

apps/web-ele/src/views/schedule/view/index.vue

@@ -5,7 +5,13 @@ import { Page, useVbenDrawer } from '@vben/common-ui';
 
 import dayjs from 'dayjs';
 import { ElCheckbox, ElRadioButton, ElRadioGroup } from 'element-plus';
-
+import {
+  Tickets,
+  Plus,
+  User,
+  CaretLeft,
+  CaretRight,
+} from '@element-plus/icons-vue';
 import CreateTasK from './components/create/index.vue';
 import Day from './components/day/index.vue';
 import Month from './components/month/index.vue';
@@ -15,7 +21,7 @@ import Week from './components/week/index.vue';
 const getDefaultDate = (type: string) => {
   switch (type) {
     case 'month': {
-      return dayjs().format('YYYY-MM');
+      return dayjs().format('YYYY-MM-DD');
     }
     case 'week': {
       return dayjs().format('YYYY-MM-DD');
@@ -34,6 +40,7 @@ const searchParams = ref({
 
 // 当前显示的日期
 const currentDate = ref(dayjs());
+const currentDate2 = ref(dayjs()); //单独给月份的时间
 
 // 任务授权状态
 const taskStatuses = ref({
@@ -48,6 +55,22 @@ watch(
   (newType) => {
     searchParams.value.date = getDefaultDate(newType);
     currentDate.value = dayjs(searchParams.value.date);
+    currentDate2.value = dayjs(searchParams.value.date); //单独给月份的时间
+  },
+);
+
+// 确保currentDate和currentDate2始终保持同步
+watch(
+  () => currentDate.value,
+  (newDate) => {
+    currentDate2.value = newDate;
+  },
+);
+//单独给月份的监听器
+watch(
+  () => currentDate2.value,
+  (newDate) => {
+    currentDate.value = newDate;
   },
 );
 
@@ -151,17 +174,17 @@ const calendarDays = computed(() => {
 // 切换到上个月
 const prevMonth = () => {
   currentDate.value = currentDate.value.subtract(1, 'month');
+  currentDate2.value = currentDate2.value.subtract(1, 'month');
 };
 
 // 切换到下个月
 const nextMonth = () => {
   currentDate.value = currentDate.value.add(1, 'month');
+  currentDate2.value = currentDate2.value.add(1, 'month');
 };
 
 // 选择日期
 const selectDate = (date: string) => {
-  console.log(date);
-  
   searchParams.value.date = date;
 };
 
@@ -174,17 +197,7 @@ const [CreateTaskDrawer, createTaskDrawerApi] = useVbenDrawer({
 const createTaskDrawerEvent = () => {
   createTaskDrawerApi.setData({ isUpdate: false }).open();
 };
-
-// 禁止页面滚动
-// const _bodyOverflowBackup = ref('');
-// onMounted(() => {
-//   _bodyOverflowBackup.value = document.body.style.overflow || '';
-//   document.body.style.overflow = 'hidden';
-// });
-// onUnmounted(() => {
-//   document.body.style.overflow = _bodyOverflowBackup.value || '';
-//   _bodyOverflowBackup.value = '';
-// });
+console.log(currentDate.value);
 </script>
 
 <template>
@@ -215,18 +228,28 @@ const createTaskDrawerEvent = () => {
           <div class="flex items-center justify-between">
             <!--时间筛选靠左-->
             <div class="flex items-center space-x-2">
-              <ElButton type="text" @click="prevMonth">&lt;</ElButton>
+              <el-icon><CaretLeft @click="prevMonth" /></el-icon>
               <span class="font-medium">{{
                 currentDate.format('YYYY年 M月')
               }}</span>
-              <ElButton type="text" @click="nextMonth">&gt;</ElButton>
+              <el-icon><CaretRight @click="nextMonth" /></el-icon>
             </div>
 
             <!--视图切换靠右-->
-            <ElRadioGroup v-model="searchParams.timeType" size="small">
-              <ElRadioButton label="day">日</ElRadioButton>
-              <ElRadioButton label="week">周</ElRadioButton>
-              <ElRadioButton label="month">月</ElRadioButton>
+            <ElRadioGroup
+              v-model="searchParams.timeType"
+              size="small"
+              class="custom-radio-group"
+            >
+              <ElRadioButton label="day" class="custom-radio-btn"
+                >日</ElRadioButton
+              >
+              <ElRadioButton label="week" class="custom-radio-btn"
+                >周</ElRadioButton
+              >
+              <ElRadioButton label="month" class="custom-radio-btn"
+                >月</ElRadioButton
+              >
             </ElRadioGroup>
           </div>
 
@@ -248,11 +271,16 @@ const createTaskDrawerEvent = () => {
               <div
                 v-for="day in calendarDays"
                 :key="day.date"
+                :style="
+                  day.date === '2025-12-22' || day.date === '2025-12-23'
+                    ? 'background-color: #FFE6E0'
+                    : day.isInCurrentWeek && !day.isToday
+                      ? 'background-color: #E6E8EB'
+                      : ''
+                "
                 class="flex h-7 w-7 cursor-pointer items-center justify-center rounded text-xs"
                 :class="{
-                  'bg-blue-100 text-blue-600': day.isToday,
-                  'bg-blue-50 text-blue-700':
-                    day.isInCurrentWeek && !day.isToday,
+                  'bg-blue-600 text-white': day.isToday,
                   'bg-gray-100 text-gray-400': day.isOtherMonth,
                   'hover:bg-gray-100': !day.isOtherMonth,
                 }"
@@ -267,7 +295,7 @@ const createTaskDrawerEvent = () => {
         <!--任务授权状态-->
         <div class="mb-4">
           <div class="mb-2 font-medium">任务授权状态：</div>
-          <div class="space-y-1">
+          <div class="space-y-1" style="display: flex; flex-direction: column">
             <ElCheckbox v-model="taskStatuses.canAuthorize">
               任务可授权
             </ElCheckbox>
@@ -288,11 +316,25 @@ const createTaskDrawerEvent = () => {
               class="w-full"
               @click="createTaskDrawerEvent"
             >
-              + 油站新增任务
+              <template #icon>
+                <el-icon><Plus /></el-icon> </template
+              >油站新增任务
             </ElButton>
           </div>
           <div class="mt-1 space-y-2">
-            <ElButton type="default" class="w-full"> + 访客新增任务 </ElButton>
+            <ElButton type="default" class="w-full"
+              ><template #icon>
+                <el-icon><User /></el-icon> </template
+              >访客新增任务
+            </ElButton>
+          </div>
+          <div class="mt-1 space-y-2">
+            <ElButton type="default" class="w-full">
+              <template #icon>
+                <el-icon><Tickets /></el-icon>
+              </template>
+              工单提报
+            </ElButton>
           </div>
         </div>
       </div>
@@ -312,7 +354,7 @@ const createTaskDrawerEvent = () => {
             />
             <Month
               v-if="searchParams.timeType === 'month'"
-              :month="currentDate.month() + 1"
+              :month="currentDate"
             />
           </div>
         </ElCard>
@@ -321,3 +363,36 @@ const createTaskDrawerEvent = () => {
     <CreateTaskDrawer />
   </Page>
 </template>
+<style scoped lang="scss">
+// :deep(.el-card) {
+//   border: none !important;
+//   box-shadow: none !important;
+//   background: transparent !important;
+// }
+
+:deep(.custom-radio-group .el-radio-button) {
+  border: none !important;
+  // background: transparent !important;
+  background-color: #fafafa !important;
+  padding: 4px;
+}
+
+:deep(.custom-radio-group .el-radio-button__inner) {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 8px;
+}
+
+:deep(.custom-radio-group .el-radio-button__inner:hover) {
+  color: #1890ff !important;
+  background: transparent !important;
+}
+
+:deep(.custom-radio-group .el-radio-button.is-active .el-radio-button__inner) {
+  background: transparent !important;
+  color: #1890ff !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+</style>