123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
|
import { Form, Input, DatePicker, Select, Button, Upload, message } from 'antd';
|
|||
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|||
|
|
import type { UploadFile } from 'antd/es/upload/interface';
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
const { Option } = Select;
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
formData: any;
|
|||
|
|
updateFormData: (data: any) => void;
|
|||
|
|
onNext: () => void;
|
|||
|
|
onPrev: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Step2Details({ formData, updateFormData, onNext, onPrev }: Props) {
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
|||
|
|
|
|||
|
|
const handleNext = async () => {
|
|||
|
|
try {
|
|||
|
|
const values = await form.validateFields();
|
|||
|
|
updateFormData({
|
|||
|
|
...values,
|
|||
|
|
incidentDate: values.incidentDate?.format('YYYY-MM-DD'),
|
|||
|
|
uploadedFiles: fileList.map(f => f.uid),
|
|||
|
|
});
|
|||
|
|
onNext();
|
|||
|
|
} catch (error) {
|
|||
|
|
message.error('Заполните все обязательные поля');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const uploadProps = {
|
|||
|
|
fileList,
|
|||
|
|
beforeUpload: (file: File) => {
|
|||
|
|
const isImage = file.type.startsWith('image/');
|
|||
|
|
const isPDF = file.type === 'application/pdf';
|
|||
|
|
if (!isImage && !isPDF) {
|
|||
|
|
message.error('Можно загружать только изображения и PDF');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
|||
|
|
if (!isLt10M) {
|
|||
|
|
message.error('Файл должен быть меньше 10MB');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setFileList([...fileList, {
|
|||
|
|
uid: Math.random().toString(),
|
|||
|
|
name: file.name,
|
|||
|
|
status: 'done',
|
|||
|
|
url: URL.createObjectURL(file),
|
|||
|
|
} as UploadFile]);
|
|||
|
|
|
|||
|
|
return false; // Отключаем автозагрузку
|
|||
|
|
},
|
|||
|
|
onRemove: (file: UploadFile) => {
|
|||
|
|
setFileList(fileList.filter(f => f.uid !== file.uid));
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Form
|
|||
|
|
form={form}
|
|||
|
|
layout="vertical"
|
|||
|
|
initialValues={formData}
|
|||
|
|
style={{ marginTop: 24 }}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label="Дата происшествия"
|
|||
|
|
name="incidentDate"
|
|||
|
|
>
|
|||
|
|
<DatePicker style={{ width: '100%' }} format="DD.MM.YYYY" />
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="Тип транспорта"
|
|||
|
|
name="transportType"
|
|||
|
|
>
|
|||
|
|
<Select placeholder="Выберите тип транспорта">
|
|||
|
|
<Option value="air">Авиа</Option>
|
|||
|
|
<Option value="train">Поезд</Option>
|
|||
|
|
<Option value="bus">Автобус</Option>
|
|||
|
|
<Option value="ship">Водный транспорт</Option>
|
|||
|
|
<Option value="other">Другое</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item
|
|||
|
|
label="Описание происшествия"
|
|||
|
|
name="incidentDescription"
|
|||
|
|
>
|
|||
|
|
<TextArea
|
|||
|
|
rows={4}
|
|||
|
|
placeholder="Опишите что произошло..."
|
|||
|
|
maxLength={1000}
|
|||
|
|
showCount
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item label="Документы (билеты, справки, чеки)">
|
|||
|
|
<Upload {...uploadProps} listType="picture">
|
|||
|
|
<Button icon={<UploadOutlined />}>Загрузить файлы</Button>
|
|||
|
|
</Upload>
|
|||
|
|
<div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
|
|||
|
|
Максимум 10 MB на файл. Форматы: JPG, PNG, PDF, HEIC
|
|||
|
|
</div>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Form.Item>
|
|||
|
|
<div style={{ display: 'flex', gap: 8 }}>
|
|||
|
|
<Button onClick={onPrev}>Назад</Button>
|
|||
|
|
<Button type="primary" onClick={handleNext} style={{ flex: 1 }}>
|
|||
|
|
Далее
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|