econtrol-tools-calendar 1.0.12 → 1.0.16

package/README.md

@@ -11,7 +11,7 @@
 - 🏷️ 支持节假日显示
 - 🔒 支持权限控制（基于用户信息）
 - 👤 支持用户信息管理（用户 ID 和用户名）
-- ⚡ 支持快速添加事件
+- ⚡ 支持快速添加事件（打开弹窗确认后保存）
 - 📦 TypeScript 支持
 - 🔄 单向数据流，所有操作通过事件通知父组件
 
@@ -173,18 +173,18 @@ app.mount("#app");
 
 ### Props
 
-| 属性名              | 类型                                     | 默认值  | 说明                                                   |
-| ------------------- | ---------------------------------------- | ------- | ------------------------------------------------------ |
-| `isOccupied`        | `boolean`                                | `false` | 是否处于占用状态，为 true 时不能新增事件               |
-| `allowOverlap`      | `boolean`                                | `true`  | 是否允许时间冲突，为 false 时不允许事件时间重合        |
-| `userinfo`          | `UserInfo \| null`                       | `null`  | 当前用户信息，包含 `userid` 和 `username`              |
-| `deviceId`          | `string`                                 | `''`    | 设备 ID，用于标识事件所属的设备（关键字段）            |
-| `deviceInfo`        | `DeviceInfo \| null`                     | `null`  | 设备详细信息，用于显示设备名称                         |
-| `taskid`            | `string`                                 | `''`    | 当前任务 ID，匹配的事件显示红色                        |
-| `quickAddTimeRange` | `{ start: string; end: string } \| null` | `null`  | 快速添加的时间段（ISO 格式）                           |
-| `quickAddTaskName`  | `string`                                 | `''`    | 快速添加的任务名称                                     |
-| `holidays`          | `HolidayData \| null`                    | `null`  | 节假日数据对象，格式: `{ "YYYY-MM-DD": "节假日名称" }` |
-| `events`            | `EventInput[]`                           | `[]`    | 事件列表，从外部传入的任务数据                         |
+| 属性名              | 类型                                     | 默认值  | 说明                                                                    |
+| ------------------- | ---------------------------------------- | ------- | ----------------------------------------------------------------------- |
+| `isOccupied`        | `boolean`                                | `false` | 是否处于占用状态，为 true 时不能新增事件                                |
+| `allowOverlap`      | `boolean`                                | `true`  | 是否允许时间冲突，为 false 时不允许事件时间重合                         |
+| `userinfo`          | `UserInfo \| null`                       | `null`  | 当前用户信息，包含 `userid` 和 `username`                               |
+| `deviceId`          | `string`                                 | `''`    | 设备 ID，用于标识事件所属的设备（关键字段）                             |
+| `deviceInfo`        | `DeviceInfo \| null`                     | `null`  | 设备详细信息，用于显示设备名称                                          |
+| `taskid`            | `string`                                 | `''`    | 当前任务 ID，当事件的 `extendedProps.taskid` 与此值匹配时，事件显示红色 |
+| `quickAddTimeRange` | `{ start: string; end: string } \| null` | `null`  | 快速添加的时间段（ISO 格式），设置后会显示"快速添加"按钮                |
+| `quickAddTaskName`  | `string`                                 | `''`    | 快速添加的任务名称，点击"快速添加"按钮后会填入表单                      |
+| `holidays`          | `HolidayData \| null`                    | `null`  | 节假日数据对象，格式: `{ "YYYY-MM-DD": "节假日名称" }`                  |
+| `events`            | `EventInput[]`                           | `[]`    | 事件列表，从外部传入的任务数据                                          |
 
 #### UserInfo 接口
 
