#

vincentlu

1 天以前 a7c4b86d3112998ab3159791cd9e89eb2ba0971d

 zy-acs-flow/src/page/guarantee/CronField.jsx

@@ -12,6 +12,7 @@
    ToggleButtonGroup,
    Typography,
    Chip,
    Skeleton,
} from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import {
@@ -26,16 +27,34 @@
    parseCronExpression,
} from './cronUtils';

const CronField = ({ source = 'cronExpr', ...rest }) => {
const CronField = ({ source = 'cronExpr', waitForValue = false, ...rest }) => {
    const translate = useTranslate();
    const { field } = useInput({ source, defaultValue: DEFAULT_CRON_EXPRESSION, ...rest });
    const [state, setState] = useState(() => parseCronExpression(field.value || DEFAULT_CRON_EXPRESSION));
    const inputConfig = waitForValue
        ? { source, ...rest }
        : { source, defaultValue: DEFAULT_CRON_EXPRESSION, ...rest };
    const { field } = useInput(inputConfig);
    const [state, setState] = useState(() =>
        parseCronExpression(field.value || DEFAULT_CRON_EXPRESSION)
    );
    const [ready, setReady] = useState(!waitForValue);
    const hasFieldValue = typeof field.value === 'string' && field.value.length > 0;

    useEffect(() => {
        setState(parseCronExpression(field.value || DEFAULT_CRON_EXPRESSION));
    }, [field.value]);
        if (!hasFieldValue) {
            if (!waitForValue) {
                setReady(true);
            }
            return;
        }
        const parsed = parseCronExpression(field.value);
        setState(parsed);
        setReady(true);
    }, [hasFieldValue, field.value, waitForValue]);

    useEffect(() => {
        if (!state) {
            return;
        }
        const cron = buildCronExpression(state);
        if (cron !== field.value) {
            field.onChange(cron);
@@ -71,8 +90,18 @@
        setState((prev) => ({ ...prev, monthDays: newDays }));
    };

    const cronExpression = useMemo(() => buildCronExpression(state), [state]);
    const description = useMemo(() => describeCronExpression(cronExpression, translate), [cronExpression, translate]);
    const cronExpression = useMemo(
        () => (state ? buildCronExpression(state) : DEFAULT_CRON_EXPRESSION),
        [state]
    );
    const description = useMemo(
        () => describeCronExpression(cronExpression, translate),
        [cronExpression, translate]
    );

    if (!ready || !state) {
        return <Skeleton variant="rectangular" height={180} sx={{ borderRadius: 1 }} />;
    }

    return (
        <Stack spacing={2} sx={{ width: '100%' }}>
@@ -116,6 +145,8 @@
                    options={MONTH_DAY_OPTIONS}
                    value={state.monthDays || []}
                    onChange={handleMonthDaysChange}
                    getOptionLabel={(option) => option?.toString?.() || `${option}`}
                    isOptionEqualToValue={(option, value) => Number(option) === Number(value)}
                    renderTags={(value, getTagProps) =>
                        value.map((option, index) => (
                            <Chip