@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.20

package/src/components/meeting/OMeetingCalendar.vue

@@ -0,0 +1,878 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import {
+  isClient,
+  OIcon,
+  OIconChevronLeft,
+  OIconChevronRight,
+  OOption,
+  OScroller,
+  OSelect,
+  OTab,
+  OTabPane,
+} from '@opensig/opendesign';
+import dayjs from 'dayjs';
+import { ElCalendar } from 'element-plus';
+import OMeetingCalendarList from './components/OMeetingCalendarList.vue';
+import IconEvent from '~icons/meeting/icon-event.svg';
+import IconSummit from '~icons/meeting/icon-summit.svg';
+import IconMeeting from '~icons/meeting/icon-meet.svg';
+import { Locales } from '@/i18n';
+import { useMeetingConfig } from './composables/useMeetingConfig';
+import { CalendarDataType, MeetingCalendarPropsT, MeetingGroupType } from './types.ts';
+import { formatDate } from './utils.ts';
+import { useDebounceFn } from '@vueuse/core';
+
+const props = withDefaults(defineProps<MeetingCalendarPropsT>(), {
+  getSummitListRequest: async () => [],
+  getEventsListRequest: async () => [],
+  hiddenEvents: false,
+  hiddenSummit: false,
+  groupType: MeetingGroupType.SIG,
+  groups: () => [],
+});
+const { t, locale, meetingTabs, getConfig } = useMeetingConfig();
+const isEn = computed(() => locale.value === Locales.EN);
+
+const latestDay = ref<string>('');
+const dateList = ref([]);
+const summitData = ref([]);
+const summitDates = ref([]);
+const eventsData = ref([]);
+const eventsDates = ref([]);
+const allDates = ref<string[]>([]);
+const meetingData = ref([]);
+const limitTime = '2021-01-01';
+const tabType = ref(CalendarDataType.ALL);
+const tabs = computed(() => {
+  let list = meetingTabs.value;
+  if (props.hiddenEvents) {
+    list = list.filter((item) => item.value !== CalendarDataType.EVENTS);
+  }
+  if (props.hiddenSummit) {
+    list = list.filter((item) => item.value !== CalendarDataType.SUMMIT);
+  }
+  if (list.filter(v => v.value !== CalendarDataType.ALL).length === 1) {
+    return [];
+  }
+  return list;
+});
+
+watch(() => tabs.value, () => {
+  tabType.value = tabs.value[0]?.value ?? CalendarDataType.MEETING;
+});
+const calendar = ref();
+const calendarHeight = ref<string>('407px');
+const isLimit = ref(false);
+const currentDay = ref('');
+const isAutoClick = ref(false);
+// sig组列表
+const group = ref('');
+const getSummitData = async (date) => {
+  if (props.getSummitListRequest) {
+    const list = await props.getSummitListRequest(date);
+    summitData.value = (list || []).map(v => {
+      return {
+
+        ...v,
+        type: CalendarDataType.SUMMIT,
+      };
+    });
+  } else {
+    summitData.value = [];
+  }
+};
+const getActivityData = async (date) => {
+  if (props.getEventsListRequest) {
+    const list = await props.getEventsListRequest(date);
+    eventsData.value = (list || []).map(v => {
+      return {
+        ...v,
+        type: CalendarDataType.EVENTS,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
+      };
+    });
+  } else {
+    eventsData.value = [];
+  }
+};
+
+const getDateList = async (date) => {
+  if (props.getDateListRequest) {
+    props.getDateListRequest(date, group.value || '').then(res => {
+      dateList.value = res;
+    });
+  }
+  if (props.getEventsDatesRequest) {
+    props.getEventsDatesRequest(date).then(res => {
+      eventsDates.value = res;
+    });
+  }
+  if (props.getSummitDatesRequest) {
+    props.getSummitDatesRequest(date).then(res => {
+      summitDates.value = res;
+    });
+  }
+};
+
+const paramGetDaysData = async (params: { date: string; type: string }) => {
+  if (!props.getMeetingListRequest) {
+    return;
+  }
+  if (!params.date) {
+    return;
+  }
+  try {
+    const res = await props.getMeetingListRequest(params.date, group.value, '');
+    meetingData.value = res.map((v) => {
+      return {
+        ...v,
+        time: `${ v.start }-${ v.end }`,
+        type: 'meeting',
+        date: v.date || params.date,
+      };
+    }).sort((a: any, b: any) => {
+      return parseInt((a.start || a.cycle_start)?.replace(':', '')) - parseInt(b.end || b.cycle_end?.replace(':', ''));
+    });
+  } catch {
+    meetingData.value = [];
+  }
+};
+
+const renderData = computed(() => {
+  return [
+    ...meetingData.value,
+    ...eventsData.value.filter(v => (!dayjs(v.start_date).isAfter(dayjs(currentDay.value)) && !dayjs(currentDay.value).isAfter(dayjs(v.end_date))) || v.dates?.includes(currentDay.value)),
+    ...summitData.value.filter(v => v.dates?.includes(currentDay.value)),
+  ].filter((v) => {
+    if (tabType.value === 'all') {
+      return true;
+    }
+    return v.type === tabType.value;
+  });
+});
+
+const getDateData = async (day?: string) => {
+  const date = dayjs(day).format('YYYY-MM-DD');
+  currentDay.value = date;
+  getSummitData(date);
+  getActivityData(date);
+  getDateList(date);
+
+  allDates.value = [...new Set([...dateList.value, ...summitDates.value, ...eventsDates.value])]
+    .flat()
+    .sort((a: string, b: string) => dayjs(a).isAfter(dayjs(b)) ? 1 : -1);
+  if (!day) {
+    if (!allDates.value.length) {
+      latestDay.value = formatDate(new Date());
+    } else {
+      let find = [...allDates.value].reverse().find((v) => dayjs().isAfter(dayjs(v)));
+      if (!find) {
+        find = allDates.value.find((v) => dayjs(v).isAfter(dayjs()));
+      }
+      latestDay.value = formatDate(find);
+    }
+  }
+  paramGetDaysData({
+    date: date,
+    type: tabType.value,
+  });
+};
+
+const changeMeetingDay = useDebounceFn((day: string, event?: Event) => {
+  if (isAutoClick.value) {
+    isAutoClick.value = false;
+    return;
+  }
+  if (new Date(day).getTime() / 1000 < 1610380800) {
+    event?.stopPropagation();
+    return;
+  }
+  getDateData(day);
+}, 300)
+
+
+const selectDate = (val: string, date: string) => {
+  if (formatDate(date) === formatDate(limitTime) && val === 'prev-month') {
+    isLimit.value = true;
+    return;
+  }
+  isLimit.value = false;
+  calendar.value.selectDate(val);
+  changeMeetingDay(formatDate(calendar.value.selectedDay));
+};
+const changeGroup = () => {
+  nextTick(() => {
+    paramGetDaysData({
+      date: currentDay.value,
+      type: tabType.value,
+    });
+    getDateList(currentDay.value);
+  });
+};
+
+const removeLeadingZero = (str: string) => {
+  // 使用正则表达式匹配以 0 开头的字符串，然后去除开头的 0
+  return str.replace(/^0+(?=\d)/, '');
+};
+
+const watchChange = (element: HTMLElement) => {
+  const observe = new MutationObserver(function() {
+    calendarHeight.value = `${ element.offsetHeight - 2 }px`;
+  });
+  observe.observe(element, {
+    childList: true,
+    subtree: true,
+    characterData: true,
+  });
+};
+
+onMounted(() => {
+  // 设置右侧 日程列表高度
+  const tbody = document.querySelector('.calendar-body .el-calendar__body') as HTMLElement;
+  if (tbody) {
+    watchChange(tbody);
+    calendarHeight.value = `${ tbody.offsetHeight - 2 }px`;
+  }
+  getDateData();
+});
+
+const stopWatchData = watch(
+  () => allDates.value.length,
+  () => {
+    if (isClient && !currentDay.value) {
+      nextTick(() => {
+        const activeBoxes = document.querySelector('.is-today .out-box') as HTMLElement;
+        if (activeBoxes) {
+          isAutoClick.value = true;
+          activeBoxes.click();
+          stopWatchData();
+        }
+      });
+    }
+  },
+);
+
+const formatYearMonth = (date: string) => {
+  if (isEn.value) {
+    return date.split(' ').reverse().join(' ');
+  } else {
+    return date;
+  }
+};
+// 根据类型校验日历日期是否可选
+const checkSelectedDay = (type: CalendarDataType, date: string) => {
+  if (type === CalendarDataType.MEETING) {
+    return ([CalendarDataType.ALL, CalendarDataType.MEETING].includes(tabType.value) && dateList.value.includes(date));
+  }
+  if (type === CalendarDataType.SUMMIT) {
+    return ([CalendarDataType.ALL, CalendarDataType.SUMMIT].includes(tabType.value) && summitDates.value.includes(date));
+  }
+  if (type === CalendarDataType.EVENTS) {
+    return ([CalendarDataType.ALL, CalendarDataType.EVENTS].includes(tabType.value) && eventsDates.value.includes(date));
+  }
+  return false;
+};
+</script>
+<template>
+  <div class="o-meeting-calendar">
+    <div class="calendar-body">
+      <ElCalendar ref="calendar" class="calender">
+        <template #header="{ date }">
+          <div class="calender-header-left">
+            <div class="left-title">
+              <OIcon @click="selectDate('prev-month', date)">
+                <OIconChevronLeft :class="{ disable: isLimit }" />
+              </OIcon>
+              <span class="month-date">{{ formatYearMonth(date) }}</span>
+              <OIcon @click="selectDate('next-month', date)">
+                <OIconChevronRight />
+              </OIcon>
+            </div>
+            <OSelect
+              v-model="group"
+              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
+              clearable
+              @change="changeGroup"
+            >
+              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
+            </OSelect>
+          </div>
+
+          <div class="right-title">
+            {{ t('meeting.latestMeeting') }}&nbsp;
+            <span>{{ dayjs(latestDay).format('YYYY/MM/DD') }}</span>
+          </div>
+        </template>
+        <template #date-cell="{ data }">
+          <div class="out-box" :class="{ 'has-calender': allDates.includes(data.day) }"
+               @click="changeMeetingDay(data.day, $event)">
+            <div class="day-box">
+              <p :class="data.isSelected ? 'is-selected' : ''" class="date-calender">
+                {{ removeLeadingZero(data.day.split('-').at(-1) || '') }}
+              </p>
+              <div class="icon-box">
+                <OIcon
+                  class="meeting"
+                  :style="{
+                      zIndex: getConfig(CalendarDataType.MEETING, 'zIndex'),
+                      backgroundColor: getConfig(CalendarDataType.MEETING, 'color')
+                    }"
+                  v-if="checkSelectedDay(CalendarDataType.MEETING, data.day)">
+                  <IconMeeting />
+                </OIcon>
+                <OIcon
+                  class="events"
+                  :style="{
+                      zIndex: getConfig(CalendarDataType.EVENTS, 'zIndex'),
+                      backgroundColor: getConfig(CalendarDataType.EVENTS, 'color')
+                    }"
+                  v-if="checkSelectedDay(CalendarDataType.EVENTS, data.day)">
+                  <IconEvent />
+                </OIcon>
+                <OIcon
+                  class="summit"
+                  :style="{
+                      zIndex: getConfig(CalendarDataType.SUMMIT, 'zIndex'),
+                      backgroundColor: getConfig(CalendarDataType.SUMMIT, 'color')
+                    }"
+                  v-if="checkSelectedDay(CalendarDataType.SUMMIT, data.day)">
+                  <IconSummit />
+                </OIcon>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElCalendar>
+      <div class="detail-list">
+        <div class="current-day">
+          {{ t('meeting.latestMeeting') }}&nbsp;
+          <span>{{ dayjs(currentDay).format('YYYY/MM/DD') }}</span>
+        </div>
+        <div class="right-title">
+          <div class="title-list">
+            <OSelect
+              v-model="group"
+              :placeholder="t(groupType === MeetingGroupType.GROUP ? 'meeting.allGroups' : 'meeting.allSigs')"
+              clearable
+              @change="changeGroup"
+            >
+              <OOption v-for="t in groups" :value="t" :key="t">{{ t }}</OOption>
+            </OSelect>
+            <OTab v-model="tabType" :line="false">
+              <OTabPane v-for="item in tabs" :key="item.value" :value="item.value">
+                <template #nav>
+                  <OIcon>
+                    <component :is="item.icon" />
+                  </OIcon>
+                  {{ item.label }}
+                </template>
+              </OTabPane>
+            </OTab>
+          </div>
+        </div>
+
+        <div>
+          <OScroller class="meeting-list" show-type="hover" size="small">
+            <OMeetingCalendarList :list="renderData" :groupType="groupType">
+              <template #empty>
+                <slot name="empty"></slot>
+              </template>
+            </OMeetingCalendarList>
+          </OScroller>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.o-meeting-calendar {
+
+  .o-select {
+    flex-grow: 1;
+    max-width: 320px;
+    --select-radius: var(--o-radius-xs);
+  }
+
+  .el-calendar-table {
+    margin-bottom: 0;
+    display: table;
+    width: 100%;
+  }
+
+  .calendar-body {
+    display: flex;
+    border-radius: var(--o-radius-xs);
+    background-color: var(--o-color-fill2);
+    overflow: hidden;
+    @include respond-to('<=pad_v') {
+      background-color: transparent;
+      flex-direction: column;
+    }
+
+    .calender {
+      width: 56%;
+      --el-calendar-borde: none;
+      --el-calendar-selected-bg-color: none;
+      @include respond-to('<=pad_v') {
+        width: 100%;
+        flex-direction: column;
+        background-color: var(--o-color-fill2);
+        border-radius: var(--o-radius-xs);
+      }
+
+      .el-calendar__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 60px;
+        padding: 0 var(--o-gap-6);
+        gap: var(--o-gap-6);
+        border-bottom: 1px solid var(--o-color-control4);
+        background: var(--o-color-fill2);
+        @include respond-to('<=pad_v') {
+          justify-content: center;
+          border-bottom: none;
+          height: 52px;
+        }
+
+        .calender-header-left {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--o-gap-6);
+
+          .o-select {
+            max-width: 240px;
+            @include respond-to('<=pad_v') {
+              display: none;
+            }
+          }
+        }
+
+        .left-title {
+          display: flex;
+          align-items: center;
+          flex-shrink: 0;
+          color: var(--o-color-info1);
+          @include text2;
+          @include respond-to('<=pad_v') {
+            @include h3;
+          }
+
+          .o-icon {
+            cursor: pointer;
+            font-size: 24px;
+          }
+
+          .month-date {
+            font-weight: 500;
+            margin: 0 var(--o-gap-1);
+          }
+        }
+
+        .right-title {
+          display: flex;
+          align-items: center;
+          color: var(--o-color-info2);
+          word-break: keep-all;
+          @include text2;
+          @include respond-to('<=pad_v') {
+            display: none;
+          }
+        }
+      }
+
+      .el-calendar__body {
+        padding: 0 var(--o-gap-6) var(--o-gap-6);
+        border-right: 1px solid var(--o-color-control4);
+        margin-bottom: 0;
+        background: var(--o-color-fill2);
+
+        thead {
+          th {
+            padding: var(--o-gap-4) var(--o-gap-3);
+            text-align: left;
+            color: var(--o-color-info3);
+            background: none;
+            border: none;
+            @include text1;
+            @include respond-to('<=pad_v') {
+              padding: 0;
+              text-align: center;
+            }
+          }
+        }
+
+        td {
+          border: none;
+          padding: 0;
+        }
+
+        td:first-child {
+          .el-calendar-day {
+            margin-left: 0 !important;
+          }
+        }
+
+        tr:last-child {
+          .el-calendar-day {
+            margin-bottom: 0 !important;
+          }
+        }
+
+        @include respond-to('<=pad_v') {
+          border: none;
+          padding: 0 16px 16px;
+          thead {
+            background-color: var(--o-color-control4-light);
+            overflow: hidden;
+
+            th {
+              padding: 9px 0;
+            }
+
+            th:first-child {
+              border-top-left-radius: var(--o-radius-xs);
+              border-bottom-left-radius: var(--o-radius-xs);
+            }
+
+            th:last-child {
+              border-top-right-radius: var(--o-radius-xs);
+              border-bottom-right-radius: var(--o-radius-xs);
+            }
+          }
+          tr:last-child {
+            .out-box {
+              margin-bottom: 0 !important;
+            }
+          }
+        }
+      }
+
+      td {
+        border: none;
+      }
+
+      .el-calendar-day {
+        padding: 0;
+        margin-left: var(--o-gap-2);
+        margin-bottom: var(--o-gap-2);
+        height: 64px;
+        color: var(--o-color-info1);
+        @include respond-to('<=pad_v') {
+          display: flex;
+          justify-content: center;
+          padding: 0;
+          height: fit-content;
+        }
+
+        .out-box {
+          position: relative;
+          border-radius: var(--o-radius-xs);
+          padding: 8px 12px;
+          width: 100%;
+          height: 100%;
+          background-color: var(--o-color-control2-light);
+          border: 1px solid transparent;
+          @include tip1;
+          @include hover {
+            background-color: var(--o-color-control3-light);
+            @include respond-to('<=pad_v') {
+              @include hover {
+                background-color: inherit;
+                border: 1px solid transparent;
+              }
+            }
+          }
+
+          .day-box {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+          }
+
+          .icon-box {
+            display: flex;
+            margin-top: 4px;
+            color: var(--o-color-white);
+            height: 20px;
+
+            .o-icon {
+              flex-shrink: 0;
+              position: relative;
+              border-radius: 50%;
+              padding: 2px;
+              width: 16px;
+              height: 16px;
+              font-size: 12px;
+              margin-left: -4px;
+              margin-top: 0;
+              @include respond-to('<=pad_v') {
+                height: 6px;
+                width: 6px;
+                margin-left: -2px;
+              }
+
+              &:first-child {
+                margin: 0;
+              }
+            }
+
+            .o-icon {
+              svg path {
+                fill: currentColor;
+              }
+            }
+          }
+
+          @include respond-to('<=pad_v') {
+            background-color: transparent;
+            padding: 0;
+            margin: 6px 8px;
+            text-align: center;
+            width: 24px;
+            height: 24px;
+            .day-box {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              font-size: 14px;
+              line-height: 22px;
+            }
+            .icon-box {
+              display: flex;
+              justify-content: center;
+              margin-top: 0;
+              position: absolute;
+              left: 50%;
+              bottom: -2px;
+              height: 6px;
+              transform: translate(-50%, 100%);
+            }
+            .o-icon {
+              width: 6px;
+              height: 6px;
+
+              svg {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      .date-calender {
+        position: relative;
+        margin-bottom: 0;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: -1;
+        }
+      }
+
+      .is-selected {
+        .out-box {
+          background-color: var(--o-color-control3-light);
+          border: 1px solid var(--o-color-primary1);
+          @include respond-to('<=pad_v') {
+            background-color: transparent;
+            border: 1px solid transparent;
+            .date-calender {
+              color: var(--o-color-primary1);
+              font-weight: 600;
+              z-index: 1;
+
+              &::after {
+                height: 24px;
+                width: 40px;
+                background-color: var(--o-color-control3-light);
+                border-radius: var(--o-radius-l);
+                border: 1px solid var(--o-color-primary1);
+              }
+            }
+          }
+        }
+      }
+
+      .is-today {
+        .date-calender {
+          --num-size: 22px;
+          width: fit-content;
+          height: var(--num-size);
+          line-height: var(--num-size);
+          z-index: 1;
+          font-weight: 600;
+          color: var(--o-color-primary1);
+
+          &::after {
+            width: var(--num-size);
+            height: var(--num-size);
+            background-color: var(--o-color-control3-light);
+            border-radius: 50%;
+          }
+
+          @include respond-to('<=pad_v') {
+            height: auto;
+            width: auto;
+            &::after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              height: 24px;
+              width: 40px;
+              border-radius: var(--o-radius-l);
+              z-index: -1;
+            }
+          }
+        }
+      }
+    }
+
+    .detail-list {
+      width: 44%;
+
+
+      @include respond-to('<=pad_v') {
+        margin-top: 12px;
+        padding-top: 16px;
+        background-color: var(--o-color-fill2);
+        width: 100%;
+        border-radius: var(--o-radius-xs);
+      }
+      @include respond-to('phone') {
+
+        margin-top: 16px;
+        padding-top: 12px;
+      }
+
+      .current-day {
+        color: var(--o-color-info2);
+        @include respond-to('>pad_v') {
+          display: none;
+        }
+        @include respond-to('<=pad_v') {
+          display: flex;
+          margin: 16px 16px 12px;
+          padding: 7px 12px;
+          justify-content: center;
+          border-radius: var(--o-radius-xs);
+          background-color: var(--o-color-control4-light);
+          @include text2;
+        }
+      }
+
+      .title-list {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 14px 24px;
+        position: relative;
+        height: 60px;
+
+        @include respond-to('<=pad_v') {
+          justify-content: space-between;
+          padding: 0 16px;
+          gap: 24px;
+          height: auto;
+          align-items: flex-start;
+        }
+        @include respond-to('phone') {
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background-color: var(--o-color-control4);
+        }
+
+        .o-select {
+          display: none;
+          @include respond-to('<=pad_v') {
+            display: inline-flex;
+          }
+          @include respond-to('phone') {
+            display: flex;
+            width: 100%;
+            max-width: 100%;
+          }
+        }
+
+      }
+
+      .o-tab {
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+        height: 60px;
+      }
+
+      .o-tab {
+        .o-icon {
+          svg path {
+            fill: currentColor;
+          }
+        }
+
+        @include respond-to('pad_v-laptop') {
+          --tab-nav-padding: 0 0 14px;
+        }
+        @include respond-to('<=pad_v') {
+          border-bottom: none;
+          height: auto;
+          .o-icon {
+            display: none;
+          }
+          .o-tab-navs-wrap {
+            height: 40px;
+
+            .o-tab-nav {
+              line-height: 2;
+            }
+          }
+        }
+        @include respond-to('phone') {
+          .o-tab-navs-wrap {
+            height: auto;
+          }
+        }
+
+        .o-tab-nav-anchor {
+          .o-tab-nav-anchor-line {
+            width: 100%;
+            @include respond-to('<=pad_v') {
+              width: 16px;
+            }
+          }
+        }
+      }
+    }
+
+    .meeting-list {
+      height: v-bind('calendarHeight');
+      @include respond-to('<=pad_v') {
+        height: auto;
+      }
+    }
+
+  }
+
+}
+</style>