@@ -218,14 +218,14 @@ interface HolidayData {
 
 ### Events
 
-| 事件名          | 参数                   | 说明                                 |
-| --------------- | ---------------------- | ------------------------------------ |
-| `quickAddSaved` | `event: EventInput`    | 快速添加事件保存后触发               |
-| `eventAdded`    | `event: EventInput`    | 事件添加后触发                       |
-| `eventUpdated`  | `event: EventInput`    | 事件更新后触发                       |
-| `eventDeleted`  | `event: EventInput`    | 事件删除后触发，包含完整的事件详情   |
-| `eventsChange`  | `events: EventInput[]` | 事件列表变化后触发，包含当前所有事件 |
-| `deviceClick`   | `deviceId: string`     | 点击设备名称时触发，传递设备 ID      |
+| 事件名          | 参数                   | 说明                                                                 |
+| --------------- | ---------------------- | -------------------------------------------------------------------- |
+| `quickAddSaved` | `event: EventInput`    | 快速添加事件保存后触发（已废弃，快速添加现在通过 `eventAdded` 触发） |
+| `eventAdded`    | `event: EventInput`    | 事件添加后触发（包括快速添加确认保存后）                             |
+| `eventUpdated`  | `event: EventInput`    | 事件更新后触发                                                       |
+| `eventDeleted`  | `event: EventInput`    | 事件删除后触发，包含完整的事件详情                                   |
+| `eventsChange`  | `events: EventInput[]` | 事件列表变化后触发，包含当前所有事件                                 |
+| `deviceClick`   | `deviceId: string`     | 点击设备名称时触发，传递设备 ID                                      |
 
 ### EventInput 类型
 
@@ -247,7 +247,7 @@ interface EventInput {
     organizerId?: string; // 用户ID（推荐使用）
     description?: string; // 描述
     deviceId?: string; // 设备ID（关键字段）
-    taskid?: string; // 任务ID
+    taskid?: string; // 任务ID，用于匹配 props.taskid，匹配的事件会显示红色
     colorIndex?: number; // 颜色索引
     [key: string]: any;
   };
@@ -271,12 +271,12 @@ interface EventInput {
       :holidays="holidays"
       :events="events"
       :quick-add-time-range="quickAddTimeRange"
-      quick-add-task-name="快速添加任务"
+      :quick-add-task-name="quickAddTaskName"
       @event-added="handleEventAdded"
       @event-updated="handleEventUpdated"
       @event-deleted="handleEventDeleted"
       @events-change="handleEventsChange"
-      @quick-add-saved="handleQuickAddSaved"
+      @device-click="handleDeviceClick"
     />
   </div>
 </template>
@@ -300,6 +300,7 @@ const userinfo = ref({
 });
 
 const deviceId = ref("device-001");
+// 当前任务ID：当事件的 extendedProps.taskid 与此值匹配时，事件会显示红色
 const currentTaskId = ref("task-001");
 
 // 设备信息
@@ -328,7 +329,7 @@ const events = ref<EventInput[]>([
       organizerId: "user123",
       description: "每周团队例会",
       deviceId: "device-001",
-      taskid: "task-001",
+      taskid: "task-001", // 如果此值与 props.taskid 匹配，事件会显示红色
     },
   },
 ]);
