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

package/src/components/meeting/OMyMeetingCalendar.vue

@@ -37,10 +37,10 @@ const currentPage = ref(1); // 分页-当前页
 const pageSize = ref(50); // 分页-每页数量
 const total = ref<number | null>(null); // 分页-总数
 const list = ref<MeetingItemT[]>([]); // 列表数据
-const originList = ref([]); // 原始数据
+const originList = ref<MeetingItemT[]>([]); // 原始数据
 const canLoadMore = computed(() => total.value === null || originList.value.length < total.value);
 const reloadAll = ref(false); // 是否需要清空数据
-const { t, locale, weekDay, getPointStr, getWeekFromDate } = useMeetingConfig();
+const { t, locale, getPointStr, getWeekFromDate } = useMeetingConfig();
 const isEn = computed(() => locale.value === Locales.EN);
 
 const props = withDefaults(defineProps<{
@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<{
 
 const dialogLoading = ref(false); // 弹窗按钮状态
 const { isPhone } = useScreen();
-const expanded = ref([]); // 展开的数据， sub_id 或 id
+const expanded = ref<(string | number)[]>([]); // 展开的数据， sub_id 或 id
 const emits = defineEmits(['edit']);
 // -------------------- 自动加载下一页 --------------------
 const nextLoading = ref(false);
@@ -73,7 +73,7 @@ const getList = async () => {
     return;
   }
   try {
-    if (total.value > 0 && (currentPage.value - 1) * pageSize.value > total.value) {
+    if (total.value !== null && total.value > 0 && (currentPage.value - 1) * pageSize.value > total.value) {
       return;
     }
     // 当月数据已加载完，手动切换下一月
@@ -130,7 +130,7 @@ const getList = async () => {
             endTime: cycle_end,
             cycleType,
           });
-          const obsData = item.obs_data?.filter((v) => v.text_video_url);
+          const obsData = item.obs_data?.filter((v) => v.text_video_url) || [];
           return cycle_sub
             .filter((v) => {
               return (
@@ -155,14 +155,14 @@ const getList = async () => {
             ...item,
             dateRange: `${ start } - ${ end }`,
             timeRange: `${ start } - ${ end }`,
-            hasObsData: item.obs_data?.filter((v) => v.text_video_url)?.length > 0,
+            hasObsData: !!item.obs_data?.filter((v) => v.text_video_url)?.length,
             time: `${ start }-${ end }`,
             isExpired: dayjs(`${ date } ${ start }`).isBefore(dayjs()),
           },
         ];
       })
       .flat()
-      .filter((v) => v.date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7));
+      .filter((v: MeetingItemT) => v.date.slice(0, 7) === formatDate(selectedDate.value, 'YYYY-MM-DD').slice(0, 7));
     // 如果需要清空，则完全替换
     // 如果页码为1，表示第一次加载
     // 如果是移动端，则一直往里填充数据
@@ -224,12 +224,12 @@ const handleScroll = useDebounceFn(() => {
     getList();
   }
 }, 200);
-const calcIfAllDeleted = (date) => {
+const calcIfAllDeleted = (date: string) => {
   const meetingsOfDate = list.value.filter((v) => v.date === date);
   return meetingsOfDate.length && meetingsOfDate.every((v) => v.is_delete);
 };
 
-const scrollerScroll = (el) => {
+const scrollerScroll = (el: any) => {
   const container = el.target;
   if (!container) return;
   const scrollTop = container.scrollTop; // 已经滚动的距离
@@ -244,13 +244,13 @@ const updateScroller = () => {
   scrollerContainerEl.addEventListener('scroll', scrollerScroll);
 };
 
-const detailRefs = ref({}); // 会议详情组件实例
-const getDetailRefs = (insRef, id) => {
+const detailRefs = ref<Record<string, any>>({}); // 会议详情组件实例
+const getDetailRefs = (insRef: any, id: number) => {
   if (insRef && id) {
     detailRefs.value[id] = insRef;
   }
 };
-const copyInfo = async (idx) => {
+const copyInfo = async (idx: number) => {
   const instance = detailRefs.value[idx];
   await instance.copyInfo();
   message.success({
@@ -274,6 +274,9 @@ const confirmCancel = async () => {
   if (!props.deleteMeetingRequest) {
     return;
   }
+  if (!currentRow.value) {
+    return;
+  }
   try {
     dialogLoading.value = true;
     await props.deleteMeetingRequest(currentRow.value.id);
@@ -289,7 +292,7 @@ const confirmCancel = async () => {
 };
 const handleDialogVisible = ref(false);
 const handleDialogType = ref('');
-const handleDialogRow = ref(null);
+const handleDialogRow = ref<MeetingItemT | null>(null);
 const handleOptions = [
   {
     label: t('meeting.meetingSingle'),
@@ -323,6 +326,9 @@ const cancelHandleItem = () => {
 };
 const confirmHandleItem = async () => {
   const row = handleDialogRow.value;
+  if (!row) {
+    return;
+  }
   if (handleDialogType.value === 'cancel') {
     try {
       dialogLoading.value = true;
@@ -386,7 +392,7 @@ const cellClick = (e: PointerEvent & any, clickable: boolean) => {
   }
 };
 
-const changeMonth = (val) => {
+const changeMonth = (val: string) => {
   if (!calendarRef.value) return;
   currentPage.value = 1;
   total.value = null;
@@ -402,8 +408,13 @@ const changeMonth = (val) => {
   });
 };
 // -------------------- 列表 --------------------
+interface GroupListItemT {
+  date: string;
+  list: MeetingItemT[];
+}
+
 const groupList = computed(() => {
-  return list.value.reduce((prev, cur) => {
+  return list.value.reduce((prev: GroupListItemT[], cur: MeetingItemT) => {
     if (!prev.length) {
       return [
         {
@@ -413,7 +424,7 @@ const groupList = computed(() => {
       ];
     } else {
       const last = prev.at(-1);
-      if (last.date === cur.date) {
+      if (last?.date === cur.date) {
         last.list.push(cur);
       } else {
         prev.push({
@@ -469,12 +480,12 @@ onUnmounted(() => {
   scrollerContainerEl?.removeEventListener('scroll', scrollerScroll);
 });
 
-const formatYearMonth = (date) => {
-  date = dayjs(date ? date : undefined);
+const formatYearMonth = (date: string) => {
+  const date2 = dayjs(date ? date : undefined);
   if (isEn.value) {
-    return date.format('MMMM YYYY');
+    return date2.format('MMMM YYYY');
   } else {
-    return date.format('YYYY MM月');
+    return date2.format('YYYY MM月');
   }
 };
 const handleActions = computed<DialogActionT[]>(() => {
@@ -776,11 +787,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
     gap: var(--o-gap-4);
     height: 100%;
     --phone-padding-top: 0;
-    @include respond-to('pad_v') {
+    @include respond('pad_v') {
       flex-direction: column;
       gap: var(--o-gap-4);
     }
-    @include respond-to('phone') {
+    @include respond('phone') {
       flex-direction: column;
       gap: var(--o-gap-3);
       --phone-padding-top: calc(var(--o-gap-5) + var(--o-gap-3) + var(--o-gap-3));
@@ -820,7 +831,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         }
       }
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         padding-top: var(--o-gap-7);
         background-color: var(--o-color-fill1);
         padding-bottom: var(--o-gap-4);
@@ -839,7 +850,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       width: 334px;
       background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
 
-      @include respond-to('pad_h') {
+      @include respond('pad_h') {
         .el-calendar {
           .el-calendar__body {
             padding-left: 12px;
@@ -857,10 +868,10 @@ const cancelActions = computed<DialogActionT[]>(() => {
           }
         }
       }
-      @include respond-to('pad_v') {
+      @include respond('pad_v') {
         width: 100%;
       }
-      @include respond-to('phone') {
+      @include respond('phone') {
         display: none;
       }
       .el-calendar {
@@ -995,11 +1006,11 @@ const cancelActions = computed<DialogActionT[]>(() => {
                 }
 
                 &.expired::after {
-                  background-color: rgb(var(--o-mixedgray-6));
+                  background-color: rgb(var(--o-grey-6));
                 }
 
                 &.all-deleted::after {
-                  background-color: rgb(var(--o-mixedgray-6));
+                  background-color: rgb(var(--o-grey-6));
                 }
               }
             }
@@ -1017,7 +1028,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
       flex-grow: 1;
       background-color: var(--o-color-fill2);
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
       }
       &.is-empty {
@@ -1038,7 +1049,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
         height: 100%;
         max-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height) * 1px);
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           max-height: fit-content;
         }
 
@@ -1050,7 +1061,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             flex-grow: 1;
           }
 
-          @include respond-to('phone') {
+          @include respond('phone') {
             padding-left: var(--o-gap-2);
           }
 
@@ -1079,13 +1090,13 @@ const cancelActions = computed<DialogActionT[]>(() => {
               width: 16px;
               height: 26px;
               position: relative;
-              @include respond-to('laptop') {
+              @include respond('laptop') {
                 height: 24px;
               }
-              @include respond-to('pad_h') {
+              @include respond('pad_h') {
                 height: 22px;
               }
-              @include respond-to('<=pad_v') {
+              @include respond('<=pad_v') {
                 height: 22px;
               }
 
@@ -1134,7 +1145,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             margin-bottom: var(--o-gap-2);
             color: var(--o-color-info1);
             @include text2;
-            @include respond-to('phone') {
+            @include respond('phone') {
               padding-left: var(--o-gap-5);
             }
 
@@ -1149,7 +1160,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
     .list-body {
       height: 100%;
 
-      @include respond-to('phone') {
+      @include respond('phone') {
         height: fit-content;
         padding: var(--o-gap-4) !important;
       }
@@ -1165,7 +1176,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           --btn-color: var(--o-color-primary2);
         }
 
-        @include respond-to('phone') {
+        @include respond('phone') {
           display: none;
         }
 
@@ -1224,21 +1235,21 @@ const cancelActions = computed<DialogActionT[]>(() => {
           transition: margin var(--o-easing-standard) var(--o-duration-s);
           --copy-display: none;
           --icon-size: 24px;
-          @include respond-to('<=pad_v') {
+          @include respond('<=pad_v') {
             padding: var(--o-gap-3) var(--o-gap-4);
           }
 
           &:hover {
-            @include respond-to('>pad_v') {
+            @include respond('>pad_v') {
               --copy-display: inline-flex;
             }
           }
 
-          @include respond-to('phone') {
+          @include respond('phone') {
             --icon-size: 20px;
           }
           &.o-collapse-item-expanded {
-            @include respond-to('<=pad_v') {
+            @include respond('<=pad_v') {
               --copy-display: inline-flex;
             }
           }
@@ -1261,7 +1272,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
             position: relative;
             top: 4px;
             flex-shrink: 0;
-            @include respond-to('phone') {
+            @include respond('phone') {
               position: absolute;
               right: 0;
               width: 20px;
@@ -1286,7 +1297,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               gap: var(--o-gap-3);
               width: 100%;
               margin-bottom: var(--o-gap-2);
-              @include respond-to('phone') {
+              @include respond('phone') {
                 flex-grow: 1;
                 width: 100%;
                 align-self: stretch;
@@ -1388,7 +1399,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
               height: 18px;
               width: 18px;
               display: var(--copy-display);
-              @include respond-to('phone') {
+              @include respond('phone') {
                 bottom: var(--o-gap-2);
                 right: calc(20px + var(--o-gap-2))
               }
@@ -1412,7 +1423,7 @@ const cancelActions = computed<DialogActionT[]>(() => {
           .meeting-detail {
             padding-left: calc(var(--o-gap-3) + var(--icon-size));
 
-            @include respond-to('phone') {
+            @include respond('phone') {
               padding-left: 0;
             }
 

package/src/components/meeting/OSigMeetingCalendar.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import { ODivider, OPopover, OIcon, OTabPane, OTab } from '@opensig/opendesign';
+import { ODivider, OPopover, OIcon, OTabPane, OTab, OScroller } from '@opensig/opendesign';
 import dayjs from 'dayjs';
 import IconTips from '~icons/components/icon-tips.svg';
 import OSigMeetingAside from './components/OSigMeetingAside.vue';
-import { CalendarDataType, MeetingItemT } from './types.ts';
+import { CalendarDataType, MeetingEventsItemT, MeetingItemT } from './types.ts';
 import { useScreen } from '@opendesign-plus/composables';
 import { useMeetingConfig } from './composables/useMeetingConfig';
 import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
@@ -21,22 +21,22 @@ const { lePadV } = useScreen();
 const selectDate = ref<string>('');
 
 const loading = ref(false); // 数据加载状态
-const list = ref<MeetingItemT[]>([]); // 某天的会议列表
+const list = ref<(MeetingItemT | MeetingEventsItemT)[]>([]); // 某天的会议列表
 const calendarRows = computed(() => (lePadV.value ? 100 : 5)); // 日历行数
 
 const latestDate = ref<string>('');
 const meetingDates = ref<string[]>([]);
 const eventsDates = ref<string[]>([]);
-const eventsData = ref([]);
+const eventsData = ref<MeetingEventsItemT[]>([]);
 const monthIdx = ref(-1);
-const clickDateCell2 = (date) => {
+const clickDateCell2 = (date: string) => {
   clickDateCell(date);
 };
-const changeSelect = (v) => {
+const changeSelect = (v: string) => {
   clickDateCell(v);
 };
 // 获取所选日期的会议列表
-const clickDateCell = async (date) => {
+const clickDateCell = async (date: string) => {
   if (!props.getMeetingListRequest) {
     return;
   }
@@ -44,7 +44,7 @@ const clickDateCell = async (date) => {
     loading.value = true;
     selectDate.value = dayjs(date).format('YYYY-MM-DD');
     const res = await props.getMeetingListRequest(selectDate.value, props.sigName);
-    list.value = res.map((v) => {
+    list.value = res.map((v: MeetingItemT) => {
       return {
         ...v,
         time: `${ v.start }-${ v.end }`,
@@ -55,7 +55,7 @@ const clickDateCell = async (date) => {
   } finally {
     loading.value = false;
     eventsData.value.forEach((v) => {
-      if (v.dates.includes(selectDate.value)) {
+      if (v.dates?.includes(selectDate.value)) {
         list.value.push(v);
       }
     });
@@ -69,7 +69,7 @@ const getDates = async () => {
   }
   if (props.getEventsListRequest) {
     eventsData.value = await props.getEventsListRequest();
-    eventsDates.value = (eventsData.value || []).map(v => v.dates).flat();
+    eventsDates.value = (eventsData.value || []).map(v => v.dates || []).flat();
   }
 };
 const tabType = ref(CalendarDataType.ALL);
@@ -81,13 +81,14 @@ watch(
   () => lePadV.value,
   () => {
     if (lePadV.value) {
-      selectTab(CalendarDataType.ALL);
+      tabType.value = CalendarDataType.ALL;
+      selectTab();
     }
   },
 );
 // -------------------- 获取有会议的日期 --------------------
 
-const getMonthAndDay = (date) => {
+const getMonthAndDay = (date: string) => {
   const dateStr = dayjs(date).format('YYYY-MM-DD');
   return [dateStr.slice(0, 7), dateStr.slice(8, 10)];
 };
@@ -121,9 +122,8 @@ watch(() => dateList.value, (val) => {
     });
   }
 });
-
 const groupDateList = computed(() => {
-  const obj = dateList.value.reduce((pre, cur) => {
+  const obj = dateList.value.reduce((pre: any, cur: any) => {
     const [month, day] = getMonthAndDay(cur);
     pre[month] = {
       count: (pre[month]?.count || 0) + 1,
@@ -139,11 +139,11 @@ const groupDateList = computed(() => {
     };
   });
   const list: any[] = [];
-  let current = [];
+  let current: any[] = [];
   monthList.forEach((t) => {
     while (t.days.length) {
       if (!current.length) {
-        t.days.splice(0, 6).forEach((day) => {
+        t.days.splice(0, 6).forEach((day: string) => {
           current.push({
             month: t.month,
             day: day,
@@ -160,7 +160,7 @@ const groupDateList = computed(() => {
           count += 1;
         }
         if (t.days.length + current.length <= 6) {
-          t.days.splice(0, 6).forEach((day) => {
+          t.days.splice(0, 6).forEach((day: string) => {
             current.push({
               month: t.month,
               day: day,
@@ -171,7 +171,7 @@ const groupDateList = computed(() => {
             current = [];
           }
         } else {
-          t.days.splice(0, 6 - count).forEach((day) => {
+          t.days.splice(0, 6 - count).forEach((day: string) => {
             current.push({
               month: t.month,
               day: day,
@@ -196,7 +196,7 @@ const groupDateList = computed(() => {
 
 const dateMapList = computed(() => {
   return groupDateList.value.map((group) => {
-    const obj = group.reduce((prev, cur) => {
+    const obj = group.reduce((prev: any, cur: any) => {
       prev[cur.month] = prev[cur.month] || [];
       prev[cur.month].push(cur.day);
       return prev;
@@ -212,9 +212,9 @@ const dateMapList = computed(() => {
 
 const getMonthIdx = () => {
   if (groupDateList.value.length) {
-    monthIdx.value = groupDateList.value.findIndex((v) => v.some((t) => latestDate.value === `${ t.month }-${ t.day }`));
+    monthIdx.value = groupDateList.value.findIndex((v) => v.some((t: any) => latestDate.value === `${ t.month }-${ t.day }`));
     if (monthIdx.value === -1) {
-      monthIdx.value = groupDateList.value.findIndex((v) => v.some((t) => latestDate.value.includes(t.month)));
+      monthIdx.value = groupDateList.value.findIndex((v) => v.some((t: any) => latestDate.value.includes(t.month)));
     }
   } else {
     monthIdx.value = -1;
@@ -228,7 +228,7 @@ watch(
   { deep: true },
 );
 
-const changeMonthIdx = (step) => {
+const changeMonthIdx = (step: number) => {
   monthIdx.value += step;
 };
 
@@ -292,16 +292,16 @@ onMounted(() => {
           :active="selectDate"
         />
       </template>
-      <div class="list-content">
+      <OScroller class="list-content" show-type="hover" size="small">
         <OMeetingCalendarList
-          :list="list"
+          :list="list as unknown as MeetingItemT[]"
           :rows="calendarRows"
         >
           <template #empty>
             <slot name="empty"></slot>
           </template>
         </OMeetingCalendarList>
-      </div>
+      </OScroller>
     </div>
   </div>
 </template>
@@ -312,7 +312,7 @@ onMounted(() => {
   background-color: var(--o-color-fill2);
   border-radius: var(--o-radius-xs);
   margin-top: var(--o-gap-5);
-  @include respond-to('phone') {
+  @include respond('phone') {
     .meeting-card-header {
       padding: 12px 16px 0;
 
@@ -339,7 +339,7 @@ onMounted(() => {
     align-items: center;
     padding: 12px 32px 0;
     @include text1;
-    @include respond-to('<=pad') {
+    @include respond('<=pad') {
       padding: 12px 16px 0;
     }
 
@@ -404,7 +404,10 @@ onMounted(() => {
 
   .list-content {
     flex-grow: 1;
-    height: calc(100% - 70px);
+    height: 400px;
+    @include respond('<=pad_v') {
+      height: auto;
+    }
   }
 }
 </style>