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

package/src/components/meeting/OMeetingSigCalendar.vue

@@ -1,500 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import {
-  ODivider,
-  OPopover,
-  OIcon,
-  OTabPane,
-  OTab,
-  OScroller,
-  OSelect,
-  OOption,
-  OFigure,
-  OResult,
-} from '@opensig/opendesign';
-import dayjs from 'dayjs';
-import IconTips from '~icons/components/icon-tips.svg';
-import OMeetingSigAside from './components/OMeetingSigAside.vue';
-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';
-import { formatDate } from '@/components/meeting/utils.ts';
-import emptyDefaultImg from '@/assets/meeting/empty.png';
-
-const props = defineProps<{
-  sigName: String;
-  getMeetingListRequest: any;
-  getDateListRequest: any;
-  getEventsListRequest: any;
-  dates: String[];
-  emptyImg?: any;
-  emptyText?: string;
-}>();
-const { t, meetingTabs } = useMeetingConfig();
-const { lePadV } = useScreen();
-const selectDate = ref<string>('');
-
-const loading = ref(false); // 数据加载状态
-const meetingData = ref<MeetingItemT[]>([]); // 某天的会议列表
-const calendarRows = computed(() => (lePadV.value ? 100 : 5)); // 日历行数
-
-const latestDate = ref<string>('');
-const meetingDates = ref<string[]>([]);
-const eventsDates = ref<string[]>([]);
-const eventsData = ref<MeetingEventsItemT[]>([]);
-const monthIdx = ref(-1);
-const clickDateCell2 = (date: string) => {
-  clickDateCell(date);
-};
-const changeSelect = (v: any) => {
-  clickDateCell(v);
-};
-// 获取所选日期的会议列表
-const clickDateCell = async (date: string) => {
-  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: MeetingItemT) => {
-      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: any) => {
-      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: string) => {
-  const dateStr = dayjs(date).format('YYYY-MM-DD');
-  return [dateStr.slice(0, 7), dateStr.slice(8, 10)];
-};
-
-const dateList = computed(() => {
-  let list: any[];
-  if (tabType.value === CalendarDataType.ALL) {
-    list = [...(meetingDates.value || []), ...eventsDates.value];
-  } else if (tabType.value === CalendarDataType.MEETING) {
-    list = meetingDates.value || [];
-  } else if (tabType.value === CalendarDataType.EVENTS) {
-    list = eventsDates.value || [];
-  } else {
-    list = [];
-  }
-  return [...new Set(list)].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: any, cur: any) => {
-    const [month, day] = getMonthAndDay(cur);
-    pre[month] = {
-      count: (pre[month]?.count || 0) + 1,
-      days: [...(pre[month]?.days || []), day],
-    };
-    return pre;
-  }, {});
-
-  const monthList = Object.keys(obj).map((month) => {
-    return {
-      ...obj[month],
-      month,
-    };
-  });
-  const list: any[] = [];
-  let current: any[] = [];
-  monthList.forEach((t) => {
-    while (t.days.length) {
-      if (!current.length) {
-        t.days.splice(0, 6).forEach((day: string) => {
-          current.push({
-            month: t.month,
-            day: day,
-          });
-        });
-
-        if (current.length >= 5) {
-          list.push(current);
-          current = [];
-        }
-      } else {
-        let count = current.length;
-        if (count % 2 === 1) {
-          count += 1;
-        }
-        if (t.days.length + current.length <= 6) {
-          t.days.splice(0, 6).forEach((day: string) => {
-            current.push({
-              month: t.month,
-              day: day,
-            });
-          });
-          if (current.length >= 5) {
-            list.push(current);
-            current = [];
-          }
-        } else {
-          t.days.splice(0, 6 - count).forEach((day: string) => {
-            current.push({
-              month: t.month,
-              day: day,
-            });
-          });
-
-          if (current.length >= 5) {
-            list.push(current);
-            current = [];
-          }
-        }
-      }
-    }
-  });
-  if (current.length) {
-    list.push(current);
-    current = [];
-  }
-
-  return list;
-});
-
-const dateMapList = computed(() => {
-  return groupDateList.value.map((group) => {
-    const obj = group.reduce((prev: any, cur: any) => {
-      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((t: any) => latestDate.value === `${ t.month }-${ t.day }`));
-    if (monthIdx.value === -1) {
-      monthIdx.value = groupDateList.value.findIndex((v) => v.some((t: any) => latestDate.value.includes(t.month)));
-    }
-  } else {
-    monthIdx.value = -1;
-  }
-};
-watch(
-  [() => groupDateList.value, () => latestDate.value],
-  () => {
-    getMonthIdx();
-  },
-  { deep: true },
-);
-
-const changeMonthIdx = (step: number) => {
-  monthIdx.value += step;
-};
-
-onMounted(() => {
-  getDates();
-});
-
-const list = computed(() => {
-  let list: any[];
-  if (tabType.value === CalendarDataType.ALL) {
-    list = [...(meetingData.value || []), ...eventsData.value];
-  } else if (tabType.value === CalendarDataType.MEETING) {
-    list = meetingData.value || [];
-  } else if (tabType.value === CalendarDataType.EVENTS) {
-    list = eventsData.value || [];
-  } else {
-    list = [];
-  }
-  return list;
-});
-</script>
-
-<template>
-  <div class="o-sig-meeting-calendar">
-    <div class="meeting-card-header">
-      <div class="header-left" v-if="latestDate">
-        <span>{{ t('meeting.latestMeeting') }} </span>
-        <span>{{ dayjs(latestDate).format('YYYY/MM/DD') }}</span>
-        <OPopover>
-          <template #target>
-            <OIcon class="tips">
-              <IconTips />
-            </OIcon>
-          </template>
-          <div>
-            <p>{{ t('meeting.detailHalfYearMeetings') }}</p>
-          </div>
-        </OPopover>
-      </div>
-      <OTab v-model="tabType" @change="selectTab" :line="false" :max-show="9999">
-        <OTabPane v-for="item in meetingTabs.slice(0, -1)" :key="item.value" :value="item.value">
-          <template #nav>
-            <OIcon>
-              <component :is="item.icon" />
-            </OIcon>
-            {{ item.label }}
-          </template>
-        </OTabPane>
-      </OTab>
-    </div>
-    <template v-if="lePadV && dateList.length">
-      <div class="phone-filter-wrapper">
-        <div class="date-select">
-          <OSelect v-model="selectDate" @change="changeSelect">
-            <OOption
-              v-for="date in dateList"
-              :key="date"
-              :value="date"
-              :label="formatDate(date)"
-            />
-          </OSelect>
-        </div>
-        <div>
-          <OTab v-model="tabType" @change="selectTab" :line="false" :max-show="9999">
-            <OTabPane v-for="item in meetingTabs.slice(0, -1)" :key="item.value" :value="item.value">
-              <template #nav>
-                {{ item.label }}
-              </template>
-            </OTabPane>
-          </OTab>
-        </div>
-      </div>
-    </template>
-    <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
-    <div class="meeting-card-content">
-      <template v-if="!lePadV && monthIdx !== -1">
-        <OMeetingSigAside
-          :data="dateMapList.slice(monthIdx, monthIdx + 1)"
-          :meetingDates="tabType !== CalendarDataType.EVENTS ? meetingDates :[] "
-          :eventsDates="tabType !== CalendarDataType.MEETING ? eventsDates : []"
-          @clickDate="clickDateCell2"
-          @changeMonth="changeMonthIdx"
-          :current="monthIdx"
-          :total="dateMapList.length"
-          :active="selectDate"
-        />
-      </template>
-      <OScroller class="list-content" show-type="hover" size="small">
-        <OMeetingCalendarList
-          :list="list as unknown as MeetingItemT[]"
-          :rows="calendarRows"
-        >
-          <template #empty>
-            <slot name="empty">
-              <OResult class="empty-result">
-                <template #image>
-                  <OFigure class="img" :src="emptyImg ?? emptyDefaultImg" />
-                </template>
-                <template #description>{{ emptyText ?? t('meeting.meetingEmptyText') }}</template>
-              </OResult>
-            </slot>
-          </template>
-        </OMeetingCalendarList>
-      </OScroller>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-sig-meeting-calendar {
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
-  width: 100%;
-  background-color: var(--o-color-fill2);
-  border-radius: var(--meeting-card-radius);
-  margin-top: var(--o-gap-5);
-  @include respond('phone') {
-    .meeting-card-header {
-      .el-input {
-        flex-grow: 1;
-      }
-    }
-    .meeting-divide {
-      width: calc(100% - 32px);
-    }
-  }
-
-  .phone-filter-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--o-gap-4);
-    padding: var(--o-gap-4) var(--o-gap-3) 0 var(--o-gap-3);
-    flex-wrap: nowrap;
-    @include respond('phone') {
-      flex-wrap: wrap;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--o-gap-2);
-    }
-
-    .date-select {
-      padding-bottom: var(--o-gap-2);
-      max-width: 240px;
-      @include respond('phone') {
-        max-width: 100%;
-        width: 100%;
-        padding-bottom: 0;
-      }
-
-      .o-select {
-        width: 100%;
-      }
-    }
-
-    .o-tab {
-      flex-shrink: 0;
-      --tab-text-height: calc(var(--tab-nav-text-height) + var(--o-gap-2) + 2px);
-      @include respond('phone') {
-        --tab-text-height: var(--tab-nav-text-height);
-      }
-
-      .o-tab-head {
-        line-height: var(--tab-text-height);
-      }
-    }
-  }
-
-  .meeting-card-header {
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    padding: var(--o-gap-3) var(--o-gap-5) 0;
-    @include text1;
-    @include respond('<=pad') {
-      padding: var(--o-gap-3) var(--o-gap-4) 0;
-    }
-    @include respond('<=pad_v') {
-      display: none;
-    }
-
-    .date-meeting {
-      max-width: var(--el-date-editor-width);
-      width: auto;
-    }
-
-    .header-left {
-      width: 35%;
-      padding-bottom: var(--o-gap-3);
-      color: var(--o-color-info1);
-      @include text1;
-    }
-
-    .o-tab {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      justify-content: center;
-      position: relative;
-
-      .o-tab-nav {
-        padding-bottom: var(--o-gap-3);
-
-        svg path {
-          fill: currentColor;
-        }
-      }
-    }
-  }
-
-  .el-input__prefix {
-    display: none;
-  }
-
-  .tips {
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 16px;
-    color: var(--o-color-info1);
-    position: relative;
-    top: 2px;
-
-    path {
-      opacity: 1;
-    }
-  }
-
-  .meeting-divider {
-    width: 100%;
-    --o-divider-gap: 0;
-  }
-
-  .meeting-card-content {
-    display: flex;
-  }
-
-  .content-divider {
-    height: 400px;
-    --o-divider-label-gap: 0;
-  }
-
-  .list-content {
-    min-width: 0;
-    flex-grow: 1;
-    height: 360px;
-    @include respond('<=pad_v') {
-      height: auto;
-    }
-  }
-
-  .empty-result {
-    --result-image-width: 200px;
-    --result-image-height: 175px;
-
-    .o-result-description {
-      @include tip1;
-    }
-  }
-}
-</style>