econtrol-tools-calendar 1.0.9 → 1.0.11

package/README.md

@@ -97,6 +97,10 @@ const holidays = {
 
 // 事件处理函数
 function handleEventAdded(event: EventInput) {
+  // 如果事件没有ID，生成一个唯一ID（事件ID应该由外部提供）
+  if (!event.id) {
+    event.id = `event-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
   events.value.push(event);
   ElMessage.success("事件已添加");
 }
@@ -109,9 +113,11 @@ function handleEventUpdated(event: EventInput) {
   }
 }
 
-function handleEventDeleted(eventId: string) {
-  events.value = events.value.filter((e) => e.id !== eventId);
-  ElMessage.success("事件已删除");
+function handleEventDeleted(event: EventInput) {
+  events.value = events.value.filter((e) => e.id !== event.id);
+  ElMessage.success(`事件"${event.title}"已删除`);
+  // 可以在这里调用 API 删除事件
+  // await deleteEventFromAPI(event);
 }
 
 function handleEventsChange(newEvents: EventInput[]) {
@@ -217,8 +223,9 @@ interface HolidayData {
 | `quickAddSaved` | `event: EventInput`    | 快速添加事件保存后触发               |
 | `eventAdded`    | `event: EventInput`    | 事件添加后触发                       |
 | `eventUpdated`  | `event: EventInput`    | 事件更新后触发                       |
-| `eventDeleted`  | `eventId: string`      | 事件删除后触发                       |
+| `eventDeleted`  | `event: EventInput`    | 事件删除后触发，包含完整的事件详情   |
 | `eventsChange`  | `events: EventInput[]` | 事件列表变化后触发，包含当前所有事件 |
+| `deviceClick`   | `deviceId: string`     | 点击设备名称时触发，传递设备 ID      |
 
 ### EventInput 类型
 
@@ -337,6 +344,10 @@ const quickAddTimeRange = ref({
 
 // 事件处理函数
 function handleEventAdded(event: EventInput) {
+  // 如果事件没有ID，生成一个唯一ID（事件ID应该由外部提供）
+  if (!event.id) {
+    event.id = `event-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
   events.value.push(event);
   ElMessage.success("事件已添加");
   // 可以在这里调用 API 保存事件
@@ -353,11 +364,11 @@ function handleEventUpdated(event: EventInput) {
   }
 }
 
-function handleEventDeleted(eventId: string) {
-  events.value = events.value.filter((e) => e.id !== eventId);
-  ElMessage.success("事件已删除");
+function handleEventDeleted(event: EventInput) {
+  events.value = events.value.filter((e) => e.id !== event.id);
+  ElMessage.success(`事件"${event.title}"已删除`);
   // 可以在这里调用 API 删除事件
-  // await deleteEventFromAPI(eventId);
+  // await deleteEventFromAPI(event);
 }
 
 function handleEventsChange(newEvents: EventInput[]) {
@@ -366,6 +377,12 @@ function handleEventsChange(newEvents: EventInput[]) {
   // await syncEventsToAPI(newEvents);
 }
 
+function handleDeviceClick(deviceId: string) {
+  console.log("点击了设备:", deviceId);
+  // 可以在这里处理设备点击逻辑，比如打开设备详情页面、跳转路由等
+  // router.push(`/device/${deviceId}`);
+}
+
 function handleQuickAddSaved(event: EventInput) {
   console.log("快速添加的事件:", event);
   // 处理快速添加逻辑
@@ -387,8 +404,9 @@ function handleQuickAddSaved(event: EventInput) {
       :userinfo="userinfo"
       @event-added="(event) => handleEventAdded(device.id, event)"
       @event-updated="(event) => handleEventUpdated(device.id, event)"
-      @event-deleted="(eventId) => handleEventDeleted(device.id, eventId)"
+      @event-deleted="(event) => handleEventDeleted(device.id, event)"
       @events-change="(events) => handleEventsChange(device.id, events)"
+      @device-click="(deviceId) => handleDeviceClick(deviceId)"
     />
   </div>
 </template>
@@ -426,17 +444,27 @@ function handleEventUpdated(deviceId: string, event: EventInput) {
   }
 }
 
-function handleEventDeleted(deviceId: string, eventId: string) {
+function handleEventDeleted(deviceId: string, event: EventInput) {
   if (deviceEvents.value[deviceId]) {
     deviceEvents.value[deviceId] = deviceEvents.value[deviceId].filter(
-      (e) => e.id !== eventId
+      (e) => e.id !== event.id
     );
+    ElMessage.success(`事件"${event.title}"已删除`);
+    // 可以在这里调用 API 删除事件
+    // await deleteEventFromAPI(event);
   }
 }
+}
 
 function handleEventsChange(deviceId: string, events: EventInput[]) {
   deviceEvents.value[deviceId] = events;
 }
+
+function handleDeviceClick(deviceId: string) {
+  console.log("点击了设备:", deviceId);
+  // 可以在这里处理设备点击逻辑，比如打开设备详情页面、跳转路由等
+  // router.push(`/device/${deviceId}`);
+}
 </script>
 ```
 
@@ -521,15 +549,17 @@ pnpm preview
 
 2. **事件格式**：事件的时间格式必须使用 ISO 8601 格式（`YYYY-MM-DDTHH:mm:ss`），例如：`"2025-01-15T10:00:00"`。
 
-3. **权限控制**：通过 `userinfo` prop 控制事件的可编辑性，只有 `extendedProps.organizerId` 匹配 `userinfo.userid` 的事件才能被修改。
+3. **事件 ID**：组件不会自动生成事件 ID，事件 ID 应该由外部（App.vue）的事件列表提供。当组件 emit `eventAdded` 事件时，如果事件没有 ID，父组件应该生成 ID 并更新 `events` prop。
+
+4. **权限控制**：通过 `userinfo` prop 控制事件的可编辑性，只有 `extendedProps.organizerId` 匹配 `userinfo.userid` 的事件才能被修改。
 
-4. **用户信息**：组件会显示 `username` 作为预订人，并在事件数据中保存 `username` 和 `organizerId`。
+5. **用户信息**：组件会显示 `username` 作为预订人，并在事件数据中保存 `username` 和 `organizerId`。
 
-5. **设备信息**：组件头部显示设备名称（`deviceInfo.name`），设备 ID（`deviceId`）作为关键字段保存在事件数据中。
+6. **设备信息**：组件头部显示设备名称（`deviceInfo.name`），设备 ID（`deviceId`）作为关键字段保存在事件数据中。
 
-6. **时间冲突**：当 `allowOverlap` 为 `false` 时，组件会自动检查时间冲突，不允许创建重叠的事件。
+7. **时间冲突**：当 `allowOverlap` 为 `false` 时，组件会自动检查时间冲突，不允许创建重叠的事件。
 
-7. **节假日显示**：节假日数据格式为 `{ "YYYY-MM-DD": "节假日名称" }`，传入 `holidays` prop 后会在日历上高亮显示。
+8. **节假日显示**：节假日数据格式为 `{ "YYYY-MM-DD": "节假日名称" }`，传入 `holidays` prop 后会在日历上高亮显示。
 
 ## 📄 许可证
 

package/dist/calendar.js

@@ -100,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     holidays: { default: null },
     events: { default: () => [] }
   },
-  emits: ["quickAddSaved", "eventAdded", "eventUpdated", "eventDeleted", "eventsChange"],
+  emits: ["quickAddSaved", "eventAdded", "eventUpdated", "eventDeleted", "eventsChange", "deviceClick"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -200,11 +200,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const eventOrganizerId = ((_a = event.extendedProps) == null ? void 0 : _a.organizerId) || "";
       return eventOrganizerId === currentUserId.value;
     }
-    const events = ref([...props.events]);
+    function normalizeEventTime(time) {
+      if (!time) return void 0;
+      if (time instanceof Date) {
+        return time;
+      }
+      if (typeof time === "number") {
+        return new Date(time);
+      }
+      if (typeof time === "string") {
+        if (time.includes("T")) {
+          return time;
+        }
+        const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
+        if (dateOnlyPattern.test(time)) {
+          const normalizedTime = `${time} 00:00:00`;
+          return formatToISO(normalizedTime);
+        }
+        const dateTimePattern = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
+        if (dateTimePattern.test(time)) {
+          return formatToISO(time);
+        }
+        return time;
+      }
+      return time;
+    }
+    function normalizeEvent(event) {
+      return {
+        ...event,
+        start: normalizeEventTime(event.start),
+        end: normalizeEventTime(event.end)
+      };
+    }
+    const events = ref(
+      (props.events || []).map((event) => normalizeEvent(event))
+    );
     watch(
       () => props.events,
       (newEvents) => {
-        events.value = [...newEvents || []];
+        events.value = (newEvents || []).map((event) => normalizeEvent(event));
       },
       { deep: true, immediate: true }
     );
@@ -803,7 +837,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!props.deviceId) {
         return;
       }
-      deviceDialogVisible.value = true;
+      emit("deviceClick", props.deviceId);
     }
     function handleAddEvent() {
       if (props.isOccupied) {
@@ -869,15 +903,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ElMessage.error("该时间段与其他事件冲突，请选择其他时间");
         return;
       }
-      const eventId = `event-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
       const taskId = formData.taskid || props.taskid || "";
+      const tempEventId = taskId && taskId === props.taskid ? taskId : void 0;
       const colorInfo = assignEventColor(
         startStr,
         endStr,
         void 0,
         currentUser.value,
-        eventId,
-        // 传入事件ID用于颜色分配
+        tempEventId,
+        // 传入临时ID用于颜色分配（如果taskid匹配）
         taskId
         // 传入 taskid 用于颜色分配
       );
@@ -887,7 +921,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const eventOrganizerId = currentUserId.value;
       const editable = !currentUserId.value || eventOrganizerId === currentUserId.value;
       const newEvent = {
-        id: eventId,
+        // 不设置 id，由外部 App.vue 的事件列表提供
         title: props.quickAddTaskName,
         start: startISO,
         end: endISO,
@@ -1083,21 +1117,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ElMessage.error("该时间段与其他事件冲突，请选择其他时间");
         return;
       }
-      let eventId = (_b = editingEvent.value) == null ? void 0 : _b.id;
-      if (!eventId) {
-        if (formData.taskid && formData.taskid.trim() && formData.taskid === props.taskid) {
-          eventId = formData.taskid;
-        } else {
-          eventId = `event-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        }
-      }
+      const eventId = (_b = editingEvent.value) == null ? void 0 : _b.id;
+      const tempEventId = eventId || (formData.taskid && formData.taskid === props.taskid ? formData.taskid : void 0);
       const colorInfo = assignEventColor(
         formData.start,
         formData.end,
         (_c = editingEvent.value) == null ? void 0 : _c.id,
         formData.organizer || currentUser.value,
-        eventId,
-        // 传入事件ID用于颜色分配
+        tempEventId,
+        // 传入临时ID用于颜色分配（编辑时使用eventId，新增时如果taskid匹配使用taskid）
         formData.taskid
         // 传入 taskid 用于颜色分配
       );
@@ -1167,8 +1195,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const eventOrganizerId = formData.organizerId || currentUserId.value;
         const editable = !currentUserId.value || eventOrganizerId === currentUserId.value;
         const newEvent = {
-          id: eventId,
-          // 使用之前生成的事件ID
+          // 不设置 id，由外部 App.vue 的事件列表提供
+          // 如果 taskid 匹配 props.taskid，可以设置 id 为 taskid（可选）
+          ...formData.taskid && formData.taskid === props.taskid ? { id: formData.taskid } : {},
           title: formData.title,
           start: startISO,
           end: endISO,
@@ -1198,12 +1227,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       resetForm();
     }
     function handleDelete() {
+      var _a, _b, _c;
       if (editingEvent.value) {
         const eventId = editingEvent.value.id;
+        const deletedEvent = {
+          id: eventId || "",
+          title: editingEvent.value.title,
+          start: ((_a = editingEvent.value.start) == null ? void 0 : _a.toISOString()) || "",
+          end: (_b = editingEvent.value.end) == null ? void 0 : _b.toISOString(),
+          allDay: editingEvent.value.allDay || false,
+          backgroundColor: editingEvent.value.backgroundColor,
+          borderColor: editingEvent.value.borderColor,
+          editable: (_c = editingEvent.value.extendedProps) == null ? void 0 : _c.editable,
+          extendedProps: {
+            ...editingEvent.value.extendedProps || {}
+          }
+        };
         editingEvent.value.remove();
         dialogVisible.value = false;
         resetForm();
-        emit("eventDeleted", eventId || "");
+        emit("eventDeleted", deletedEvent);
         const newEventsList = events.value.filter((e) => e.id !== eventId);
         emit("eventsChange", newEventsList);
       }
@@ -1465,6 +1508,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "value-format": "YYYY-MM-DD HH:mm:ss",
                       "disabled-date": disabledPastDate,
                       key: `start-${formData.start || "empty"}`,
+                      "append-to-body": "",
+                      "z-index": 3001,
                       style: { "width": "100%" }
                     }, null, 8, ["modelValue"]))
                   ]),
@@ -1481,6 +1526,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "value-format": "YYYY-MM-DD HH:mm:ss",
                       "disabled-date": disabledPastDate,
                       key: `end-${formData.end || "empty"}`,
+                      "append-to-body": "",
+                      "z-index": 3001,
                       style: { "width": "100%" }
                     }, null, 8, ["modelValue"]))
                   ]),
@@ -1612,7 +1659,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-337c51f8"]]);
+const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c28885e3"]]);
 function getHolidays(year) {
   const holidays = {};
   if (year === 2026) {