@opendesign-plus-test/components 0.0.1-rc.42 → 0.0.1-rc.45

package/src/components/meeting/OMeetingCalendar.vue

@@ -19,7 +19,14 @@ 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 {
+  CalendarDataType,
+  MeetingEventsItemT,
+  MeetingCalendarPropsT,
+  MeetingGroupType, MeetingItemT,
+  meetingTabT,
+  SummitItemT,
+} from './types.ts';
 import { formatDate } from './utils.ts';
 import { useDebounceFn } from '@vueuse/core';
 
@@ -35,16 +42,16 @@ 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 dateList = ref<string[]>([]);
+const summitData = ref<SummitItemT[]>([]);
+const summitDates = ref<string[]>([]);
+const eventsData = ref<MeetingEventsItemT[]>([]);
+const eventsDates = ref<string[]>([]);
 const allDates = ref<string[]>([]);
-const meetingData = ref([]);
+const meetingData = ref<MeetingItemT[]>([]);
 const limitTime = '2021-01-01';
-const tabType = ref(CalendarDataType.ALL);
-const tabs = computed(() => {
+const tabType = ref<CalendarDataType>(CalendarDataType.ALL);
+const tabs = computed<meetingTabT[]>(() => {
   let list = meetingTabs.value;
   if (props.hiddenEvents) {
     list = list.filter((item) => item.value !== CalendarDataType.EVENTS);
@@ -68,24 +75,25 @@ const currentDay = ref('');
 const isAutoClick = ref(false);
 // sig组列表
 const group = ref('');
-const getSummitData = async (date) => {
+const getSummitData = async (date: string) => {
   if (props.getSummitListRequest) {
     const list = await props.getSummitListRequest(date);
-    summitData.value = (list || []).map(v => {
+    summitData.value = (list || []).map((v: SummitItemT) => {
       return {
-
         ...v,
         type: CalendarDataType.SUMMIT,
+        start_date_time: `${ formatDate(v.start_date) } ${ v.start }`,
+        end_date_time: `${ formatDate(v.end_date) } ${ v.end }`,
       };
     });
   } else {
     summitData.value = [];
   }
 };
-const getActivityData = async (date) => {
+const getActivityData = async (date: string) => {
   if (props.getEventsListRequest) {
     const list = await props.getEventsListRequest(date);
-    eventsData.value = (list || []).map(v => {
+    eventsData.value = (list || []).map((v: MeetingEventsItemT) => {
       return {
         ...v,
         type: CalendarDataType.EVENTS,
@@ -98,19 +106,19 @@ const getActivityData = async (date) => {
   }
 };
 
-const getDateList = async (date) => {
+const getDateList = async (date: string) => {
   if (props.getDateListRequest) {
-    props.getDateListRequest(date, group.value || '').then(res => {
+    props.getDateListRequest(date, group.value || '').then((res: string[]) => {
       dateList.value = res;
     });
   }
   if (props.getEventsDatesRequest) {
-    props.getEventsDatesRequest(date).then(res => {
+    props.getEventsDatesRequest(date).then((res: string[]) => {
       eventsDates.value = res;
     });
   }
   if (props.getSummitDatesRequest) {
-    props.getSummitDatesRequest(date).then(res => {
+    props.getSummitDatesRequest(date).then((res: string[]) => {
       summitDates.value = res;
     });
   }
@@ -124,12 +132,12 @@ const paramGetDaysData = async (params: { date: string; type: string }) => {
     return;
   }
   try {
-    const res = await props.getMeetingListRequest(params.date, group.value, '');
+    const res: MeetingItemT[] = await props.getMeetingListRequest(params.date, group.value, '');
     meetingData.value = res.map((v) => {
       return {
         ...v,
         time: `${ v.start }-${ v.end }`,
-        type: 'meeting',
+        type: CalendarDataType.MEETING,
         date: v.date || params.date,
       };
     }).sort((a: any, b: any) => {
@@ -146,7 +154,7 @@ const renderData = computed(() => {
     ...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') {
+    if (tabType.value === CalendarDataType.ALL) {
       return true;
     }
     return v.type === tabType.value;
@@ -228,13 +236,17 @@ const watchChange = (element: HTMLElement) => {
   });
 };
 
-onMounted(() => {
+const getCalendarHeight = async () => {
   // 设置右侧 日程列表高度
   const tbody = document.querySelector('.calendar-body .el-calendar__body') as HTMLElement;
   if (tbody) {
     watchChange(tbody);
     calendarHeight.value = `${ tbody.offsetHeight - 2 }px`;
   }
+};
+
+onMounted(() => {
+  getCalendarHeight();
   getDateData();
 });
 
@@ -374,8 +386,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         </div>
 
         <div>
-          <OScroller class="meeting-list" show-type="hover" size="small">
-            <OMeetingCalendarList :list="renderData" :groupType="groupType">
+          <OScroller class="meeting-list" show-type="hover" size="small" :style="{
+            '--height': calendarHeight
+          }">
+            <OMeetingCalendarList :list="renderData as unknown as MeetingItemT[]" :groupType="groupType">
               <template #empty>
                 <slot name="empty"></slot>
               </template>
@@ -406,7 +420,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
     border-radius: var(--o-radius-xs);
     background-color: var(--o-color-fill2);
     overflow: hidden;
-    @include respond-to('<=pad_v') {
+    @include respond('<=pad_v') {
       background-color: transparent;
       flex-direction: column;
     }
@@ -415,7 +429,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 56%;
       --el-calendar-borde: none;
       --el-calendar-selected-bg-color: none;
-      @include respond-to('<=pad_v') {
+      @include respond('<=pad_v') {
         width: 100%;
         flex-direction: column;
         background-color: var(--o-color-fill2);
@@ -431,7 +445,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         gap: var(--o-gap-6);
         border-bottom: 1px solid var(--o-color-control4);
         background: var(--o-color-fill2);
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           justify-content: center;
           border-bottom: none;
           height: 52px;
@@ -445,7 +459,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
           .o-select {
             max-width: 240px;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               display: none;
             }
           }
@@ -457,7 +471,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           flex-shrink: 0;
           color: var(--o-color-info1);
           @include text2;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             @include h3;
           }
 
@@ -478,7 +492,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           color: var(--o-color-info2);
           word-break: keep-all;
           @include text2;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: none;
           }
         }
@@ -498,7 +512,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             background: none;
             border: none;
             @include text1;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               padding: 0;
               text-align: center;
             }
@@ -522,7 +536,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           border: none;
           padding: 0 16px 16px;
           thead {
@@ -561,7 +575,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         margin-bottom: var(--o-gap-2);
         height: 64px;
         color: var(--o-color-info1);
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           display: flex;
           justify-content: center;
           padding: 0;
@@ -579,7 +593,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           @include tip1;
           @include hover {
             background-color: var(--o-color-control3-light);
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               @include hover {
                 background-color: inherit;
                 border: 1px solid transparent;
@@ -610,7 +624,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
               font-size: 12px;
               margin-left: -4px;
               margin-top: 0;
-              @include respond-to('<=pad_v') {
+              @include respond('<=pad_v') {
                 height: 6px;
                 width: 6px;
                 margin-left: -2px;
@@ -628,7 +642,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
 
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             background-color: transparent;
             padding: 0;
             margin: 6px 8px;
@@ -683,7 +697,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .out-box {
           background-color: var(--o-color-control3-light);
           border: 1px solid var(--o-color-primary1);
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             background-color: transparent;
             border: 1px solid transparent;
             .date-calender {
@@ -720,7 +734,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             border-radius: 50%;
           }
 
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             height: auto;
             width: auto;
             &::after {
@@ -743,14 +757,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
       width: 44%;
 
 
-      @include respond-to('<=pad_v') {
+      @include respond('<=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') {
+      @include respond('phone') {
 
         margin-top: 16px;
         padding-top: 12px;
@@ -758,10 +772,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
       .current-day {
         color: var(--o-color-info2);
-        @include respond-to('>pad_v') {
+        @include respond('>pad_v') {
           display: none;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           display: flex;
           margin: 16px 16px 12px;
           padding: 7px 12px;
@@ -780,14 +794,14 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         position: relative;
         height: 60px;
 
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           justify-content: space-between;
           padding: 0 16px;
           gap: 24px;
           height: auto;
           align-items: flex-start;
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           flex-direction: column;
           align-items: center;
           gap: 8px;
@@ -805,10 +819,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
 
         .o-select {
           display: none;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             display: inline-flex;
           }
-          @include respond-to('phone') {
+          @include respond('phone') {
             display: flex;
             width: 100%;
             max-width: 100%;
@@ -831,10 +845,10 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
           }
         }
 
-        @include respond-to('pad_v-laptop') {
+        @include respond('pad_v-laptop') {
           --tab-nav-padding: 0 0 14px;
         }
-        @include respond-to('<=pad_v') {
+        @include respond('<=pad_v') {
           border-bottom: none;
           height: auto;
           .o-icon {
@@ -848,7 +862,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
             }
           }
         }
-        @include respond-to('phone') {
+        @include respond('phone') {
           .o-tab-navs-wrap {
             height: auto;
           }
@@ -857,7 +871,7 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
         .o-tab-nav-anchor {
           .o-tab-nav-anchor-line {
             width: 100%;
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               width: 16px;
             }
           }
@@ -866,13 +880,11 @@ const checkSelectedDay = (type: CalendarDataType, date: string) => {
     }
 
     .meeting-list {
-      height: v-bind('calendarHeight');
-      @include respond-to('<=pad_v') {
+      height: var(--height);
+      @include respond('<=pad_v') {
         height: auto;
       }
     }
-
   }
-
 }
 </style>