|
|
@@ -210,7 +210,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
|
|
|
return (
|
|
|
<>
|
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
|
- <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden flex flex-col w-[95vw] sm:w-full">
|
|
|
+ <DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col w-[95vw] sm:w-full h-[90vh] sm:h-auto">
|
|
|
<DialogHeader>
|
|
|
<DialogTitle>选择残疾人</DialogTitle>
|
|
|
</DialogHeader>
|
|
|
@@ -350,7 +350,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
|
|
|
</div>
|
|
|
|
|
|
{/* 表格区域 - 响应式设计 */}
|
|
|
- <div className="flex-1 overflow-auto">
|
|
|
+ <div className="flex-1 flex flex-col min-h-0">
|
|
|
{isLoadingData ? (
|
|
|
<div className="flex items-center justify-center h-64">
|
|
|
<div className="text-center">加载中...</div>
|
|
|
@@ -362,79 +362,82 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
|
|
|
<p>提示:表格可以左右滑动查看所有列</p>
|
|
|
</div>
|
|
|
|
|
|
- <div className="border rounded-md overflow-x-auto">
|
|
|
- <Table data-testid="disabled-persons-table" className="min-w-full">
|
|
|
- <TableHeader>
|
|
|
- <TableRow>
|
|
|
- {mode === 'multiple' && (
|
|
|
- <TableHead className="w-12 sticky left-0 bg-background z-10">
|
|
|
- <Checkbox
|
|
|
- checked={selectedPersons.length === personsData.data.length}
|
|
|
- onCheckedChange={(checked) => {
|
|
|
- if (checked) {
|
|
|
- const selectablePersons = personsData.data.filter(
|
|
|
- (person: DisabledPersonData) => !disabledIds.includes(person.id)
|
|
|
- );
|
|
|
- setSelectedPersons(selectablePersons);
|
|
|
- } else {
|
|
|
- setSelectedPersons([]);
|
|
|
- }
|
|
|
- }}
|
|
|
- aria-label="全选"
|
|
|
- />
|
|
|
- </TableHead>
|
|
|
- )}
|
|
|
- {columns.map((column, index) => (
|
|
|
- <TableHead
|
|
|
- key={column.key}
|
|
|
- className={`
|
|
|
- ${index === 0 ? 'sticky left-0 bg-background z-10' : ''}
|
|
|
- ${['province', 'city', 'disabilityType', 'disabilityLevel', 'blacklist'].includes(column.key) ? 'hidden lg:table-cell' : ''}
|
|
|
- `}
|
|
|
- >
|
|
|
- {column.label}
|
|
|
- </TableHead>
|
|
|
- ))}
|
|
|
- </TableRow>
|
|
|
- </TableHeader>
|
|
|
- <TableBody>
|
|
|
- {personsData.data.map((person: DisabledPersonData) => (
|
|
|
- <TableRow
|
|
|
- key={person.id}
|
|
|
- onClick={() => mode === 'single' && handleSelectPerson(person)}
|
|
|
- className={mode === 'single' ? 'cursor-pointer hover:bg-muted' : ''}
|
|
|
- data-testid={`table-row-${person.id}`}
|
|
|
- >
|
|
|
+ {/* 表格容器 - 支持水平和垂直滚动 */}
|
|
|
+ <div className="flex-1 border rounded-md overflow-hidden flex flex-col min-h-0">
|
|
|
+ <div className="overflow-x-auto overflow-y-auto flex-1">
|
|
|
+ <Table data-testid="disabled-persons-table" className="min-w-full">
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
{mode === 'multiple' && (
|
|
|
- <TableCell className="sticky left-0 bg-background z-10">
|
|
|
+ <TableHead className="w-12 sticky left-0 bg-background z-10">
|
|
|
<Checkbox
|
|
|
- checked={selectedPersons.some(p => p.id === person.id)}
|
|
|
+ checked={selectedPersons.length === personsData.data.length}
|
|
|
onCheckedChange={(checked) => {
|
|
|
if (checked) {
|
|
|
- setSelectedPersons([...selectedPersons, person]);
|
|
|
+ const selectablePersons = personsData.data.filter(
|
|
|
+ (person: DisabledPersonData) => !disabledIds.includes(person.id)
|
|
|
+ );
|
|
|
+ setSelectedPersons(selectablePersons);
|
|
|
} else {
|
|
|
- setSelectedPersons(selectedPersons.filter(p => p.id !== person.id));
|
|
|
+ setSelectedPersons([]);
|
|
|
}
|
|
|
}}
|
|
|
- disabled={disabledIds.includes(person.id)}
|
|
|
- aria-label="选择"
|
|
|
+ aria-label="全选"
|
|
|
/>
|
|
|
- </TableCell>
|
|
|
+ </TableHead>
|
|
|
)}
|
|
|
- <TableCell className="sticky left-0 bg-background z-10">{person.name}</TableCell>
|
|
|
- <TableCell>{person.gender}</TableCell>
|
|
|
- <TableCell>{person.idCard}</TableCell>
|
|
|
- <TableCell>{person.disabilityId}</TableCell>
|
|
|
- <TableCell>{person.phone}</TableCell>
|
|
|
- <TableCell className="hidden lg:table-cell">{person.province}</TableCell>
|
|
|
- <TableCell className="hidden lg:table-cell">{person.city}</TableCell>
|
|
|
- <TableCell className="hidden lg:table-cell">{person.disabilityType}</TableCell>
|
|
|
- <TableCell className="hidden lg:table-cell">{person.disabilityLevel}</TableCell>
|
|
|
- <TableCell className="hidden lg:table-cell">{person.isInBlackList === 1 ? '是' : '否'}</TableCell>
|
|
|
+ {columns.map((column, index) => (
|
|
|
+ <TableHead
|
|
|
+ key={column.key}
|
|
|
+ className={`
|
|
|
+ ${index === 0 ? 'sticky left-0 bg-background z-10' : ''}
|
|
|
+ ${['province', 'city', 'disabilityType', 'disabilityLevel', 'blacklist'].includes(column.key) ? 'hidden lg:table-cell' : ''}
|
|
|
+ `}
|
|
|
+ >
|
|
|
+ {column.label}
|
|
|
+ </TableHead>
|
|
|
+ ))}
|
|
|
</TableRow>
|
|
|
- ))}
|
|
|
- </TableBody>
|
|
|
- </Table>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {personsData.data.map((person: DisabledPersonData) => (
|
|
|
+ <TableRow
|
|
|
+ key={person.id}
|
|
|
+ onClick={() => mode === 'single' && handleSelectPerson(person)}
|
|
|
+ className={mode === 'single' ? 'cursor-pointer hover:bg-muted' : ''}
|
|
|
+ data-testid={`table-row-${person.id}`}
|
|
|
+ >
|
|
|
+ {mode === 'multiple' && (
|
|
|
+ <TableCell className="sticky left-0 bg-background z-10">
|
|
|
+ <Checkbox
|
|
|
+ checked={selectedPersons.some(p => p.id === person.id)}
|
|
|
+ onCheckedChange={(checked) => {
|
|
|
+ if (checked) {
|
|
|
+ setSelectedPersons([...selectedPersons, person]);
|
|
|
+ } else {
|
|
|
+ setSelectedPersons(selectedPersons.filter(p => p.id !== person.id));
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ disabled={disabledIds.includes(person.id)}
|
|
|
+ aria-label="选择"
|
|
|
+ />
|
|
|
+ </TableCell>
|
|
|
+ )}
|
|
|
+ <TableCell className="sticky left-0 bg-background z-10">{person.name}</TableCell>
|
|
|
+ <TableCell>{person.gender}</TableCell>
|
|
|
+ <TableCell>{person.idCard}</TableCell>
|
|
|
+ <TableCell>{person.disabilityId}</TableCell>
|
|
|
+ <TableCell>{person.phone}</TableCell>
|
|
|
+ <TableCell className="hidden lg:table-cell">{person.province}</TableCell>
|
|
|
+ <TableCell className="hidden lg:table-cell">{person.city}</TableCell>
|
|
|
+ <TableCell className="hidden lg:table-cell">{person.disabilityType}</TableCell>
|
|
|
+ <TableCell className="hidden lg:table-cell">{person.disabilityLevel}</TableCell>
|
|
|
+ <TableCell className="hidden lg:table-cell">{person.isInBlackList === 1 ? '是' : '否'}</TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<DataTablePagination
|
|
|
currentPage={searchParams.page || 1}
|