@@ -337,10 +338,14 @@ const events = ref<EventInput[]>([
 const holidays = ref(getHolidays(2025));
 
 // 快速添加配置
+// 设置 quickAddTimeRange 和 quickAddTaskName 后，组件会显示"快速添加"按钮
+// 点击"快速添加"按钮后，会将时间段和任务名称填入表单并打开弹窗
+// 用户可以在弹窗中确认或修改后点击保存，保存后会触发 eventAdded 事件
 const quickAddTimeRange = ref({
   start: "2025-01-16T10:00:00",
   end: "2025-01-16T12:00:00",
 });
+const quickAddTaskName = ref("快速添加任务");
 
 // 事件处理函数
 function handleEventAdded(event: EventInput) {
@@ -382,11 +387,6 @@ function handleDeviceClick(deviceId: string) {
   // 可以在这里处理设备点击逻辑，比如打开设备详情页面、跳转路由等
   // router.push(`/device/${deviceId}`);
 }
-
-function handleQuickAddSaved(event: EventInput) {
-  console.log("快速添加的事件:", event);
-  // 处理快速添加逻辑
-}
 </script>
 ```
 
@@ -400,6 +400,7 @@ function handleQuickAddSaved(event: EventInput) {
       :key="device.id"
       :device-id="device.id"
       :device-info="device"
+      :taskid="currentTaskId"
       :events="deviceEvents[device.id] || []"
       :userinfo="userinfo"
       @event-added="(event) => handleEventAdded(device.id, event)"
@@ -413,17 +414,43 @@ function handleQuickAddSaved(event: EventInput) {
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { ElMessage } from "element-plus";
 import { SCalendarComponent } from "econtrol-tools-calendar";
 import type { EventInput } from "@fullcalendar/core";
 
+// 当前任务ID：匹配的事件会显示红色
+const currentTaskId = ref("task-001");
+
 const devices = ref([
   { id: "device-001", name: "设备1" },
   { id: "device-002", name: "设备2" },
 ]);
 
 const deviceEvents = ref<Record<string, EventInput[]>>({
-  "device-001": [],
-  "device-002": [],
+  "device-001": [
+    {
+      id: "event-1",
+      title: "会议1",
+      start: "2025-01-15T10:00:00",
+      end: "2025-01-15T11:00:00",
+      extendedProps: {
+        taskid: "task-001", // 匹配 currentTaskId，会显示红色
+        deviceId: "device-001",
+      },
+    },
+  ],
+  "device-002": [
+    {
+      id: "event-2",
+      title: "会议2",
+      start: "2025-01-15T14:00:00",
+      end: "2025-01-15T15:00:00",
+      extendedProps: {
+        taskid: "task-002", // 不匹配 currentTaskId，显示其他颜色
+        deviceId: "device-002",
+      },
+    },
+  ],
 });
 
 function handleEventAdded(deviceId: string, event: EventInput) {
@@ -454,7 +481,6 @@ function handleEventDeleted(deviceId: string, event: EventInput) {
     // await deleteEventFromAPI(event);
   }
 }
-}
 
 function handleEventsChange(deviceId: string, events: EventInput[]) {
   deviceEvents.value[deviceId] = events;
@@ -561,6 +587,27 @@ pnpm preview
 
 8. **节假日显示**：节假日数据格式为 `{ "YYYY-MM-DD": "节假日名称" }`，传入 `holidays` prop 后会在日历上高亮显示。
 
+9. **快速添加功能**：
+
+   - 设置 `quickAddTimeRange` 和 `quickAddTaskName` props 后，组件会显示"快速添加"按钮
+   - 点击"快速添加"按钮后，会将时间段和任务名称填入表单并打开弹窗
+   - 用户可以在弹窗中确认或修改后点击保存
+   - 保存后会触发 `eventAdded` 事件，而不是直接保存
+   - 如果快速添加的时间段不在当前视图范围内，日历会自动导航到该时间段
+
+10. **时间格式兼容**：组件支持多种时间格式输入：
+
+    - 如果传入的时间只包含日期（如 `"2025-01-15"`），会自动补全为 `"2025-01-15T00:00:00"`
+    - 支持 ISO 格式（`"2025-01-15T10:00:00"`）
+    - 支持 `YYYY-MM-DD HH:mm:ss` 格式（会自动转换为 ISO 格式）
+
+11. **任务 ID 和红色显示**：
+    - `taskid` prop 用于标识当前任务 ID
+    - 当事件的 `extendedProps.taskid` 字段与 `props.taskid` 匹配时，该事件会显示为红色（`#FF0000`）
+    - 判断逻辑：`event.extendedProps.taskid === props.taskid`
+    - 如果 `props.taskid` 为空字符串，所有事件显示为黑色
+    - 不匹配的事件会根据其 `id` 分配其他颜色
+
 ## 📄 许可证
 
 MIT

package/dist/calendar.js

@@ -244,7 +244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const editableEvents = computed(() => {
       return events.value.map((event) => {
-        var _a;
+        var _a, _b;
         const eventOrganizerId = ((_a = event.extendedProps) == null ? void 0 : _a.organizerId) || "";
         let editable = !currentUserId.value || eventOrganizerId === currentUserId.value;
         let eventStart = "";
@@ -263,13 +263,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (!props.taskid) {
           backgroundColor = myEventColor.bg;
           borderColor = myEventColor.border;
-        } else if (event.id === props.taskid) {
-          backgroundColor = taskColor.bg;
-          borderColor = taskColor.border;
         } else {
-          const colorIndex = getTaskColorIndex(event.id);
-          backgroundColor = eventColors[colorIndex].bg;
-          borderColor = eventColors[colorIndex].border;
+          const eventTaskId = (_b = event.extendedProps) == null ? void 0 : _b.taskid;
+          if (eventTaskId === props.taskid) {
+            backgroundColor = taskColor.bg;
+            borderColor = taskColor.border;
+          } else {
+            const colorIndex = getTaskColorIndex(event.id);
+            backgroundColor = eventColors[colorIndex].bg;
+            borderColor = eventColors[colorIndex].border;
+          }
         }
         return {
           ...event,
@@ -643,22 +646,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!eventId) {
         return props.taskid ? "#409eff" : myEventColor.bg;
       }
-      if (props.taskid && eventId === props.taskid) {
-        return taskColor.bg;
-      }
       if (!props.taskid) {
         return myEventColor.bg;
       }
-      if (props.taskid && eventId) {
-        const existingEvent = events.value.find((e) => {
-          var _a2;
-          const eventTaskId = (_a2 = e.extendedProps) == null ? void 0 : _a2.taskid;
-          return eventTaskId === props.taskid;
-        });
-        if (existingEvent) {
-          return taskColor.bg;
-        }
-      }
       const originalEvent = events.value.find((e) => e.id === eventId);
       if (originalEvent) {
         const eventTaskId = (_a = originalEvent.extendedProps) == null ? void 0 : _a.taskid;
@@ -878,13 +868,31 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ElMessage.warning("未提供快速添加的任务名称");
         return;
       }
-      const startStr = formatFromISO(props.quickAddTimeRange.start);
-      const endStr = formatFromISO(props.quickAddTimeRange.end);
+      const normalizeQuickAddTime = (time) => {
+        if (!time) return time;
+        if (/^\d{4}-\d{2}-\d{2}$/.test(time)) {
+          return time + "T00:00:00";
+        }
+        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(time)) {
+          return time.replace(" ", "T");
+        }
+        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(time)) {
+          return time.replace(" ", "T") + ":00";
+        }
+        if (time.includes("T")) {
+          return time;
+        }
+        return time;
+      };
+      const normalizedStart = normalizeQuickAddTime(props.quickAddTimeRange.start);
+      const normalizedEnd = normalizeQuickAddTime(props.quickAddTimeRange.end);
+      const startStr = formatFromISO(normalizedStart);
+      const endStr = formatFromISO(normalizedEnd);
       if (calendarRef.value) {
         try {
           const calendarApi = calendarRef.value.getApi();
           const currentView = calendarApi.view;
-          const quickAddStartDate = new Date(props.quickAddTimeRange.start);
+          const quickAddStartDate = new Date(normalizedStart);
           const viewStart = new Date(currentView.activeStart);
           const viewEnd = new Date(currentView.activeEnd);
           const isInView = quickAddStartDate >= viewStart && quickAddStartDate < viewEnd;
@@ -1023,6 +1031,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return false;
     }
     function assignEventColor(_start, _end, _excludeEventId, _organizer, eventId, eventTaskId) {
+      var _a;
       if (!props.taskid) {
         return {
           ...myEventColor,
@@ -1030,13 +1039,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           // 使用 -1 表示黑色
         };
       }
-      if (eventId && eventId === props.taskid) {
-        return {
-          ...taskColor,
-          index: -2
-          // 使用 -2 表示红色（当前任务）
-        };
-      }
       if (eventTaskId && eventTaskId === props.taskid) {
         return {
           ...taskColor,
@@ -1045,17 +1047,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       }
       if (props.taskid && eventId) {
-        const existingEvent = events.value.find((e) => {
-          var _a;
-          const eventTaskId2 = (_a = e.extendedProps) == null ? void 0 : _a.taskid;
-          return eventTaskId2 === props.taskid;
-        });
+        const existingEvent = events.value.find((e) => e.id === eventId);
         if (existingEvent) {
-          return {
-            ...taskColor,
-            index: -2
-            // 使用 -2 表示红色（当前任务）
-          };
+          const existingEventTaskId = (_a = existingEvent.extendedProps) == null ? void 0 : _a.taskid;
+          if (existingEventTaskId === props.taskid) {
+            return {
+              ...taskColor,
+              index: -2
+              // 使用 -2 表示红色（当前任务）
+            };
+          }
         }
       }
       const taskIdForColor = eventId || `temp-${Date.now()}-${Math.random()}`;
@@ -1630,7 +1631,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3dbf0c7a"]]);
+const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a553c156"]]);
 function getHolidays(year) {
   const holidays = {};
   if (year === 2026) {