98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
// file: SubTimeLineItemModal.tsx
|
|
import React, { useEffect } from 'react';
|
|
import { Form, Modal, Input, DatePicker, Upload, Button } from 'antd';
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|
import moment from 'moment';
|
|
|
|
interface ModalProps {
|
|
visible: boolean;
|
|
onCancel: () => void;
|
|
onOk: (values: any) => void;
|
|
initialValues?: any;
|
|
}
|
|
|
|
const SubTimeLineItemModal: React.FC<ModalProps> = ({ visible, onCancel, onOk, initialValues }) => {
|
|
const [form] = Form.useForm();
|
|
|
|
useEffect(() => {
|
|
if (initialValues) {
|
|
form.setFieldsValue({
|
|
title: initialValues.title,
|
|
date: initialValues.date ? moment(initialValues.date) : undefined,
|
|
location: initialValues.location,
|
|
description: initialValues.description,
|
|
cover: initialValues.cover,
|
|
});
|
|
}
|
|
}, [initialValues]);
|
|
|
|
const handleOk = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
const newItem = {
|
|
...values,
|
|
id: initialValues?.id || Date.now(),
|
|
cover:
|
|
form.getFieldValue('cover') ||
|
|
(initialValues && initialValues.cover),
|
|
date: values.date.format('YYYY-MM-DD'),
|
|
};
|
|
onOk(newItem);
|
|
} catch (error) {
|
|
console.error('表单验证失败:', error);
|
|
}
|
|
};
|
|
|
|
const uploadProps = {
|
|
beforeUpload: () => false,
|
|
onChange: ({ fileList }) => {},
|
|
listType: 'picture' as const,
|
|
maxCount: 1,
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
open={visible}
|
|
title={initialValues ? '编辑时间点' : '添加时间点'}
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
onCancel();
|
|
}}
|
|
footer={[
|
|
<Button key="back" onClick={onCancel}>
|
|
取消
|
|
</Button>,
|
|
<Button key="submit" type="primary" onClick={handleOk}>
|
|
确定
|
|
</Button>,
|
|
]}
|
|
>
|
|
<Form form={form} layout="vertical" name="timeLineItemForm">
|
|
<Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
|
|
<Input placeholder="请输入标题" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="时间" name="date" rules={[{ required: true, message: '请选择时间' }]}>
|
|
<DatePicker style={{ width: '100%' }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="地点" name="location">
|
|
<Input placeholder="请输入地点" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="描述" name="description">
|
|
<Input.TextArea rows={4} placeholder="请输入时间点描述" />
|
|
</Form.Item>
|
|
|
|
<Form.Item label="封面图片" name="cover">
|
|
<Upload {...uploadProps} maxCount={1}>
|
|
<Button icon={<UploadOutlined />}>上传图片</Button>
|
|
</Upload>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default SubTimeLineItemModal;
|