CustomRule.config.ts 1.91 KB
import TimeRangePicker from './TimeRangePicker.vue';
import { WeekName } from './config';
import { FormSchema, useComponentRegister } from '/@/components/Form';

enum FormFieldsEnum {
  DAY_OF_WEEK = 'dayOfWeek',
  ENABLED = 'enabled',
  ENDS_ON = 'endsOn',
  STARTS_ON = 'startsOn',
  TIME_RANGE = 'timeRange',
}

export interface RuleFormRecordItem {
  [FormFieldsEnum.DAY_OF_WEEK]: number;
  [FormFieldsEnum.ENABLED]: boolean;
  [FormFieldsEnum.TIME_RANGE]: {
    [FormFieldsEnum.STARTS_ON]: number;
    [FormFieldsEnum.ENDS_ON]: number;
  };
}

useComponentRegister('TimeRangePicker', TimeRangePicker);

export const getFormSchemas = (index: number): FormSchema[] => {
  return [
    {
      field: FormFieldsEnum.DAY_OF_WEEK,
      label: '',
      component: 'InputNumber',
      defaultValue: index + 1,
      ifShow: false,
    },
    {
      field: FormFieldsEnum.ENABLED,
      label: '',
      component: 'Checkbox',
      defaultValue: false,
      renderComponentContent: () => ({
        default: () => `星期${WeekName[index]}`,
      }),
      colProps: { span: 5 },
    },
    {
      field: FormFieldsEnum.TIME_RANGE,
      label: '',
      changeEvent: 'update:value',
      valueField: 'value',
      component: 'TimeRangePicker',
      dynamicDisabled: ({ model }) => !model[FormFieldsEnum.ENABLED],
      colProps: { span: 16 },
      defaultValue: { startsOn: 0, endsOn: 0 },
      dynamicRules: ({ model }) => {
        return [
          {
            required: model[FormFieldsEnum.ENABLED],
            validator(_rule, value: Record<'startsOn' | 'endsOn', number>, _callback) {
              if (!model[FormFieldsEnum.ENABLED]) return Promise.resolve();
              if (!value?.endsOn) return Promise.reject('请选择结束时间');
              if (!value?.startsOn) return Promise.reject('请选择开始时间');
              return Promise.resolve();
            },
          },
        ];
      },
    },
  ];
};