|
@@ -11,14 +11,19 @@ import { format } from 'date-fns';
|
|
|
import { createActivitySchema, updateActivitySchema } from '@/server/modules/activities/activity.schema';
|
|
import { createActivitySchema, updateActivitySchema } from '@/server/modules/activities/activity.schema';
|
|
|
import type { CreateActivityInput, UpdateActivityInput } from '@/server/modules/activities/activity.schema';
|
|
import type { CreateActivityInput, UpdateActivityInput } from '@/server/modules/activities/activity.schema';
|
|
|
import { ActivityType } from '@/server/modules/activities/activity.entity';
|
|
import { ActivityType } from '@/server/modules/activities/activity.entity';
|
|
|
|
|
+import { DisabledStatus } from '@/share/types';
|
|
|
|
|
|
|
|
-// 将ISO日期时间格式化为 datetime-local 输入框需要的格式
|
|
|
|
|
-const formatDateTimeForInput = (dateString: string): string => {
|
|
|
|
|
- const date = new Date(dateString);
|
|
|
|
|
|
|
+// 将Date对象格式化为 datetime-local 输入框需要的格式
|
|
|
|
|
+const formatDateTimeForInput = (date: Date): string => {
|
|
|
// 使用 date-fns 转换为 YYYY-MM-DDTHH:mm 格式
|
|
// 使用 date-fns 转换为 YYYY-MM-DDTHH:mm 格式
|
|
|
return format(date, "yyyy-MM-dd'T'HH:mm");
|
|
return format(date, "yyyy-MM-dd'T'HH:mm");
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+// 将 datetime-local 输入框的值转换为Date对象
|
|
|
|
|
+const parseDateTimeFromInput = (dateString: string): Date => {
|
|
|
|
|
+ return new Date(dateString);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
interface ActivityFormProps {
|
|
interface ActivityFormProps {
|
|
|
initialData?: UpdateActivityInput & { id?: number };
|
|
initialData?: UpdateActivityInput & { id?: number };
|
|
|
onSubmit: (data: CreateActivityInput | UpdateActivityInput) => Promise<void>;
|
|
onSubmit: (data: CreateActivityInput | UpdateActivityInput) => Promise<void>;
|
|
@@ -26,6 +31,17 @@ interface ActivityFormProps {
|
|
|
isLoading?: boolean;
|
|
isLoading?: boolean;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 表单数据类型 - 使用字符串表示时间字段
|
|
|
|
|
+interface ActivityFormData {
|
|
|
|
|
+ name: string;
|
|
|
|
|
+ description: string;
|
|
|
|
|
+ type: ActivityType;
|
|
|
|
|
+ startDate: string;
|
|
|
|
|
+ endDate: string;
|
|
|
|
|
+ venueLocationId?: number;
|
|
|
|
|
+ isDisabled?: DisabledStatus;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
initialData,
|
|
initialData,
|
|
|
onSubmit,
|
|
onSubmit,
|
|
@@ -34,7 +50,22 @@ export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
}) => {
|
|
}) => {
|
|
|
const isEditing = !!initialData?.id;
|
|
const isEditing = !!initialData?.id;
|
|
|
|
|
|
|
|
- const form = useForm<CreateActivityInput | UpdateActivityInput>({
|
|
|
|
|
|
|
+ // 创建表单数据转换函数
|
|
|
|
|
+ const transformFormDataToSubmit = (formData: any): CreateActivityInput | UpdateActivityInput => {
|
|
|
|
|
+ const submitData: any = { ...formData };
|
|
|
|
|
+
|
|
|
|
|
+ // 转换时间字段为Date对象
|
|
|
|
|
+ if (formData.startDate) {
|
|
|
|
|
+ submitData.startDate = parseDateTimeFromInput(formData.startDate);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (formData.endDate) {
|
|
|
|
|
+ submitData.endDate = parseDateTimeFromInput(formData.endDate);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return submitData;
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ const form = useForm({
|
|
|
resolver: zodResolver(isEditing ? updateActivitySchema : createActivitySchema),
|
|
resolver: zodResolver(isEditing ? updateActivitySchema : createActivitySchema),
|
|
|
defaultValues: initialData ? {
|
|
defaultValues: initialData ? {
|
|
|
name: initialData.name || '',
|
|
name: initialData.name || '',
|
|
@@ -42,6 +73,7 @@ export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
type: initialData.type || ActivityType.DEPARTURE,
|
|
type: initialData.type || ActivityType.DEPARTURE,
|
|
|
startDate: initialData.startDate ? formatDateTimeForInput(initialData.startDate) : '',
|
|
startDate: initialData.startDate ? formatDateTimeForInput(initialData.startDate) : '',
|
|
|
endDate: initialData.endDate ? formatDateTimeForInput(initialData.endDate) : '',
|
|
endDate: initialData.endDate ? formatDateTimeForInput(initialData.endDate) : '',
|
|
|
|
|
+ venueLocationId: initialData.venueLocationId,
|
|
|
isDisabled: initialData.isDisabled
|
|
isDisabled: initialData.isDisabled
|
|
|
} : {
|
|
} : {
|
|
|
name: '',
|
|
name: '',
|
|
@@ -49,12 +81,14 @@ export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
type: ActivityType.DEPARTURE,
|
|
type: ActivityType.DEPARTURE,
|
|
|
startDate: '',
|
|
startDate: '',
|
|
|
endDate: '',
|
|
endDate: '',
|
|
|
|
|
+ venueLocationId: undefined,
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- const handleSubmit = async (data: CreateActivityInput | UpdateActivityInput) => {
|
|
|
|
|
|
|
+ const handleSubmit = async (formData: any) => {
|
|
|
try {
|
|
try {
|
|
|
- await onSubmit(data);
|
|
|
|
|
|
|
+ const submitData = transformFormDataToSubmit(formData);
|
|
|
|
|
+ await onSubmit(submitData);
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error('表单提交失败:', error);
|
|
console.error('表单提交失败:', error);
|
|
|
}
|
|
}
|
|
@@ -156,7 +190,10 @@ export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
<FormControl>
|
|
<FormControl>
|
|
|
<Input
|
|
<Input
|
|
|
type="datetime-local"
|
|
type="datetime-local"
|
|
|
- {...field}
|
|
|
|
|
|
|
+ value={field.value as string}
|
|
|
|
|
+ onChange={field.onChange}
|
|
|
|
|
+ onBlur={field.onBlur}
|
|
|
|
|
+ ref={field.ref}
|
|
|
/>
|
|
/>
|
|
|
</FormControl>
|
|
</FormControl>
|
|
|
<FormDescription>
|
|
<FormDescription>
|
|
@@ -177,7 +214,10 @@ export const ActivityForm: React.FC<ActivityFormProps> = ({
|
|
|
<FormControl>
|
|
<FormControl>
|
|
|
<Input
|
|
<Input
|
|
|
type="datetime-local"
|
|
type="datetime-local"
|
|
|
- {...field}
|
|
|
|
|
|
|
+ value={field.value as string}
|
|
|
|
|
+ onChange={field.onChange}
|
|
|
|
|
+ onBlur={field.onBlur}
|
|
|
|
|
+ ref={field.ref}
|
|
|
/>
|
|
/>
|
|
|
</FormControl>
|
|
</FormControl>
|
|
|
<FormDescription>
|
|
<FormDescription>
|