config.ts 3.57 KB
import TimeRangePicker from './TimeRangePicker.vue';
import { FormSchema, useComponentRegister } from '/@/components/Form';
import { ScheduleTypeEnum, ScheduleTypeNameEnum } from '/@/enums/linkedgeEnum';
import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n(); // 加载国际化
export enum FormFieldsEnum {
  SCHEDULE_TYPE = 'type',
  TIMEZONE = 'timezone',
  STARTS_ON = 'startsOn',
  ENDS_ON = 'endsOn',
  DAYS_OF_WEEK = 'daysOfWeek',
  SCHEDULE_ITEMS = 'items',
  TIME_RANGE = 'timeRange',
}

export interface EnableRuleFormType {
  [FormFieldsEnum.DAYS_OF_WEEK]: number[];
  [FormFieldsEnum.SCHEDULE_TYPE]: ScheduleTypeEnum;
  [FormFieldsEnum.TIMEZONE]: string;
  [FormFieldsEnum.TIME_RANGE]: {
    [FormFieldsEnum.STARTS_ON]: number;
    [FormFieldsEnum.ENDS_ON]: number;
  };
}

useComponentRegister('TimeRangePicker', TimeRangePicker);

export const WeekName = [
  'rule.linkedge.index.monday',
  'rule.linkedge.index.tuesday',
  'rule.linkedge.index.wednesday',
  'rule.linkedge.index.thursday',
  'rule.linkedge.index.friday',
  'rule.linkedge.index.saturday',
  'rule.linkedge.index.sunday',
];

export enum TimezoneEnum {
  SHANG_HAI = 'Asia/Shanghai',
}

export const getFormSchemas = (): FormSchema[] => {
  return [
    {
      field: FormFieldsEnum.SCHEDULE_TYPE,
      label: t('rule.linkedge.index.enableType'),
      component: 'Select',
      required: true,
      defaultValue: ScheduleTypeEnum.ANY_TIME,
      componentProps: () => {
        return {
          options: Object.keys(ScheduleTypeEnum).map((value) => ({
            label: ScheduleTypeNameEnum[value],
            value,
          })),
          allowClear: false,
        };
      },
    },
    {
      field: FormFieldsEnum.TIMEZONE,
      label: t('rule.linkedge.index.timeZone'),
      component: 'Select',
      required: true,
      defaultValue: TimezoneEnum.SHANG_HAI,
      ifShow: ({ model }) => model[FormFieldsEnum.SCHEDULE_TYPE] !== ScheduleTypeEnum.ANY_TIME,
      componentProps: () => {
        return {
          options: [{ label: TimezoneEnum.SHANG_HAI, value: TimezoneEnum.SHANG_HAI }],
          allowClear: false,
        };
      },
    },
    {
      field: FormFieldsEnum.SCHEDULE_ITEMS,
      label: t('rule.linkedge.index.rule'),
      component: 'Input',
      ifShow: ({ model }) => model[FormFieldsEnum.SCHEDULE_TYPE] === ScheduleTypeEnum.CUSTOM,
      slot: 'custom',
    },
    {
      field: FormFieldsEnum.DAYS_OF_WEEK,
      label: t('rule.linkedge.index.enablingDay'),
      component: 'CheckboxGroup',
      ifShow: ({ model }) => model[FormFieldsEnum.SCHEDULE_TYPE] === ScheduleTypeEnum.SPECIFIC_TIME,
      rules: [{ required: true, type: 'array' }],
      componentProps: () => {
        return {
          options: Array.from({ length: 7 }, (_, index) => ({
            label: t(WeekName[index]),
            value: index + 1,
          })),
        };
      },
    },
    {
      field: FormFieldsEnum.TIME_RANGE,
      label: t('rule.linkedge.index.enablingTime'),
      component: 'TimeRangePicker',
      changeEvent: 'update:value',
      valueField: 'value',
      ifShow: ({ model }) => model[FormFieldsEnum.SCHEDULE_TYPE] === ScheduleTypeEnum.SPECIFIC_TIME,
      rules: [
        {
          required: true,
          validator(_rule, value: Record<'startsOn' | 'endsOn', number>, _callback) {
            if (!value?.endsOn) return Promise.reject(t('rule.linkedge.index.pleaseSelectEndTime'));
            if (!value?.startsOn)
              return Promise.reject(t('rule.linkedge.index.pleaseSelectStartTime'));
            return Promise.resolve();
          },
        },
      ],
    },
  ];
};