86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
import { App as AntApp, DatePicker, Form, Input, Modal, Select } from "antd";
|
|
import dayjs from "dayjs";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import type { CreateMaterialRequest, Material, MaterialType } from "../types";
|
|
|
|
interface AddMaterialModalProps {
|
|
onAdd: (body: CreateMaterialRequest) => Promise<Material>;
|
|
onOpenChange: (open: boolean) => void;
|
|
open: boolean;
|
|
}
|
|
|
|
interface FormValues {
|
|
associatedDate: dayjs.Dayjs;
|
|
description: string;
|
|
materialType: MaterialType;
|
|
}
|
|
|
|
const MATERIAL_TYPE_OPTIONS = [
|
|
{ label: "通用", value: "general" },
|
|
{ label: "会议", value: "meeting" },
|
|
];
|
|
|
|
export function AddMaterialModal({ onAdd, onOpenChange, open }: AddMaterialModalProps) {
|
|
const { message } = AntApp.useApp();
|
|
const [form] = Form.useForm<FormValues>();
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
form.resetFields();
|
|
}, [form, open]);
|
|
|
|
const handleFinish = async (values: FormValues) => {
|
|
const body: CreateMaterialRequest = {
|
|
associatedDate: values.associatedDate.format("YYYY-MM-DD"),
|
|
description: values.description,
|
|
materialType: values.materialType,
|
|
};
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
await onAdd(body);
|
|
message.success("素材已添加");
|
|
onOpenChange(false);
|
|
} catch (e: unknown) {
|
|
message.error(`添加失败：${e instanceof Error ? e.message : "未知错误"}`);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
confirmLoading={submitting}
|
|
destroyOnHidden
|
|
okText="确定"
|
|
onCancel={() => onOpenChange(false)}
|
|
onOk={() => void form.submit()}
|
|
open={open}
|
|
title="新增素材"
|
|
>
|
|
<Form
|
|
form={form}
|
|
initialValues={{ associatedDate: dayjs(), materialType: "general" as MaterialType }}
|
|
layout="vertical"
|
|
onFinish={(values) => void handleFinish(values)}
|
|
>
|
|
<Form.Item
|
|
label="描述"
|
|
name="description"
|
|
rules={[{ message: "请输入描述", required: true, whitespace: true }]}
|
|
>
|
|
<Input.TextArea maxLength={500} placeholder="请输入素材描述" />
|
|
</Form.Item>
|
|
<Form.Item label="关联时间" name="associatedDate" rules={[{ message: "请选择关联时间", required: true }]}>
|
|
<DatePicker className="app-inbox-datepicker" />
|
|
</Form.Item>
|
|
<Form.Item label="素材类型" name="materialType" rules={[{ message: "请选择素材类型", required: true }]}>
|
|
<Select options={MATERIAL_TYPE_OPTIONS} />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
}
|