@fesjs/fes-design/es/calendar/useCalendarData.js

fes-design for PC

import { computed, ref } from 'vue';
import { isNil } from 'lodash-es';
import { useNormalModel } from '../_util/use/useModel';
import { CalendarEvent } from './props';
import { convertUnixTimeToCalendarDate, convertCalendarDateToUnixTime, getToday, generateCalendarMonths, generateCalendarDates, isSameMonth } from './utils';
import { CALENDAR_ROW_NUM } from './const';

const useCalendarData = (props, emit) => {
  const [propActiveDate, setPropActiveDate] = useNormalModel(props, emit);
  const activeDate = computed({
    get: () => convertUnixTimeToCalendarDate(propActiveDate.value),
    set: nextActiveDate => setPropActiveDate(convertCalendarDateToUnixTime(nextActiveDate, propActiveDate.value))
  });
  const [mode] = useNormalModel(props, emit, {
    prop: 'mode'
  });

  // TODO: 后续支持传参修改
  // 默认从周一开始
  const startDay = ref(1);

  // 获取今天的日期
  const today = getToday();

  // 以此为锚定计算需要展示的日历
  const displayAnchorDate = ref(today);

  // 日历当前展示的 date
  const displayCalendar = computed(() => {
    if (mode.value === 'month') {
      return generateCalendarMonths(displayAnchorDate.value);
    } else {
      return generateCalendarDates(displayAnchorDate.value, {
        startDay: startDay.value,
        weekNum: CALENDAR_ROW_NUM
      });
    }
  });

  // 快捷选项点击时
  const handleShortcutClick = time => {
    let targetTime;
    if (typeof time === 'function') {
      const result = time();
      if (isNil(result)) {
        return;
      }
      targetTime = result;
    } else {
      targetTime = time;
    }

    // 当前显示的日历跳转到指定的日期
    displayAnchorDate.value = convertUnixTimeToCalendarDate(targetTime);
    // 直接操作 props 中的数据，因为只有 props 中的是 UnixTime
    setPropActiveDate(targetTime);
  };

  // 日历格子点击时
  const handleCellClick = cellDate => {
    emit(CalendarEvent.CELL_CLICK, {
      date: convertCalendarDateToUnixTime(cellDate, propActiveDate.value),
      mode: mode.value
    });
    if (mode.value === 'date' && !isSameMonth(cellDate, displayAnchorDate.value)) {
      displayAnchorDate.value = cellDate;
    }
    activeDate.value = cellDate;
  };
  return {
    activeDate,
    mode,
    displayAnchorDate,
    displayCalendar,
    today,
    startDay,
    handleShortcutClick,
    handleCellClick
  };
};

export { useCalendarData as default };