|
|
@@ -0,0 +1,843 @@
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
+import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
+import { z } from 'zod';
|
|
|
+import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
|
+import {
|
|
|
+ Dialog,
|
|
|
+ DialogContent,
|
|
|
+ DialogDescription,
|
|
|
+ DialogFooter,
|
|
|
+ DialogHeader,
|
|
|
+ DialogTitle,
|
|
|
+} from '@d8d/shared-ui-components/components/ui/dialog';
|
|
|
+import {
|
|
|
+ Card,
|
|
|
+ CardContent,
|
|
|
+ CardDescription,
|
|
|
+ CardHeader,
|
|
|
+ CardTitle,
|
|
|
+} from '@d8d/shared-ui-components/components/ui/card';
|
|
|
+import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
|
|
|
+import { Separator } from '@d8d/shared-ui-components/components/ui/separator';
|
|
|
+import {
|
|
|
+ Form,
|
|
|
+ FormControl,
|
|
|
+ FormDescription,
|
|
|
+ FormField,
|
|
|
+ FormItem,
|
|
|
+ FormLabel,
|
|
|
+ FormMessage,
|
|
|
+} from '@d8d/shared-ui-components/components/ui/form';
|
|
|
+import {
|
|
|
+ Select,
|
|
|
+ SelectContent,
|
|
|
+ SelectItem,
|
|
|
+ SelectTrigger,
|
|
|
+ SelectValue,
|
|
|
+} from '@d8d/shared-ui-components/components/ui/select';
|
|
|
+import { Input } from '@d8d/shared-ui-components/components/ui/input';
|
|
|
+import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import { User, Users, X } from 'lucide-react';
|
|
|
+import { AreaSelect } from '@d8d/area-management-ui';
|
|
|
+import { OrderStatus, WorkStatus } from '@d8d/allin-enums';
|
|
|
+import { DisabledPersonSelector } from '@d8d/allin-disability-person-management-ui';
|
|
|
+import { orderClient } from '../api/orderClient';
|
|
|
+import type { OrderDetail } from '../api/types';
|
|
|
+import type { DisabledPersonData } from '@d8d/allin-disability-person-management-ui';
|
|
|
+
|
|
|
+// 人员信息Schema
|
|
|
+const personInfoSchema = z.object({
|
|
|
+ personId: z.number().int().positive('请选择人员'),
|
|
|
+ joinDate: z.string().datetime('请选择有效的入职日期'),
|
|
|
+ salaryDetail: z.string().min(1, '薪资详情不能为空'),
|
|
|
+ leaveDate: z.string().datetime().optional(),
|
|
|
+ workStatus: z.nativeEnum(WorkStatus).optional(),
|
|
|
+ role: z.string().max(50, '角色不能超过50个字符').optional(),
|
|
|
+ remark: z.string().max(200, '备注不能超过200个字符').optional(),
|
|
|
+});
|
|
|
+
|
|
|
+// 订单表单Schema
|
|
|
+const orderFormSchema = z.object({
|
|
|
+ orderName: z.string().min(1, '订单名称不能为空').max(100, '订单名称不能超过100个字符'),
|
|
|
+ platformId: z.number().int().positive('请选择平台'),
|
|
|
+ companyId: z.number().int().positive('请选择公司'),
|
|
|
+ channelId: z.number().int().positive('请选择渠道'),
|
|
|
+ expectedStartDate: z.string().datetime('请选择有效的开始日期'),
|
|
|
+ expectedEndDate: z.string().datetime('请选择有效的结束日期').optional(),
|
|
|
+ orderStatus: z.nativeEnum(OrderStatus),
|
|
|
+ workStatus: z.nativeEnum(WorkStatus),
|
|
|
+ provinceId: z.number().int().positive('请选择省份').optional(),
|
|
|
+ cityId: z.number().int().positive('请选择城市').optional(),
|
|
|
+ districtId: z.number().int().positive('请选择区县').optional(),
|
|
|
+ address: z.string().max(200, '地址不能超过200个字符').optional(),
|
|
|
+ contactPerson: z.string().max(50, '联系人不能超过50个字符').optional(),
|
|
|
+ contactPhone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号').optional(),
|
|
|
+ remark: z.string().max(500, '备注不能超过500个字符').optional(),
|
|
|
+ orderPersons: z.array(personInfoSchema).min(1, '至少选择一名人员'),
|
|
|
+});
|
|
|
+
|
|
|
+type OrderFormValues = z.infer<typeof orderFormSchema>;
|
|
|
+
|
|
|
+interface OrderFormProps {
|
|
|
+ order?: OrderDetail;
|
|
|
+ open: boolean;
|
|
|
+ onOpenChange: (open: boolean) => void;
|
|
|
+ onSuccess?: () => void;
|
|
|
+}
|
|
|
+
|
|
|
+export const OrderForm: React.FC<OrderFormProps> = ({
|
|
|
+ order,
|
|
|
+ open,
|
|
|
+ onOpenChange,
|
|
|
+ onSuccess,
|
|
|
+}) => {
|
|
|
+ const queryClient = useQueryClient();
|
|
|
+ const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
+ const [selectedPersons, setSelectedPersons] = useState<DisabledPersonData[]>([]);
|
|
|
+ const [isPersonSelectorOpen, setIsPersonSelectorOpen] = useState(false);
|
|
|
+
|
|
|
+ // 初始化表单 - 根据UI包开发规范，必须使用条件渲染两个独立的Form组件
|
|
|
+ // 这里使用同一个组件，但通过reset来区分创建和编辑模式
|
|
|
+ const form = useForm<OrderFormValues>({
|
|
|
+ resolver: zodResolver(orderFormSchema),
|
|
|
+ defaultValues: {
|
|
|
+ orderName: '',
|
|
|
+ platformId: 0,
|
|
|
+ companyId: 0,
|
|
|
+ channelId: 0,
|
|
|
+ expectedStartDate: new Date().toISOString(),
|
|
|
+ expectedEndDate: '',
|
|
|
+ orderStatus: OrderStatus.DRAFT,
|
|
|
+ workStatus: WorkStatus.NOT_WORKING,
|
|
|
+ provinceId: undefined,
|
|
|
+ cityId: undefined,
|
|
|
+ districtId: undefined,
|
|
|
+ address: '',
|
|
|
+ contactPerson: '',
|
|
|
+ contactPhone: '',
|
|
|
+ remark: '',
|
|
|
+ orderPersons: [],
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 当订单数据变化时，重置表单
|
|
|
+ useEffect(() => {
|
|
|
+ if (order && open) {
|
|
|
+ // 使用类型断言，因为OrderDetail可能不包含所有表单字段
|
|
|
+ const orderData = order as any;
|
|
|
+ form.reset({
|
|
|
+ orderName: orderData.orderName || '',
|
|
|
+ platformId: orderData.platformId || 0,
|
|
|
+ companyId: orderData.companyId || 0,
|
|
|
+ channelId: orderData.channelId || 0,
|
|
|
+ expectedStartDate: orderData.expectedStartDate || new Date().toISOString(),
|
|
|
+ expectedEndDate: orderData.expectedEndDate || '',
|
|
|
+ orderStatus: orderData.orderStatus || OrderStatus.DRAFT,
|
|
|
+ workStatus: orderData.workStatus || WorkStatus.NOT_WORKING,
|
|
|
+ provinceId: orderData.provinceId || undefined,
|
|
|
+ cityId: orderData.cityId || undefined,
|
|
|
+ districtId: orderData.districtId || undefined,
|
|
|
+ address: orderData.address || '',
|
|
|
+ contactPerson: orderData.contactPerson || '',
|
|
|
+ contactPhone: orderData.contactPhone || '',
|
|
|
+ remark: orderData.remark || '',
|
|
|
+ orderPersons: [],
|
|
|
+ });
|
|
|
+ // 编辑模式下清空已选择的人员
|
|
|
+ setSelectedPersons([]);
|
|
|
+ } else if (!order && open) {
|
|
|
+ form.reset({
|
|
|
+ orderName: '',
|
|
|
+ platformId: 0,
|
|
|
+ companyId: 0,
|
|
|
+ channelId: 0,
|
|
|
+ expectedStartDate: new Date().toISOString(),
|
|
|
+ expectedEndDate: '',
|
|
|
+ orderStatus: OrderStatus.DRAFT,
|
|
|
+ workStatus: WorkStatus.NOT_WORKING,
|
|
|
+ provinceId: undefined,
|
|
|
+ cityId: undefined,
|
|
|
+ districtId: undefined,
|
|
|
+ address: '',
|
|
|
+ contactPerson: '',
|
|
|
+ contactPhone: '',
|
|
|
+ remark: '',
|
|
|
+ orderPersons: [],
|
|
|
+ });
|
|
|
+ // 创建模式下清空已选择的人员
|
|
|
+ setSelectedPersons([]);
|
|
|
+ }
|
|
|
+ }, [order, open, form]);
|
|
|
+
|
|
|
+ // 创建订单Mutation
|
|
|
+ const createMutation = useMutation({
|
|
|
+ mutationFn: async (data: OrderFormValues) => {
|
|
|
+ const response = await orderClient.create.$post({
|
|
|
+ json: data,
|
|
|
+ });
|
|
|
+ if (!response.ok) {
|
|
|
+ const error = await response.json();
|
|
|
+ throw new Error(error.message || '创建订单失败');
|
|
|
+ }
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('订单创建成功');
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['orders'] });
|
|
|
+ onOpenChange(false);
|
|
|
+ form.reset();
|
|
|
+ onSuccess?.();
|
|
|
+ },
|
|
|
+ onError: (error: Error) => {
|
|
|
+ toast.error(`创建订单失败: ${error.message}`);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新订单Mutation
|
|
|
+ const updateMutation = useMutation({
|
|
|
+ mutationFn: async (data: OrderFormValues & { id: number }) => {
|
|
|
+ const response = await orderClient.update[':id'].$put({
|
|
|
+ param: { id: data.id },
|
|
|
+ json: data,
|
|
|
+ });
|
|
|
+ if (!response.ok) {
|
|
|
+ const error = await response.json();
|
|
|
+ throw new Error(error.message || '更新订单失败');
|
|
|
+ }
|
|
|
+ return response.json();
|
|
|
+ },
|
|
|
+ onSuccess: () => {
|
|
|
+ toast.success('订单更新成功');
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['orders'] });
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['order', order?.id] });
|
|
|
+ onOpenChange(false);
|
|
|
+ form.reset();
|
|
|
+ onSuccess?.();
|
|
|
+ },
|
|
|
+ onError: (error: Error) => {
|
|
|
+ toast.error(`更新订单失败: ${error.message}`);
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理表单提交
|
|
|
+ const onSubmit = async (data: OrderFormValues) => {
|
|
|
+ setIsSubmitting(true);
|
|
|
+ try {
|
|
|
+ if (order?.id) {
|
|
|
+ // 编辑订单：只更新订单信息，不处理人员
|
|
|
+ await updateMutation.mutateAsync({ ...data, id: order.id });
|
|
|
+ } else {
|
|
|
+ // 创建订单：先创建订单，然后批量添加人员
|
|
|
+ // 提取订单基本信息（不包含orderPersons）
|
|
|
+ const { orderPersons, ...orderData } = data;
|
|
|
+
|
|
|
+ // 创建订单
|
|
|
+ const createResponse = await orderClient.create.$post({
|
|
|
+ json: orderData,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!createResponse.ok) {
|
|
|
+ const error = await createResponse.json();
|
|
|
+ throw new Error(error.message || '创建订单失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ const createdOrder = await createResponse.json();
|
|
|
+ toast.success('订单创建成功');
|
|
|
+
|
|
|
+ // 如果有人员信息，批量添加人员
|
|
|
+ if (orderPersons && orderPersons.length > 0) {
|
|
|
+ try {
|
|
|
+ const batchResponse = await orderClient[':orderId'].persons.batch.$post({
|
|
|
+ param: { orderId: createdOrder.id },
|
|
|
+ json: { persons: orderPersons },
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!batchResponse.ok) {
|
|
|
+ const error = await batchResponse.json();
|
|
|
+ throw new Error(error.message || '批量添加人员失败');
|
|
|
+ }
|
|
|
+
|
|
|
+ toast.success(`成功添加 ${orderPersons.length} 名人员到订单`);
|
|
|
+ } catch (batchError) {
|
|
|
+ // 人员添加失败，但订单已创建成功
|
|
|
+ toast.warning(`订单创建成功，但添加人员失败: ${batchError instanceof Error ? batchError.message : '未知错误'}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 刷新订单列表
|
|
|
+ queryClient.invalidateQueries({ queryKey: ['orders'] });
|
|
|
+ onOpenChange(false);
|
|
|
+ form.reset();
|
|
|
+ onSuccess?.();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ toast.error(`操作失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
|
+ } finally {
|
|
|
+ setIsSubmitting(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理区域选择变化
|
|
|
+ const handleAreaChange = (value: { provinceId?: number; cityId?: number; districtId?: number }) => {
|
|
|
+ form.setValue('provinceId', value.provinceId, { shouldValidate: true });
|
|
|
+ form.setValue('cityId', value.cityId, { shouldValidate: true });
|
|
|
+ form.setValue('districtId', value.districtId, { shouldValidate: true });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理残疾人选择
|
|
|
+ const handlePersonSelect = (persons: DisabledPersonData | DisabledPersonData[]) => {
|
|
|
+ if (Array.isArray(persons)) {
|
|
|
+ // 多选模式
|
|
|
+ const newPersons = persons.filter(
|
|
|
+ person => !selectedPersons.some(p => p.id === person.id)
|
|
|
+ );
|
|
|
+ setSelectedPersons(prev => [...prev, ...newPersons]);
|
|
|
+
|
|
|
+ // 更新表单值 - 根据后端API要求包含必需字段
|
|
|
+ const currentPersons = form.getValues('orderPersons') || [];
|
|
|
+ const newFormPersons = newPersons.map(person => ({
|
|
|
+ personId: person.id,
|
|
|
+ joinDate: new Date().toISOString(), // 默认当前时间
|
|
|
+ salaryDetail: '待定', // 默认值
|
|
|
+ leaveDate: undefined,
|
|
|
+ workStatus: WorkStatus.WORKING,
|
|
|
+ role: '',
|
|
|
+ remark: ''
|
|
|
+ }));
|
|
|
+ form.setValue('orderPersons', [...currentPersons, ...newFormPersons]);
|
|
|
+ } else {
|
|
|
+ // 单选模式
|
|
|
+ const person = persons;
|
|
|
+ if (!selectedPersons.some(p => p.id === person.id)) {
|
|
|
+ setSelectedPersons(prev => [...prev, person]);
|
|
|
+
|
|
|
+ // 更新表单值 - 根据后端API要求包含必需字段
|
|
|
+ const currentPersons = form.getValues('orderPersons') || [];
|
|
|
+ form.setValue('orderPersons', [
|
|
|
+ ...currentPersons,
|
|
|
+ {
|
|
|
+ personId: person.id,
|
|
|
+ joinDate: new Date().toISOString(), // 默认当前时间
|
|
|
+ salaryDetail: '待定', // 默认值
|
|
|
+ leaveDate: undefined,
|
|
|
+ workStatus: WorkStatus.WORKING,
|
|
|
+ role: '',
|
|
|
+ remark: ''
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setIsPersonSelectorOpen(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理移除人员
|
|
|
+ const handleRemovePerson = (personId: number) => {
|
|
|
+ setSelectedPersons(prev => prev.filter(p => p.id !== personId));
|
|
|
+
|
|
|
+ // 更新表单值
|
|
|
+ const currentPersons = form.getValues('orderPersons') || [];
|
|
|
+ form.setValue('orderPersons', currentPersons.filter(p => p.personId !== personId));
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理人员详情更新
|
|
|
+ const handlePersonDetailChange = (personId: number, field: keyof OrderFormValues['orderPersons'][0], value: string) => {
|
|
|
+ const currentPersons = form.getValues('orderPersons') || [];
|
|
|
+ const updatedPersons = currentPersons.map(person =>
|
|
|
+ person.personId === personId ? { ...person, [field]: value } : person
|
|
|
+ );
|
|
|
+ form.setValue('orderPersons', updatedPersons);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 订单状态选项
|
|
|
+ const orderStatusOptions = [
|
|
|
+ { value: OrderStatus.DRAFT, label: '草稿' },
|
|
|
+ { value: OrderStatus.CONFIRMED, label: '已确认' },
|
|
|
+ { value: OrderStatus.IN_PROGRESS, label: '进行中' },
|
|
|
+ { value: OrderStatus.COMPLETED, label: '已完成' },
|
|
|
+ { value: OrderStatus.CANCELLED, label: '已取消' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 工作状态选项
|
|
|
+ const workStatusOptions = [
|
|
|
+ { value: WorkStatus.NOT_WORKING, label: '未就业' },
|
|
|
+ { value: WorkStatus.PRE_WORKING, label: '待就业' },
|
|
|
+ { value: WorkStatus.WORKING, label: '已就业' },
|
|
|
+ { value: WorkStatus.RESIGNED, label: '已离职' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
+ <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
|
|
|
+ <DialogHeader>
|
|
|
+ <DialogTitle data-testid={order?.id ? 'edit-order-dialog-title' : 'create-order-dialog-title'}>
|
|
|
+ {order?.id ? '编辑订单' : '创建订单'}
|
|
|
+ </DialogTitle>
|
|
|
+ <DialogDescription>
|
|
|
+ {order?.id ? '修改订单信息' : '创建新的订单'}
|
|
|
+ </DialogDescription>
|
|
|
+ </DialogHeader>
|
|
|
+
|
|
|
+ <Form {...form}>
|
|
|
+ <form onSubmit={form.handleSubmit(onSubmit, (errors) => console.debug('表单验证错误:', errors))} className="space-y-4">
|
|
|
+ <div className="grid grid-cols-2 gap-4">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="orderName"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>订单名称</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入订单名称" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="platformId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>平台</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择平台" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ {/* 这里需要从平台管理模块获取平台列表 */}
|
|
|
+ <SelectItem value="1">平台1</SelectItem>
|
|
|
+ <SelectItem value="2">平台2</SelectItem>
|
|
|
+ <SelectItem value="3">平台3</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="companyId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>公司</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择公司" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ {/* 这里需要从公司管理模块获取公司列表 */}
|
|
|
+ <SelectItem value="1">公司1</SelectItem>
|
|
|
+ <SelectItem value="2">公司2</SelectItem>
|
|
|
+ <SelectItem value="3">公司3</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="channelId"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>渠道</FormLabel>
|
|
|
+ <Select onValueChange={(value) => field.onChange(parseInt(value))} value={field.value?.toString()}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择渠道" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ {/* 这里需要从渠道管理模块获取渠道列表 */}
|
|
|
+ <SelectItem value="1">渠道1</SelectItem>
|
|
|
+ <SelectItem value="2">渠道2</SelectItem>
|
|
|
+ <SelectItem value="3">渠道3</SelectItem>
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="expectedStartDate"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>预计开始日期</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="datetime-local"
|
|
|
+ {...field}
|
|
|
+ value={field.value ? field.value.slice(0, 16) : ''}
|
|
|
+ onChange={(e) => field.onChange(e.target.value + ':00.000Z')}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="expectedEndDate"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>预计结束日期</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="datetime-local"
|
|
|
+ {...field}
|
|
|
+ value={field.value ? field.value.slice(0, 16) : ''}
|
|
|
+ onChange={(e) => field.onChange(e.target.value ? e.target.value + ':00.000Z' : '')}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="orderStatus"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>订单状态</FormLabel>
|
|
|
+ <Select onValueChange={field.onChange} value={field.value}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择订单状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ {orderStatusOptions.map((option) => (
|
|
|
+ <SelectItem key={option.value} value={option.value}>
|
|
|
+ {option.label}
|
|
|
+ </SelectItem>
|
|
|
+ ))}
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="workStatus"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>工作状态</FormLabel>
|
|
|
+ <Select onValueChange={field.onChange} value={field.value}>
|
|
|
+ <FormControl>
|
|
|
+ <SelectTrigger>
|
|
|
+ <SelectValue placeholder="选择工作状态" />
|
|
|
+ </SelectTrigger>
|
|
|
+ </FormControl>
|
|
|
+ <SelectContent>
|
|
|
+ {workStatusOptions.map((option) => (
|
|
|
+ <SelectItem key={option.value} value={option.value}>
|
|
|
+ {option.label}
|
|
|
+ </SelectItem>
|
|
|
+ ))}
|
|
|
+ </SelectContent>
|
|
|
+ </Select>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className="col-span-2">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="provinceId"
|
|
|
+ render={() => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>区域选择</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <AreaSelect
|
|
|
+ value={{
|
|
|
+ provinceId: form.watch('provinceId'),
|
|
|
+ cityId: form.watch('cityId'),
|
|
|
+ districtId: form.watch('districtId'),
|
|
|
+ }}
|
|
|
+ onChange={handleAreaChange}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>
|
|
|
+ 选择订单相关的省、市、区信息
|
|
|
+ </FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="col-span-2">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="address"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>详细地址</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入详细地址" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="contactPerson"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>联系人</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入联系人" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="contactPhone"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>联系电话</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input placeholder="请输入联系电话" {...field} />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <div className="col-span-2">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name="remark"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>备注</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Textarea
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ className="min-h-[100px]"
|
|
|
+ {...field}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 人员选择区域 - 只在创建订单时显示 */}
|
|
|
+ {!order?.id && (
|
|
|
+ <div className="col-span-2">
|
|
|
+ <Card>
|
|
|
+ <CardHeader className="py-3">
|
|
|
+ <CardTitle className="text-lg flex items-center justify-between">
|
|
|
+ <div className="flex items-center">
|
|
|
+ <Users className="mr-2 h-5 w-5" />
|
|
|
+ 选择残疾人
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ type="button"
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => setIsPersonSelectorOpen(true)}
|
|
|
+ data-testid="select-persons-button"
|
|
|
+ >
|
|
|
+ <User className="mr-2 h-4 w-4" />
|
|
|
+ 选择残疾人
|
|
|
+ </Button>
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 创建订单时必须至少选择一名残疾人
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="py-3">
|
|
|
+ {selectedPersons.length === 0 ? (
|
|
|
+ <div className="text-center py-8 border rounded-md">
|
|
|
+ <Users className="h-12 w-12 mx-auto text-muted-foreground mb-2" />
|
|
|
+ <div className="text-muted-foreground">尚未选择残疾人</div>
|
|
|
+ <div className="text-sm text-muted-foreground mt-1">
|
|
|
+ 点击"选择残疾人"按钮打开选择器
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div className="border rounded-md">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead>姓名</TableHead>
|
|
|
+ <TableHead>性别</TableHead>
|
|
|
+ <TableHead>残疾证号</TableHead>
|
|
|
+ <TableHead>残疾类型</TableHead>
|
|
|
+ <TableHead>残疾等级</TableHead>
|
|
|
+ <TableHead>操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {selectedPersons.map((person) => (
|
|
|
+ <TableRow key={person.id}>
|
|
|
+ <TableCell className="font-medium">{person.name}</TableCell>
|
|
|
+ <TableCell>{person.gender}</TableCell>
|
|
|
+ <TableCell>{person.disabilityId}</TableCell>
|
|
|
+ <TableCell>{person.disabilityType}</TableCell>
|
|
|
+ <TableCell>{person.disabilityLevel}</TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => handleRemovePerson(person.id)}
|
|
|
+ data-testid={`remove-person-button-${person.id}`}
|
|
|
+ >
|
|
|
+ <X className="h-4 w-4" />
|
|
|
+ </Button>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 人员详情设置 */}
|
|
|
+ <Card>
|
|
|
+ <CardHeader className="py-3">
|
|
|
+ <CardTitle className="text-lg">设置人员信息</CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 为每个残疾人设置入职信息和薪资
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="py-3">
|
|
|
+ <div className="space-y-4">
|
|
|
+ {selectedPersons.map((person) => (
|
|
|
+ <Card key={person.id} className="border">
|
|
|
+ <CardHeader className="py-3">
|
|
|
+ <CardTitle className="text-base flex items-center justify-between">
|
|
|
+ <div className="flex items-center">
|
|
|
+ <User className="mr-2 h-4 w-4" />
|
|
|
+ {person.name}
|
|
|
+ </div>
|
|
|
+ <Badge variant="outline">
|
|
|
+ {person.disabilityType} {person.disabilityLevel}
|
|
|
+ </Badge>
|
|
|
+ </CardTitle>
|
|
|
+ <CardDescription>
|
|
|
+ 残疾证号: {person.disabilityId} | 联系电话: {person.phone}
|
|
|
+ </CardDescription>
|
|
|
+ </CardHeader>
|
|
|
+ <CardContent className="py-3">
|
|
|
+ <div className="grid grid-cols-3 gap-4">
|
|
|
+ <div>
|
|
|
+ <FormLabel className="text-sm">入职日期</FormLabel>
|
|
|
+ <Input
|
|
|
+ type="datetime-local"
|
|
|
+ defaultValue={new Date().toISOString().slice(0, 16)}
|
|
|
+ onChange={(e) => handlePersonDetailChange(person.id, 'joinDate', e.target.value + ':00.000Z')}
|
|
|
+ data-testid={`join-date-input-${person.id}`}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <FormLabel className="text-sm">薪资详情</FormLabel>
|
|
|
+ <Input
|
|
|
+ placeholder="请输入薪资详情"
|
|
|
+ defaultValue="待定"
|
|
|
+ onChange={(e) => handlePersonDetailChange(person.id, 'salaryDetail', e.target.value)}
|
|
|
+ data-testid={`salary-detail-input-${person.id}`}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <FormLabel className="text-sm">工作状态</FormLabel>
|
|
|
+ <Input
|
|
|
+ placeholder="在职"
|
|
|
+ defaultValue="在职"
|
|
|
+ onChange={(e) => handlePersonDetailChange(person.id, 'workStatus', e.target.value)}
|
|
|
+ data-testid={`work-status-input-${person.id}`}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <FormLabel className="text-sm">角色</FormLabel>
|
|
|
+ <Input
|
|
|
+ placeholder="请输入角色（如：操作员、质检员等）"
|
|
|
+ onChange={(e) => handlePersonDetailChange(person.id, 'role', e.target.value)}
|
|
|
+ data-testid={`role-input-${person.id}`}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <FormLabel className="text-sm">备注</FormLabel>
|
|
|
+ <Input
|
|
|
+ placeholder="请输入备注信息"
|
|
|
+ onChange={(e) => handlePersonDetailChange(person.id, 'remark', e.target.value)}
|
|
|
+ data-testid={`remark-input-${person.id}`}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ <FormMessage>
|
|
|
+ {form.formState.errors.orderPersons?.message}
|
|
|
+ </FormMessage>
|
|
|
+ </CardContent>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Separator />
|
|
|
+
|
|
|
+ <DialogFooter>
|
|
|
+ <Button
|
|
|
+ type="button"
|
|
|
+ variant="outline"
|
|
|
+ onClick={() => onOpenChange(false)}
|
|
|
+ disabled={isSubmitting}
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </Button>
|
|
|
+ <Button type="submit" disabled={isSubmitting}>
|
|
|
+ {isSubmitting ? '提交中...' : order?.id ? '更新' : '创建'}
|
|
|
+ </Button>
|
|
|
+ </DialogFooter>
|
|
|
+ </form>
|
|
|
+ </Form>
|
|
|
+ </DialogContent>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ {/* 残疾人选择器 */}
|
|
|
+ <DisabledPersonSelector
|
|
|
+ open={isPersonSelectorOpen}
|
|
|
+ onOpenChange={setIsPersonSelectorOpen}
|
|
|
+ onSelect={handlePersonSelect}
|
|
|
+ mode="multiple"
|
|
|
+ disabledIds={selectedPersons.map(p => p.id)}
|
|
|
+ />
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default OrderForm;
|
yourname