@opendesign-plus/components 0.0.1-rc.35 → 0.0.1-rc.36

package/dist/treeshaking/components/meeting/OMeetingSigCalendar.vue.mjs

@@ -0,0 +1,396 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createVNode, withCtx, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, createTextVNode, renderSlot } from "vue";
+import { OPopover, OIcon, OTab, OTabPane, OSelect, OOption, ODivider, OScroller, OResult, OFigure } from "@opensig/opendesign";
+import dayjs from "dayjs";
+import IconTips from "../../_virtual/icon-tips.mjs";
+import _sfc_main$1 from "./components/OMeetingSigAside.vue.mjs";
+import './components/OMeetingSigAside.css';
+import { CalendarDataType } from "./types.mjs";
+import { useScreen } from "@opendesign-plus/composables";
+import { useMeetingConfig } from "./composables/useMeetingConfig.mjs";
+import _sfc_main$2 from "./components/OMeetingCalendarList.vue.mjs";
+import './components/OMeetingCalendarList.css';
+import { formatDate } from "./utils.mjs";
+import emptyDefaultImg from "../../assets/meeting/empty.png.mjs";
+const _hoisted_1 = { class: "o-sig-meeting-calendar" };
+const _hoisted_2 = { class: "meeting-card-header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "header-left"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "phone-filter-wrapper"
+};
+const _hoisted_5 = { class: "date-select" };
+const _hoisted_6 = { class: "meeting-card-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "OMeetingSigCalendar",
+  props: {
+    sigName: {},
+    getMeetingListRequest: {},
+    getDateListRequest: {},
+    getEventsListRequest: {},
+    dates: {},
+    emptyImg: {},
+    emptyText: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { t, meetingTabs } = useMeetingConfig();
+    const { lePadV } = useScreen();
+    const selectDate = ref("");
+    const loading = ref(false);
+    const meetingData = ref([]);
+    const calendarRows = computed(() => lePadV.value ? 100 : 5);
+    const latestDate = ref("");
+    const meetingDates = ref([]);
+    const eventsDates = ref([]);
+    const eventsData = ref([]);
+    const monthIdx = ref(-1);
+    const clickDateCell2 = (date) => {
+      clickDateCell(date);
+    };
+    const changeSelect = (v) => {
+      clickDateCell(v);
+    };
+    const clickDateCell = async (date) => {
+      if (!props.getMeetingListRequest) {
+        return;
+      }
+      try {
+        loading.value = true;
+        selectDate.value = dayjs(date).format("YYYY-MM-DD");
+        const res = await props.getMeetingListRequest(selectDate.value, props.sigName);
+        meetingData.value = res.map((v) => {
+          return {
+            ...v,
+            time: `${v.start}-${v.end}`,
+            date: v.date || selectDate.value,
+            type: CalendarDataType.MEETING
+          };
+        });
+      } finally {
+        loading.value = false;
+      }
+    };
+    const getDates = async () => {
+      if (props.getDateListRequest) {
+        meetingDates.value = await props.getDateListRequest();
+      }
+      if (props.getEventsListRequest) {
+        eventsData.value = (await props.getEventsListRequest(selectDate.value, props.sigName)).map((v) => {
+          return {
+            ...v,
+            type: CalendarDataType.EVENTS
+          };
+        });
+        eventsDates.value = (eventsData.value || []).map((v) => v.dates || []).flat();
+      }
+    };
+    const tabType = ref(CalendarDataType.ALL);
+    const selectTab = () => {
+      getDates();
+    };
+    const getMonthAndDay = (date) => {
+      const dateStr = dayjs(date).format("YYYY-MM-DD");
+      return [dateStr.slice(0, 7), dateStr.slice(8, 10)];
+    };
+    const dateList = computed(() => {
+      let list2;
+      if (tabType.value === CalendarDataType.ALL) {
+        list2 = [...meetingDates.value || [], ...eventsDates.value];
+      } else if (tabType.value === CalendarDataType.MEETING) {
+        list2 = meetingDates.value || [];
+      } else if (tabType.value === CalendarDataType.EVENTS) {
+        list2 = eventsDates.value || [];
+      } else {
+        list2 = [];
+      }
+      return [...new Set(list2)].sort((a, b) => !dayjs(a).isAfter(dayjs(b)) ? -1 : 1).map((v) => dayjs(v).format("YYYY-MM-DD"));
+    });
+    const getLatestDate = () => {
+      let targetDate = dateList.value.find((date) => date === dayjs().format("YYYY-MM-DD"));
+      if (!targetDate) {
+        targetDate = dateList.value.find((date) => dayjs(date).isAfter(dayjs())) || // 未来日期最近日期
+        [...dateList.value].reverse().find((date) => dayjs().isAfter(dayjs(date)));
+      }
+      latestDate.value = targetDate;
+    };
+    watch(() => dateList.value, (val) => {
+      if (val.length) {
+        getLatestDate();
+        nextTick(() => {
+          clickDateCell(latestDate.value);
+        });
+      }
+    });
+    const groupDateList = computed(() => {
+      const obj = dateList.value.reduce((pre, cur) => {
+        var _a, _b;
+        const [month, day] = getMonthAndDay(cur);
+        pre[month] = {
+          count: (((_a = pre[month]) == null ? void 0 : _a.count) || 0) + 1,
+          days: [...((_b = pre[month]) == null ? void 0 : _b.days) || [], day]
+        };
+        return pre;
+      }, {});
+      const monthList = Object.keys(obj).map((month) => {
+        return {
+          ...obj[month],
+          month
+        };
+      });
+      const list2 = [];
+      let current = [];
+      monthList.forEach((t2) => {
+        while (t2.days.length) {
+          if (!current.length) {
+            t2.days.splice(0, 6).forEach((day) => {
+              current.push({
+                month: t2.month,
+                day
+              });
+            });
+            if (current.length >= 5) {
+              list2.push(current);
+              current = [];
+            }
+          } else {
+            let count = current.length;
+            if (count % 2 === 1) {
+              count += 1;
+            }
+            if (t2.days.length + current.length <= 6) {
+              t2.days.splice(0, 6).forEach((day) => {
+                current.push({
+                  month: t2.month,
+                  day
+                });
+              });
+              if (current.length >= 5) {
+                list2.push(current);
+                current = [];
+              }
+            } else {
+              t2.days.splice(0, 6 - count).forEach((day) => {
+                current.push({
+                  month: t2.month,
+                  day
+                });
+              });
+              if (current.length >= 5) {
+                list2.push(current);
+                current = [];
+              }
+            }
+          }
+        }
+      });
+      if (current.length) {
+        list2.push(current);
+        current = [];
+      }
+      return list2;
+    });
+    const dateMapList = computed(() => {
+      return groupDateList.value.map((group) => {
+        const obj = group.reduce((prev, cur) => {
+          prev[cur.month] = prev[cur.month] || [];
+          prev[cur.month].push(cur.day);
+          return prev;
+        }, {});
+        return Object.keys(obj).map((key) => {
+          return {
+            month: key,
+            days: obj[key] || []
+          };
+        });
+      });
+    });
+    const getMonthIdx = () => {
+      if (groupDateList.value.length) {
+        monthIdx.value = groupDateList.value.findIndex((v) => v.some((t2) => latestDate.value === `${t2.month}-${t2.day}`));
+        if (monthIdx.value === -1) {
+          monthIdx.value = groupDateList.value.findIndex((v) => v.some((t2) => latestDate.value.includes(t2.month)));
+        }
+      } else {
+        monthIdx.value = -1;
+      }
+    };
+    watch(
+      [() => groupDateList.value, () => latestDate.value],
+      () => {
+        getMonthIdx();
+      },
+      { deep: true }
+    );
+    const changeMonthIdx = (step) => {
+      monthIdx.value += step;
+    };
+    onMounted(() => {
+      getDates();
+    });
+    const list = computed(() => {
+      let list2;
+      if (tabType.value === CalendarDataType.ALL) {
+        list2 = [...meetingData.value || [], ...eventsData.value];
+      } else if (tabType.value === CalendarDataType.MEETING) {
+        list2 = meetingData.value || [];
+      } else if (tabType.value === CalendarDataType.EVENTS) {
+        list2 = eventsData.value || [];
+      } else {
+        list2 = [];
+      }
+      return list2;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          latestDate.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("span", null, toDisplayString(unref(t)("meeting.latestMeeting")), 1),
+            createElementVNode("span", null, toDisplayString(unref(dayjs)(latestDate.value).format("YYYY/MM/DD")), 1),
+            createVNode(unref(OPopover), null, {
+              target: withCtx(() => [
+                createVNode(unref(OIcon), { class: "tips" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(IconTips))
+                  ]),
+                  _: 1
+                })
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", null, [
+                  createElementVNode("p", null, toDisplayString(unref(t)("meeting.detailHalfYearMeetings")), 1)
+                ])
+              ]),
+              _: 1
+            })
+          ])) : createCommentVNode("", true),
+          createVNode(unref(OTab), {
+            modelValue: tabType.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabType.value = $event),
+            onChange: selectTab,
+            line: false,
+            "max-show": 9999
+          }, {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(meetingTabs).slice(0, -1), (item) => {
+                return openBlock(), createBlock(unref(OTabPane), {
+                  key: item.value,
+                  value: item.value
+                }, {
+                  nav: withCtx(() => [
+                    createVNode(unref(OIcon), null, {
+                      default: withCtx(() => [
+                        (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
+                      ]),
+                      _: 2
+                    }, 1024),
+                    createTextVNode(" " + toDisplayString(item.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        unref(lePadV) && dateList.value.length ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createElementVNode("div", _hoisted_5, [
+            createVNode(unref(OSelect), {
+              modelValue: selectDate.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectDate.value = $event),
+              onChange: changeSelect
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(dateList.value, (date) => {
+                  return openBlock(), createBlock(unref(OOption), {
+                    key: date,
+                    value: date,
+                    label: unref(formatDate)(date)
+                  }, null, 8, ["value", "label"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]),
+          createElementVNode("div", null, [
+            createVNode(unref(OTab), {
+              modelValue: tabType.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tabType.value = $event),
+              onChange: selectTab,
+              line: false,
+              "max-show": 9999
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(meetingTabs).slice(0, -1), (item) => {
+                  return openBlock(), createBlock(unref(OTabPane), {
+                    key: item.value,
+                    value: item.value
+                  }, {
+                    nav: withCtx(() => [
+                      createTextVNode(toDisplayString(item.label), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])
+        ])) : createCommentVNode("", true),
+        !unref(lePadV) || unref(lePadV) && dateList.value.length ? (openBlock(), createBlock(unref(ODivider), {
+          key: 1,
+          class: "meeting-divider"
+        })) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_6, [
+          !unref(lePadV) && monthIdx.value !== -1 ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            data: dateMapList.value.slice(monthIdx.value, monthIdx.value + 1),
+            meetingDates: tabType.value !== unref(CalendarDataType).EVENTS ? meetingDates.value : [],
+            eventsDates: tabType.value !== unref(CalendarDataType).MEETING ? eventsDates.value : [],
+            onClickDate: clickDateCell2,
+            onChangeMonth: changeMonthIdx,
+            current: monthIdx.value,
+            total: dateMapList.value.length,
+            active: selectDate.value
+          }, null, 8, ["data", "meetingDates", "eventsDates", "current", "total", "active"])) : createCommentVNode("", true),
+          createVNode(unref(OScroller), {
+            class: "list-content",
+            "show-type": "hover",
+            size: "small"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                list: list.value,
+                rows: calendarRows.value
+              }, {
+                empty: withCtx(() => [
+                  renderSlot(_ctx.$slots, "empty", {}, () => [
+                    createVNode(unref(OResult), { class: "empty-result" }, {
+                      image: withCtx(() => [
+                        createVNode(unref(OFigure), {
+                          class: "img",
+                          src: __props.emptyImg ?? unref(emptyDefaultImg)
+                        }, null, 8, ["src"])
+                      ]),
+                      description: withCtx(() => [
+                        createTextVNode(toDisplayString(__props.emptyText ?? unref(t)("meeting.meetingEmptyText")), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 3
+              }, 8, ["list", "rows"])
+            ]),
+            _: 3
+          })
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/meeting/OMeetingSigCalendar.vue3.mjs

@@ -0,0 +1,5 @@
+import _sfc_main from "./OMeetingSigCalendar.vue.mjs";
+import './OMeetingSigCalendar.css';
+export {
+  _sfc_main as default
+};