econtrol-tools-calendar 1.0.11 → 1.0.13

package/README.md

@@ -11,7 +11,7 @@
 - 🏷️ 支持节假日显示
 - 🔒 支持权限控制（基于用户信息）
 - 👤 支持用户信息管理（用户 ID 和用户名）
-- ⚡ 支持快速添加事件
+- ⚡ 支持快速添加事件（打开弹窗确认后保存）
 - 📦 TypeScript 支持
 - 🔄 单向数据流，所有操作通过事件通知父组件
 
@@ -181,8 +181,8 @@ app.mount("#app");
 | `deviceId`          | `string`                                 | `''`    | 设备 ID，用于标识事件所属的设备（关键字段）            |
 | `deviceInfo`        | `DeviceInfo \| null`                     | `null`  | 设备详细信息，用于显示设备名称                         |
 | `taskid`            | `string`                                 | `''`    | 当前任务 ID，匹配的事件显示红色                        |
-| `quickAddTimeRange` | `{ start: string; end: string } \| null` | `null`  | 快速添加的时间段（ISO 格式）                           |
-| `quickAddTaskName`  | `string`                                 | `''`    | 快速添加的任务名称                                     |
+| `quickAddTimeRange` | `{ start: string; end: string } \| null` | `null`  | 快速添加的时间段（ISO 格式），设置后会显示"快速添加"按钮 |
+| `quickAddTaskName`  | `string`                                 | `''`    | 快速添加的任务名称，点击"快速添加"按钮后会填入表单       |
 | `holidays`          | `HolidayData \| null`                    | `null`  | 节假日数据对象，格式: `{ "YYYY-MM-DD": "节假日名称" }` |
 | `events`            | `EventInput[]`                           | `[]`    | 事件列表，从外部传入的任务数据                         |
 
@@ -220,8 +220,8 @@ interface HolidayData {
 
 | 事件名          | 参数                   | 说明                                 |
 | --------------- | ---------------------- | ------------------------------------ |
-| `quickAddSaved` | `event: EventInput`    | 快速添加事件保存后触发               |
-| `eventAdded`    | `event: EventInput`    | 事件添加后触发                       |
+| `quickAddSaved` | `event: EventInput`    | 快速添加事件保存后触发（已废弃，快速添加现在通过 `eventAdded` 触发） |
+| `eventAdded`    | `event: EventInput`    | 事件添加后触发（包括快速添加确认保存后） |
 | `eventUpdated`  | `event: EventInput`    | 事件更新后触发                       |
 | `eventDeleted`  | `event: EventInput`    | 事件删除后触发，包含完整的事件详情   |
 | `eventsChange`  | `events: EventInput[]` | 事件列表变化后触发，包含当前所有事件 |
@@ -262,8 +262,8 @@ interface EventInput {
 <template>
   <div>
     <SCalendar
-      :is-occupied="isOccupied"
-      :allow-overlap="allowOverlap"
+        :is-occupied="isOccupied"
+        :allow-overlap="allowOverlap"
       :userinfo="userinfo"
       :device-id="deviceId"
       :device-info="deviceInfo"
@@ -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>
@@ -337,10 +337,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 +386,6 @@ function handleDeviceClick(deviceId: string) {
   // 可以在这里处理设备点击逻辑，比如打开设备详情页面、跳转路由等
   // router.push(`/device/${deviceId}`);
 }
-
-function handleQuickAddSaved(event: EventInput) {
-  console.log("快速添加的事件:", event);
-  // 处理快速添加逻辑
-}
 </script>
 ```
 
@@ -561,6 +560,18 @@ 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 格式）
+
 ## 📄 许可证
 
 MIT

package/dist/calendar.js

@@ -878,13 +878,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;
@@ -899,52 +917,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ElMessage.warning("不能选择今天之前的时间进行预约");
         return;
       }
-      if (checkTimeConflict(startStr, endStr)) {
-        ElMessage.error("该时间段与其他事件冲突，请选择其他时间");
-        return;
+      formData.start = startStr;
+      formData.end = endStr;
+      formData.title = props.quickAddTaskName;
+      formData.allDay = false;
+      formData.description = "";
+      formData.organizer = currentUser.value;
+      formData.username = currentUser.value;
+      formData.organizerId = currentUserId.value;
+      if (props.taskid) {
+        formData.taskid = props.taskid;
+      } else {
+        formData.taskid = "";
       }
-      const taskId = formData.taskid || props.taskid || "";
-      const tempEventId = taskId && taskId === props.taskid ? taskId : void 0;
-      const colorInfo = assignEventColor(
-        startStr,
-        endStr,
-        void 0,
-        currentUser.value,
-        tempEventId,
-        // 传入临时ID用于颜色分配（如果taskid匹配）
-        taskId
-        // 传入 taskid 用于颜色分配
-      );
-      const startISO = formatToISO(startStr);
-      const endISO = endStr ? formatToISO(endStr) : void 0;
-      const eventUsername = currentUser.value;
-      const eventOrganizerId = currentUserId.value;
-      const editable = !currentUserId.value || eventOrganizerId === currentUserId.value;
-      const newEvent = {
-        // 不设置 id，由外部 App.vue 的事件列表提供
-        title: props.quickAddTaskName,
-        start: startISO,
-        end: endISO,
-        allDay: false,
-        backgroundColor: colorInfo.bg,
-        borderColor: colorInfo.border,
-        editable,
-        extendedProps: {
-          description: "",
-          organizer: eventUsername,
-          // 保留用于兼容
-          username: eventUsername,
-          organizerId: eventOrganizerId,
-          colorIndex: colorInfo.index,
-          deviceId: props.deviceId || "",
-          taskid: props.taskid || ""
-          // 如果存在 taskid，保存到事件数据中
-        }
-      };
-      emit("quickAddSaved", newEvent);
-      emit("eventAdded", newEvent);
-      const newEventsList = [...events.value, newEvent];
-      emit("eventsChange", newEventsList);
+      formData.deviceId = props.deviceId || "";
+      formData.userid = currentUserId.value;
+      editingEvent.value = null;
+      dialogVisible.value = true;
     }
     function formatFromISO(isoStr, useBeijingTime = false) {
       if (!isoStr) return "";
@@ -1659,7 +1648,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c28885e3"]]);
+const SCalendarComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-92e02969"]]);
 function getHolidays(year) {
   const holidays = {};
   if (year === 2026) {