kevisual-ticket/src/pages/ModalForm.tsx

import { useEffect } from 'react';
import { useForm, Controller } from 'react-hook-form';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  TextField,
  MenuItem,
  Box
} from '@mui/material';

interface Ticket {
  id: number;
  title: string;
  status: string;
  priority: string;
  createTime: string;
}

interface ModalFormProps {
  open: boolean;
  onClose: () => void;
  onSave: (data: Ticket) => void;
  ticket: Ticket | null;
}

export const ModalForm = ({ open, onClose, onSave, ticket }: ModalFormProps) => {
  const { control, handleSubmit, reset } = useForm<Ticket>({
    defaultValues: {
      title: '',
      status: '待处理',
      priority: '中',
      createTime: new Date().toLocaleString()
    }
  });

  useEffect(() => {
    if (ticket) {
      reset(ticket);
    } else {
      reset({
        title: '',
        status: '待处理',
        priority: '中',
        createTime: new Date().toLocaleString()
      });
    }
  }, [ticket, reset]);

  const onSubmit = (data: Ticket) => {
    onSave(data);
  };

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>{ticket ? '编辑工单' : '创建工单'}</DialogTitle>
      <form onSubmit={handleSubmit(onSubmit)}>
        <DialogContent>
          <Box className="space-y-4">
            <Controller
              name="title"
              control={control}
              rules={{ required: '请输入标题' }}
              render={({ field, fieldState }) => (
                <TextField
                  {...field}
                  label="标题"
                  fullWidth
                  error={!!fieldState.error}
                  helperText={fieldState.error?.message}
                />
              )}
            />

            <Controller
              name="status"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  select
                  label="状态"
                  fullWidth
                >
                  <MenuItem value="待处理">待处理</MenuItem>
                  <MenuItem value="处理中">处理中</MenuItem>
                  <MenuItem value="已完成">已完成</MenuItem>
                </TextField>
              )}
            />

            <Controller
              name="priority"
              control={control}
              render={({ field }) => (
                <TextField
                  {...field}
                  select
                  label="优先级"
                  fullWidth
                >
                  <MenuItem value="高">高</MenuItem>
                  <MenuItem value="中">中</MenuItem>
                  <MenuItem value="低">低</MenuItem>
                </TextField>
              )}
            />
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={onClose}>取消</Button>
          <Button type="submit" variant="contained">
            保存
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
};