@opendesign-plus/components 0.0.1-rc.10

package/src/components/meeting/OSigMeetingCalendar.vue

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import { ref, onMounted, computed, nextTick, watch } from 'vue';
+import { ODivider, OPopover, OIcon, OTabPane, OTab } 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 { useScreen } from '@opendesign-plus/composables';
+import { MEETING_TABS } from './config.ts';
+import OMeetingCalendarList from '@/components/meeting/components/OMeetingCalendarList.vue';
+import { useI18n } from '@/i18n';
+
+const props = defineProps<{
+  //sig name
+  sigName: String;
+  getMeetingListRequest: any;
+  getDateListRequest: any;
+  getEventsListRequest: any;
+  dates: String[];
+}>();
+const { t } = useI18n();
+const { lePadV } = useScreen();
+const selectDate = ref<string>('');
+
+const loading = ref(false); // 数据加载状态
+const list = ref<MeetingItemT[]>([]); // 某天的会议列表
+const calendarRows = computed(() => (lePadV.value ? 100 : 5)); // 日历行数
+
+const latestDate = ref<string>('');
+const meetingDates = ref<string[]>([]);
+const eventsDates = ref<string[]>([]);
+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);
+    list.value = res.map((v) => {
+      return {
+        ...v,
+        time: `${ v.start }-${ v.end }`,
+        date: v.date || selectDate.value,
+        type: CalendarDataType.MEETING,
+      };
+    });
+  } finally {
+    loading.value = false;
+    eventsData.value.forEach((v) => {
+      if (v.dates.includes(selectDate.value)) {
+        list.value.push(v);
+      }
+    });
+  }
+};
+
+
+const getDates = async () => {
+  if (props.getDateListRequest) {
+    meetingDates.value = await props.getDateListRequest();
+  }
+  if (props.getEventsListRequest) {
+    eventsData.value = await props.getEventsListRequest();
+    eventsDates.value = (eventsData.value || []).map(v => v.dates).flat();
+  }
+};
+const tabType = ref(CalendarDataType.ALL);
+const selectTab = () => {
+  getDates();
+};
+
+watch(
+  () => lePadV.value,
+  () => {
+    if (lePadV.value) {
+      selectTab(CalendarDataType.ALL);
+    }
+  },
+);
+// -------------------- 获取有会议的日期 --------------------
+
+const getMonthAndDay = (date) => {
+  const dateStr = dayjs(date).format('YYYY-MM-DD');
+  return [dateStr.slice(0, 7), dateStr.slice(8, 10)];
+};
+
+const dateList = computed(() => {
+  let list = [];
+  if (tabType.value === CalendarDataType.ALL) {
+    list = [...(meetingDates.value || []), ...eventsDates.value];
+  } else if (tabType.value === CalendarDataType.MEETING) {
+    list = meetingDates.value || [];
+  } else {
+    list = eventsDates.value;
+  }
+  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, cur) => {
+    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 = [];
+  monthList.forEach((t) => {
+    while (t.days.length) {
+      if (!current.length) {
+        t.days.splice(0, 6).forEach((day) => {
+          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) => {
+            current.push({
+              month: t.month,
+              day: day,
+            });
+          });
+          if (current.length >= 5) {
+            list.push(current);
+            current = [];
+          }
+        } else {
+          t.days.splice(0, 6 - count).forEach((day) => {
+            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, 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((t) => latestDate.value === `${ t.month }-${ t.day }`));
+    if (monthIdx.value === -1) {
+      monthIdx.value = groupDateList.value.findIndex((v) => v.some((t) => latestDate.value.includes(t.month)));
+    }
+  } else {
+    monthIdx.value = -1;
+  }
+};
+watch(
+  [() => groupDateList.value, () => latestDate.value],
+  () => {
+    getMonthIdx();
+  },
+  { deep: true },
+);
+
+const changeMonthIdx = (step) => {
+  monthIdx.value += step;
+};
+
+onMounted(() => {
+  getDates();
+});
+</script>
+
+<template>
+  <div class="o-sig-meeting-calendar">
+    <div class="meeting-card-header" v-if="!lePadV">
+      <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">
+        <OTabPane v-for="item in MEETING_TABS.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="date-select">
+        <ElSelect v-model="selectDate" @change="changeSelect">
+          <template #label>{{ t('meeting.latestMeeting') }} {{ selectDate }}</template>
+          <ElOption
+            v-for="date in dateList"
+            :key="date"
+            :value="date"
+            :label="dayjs(date).format('YYYY/MM/DD')"
+          />
+        </ElSelect>
+      </div>
+    </template>
+    <ODivider class="meeting-divider" v-if="!lePadV || (lePadV && dateList.length)" />
+    <div class="meeting-card-content">
+      <template v-if="!lePadV && monthIdx !== -1">
+        <OSigMeetingAside
+          :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>
+      <div class="list-content">
+        <OMeetingCalendarList
+          :list="list"
+          :rows="calendarRows"
+        >
+          <template #empty>
+            <slot name="empty"></slot>
+          </template>
+        </OMeetingCalendarList>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.o-sig-meeting-calendar {
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-m);
+  margin-top: var(--o-gap-5);
+  @include respond-to('phone') {
+    .meeting-card-header {
+      padding: 12px 16px 0;
+
+      .el-input {
+        flex-grow: 1;
+      }
+    }
+    .meeting-divide {
+      width: calc(100% - 32px);
+    }
+  }
+
+  .date-select {
+    padding: 16px;
+
+    .o-select {
+      width: 100%;
+    }
+  }
+
+  .meeting-card-header {
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    padding: 12px 32px 0;
+    @include text1;
+    @include respond-to('<=pad') {
+      padding: 12px 16px 0;
+    }
+
+    .date-meeting {
+      max-width: var(--el-date-editor-width);
+      width: auto;
+    }
+
+    .header-left {
+      width: 35%;
+      padding-bottom: 12px;
+    }
+
+    .o-tab {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      justify-content: center;
+      position: relative;
+
+      .o-tab-nav {
+        padding-bottom: 12px;
+
+        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 {
+    flex-grow: 1;
+    height: calc(100% - 70px);
+  }
+}
+</style>