|
@@ -1,8 +1,5 @@
|
|
|
-import React, { useState } from 'react';
|
|
|
|
|
-import { useForm } from 'react-hook-form';
|
|
|
|
|
-import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
|
|
|
+import React, { useState, useEffect } from 'react';
|
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
|
|
-import { z } from 'zod';
|
|
|
|
|
import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
|
import {
|
|
import {
|
|
|
Dialog,
|
|
Dialog,
|
|
@@ -21,25 +18,31 @@ import {
|
|
|
FormLabel,
|
|
FormLabel,
|
|
|
FormMessage,
|
|
FormMessage,
|
|
|
} from '@d8d/shared-ui-components/components/ui/form';
|
|
} 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 { Input } from '@d8d/shared-ui-components/components/ui/input';
|
|
|
import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea';
|
|
import { Textarea } from '@d8d/shared-ui-components/components/ui/textarea';
|
|
|
-import { Checkbox } from '@d8d/shared-ui-components/components/ui/checkbox';
|
|
|
|
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@d8d/shared-ui-components/components/ui/table';
|
|
|
|
|
+import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
|
|
|
|
|
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@d8d/shared-ui-components/components/ui/card';
|
|
|
|
|
+import { Separator } from '@d8d/shared-ui-components/components/ui/separator';
|
|
|
|
|
+import { useForm } from 'react-hook-form';
|
|
|
|
|
+import { zodResolver } from '@hookform/resolvers/zod';
|
|
|
|
|
+import { z } from 'zod';
|
|
|
import { toast } from 'sonner';
|
|
import { toast } from 'sonner';
|
|
|
|
|
+import { User, Users, X } from 'lucide-react';
|
|
|
|
|
+import { DisabledPersonSelector } from '@d8d/allin-disability-management-ui';
|
|
|
import { orderClient } from '../api/orderClient';
|
|
import { orderClient } from '../api/orderClient';
|
|
|
-import type { PersonSelection } from '../api/types';
|
|
|
|
|
|
|
+import type { DisabledPersonData } from '@d8d/allin-disability-management-ui';
|
|
|
|
|
|
|
|
// 批量添加人员表单Schema
|
|
// 批量添加人员表单Schema
|
|
|
|
|
+// 根据后端API,需要包含joinDate、salaryDetail等字段
|
|
|
const batchAddPersonsSchema = z.object({
|
|
const batchAddPersonsSchema = z.object({
|
|
|
persons: z.array(
|
|
persons: z.array(
|
|
|
z.object({
|
|
z.object({
|
|
|
personId: z.number().int().positive('请选择人员'),
|
|
personId: z.number().int().positive('请选择人员'),
|
|
|
|
|
+ joinDate: z.string().datetime('请选择有效的入职日期'),
|
|
|
|
|
+ salaryDetail: z.string().min(1, '薪资详情不能为空'),
|
|
|
|
|
+ leaveDate: z.string().datetime().optional(),
|
|
|
|
|
+ workStatus: z.string().optional(),
|
|
|
role: z.string().max(50, '角色不能超过50个字符').optional(),
|
|
role: z.string().max(50, '角色不能超过50个字符').optional(),
|
|
|
remark: z.string().max(200, '备注不能超过200个字符').optional(),
|
|
remark: z.string().max(200, '备注不能超过200个字符').optional(),
|
|
|
})
|
|
})
|
|
@@ -63,8 +66,8 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
|
|
|
}) => {
|
|
}) => {
|
|
|
const queryClient = useQueryClient();
|
|
const queryClient = useQueryClient();
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
- const [selectedPersons, setSelectedPersons] = useState<PersonSelection[]>([]);
|
|
|
|
|
- const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
|
|
|
+ const [selectedPersons, setSelectedPersons] = useState<DisabledPersonData[]>([]);
|
|
|
|
|
+ const [isSelectorOpen, setIsSelectorOpen] = useState(false);
|
|
|
|
|
|
|
|
// 初始化表单
|
|
// 初始化表单
|
|
|
const form = useForm<BatchAddPersonsFormValues>({
|
|
const form = useForm<BatchAddPersonsFormValues>({
|
|
@@ -74,22 +77,6 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
- // 模拟人员数据 - 实际项目中应该从人员管理模块获取
|
|
|
|
|
- const mockPersons: PersonSelection[] = [
|
|
|
|
|
- { id: 1, name: '张三', idCard: '110101199001011234', phone: '13800138001' },
|
|
|
|
|
- { id: 2, name: '李四', idCard: '110101199002022345', phone: '13800138002' },
|
|
|
|
|
- { id: 3, name: '王五', idCard: '110101199003033456', phone: '13800138003' },
|
|
|
|
|
- { id: 4, name: '赵六', idCard: '110101199004044567', phone: '13800138004' },
|
|
|
|
|
- { id: 5, name: '钱七', idCard: '110101199005055678', phone: '13800138005' },
|
|
|
|
|
- ];
|
|
|
|
|
-
|
|
|
|
|
- // 过滤人员列表
|
|
|
|
|
- const filteredPersons = mockPersons.filter(person =>
|
|
|
|
|
- person.name.includes(searchQuery) ||
|
|
|
|
|
- person.idCard?.includes(searchQuery) ||
|
|
|
|
|
- person.phone?.includes(searchQuery)
|
|
|
|
|
- );
|
|
|
|
|
-
|
|
|
|
|
// 批量添加人员Mutation
|
|
// 批量添加人员Mutation
|
|
|
const batchAddMutation = useMutation({
|
|
const batchAddMutation = useMutation({
|
|
|
mutationFn: async (data: BatchAddPersonsFormValues) => {
|
|
mutationFn: async (data: BatchAddPersonsFormValues) => {
|
|
@@ -126,26 +113,63 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // 处理人员选择
|
|
|
|
|
- const handlePersonSelect = (person: PersonSelection, checked: boolean) => {
|
|
|
|
|
- if (checked) {
|
|
|
|
|
- setSelectedPersons(prev => [...prev, person]);
|
|
|
|
|
- // 更新表单值
|
|
|
|
|
|
|
+ // 处理残疾人选择
|
|
|
|
|
+ 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('persons') || [];
|
|
const currentPersons = form.getValues('persons') || [];
|
|
|
- form.setValue('persons', [
|
|
|
|
|
- ...currentPersons,
|
|
|
|
|
- { personId: person.id, role: '', remark: '' }
|
|
|
|
|
- ]);
|
|
|
|
|
|
|
+ const newFormPersons = newPersons.map(person => ({
|
|
|
|
|
+ personId: person.id,
|
|
|
|
|
+ joinDate: new Date().toISOString(), // 默认当前时间
|
|
|
|
|
+ salaryDetail: '待定', // 默认值
|
|
|
|
|
+ leaveDate: undefined,
|
|
|
|
|
+ workStatus: '在职',
|
|
|
|
|
+ role: '',
|
|
|
|
|
+ remark: ''
|
|
|
|
|
+ }));
|
|
|
|
|
+ form.setValue('persons', [...currentPersons, ...newFormPersons]);
|
|
|
} else {
|
|
} else {
|
|
|
- setSelectedPersons(prev => prev.filter(p => p.id !== person.id));
|
|
|
|
|
- // 更新表单值
|
|
|
|
|
- const currentPersons = form.getValues('persons') || [];
|
|
|
|
|
- form.setValue('persons', currentPersons.filter(p => p.personId !== person.id));
|
|
|
|
|
|
|
+ // 单选模式
|
|
|
|
|
+ const person = persons;
|
|
|
|
|
+ if (!selectedPersons.some(p => p.id === person.id)) {
|
|
|
|
|
+ setSelectedPersons(prev => [...prev, person]);
|
|
|
|
|
+
|
|
|
|
|
+ // 更新表单值 - 根据后端API要求包含必需字段
|
|
|
|
|
+ const currentPersons = form.getValues('persons') || [];
|
|
|
|
|
+ form.setValue('persons', [
|
|
|
|
|
+ ...currentPersons,
|
|
|
|
|
+ {
|
|
|
|
|
+ personId: person.id,
|
|
|
|
|
+ joinDate: new Date().toISOString(), // 默认当前时间
|
|
|
|
|
+ salaryDetail: '待定', // 默认值
|
|
|
|
|
+ leaveDate: undefined,
|
|
|
|
|
+ workStatus: '在职',
|
|
|
|
|
+ role: '',
|
|
|
|
|
+ remark: ''
|
|
|
|
|
+ }
|
|
|
|
|
+ ]);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ setIsSelectorOpen(false);
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 处理移除人员
|
|
|
|
|
+ const handleRemovePerson = (personId: number) => {
|
|
|
|
|
+ setSelectedPersons(prev => prev.filter(p => p.id !== personId));
|
|
|
|
|
+
|
|
|
|
|
+ // 更新表单值
|
|
|
|
|
+ const currentPersons = form.getValues('persons') || [];
|
|
|
|
|
+ form.setValue('persons', currentPersons.filter(p => p.personId !== personId));
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // 处理角色和备注更新
|
|
|
|
|
- const handlePersonDetailChange = (personId: number, field: 'role' | 'remark', value: string) => {
|
|
|
|
|
|
|
+ // 处理人员详情更新
|
|
|
|
|
+ const handlePersonDetailChange = (personId: number, field: keyof BatchAddPersonsFormValues['persons'][0], value: string) => {
|
|
|
const currentPersons = form.getValues('persons') || [];
|
|
const currentPersons = form.getValues('persons') || [];
|
|
|
const updatedPersons = currentPersons.map(person =>
|
|
const updatedPersons = currentPersons.map(person =>
|
|
|
person.personId === personId ? { ...person, [field]: value } : person
|
|
person.personId === personId ? { ...person, [field]: value } : person
|
|
@@ -153,121 +177,221 @@ export const PersonSelector: React.FC<PersonSelectorProps> = ({
|
|
|
form.setValue('persons', updatedPersons);
|
|
form.setValue('persons', updatedPersons);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
|
|
+ // 重置状态
|
|
|
|
|
+ const resetState = () => {
|
|
|
|
|
+ setSelectedPersons([]);
|
|
|
|
|
+ setIsSelectorOpen(false);
|
|
|
|
|
+ form.reset({
|
|
|
|
|
+ persons: [],
|
|
|
|
|
+ });
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ // 当对话框关闭时重置状态
|
|
|
|
|
+ useEffect(() => {
|
|
|
|
|
+ if (!open) {
|
|
|
|
|
+ resetState();
|
|
|
|
|
+ }
|
|
|
|
|
+ }, [open]);
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
- <Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
|
|
- <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
|
|
|
|
|
- <DialogHeader>
|
|
|
|
|
- <DialogTitle>批量添加人员到订单</DialogTitle>
|
|
|
|
|
- <DialogDescription>
|
|
|
|
|
- 选择要添加到订单的人员,并设置角色和备注信息
|
|
|
|
|
- </DialogDescription>
|
|
|
|
|
- </DialogHeader>
|
|
|
|
|
|
|
+ <>
|
|
|
|
|
+ <Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
|
|
+ <DialogContent className="sm:max-w-[800px] max-h-[90vh] overflow-y-auto">
|
|
|
|
|
+ <DialogHeader>
|
|
|
|
|
+ <DialogTitle>批量添加残疾人到订单</DialogTitle>
|
|
|
|
|
+ <DialogDescription>
|
|
|
|
|
+ 选择要添加到订单的残疾人,并设置角色和备注信息
|
|
|
|
|
+ </DialogDescription>
|
|
|
|
|
+ </DialogHeader>
|
|
|
|
|
|
|
|
- <Form {...form}>
|
|
|
|
|
- <form onSubmit={form.handleSubmit(onSubmit, (errors) => console.debug('表单验证错误:', errors))} className="space-y-4">
|
|
|
|
|
- {/* 搜索框 */}
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <FormLabel>搜索人员</FormLabel>
|
|
|
|
|
- <Input
|
|
|
|
|
- placeholder="输入姓名、身份证号或手机号搜索"
|
|
|
|
|
- value={searchQuery}
|
|
|
|
|
- onChange={(e) => setSearchQuery(e.target.value)}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <Form {...form}>
|
|
|
|
|
+ <form onSubmit={form.handleSubmit(onSubmit, (errors) => console.debug('表单验证错误:', errors))} className="space-y-6">
|
|
|
|
|
+ {/* 选择残疾人区域 */}
|
|
|
|
|
+ <Card>
|
|
|
|
|
+ <CardHeader>
|
|
|
|
|
+ <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={() => setIsSelectorOpen(true)}
|
|
|
|
|
+ >
|
|
|
|
|
+ <User className="mr-2 h-4 w-4" />
|
|
|
|
|
+ 选择残疾人
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </CardTitle>
|
|
|
|
|
+ <CardDescription>
|
|
|
|
|
+ 使用残疾人选择器选择要添加到订单的残疾人
|
|
|
|
|
+ </CardDescription>
|
|
|
|
|
+ </CardHeader>
|
|
|
|
|
+ <CardContent>
|
|
|
|
|
+ {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="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)}
|
|
|
|
|
+ >
|
|
|
|
|
+ <X className="h-4 w-4" />
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </TableCell>
|
|
|
|
|
+ </TableRow>
|
|
|
|
|
+ ))}
|
|
|
|
|
+ </TableBody>
|
|
|
|
|
+ </Table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ <FormMessage>
|
|
|
|
|
+ {form.formState.errors.persons?.message}
|
|
|
|
|
+ </FormMessage>
|
|
|
|
|
+ </CardContent>
|
|
|
|
|
+ </Card>
|
|
|
|
|
|
|
|
- {/* 人员选择列表 */}
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <FormLabel>选择人员</FormLabel>
|
|
|
|
|
- <div className="border rounded-md p-4 max-h-60 overflow-y-auto">
|
|
|
|
|
- {filteredPersons.length === 0 ? (
|
|
|
|
|
- <div className="text-center py-8 text-muted-foreground">
|
|
|
|
|
- {searchQuery ? '未找到匹配的人员' : '暂无人员数据'}
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : (
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- {filteredPersons.map((person) => {
|
|
|
|
|
- const isSelected = selectedPersons.some(p => p.id === person.id);
|
|
|
|
|
- return (
|
|
|
|
|
- <div
|
|
|
|
|
- key={person.id}
|
|
|
|
|
- className={`flex items-center justify-between p-3 rounded-md border ${isSelected ? 'bg-primary/5 border-primary' : 'hover:bg-accent'}`}
|
|
|
|
|
- >
|
|
|
|
|
- <div className="flex items-center space-x-3">
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- checked={isSelected}
|
|
|
|
|
- onCheckedChange={(checked) => handlePersonSelect(person, checked as boolean)}
|
|
|
|
|
- />
|
|
|
|
|
- <div>
|
|
|
|
|
- <div className="font-medium">{person.name}</div>
|
|
|
|
|
- <div className="text-sm text-muted-foreground">
|
|
|
|
|
- {person.idCard} | {person.phone}
|
|
|
|
|
|
|
+ {/* 已选择人员详情 */}
|
|
|
|
|
+ {selectedPersons.length > 0 && (
|
|
|
|
|
+ <Card>
|
|
|
|
|
+ <CardHeader>
|
|
|
|
|
+ <CardTitle className="text-lg">设置人员信息</CardTitle>
|
|
|
|
|
+ <CardDescription>
|
|
|
|
|
+ 为每个残疾人设置角色和备注信息
|
|
|
|
|
+ </CardDescription>
|
|
|
|
|
+ </CardHeader>
|
|
|
|
|
+ <CardContent>
|
|
|
|
|
+ <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>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- );
|
|
|
|
|
- })}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- </div>
|
|
|
|
|
- <FormDescription>
|
|
|
|
|
- 已选择 {selectedPersons.length} 名人员
|
|
|
|
|
- </FormDescription>
|
|
|
|
|
- <FormMessage>
|
|
|
|
|
- {form.formState.errors.persons?.message}
|
|
|
|
|
- </FormMessage>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- {/* 已选择人员详情 */}
|
|
|
|
|
- {selectedPersons.length > 0 && (
|
|
|
|
|
- <div className="space-y-4">
|
|
|
|
|
- <FormLabel>设置人员信息</FormLabel>
|
|
|
|
|
- <div className="space-y-3">
|
|
|
|
|
- {selectedPersons.map((person) => (
|
|
|
|
|
- <div key={person.id} className="border rounded-md p-4 space-y-3">
|
|
|
|
|
- <div className="font-medium">{person.name}</div>
|
|
|
|
|
- <div className="grid grid-cols-2 gap-3">
|
|
|
|
|
- <div>
|
|
|
|
|
- <FormLabel className="text-sm">角色</FormLabel>
|
|
|
|
|
- <Input
|
|
|
|
|
- placeholder="请输入角色"
|
|
|
|
|
- onChange={(e) => handlePersonDetailChange(person.id, 'role', e.target.value)}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div>
|
|
|
|
|
- <FormLabel className="text-sm">备注</FormLabel>
|
|
|
|
|
- <Input
|
|
|
|
|
- placeholder="请输入备注"
|
|
|
|
|
- onChange={(e) => handlePersonDetailChange(person.id, 'remark', e.target.value)}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </CardContent>
|
|
|
|
|
+ </Card>
|
|
|
|
|
+ ))}
|
|
|
</div>
|
|
</div>
|
|
|
- ))}
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
|
|
+ </CardContent>
|
|
|
|
|
+ </Card>
|
|
|
|
|
+ )}
|
|
|
|
|
+
|
|
|
|
|
+ <Separator />
|
|
|
|
|
+
|
|
|
|
|
+ <DialogFooter>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ variant="outline"
|
|
|
|
|
+ onClick={() => onOpenChange(false)}
|
|
|
|
|
+ disabled={isSubmitting}
|
|
|
|
|
+ >
|
|
|
|
|
+ 取消
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ type="submit"
|
|
|
|
|
+ disabled={isSubmitting || selectedPersons.length === 0}
|
|
|
|
|
+ >
|
|
|
|
|
+ {isSubmitting ? '提交中...' : `添加 ${selectedPersons.length} 名残疾人`}
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </DialogFooter>
|
|
|
|
|
+ </form>
|
|
|
|
|
+ </Form>
|
|
|
|
|
+ </DialogContent>
|
|
|
|
|
+ </Dialog>
|
|
|
|
|
|
|
|
- <DialogFooter>
|
|
|
|
|
- <Button
|
|
|
|
|
- type="button"
|
|
|
|
|
- variant="outline"
|
|
|
|
|
- onClick={() => onOpenChange(false)}
|
|
|
|
|
- disabled={isSubmitting}
|
|
|
|
|
- >
|
|
|
|
|
- 取消
|
|
|
|
|
- </Button>
|
|
|
|
|
- <Button
|
|
|
|
|
- type="submit"
|
|
|
|
|
- disabled={isSubmitting || selectedPersons.length === 0}
|
|
|
|
|
- >
|
|
|
|
|
- {isSubmitting ? '提交中...' : `添加 ${selectedPersons.length} 名人员`}
|
|
|
|
|
- </Button>
|
|
|
|
|
- </DialogFooter>
|
|
|
|
|
- </form>
|
|
|
|
|
- </Form>
|
|
|
|
|
- </DialogContent>
|
|
|
|
|
- </Dialog>
|
|
|
|
|
|
|
+ {/* 残疾人选择器 */}
|
|
|
|
|
+ <DisabledPersonSelector
|
|
|
|
|
+ open={isSelectorOpen}
|
|
|
|
|
+ onOpenChange={setIsSelectorOpen}
|
|
|
|
|
+ onSelect={handlePersonSelect}
|
|
|
|
|
+ mode="multiple"
|
|
|
|
|
+ disabledIds={selectedPersons.map(p => p.id)}
|
|
|
|
|
+ />
|
|
|
|
|
+ </>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
|
|
|