test
4 weeks ago
10 changed files with 873 additions and 6 deletions
@ -0,0 +1,135 @@ |
|||||
|
import React from 'react'; |
||||
|
import { Button } from '@/components/ui/button'; |
||||
|
import { Input } from '@/components/ui/input'; |
||||
|
import { Label } from '@/components/ui/label'; |
||||
|
import { Textarea } from '@/components/ui/textarea'; |
||||
|
import { Checkbox } from '@/components/ui/checkbox'; |
||||
|
import { CreateTestCaseSetRequest, UpdateTestCaseSetRequest, TestCaseSet } from '@/services/testCaseSetService'; |
||||
|
|
||||
|
interface TestCaseSetFormProps { |
||||
|
onSubmit: (data: CreateTestCaseSetRequest | UpdateTestCaseSetRequest) => void; |
||||
|
initialData?: Partial<TestCaseSet>; |
||||
|
isEdit?: boolean; |
||||
|
isSubmitting?: boolean; |
||||
|
} |
||||
|
|
||||
|
export default function TestCaseSetForm({ onSubmit, initialData, isEdit = false, isSubmitting = false }: TestCaseSetFormProps) { |
||||
|
const [formData, setFormData] = React.useState<CreateTestCaseSetRequest>({ |
||||
|
code: initialData?.code || '', |
||||
|
name: initialData?.name || '', |
||||
|
version: initialData?.version || '', |
||||
|
description: initialData?.description || '', |
||||
|
versionUpdateInfo: initialData?.versionUpdateInfo || '', |
||||
|
remarks: initialData?.remarks || '', |
||||
|
isDisabled: initialData?.isDisabled ?? false |
||||
|
}); |
||||
|
|
||||
|
const handleSubmit = (e: React.FormEvent) => { |
||||
|
e.preventDefault(); |
||||
|
if (isSubmitting) return; // 防止重复提交
|
||||
|
|
||||
|
if (isEdit && initialData?.testCaseSetId) { |
||||
|
// 编辑模式，需要包含testCaseSetId
|
||||
|
const updateData: UpdateTestCaseSetRequest = { |
||||
|
...formData, |
||||
|
testCaseSetId: initialData.testCaseSetId |
||||
|
}; |
||||
|
onSubmit(updateData); |
||||
|
} else { |
||||
|
// 创建模式
|
||||
|
onSubmit(formData); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<form onSubmit={handleSubmit} className="space-y-4"> |
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="code">用例集编码</Label> |
||||
|
<Input |
||||
|
id="code" |
||||
|
value={formData.code} |
||||
|
onChange={e => setFormData({ ...formData, code: e.target.value })} |
||||
|
placeholder="请输入用例集编码" |
||||
|
required |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="name">用例集名称</Label> |
||||
|
<Input |
||||
|
id="name" |
||||
|
value={formData.name} |
||||
|
onChange={e => setFormData({ ...formData, name: e.target.value })} |
||||
|
placeholder="请输入用例集名称" |
||||
|
required |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="version">版本</Label> |
||||
|
<Input |
||||
|
id="version" |
||||
|
value={formData.version} |
||||
|
onChange={e => setFormData({ ...formData, version: e.target.value })} |
||||
|
placeholder="请输入版本号" |
||||
|
required |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="description">描述</Label> |
||||
|
<Textarea |
||||
|
id="description" |
||||
|
value={formData.description} |
||||
|
onChange={e => setFormData({ ...formData, description: e.target.value })} |
||||
|
placeholder="请输入用例集描述" |
||||
|
rows={3} |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="versionUpdateInfo">版本更新信息</Label> |
||||
|
<Textarea |
||||
|
id="versionUpdateInfo" |
||||
|
value={formData.versionUpdateInfo} |
||||
|
onChange={e => setFormData({ ...formData, versionUpdateInfo: e.target.value })} |
||||
|
placeholder="请输入版本更新信息" |
||||
|
rows={2} |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="space-y-2"> |
||||
|
<Label htmlFor="remarks">备注</Label> |
||||
|
<Textarea |
||||
|
id="remarks" |
||||
|
value={formData.remarks} |
||||
|
onChange={e => setFormData({ ...formData, remarks: e.target.value })} |
||||
|
placeholder="请输入备注信息" |
||||
|
rows={2} |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex items-center space-x-2"> |
||||
|
<Checkbox |
||||
|
id="isDisabled" |
||||
|
checked={formData.isDisabled} |
||||
|
onCheckedChange={(checked) => |
||||
|
setFormData({ ...formData, isDisabled: checked as boolean }) |
||||
|
} |
||||
|
disabled={isSubmitting} |
||||
|
/> |
||||
|
<Label htmlFor="isDisabled">禁用用例集</Label> |
||||
|
</div> |
||||
|
|
||||
|
<Button type="submit" className="w-full" disabled={isSubmitting}> |
||||
|
{isSubmitting ? '提交中...' : (isEdit ? '更新用例集' : '创建用例集')} |
||||
|
</Button> |
||||
|
</form> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,187 @@ |
|||||
|
import React from 'react'; |
||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; |
||||
|
import { TestCaseSet } from '@/services/testCaseSetService'; |
||||
|
import { Badge } from '@/components/ui/badge'; |
||||
|
|
||||
|
interface TestCaseSetTableProps { |
||||
|
testCaseSets: TestCaseSet[]; |
||||
|
loading: boolean; |
||||
|
onEdit: (testCaseSet: TestCaseSet) => void; |
||||
|
onDelete: (testCaseSet: TestCaseSet) => void; |
||||
|
page: number; |
||||
|
pageSize: number; |
||||
|
total: number; |
||||
|
onPageChange: (page: number) => void; |
||||
|
hideCard?: boolean; |
||||
|
density?: 'relaxed' | 'default' | 'compact'; |
||||
|
columns?: { key: string; title: string; visible: boolean }[]; |
||||
|
} |
||||
|
|
||||
|
// 状态徽章组件
|
||||
|
const StatusBadge: React.FC<{ isDisabled: boolean }> = ({ isDisabled }) => { |
||||
|
return ( |
||||
|
<Badge className={!isDisabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}> |
||||
|
{!isDisabled ? '启用' : '禁用'} |
||||
|
</Badge> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 日期格式化组件
|
||||
|
const DateDisplay: React.FC<{ date?: string }> = ({ date }) => { |
||||
|
if (!date) return <span className="text-gray-400">-</span>; |
||||
|
|
||||
|
const formatDate = (dateString: string) => { |
||||
|
const date = new Date(dateString); |
||||
|
return date.toLocaleDateString('zh-CN', { |
||||
|
year: 'numeric', |
||||
|
month: '2-digit', |
||||
|
day: '2-digit', |
||||
|
hour: '2-digit', |
||||
|
minute: '2-digit' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
return <span>{formatDate(date)}</span>; |
||||
|
}; |
||||
|
|
||||
|
export default function TestCaseSetTable({ |
||||
|
testCaseSets, |
||||
|
loading, |
||||
|
onEdit, |
||||
|
onDelete, |
||||
|
page, |
||||
|
pageSize, |
||||
|
total, |
||||
|
onPageChange, |
||||
|
hideCard = false, |
||||
|
density = 'default', |
||||
|
columns = [] |
||||
|
}: TestCaseSetTableProps) { |
||||
|
const densityClasses = { |
||||
|
relaxed: 'py-3', |
||||
|
default: 'py-2', |
||||
|
compact: 'py-1', |
||||
|
}; |
||||
|
|
||||
|
const visibleColumns = columns.filter(col => col.visible); |
||||
|
|
||||
|
const renderCell = (testCaseSet: TestCaseSet, columnKey: string) => { |
||||
|
switch (columnKey) { |
||||
|
case 'code': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate font-mono text-sm" title={testCaseSet.code}> |
||||
|
{testCaseSet.code} |
||||
|
</div> |
||||
|
); |
||||
|
case 'name': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate" title={testCaseSet.name}> |
||||
|
{testCaseSet.name} |
||||
|
</div> |
||||
|
); |
||||
|
case 'version': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate font-mono text-sm" title={testCaseSet.version}> |
||||
|
{testCaseSet.version} |
||||
|
</div> |
||||
|
); |
||||
|
case 'description': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate text-gray-600" title={testCaseSet.description || ''}> |
||||
|
{testCaseSet.description || '-'} |
||||
|
</div> |
||||
|
); |
||||
|
case 'versionUpdateInfo': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate text-gray-600" title={testCaseSet.versionUpdateInfo || ''}> |
||||
|
{testCaseSet.versionUpdateInfo || '-'} |
||||
|
</div> |
||||
|
); |
||||
|
case 'remarks': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate text-gray-600" title={testCaseSet.remarks || ''}> |
||||
|
{testCaseSet.remarks || '-'} |
||||
|
</div> |
||||
|
); |
||||
|
case 'isDisabled': |
||||
|
return <StatusBadge isDisabled={testCaseSet.isDisabled} />; |
||||
|
case 'createdAt': |
||||
|
return <DateDisplay date={testCaseSet.createdAt} />; |
||||
|
case 'createdBy': |
||||
|
return ( |
||||
|
<span className="text-sm"> |
||||
|
{testCaseSet.createdBy || '-'} |
||||
|
</span> |
||||
|
); |
||||
|
case 'actions': |
||||
|
return ( |
||||
|
<div className="flex justify-end gap-4"> |
||||
|
<span |
||||
|
className="cursor-pointer text-blue-600 hover:underline select-none" |
||||
|
onClick={() => onEdit(testCaseSet)} |
||||
|
> |
||||
|
修改 |
||||
|
</span> |
||||
|
<span |
||||
|
className="cursor-pointer text-red-500 hover:underline select-none" |
||||
|
onClick={() => onDelete(testCaseSet)} |
||||
|
> |
||||
|
删除 |
||||
|
</span> |
||||
|
</div> |
||||
|
); |
||||
|
default: |
||||
|
return null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const totalPages = Math.ceil(total / pageSize); |
||||
|
const Wrapper = hideCard ? React.Fragment : 'div'; |
||||
|
const wrapperProps = hideCard ? {} : { className: 'rounded-md border bg-background' }; |
||||
|
const rowClass = density === 'relaxed' ? 'h-20' : density === 'compact' ? 'h-8' : 'h-12'; |
||||
|
const cellPadding = density === 'relaxed' ? 'py-5' : density === 'compact' ? 'py-1' : 'py-3'; |
||||
|
|
||||
|
return ( |
||||
|
<Wrapper {...wrapperProps}> |
||||
|
<Table> |
||||
|
<TableHeader key="header"> |
||||
|
<TableRow className={rowClass}> |
||||
|
{visibleColumns.map(col => ( |
||||
|
<TableHead |
||||
|
key={col.key} |
||||
|
className={`text-foreground text-center ${col.key === 'actions' ? 'text-right' : ''} ${cellPadding}`} |
||||
|
> |
||||
|
{col.title} |
||||
|
</TableHead> |
||||
|
))} |
||||
|
</TableRow> |
||||
|
</TableHeader> |
||||
|
<TableBody key="body"> |
||||
|
{loading ? ( |
||||
|
<TableRow key="loading" className={rowClass}> |
||||
|
<TableCell colSpan={visibleColumns.length} className={`text-center text-muted-foreground ${cellPadding}`}> |
||||
|
加载中... |
||||
|
</TableCell> |
||||
|
</TableRow> |
||||
|
) : testCaseSets.length === 0 ? ( |
||||
|
<TableRow key="empty" className={rowClass}> |
||||
|
<TableCell colSpan={visibleColumns.length} className={`text-center text-muted-foreground ${cellPadding}`}> |
||||
|
暂无数据 |
||||
|
</TableCell> |
||||
|
</TableRow> |
||||
|
) : ( |
||||
|
testCaseSets.map((testCaseSet) => ( |
||||
|
<TableRow key={testCaseSet.testCaseSetId} className={rowClass}> |
||||
|
{visibleColumns.map((column) => ( |
||||
|
<TableCell key={column.key} className={`text-foreground text-center ${cellPadding}`}> |
||||
|
{renderCell(testCaseSet, column.key)} |
||||
|
</TableCell> |
||||
|
))} |
||||
|
</TableRow> |
||||
|
)) |
||||
|
)} |
||||
|
</TableBody> |
||||
|
</Table> |
||||
|
</Wrapper> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,367 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { testCaseSetService, TestCaseSet, GetTestCaseSetsRequest, CreateTestCaseSetRequest, UpdateTestCaseSetRequest } from '@/services/testCaseSetService'; |
||||
|
import TestCaseSetTable from './TestCaseSetTable'; |
||||
|
import TestCaseSetForm from './TestCaseSetForm'; |
||||
|
import { Input } from '@/components/ui/input'; |
||||
|
import PaginationBar from '@/components/ui/PaginationBar'; |
||||
|
import TableToolbar, { DensityType } from '@/components/ui/TableToolbar'; |
||||
|
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'; |
||||
|
import { Button } from '@/components/ui/button'; |
||||
|
import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'; |
||||
|
import { useToast } from '@/components/ui/use-toast'; |
||||
|
|
||||
|
const defaultColumns = [ |
||||
|
{ key: 'code', title: '用例集编码', visible: true }, |
||||
|
{ key: 'name', title: '用例集名称', visible: true }, |
||||
|
{ key: 'version', title: '版本', visible: true }, |
||||
|
{ key: 'description', title: '描述', visible: true }, |
||||
|
{ key: 'versionUpdateInfo', title: '版本更新信息', visible: true }, |
||||
|
{ key: 'remarks', title: '备注', visible: true }, |
||||
|
{ key: 'isDisabled', title: '状态', visible: true }, |
||||
|
{ key: 'createdAt', title: '创建时间', visible: true }, |
||||
|
{ key: 'createdBy', title: '创建人', visible: true }, |
||||
|
{ key: 'actions', title: '操作', visible: true } |
||||
|
]; |
||||
|
|
||||
|
// 字段类型声明
|
||||
|
type SearchField = |
||||
|
| { key: string; label: string; type: 'input'; placeholder: string } |
||||
|
| { key: string; label: string; type: 'select'; options: { value: string; label: string }[] }; |
||||
|
|
||||
|
// 第一行字段（收起时只显示这3个）
|
||||
|
const firstRowFields: SearchField[] = [ |
||||
|
{ key: 'searchTerm', label: '搜索关键词', type: 'input', placeholder: '请输入用例集编码或用例集名称' }, |
||||
|
{ key: 'isEnabled', label: '状态', type: 'select', options: [ |
||||
|
{ value: '', label: '请选择' }, |
||||
|
{ value: 'true', label: '启用' }, |
||||
|
{ value: 'false', label: '禁用' }, |
||||
|
] }, |
||||
|
]; |
||||
|
|
||||
|
// 高级字段（展开时才显示）
|
||||
|
const advancedFields: SearchField[] = [ |
||||
|
{ key: 'version', label: '版本', type: 'input', placeholder: '请输入版本号' }, |
||||
|
{ key: 'pageSize', label: '每页数量', type: 'select', options: [ |
||||
|
{ value: '10', label: '10条/页' }, |
||||
|
{ value: '20', label: '20条/页' }, |
||||
|
{ value: '50', label: '50条/页' }, |
||||
|
{ value: '100', label: '100条/页' }, |
||||
|
] }, |
||||
|
]; |
||||
|
|
||||
|
export default function TestCaseSetsView() { |
||||
|
const [testCaseSets, setTestCaseSets] = useState<TestCaseSet[]>([]); |
||||
|
const [loading, setLoading] = useState(false); |
||||
|
const [total, setTotal] = useState(0); |
||||
|
const [pageNumber, setPageNumber] = useState(1); |
||||
|
const [pageSize, setPageSize] = useState(10); |
||||
|
const [density, setDensity] = useState<DensityType>('default'); |
||||
|
const [columns, setColumns] = useState(defaultColumns); |
||||
|
const [showAdvanced, setShowAdvanced] = useState(false); |
||||
|
|
||||
|
// 搜索参数
|
||||
|
const [searchTerm, setSearchTerm] = useState(''); |
||||
|
const [isEnabled, setIsEnabled] = useState<boolean | undefined>(undefined); |
||||
|
const [version, setVersion] = useState(''); |
||||
|
|
||||
|
// 表单对话框状态
|
||||
|
const [open, setOpen] = useState(false); |
||||
|
const [editOpen, setEditOpen] = useState(false); |
||||
|
const [selectedTestCaseSet, setSelectedTestCaseSet] = useState<TestCaseSet | null>(null); |
||||
|
|
||||
|
// 提交状态
|
||||
|
const [isSubmitting, setIsSubmitting] = useState(false); |
||||
|
|
||||
|
// Toast 提示
|
||||
|
const { toast } = useToast(); |
||||
|
|
||||
|
const fetchTestCaseSets = async (params: Partial<GetTestCaseSetsRequest> = {}) => { |
||||
|
setLoading(true); |
||||
|
const queryParams: GetTestCaseSetsRequest = { |
||||
|
pageNumber, |
||||
|
pageSize, |
||||
|
searchTerm, |
||||
|
isEnabled, |
||||
|
version, |
||||
|
...params |
||||
|
}; |
||||
|
|
||||
|
const result = await testCaseSetService.getTestCaseSets(queryParams); |
||||
|
if (result.isSuccess && result.data) { |
||||
|
setTestCaseSets(result.data.items || []); |
||||
|
setTotal(result.data.totalCount || 0); |
||||
|
} |
||||
|
setLoading(false); |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
fetchTestCaseSets(); |
||||
|
// eslint-disable-next-line
|
||||
|
}, [pageNumber, pageSize]); |
||||
|
|
||||
|
const handleEdit = (testCaseSet: TestCaseSet) => { |
||||
|
setSelectedTestCaseSet(testCaseSet); |
||||
|
setEditOpen(true); |
||||
|
}; |
||||
|
|
||||
|
const handleDelete = async (testCaseSet: TestCaseSet) => { |
||||
|
if (confirm(`确定要删除用例集 "${testCaseSet.name}" 吗？`)) { |
||||
|
try { |
||||
|
const result = await testCaseSetService.deleteTestCaseSet(testCaseSet.testCaseSetId); |
||||
|
if (result.isSuccess) { |
||||
|
toast({ |
||||
|
title: "删除成功", |
||||
|
description: `用例集 "${testCaseSet.name}" 删除成功`, |
||||
|
}); |
||||
|
fetchTestCaseSets(); |
||||
|
} else { |
||||
|
const errorMessage = result.errorMessages?.join(', ') || "删除用例集时发生错误"; |
||||
|
console.error('删除用例集失败:', errorMessage); |
||||
|
toast({ |
||||
|
title: "删除失败", |
||||
|
description: errorMessage, |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('删除用例集异常:', error); |
||||
|
toast({ |
||||
|
title: "删除失败", |
||||
|
description: "网络错误，请稍后重试", |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleCreate = async (data: CreateTestCaseSetRequest) => { |
||||
|
if (isSubmitting) return; // 防止重复提交
|
||||
|
|
||||
|
console.log('开始创建用例集:', data); |
||||
|
setIsSubmitting(true); |
||||
|
try { |
||||
|
const result = await testCaseSetService.createTestCaseSet(data); |
||||
|
console.log('创建用例集结果:', result); |
||||
|
|
||||
|
if (result.isSuccess) { |
||||
|
toast({ |
||||
|
title: "创建成功", |
||||
|
description: `用例集 "${data.name}" 创建成功`, |
||||
|
}); |
||||
|
setOpen(false); |
||||
|
fetchTestCaseSets(); |
||||
|
} else { |
||||
|
const errorMessage = result.errorMessages?.join(', ') || "创建用例集时发生错误"; |
||||
|
console.error('创建用例集失败:', errorMessage, result); |
||||
|
toast({ |
||||
|
title: "创建失败", |
||||
|
description: errorMessage, |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('创建用例集异常:', error); |
||||
|
toast({ |
||||
|
title: "创建失败", |
||||
|
description: "网络错误，请稍后重试", |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} finally { |
||||
|
setIsSubmitting(false); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleUpdate = async (data: UpdateTestCaseSetRequest) => { |
||||
|
if (!selectedTestCaseSet || isSubmitting) return; // 防止重复提交
|
||||
|
|
||||
|
setIsSubmitting(true); |
||||
|
try { |
||||
|
const result = await testCaseSetService.updateTestCaseSet(selectedTestCaseSet.testCaseSetId, data); |
||||
|
if (result.isSuccess) { |
||||
|
toast({ |
||||
|
title: "更新成功", |
||||
|
description: `用例集 "${data.name}" 更新成功`, |
||||
|
}); |
||||
|
setEditOpen(false); |
||||
|
setSelectedTestCaseSet(null); |
||||
|
fetchTestCaseSets(); |
||||
|
} else { |
||||
|
const errorMessage = result.errorMessages?.join(', ') || "更新用例集时发生错误"; |
||||
|
console.error('更新用例集失败:', errorMessage); |
||||
|
toast({ |
||||
|
title: "更新失败", |
||||
|
description: errorMessage, |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('更新用例集异常:', error); |
||||
|
toast({ |
||||
|
title: "更新失败", |
||||
|
description: "网络错误，请稍后重试", |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} finally { |
||||
|
setIsSubmitting(false); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 查询按钮
|
||||
|
const handleQuery = () => { |
||||
|
setPageNumber(1); |
||||
|
fetchTestCaseSets({ pageNumber: 1 }); |
||||
|
}; |
||||
|
|
||||
|
// 重置按钮
|
||||
|
const handleReset = () => { |
||||
|
setSearchTerm(''); |
||||
|
setIsEnabled(undefined); |
||||
|
setVersion(''); |
||||
|
setPageNumber(1); |
||||
|
fetchTestCaseSets({ |
||||
|
searchTerm: '', |
||||
|
isEnabled: undefined, |
||||
|
version: '', |
||||
|
pageNumber: 1 |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 每页条数选择
|
||||
|
const handlePageSizeChange = (size: number) => { |
||||
|
setPageSize(size); |
||||
|
setPageNumber(1); |
||||
|
}; |
||||
|
|
||||
|
const totalPages = Math.ceil(total / pageSize); |
||||
|
|
||||
|
return ( |
||||
|
<main className="flex-1 p-4 transition-all duration-300 ease-in-out sm:p-6"> |
||||
|
<div className="w-full space-y-4"> |
||||
|
{/* 丰富美化后的搜索栏 */} |
||||
|
<div className="flex flex-col bg-white p-4 rounded-md border mb-2"> |
||||
|
<form |
||||
|
className={`grid gap-x-8 gap-y-4 items-center ${showAdvanced ? 'md:grid-cols-4' : 'md:grid-cols-3'} grid-cols-1`} |
||||
|
onSubmit={e => { |
||||
|
e.preventDefault(); |
||||
|
handleQuery(); |
||||
|
}} |
||||
|
> |
||||
|
{(showAdvanced ? [...firstRowFields, ...advancedFields] : firstRowFields).map(field => ( |
||||
|
<div className="flex flex-row items-center min-w-[200px] flex-1" key={field.key}> |
||||
|
<label |
||||
|
className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" |
||||
|
style={{ width: 80, minWidth: 80 }} |
||||
|
> |
||||
|
{field.label}： |
||||
|
</label> |
||||
|
{field.type === 'input' && ( |
||||
|
<Input |
||||
|
className="input flex-1" |
||||
|
placeholder={field.placeholder} |
||||
|
value={field.key === 'searchTerm' ? searchTerm : |
||||
|
field.key === 'version' ? version : ''} |
||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { |
||||
|
if (field.key === 'searchTerm') setSearchTerm(e.target.value); |
||||
|
if (field.key === 'version') setVersion(e.target.value); |
||||
|
}} |
||||
|
/> |
||||
|
)} |
||||
|
{field.type === 'select' && ( |
||||
|
<select |
||||
|
className="input h-10 rounded border border-border bg-background px-3 text-sm flex-1" |
||||
|
value={field.key === 'isEnabled' ? (isEnabled === undefined ? '' : isEnabled.toString()) : |
||||
|
field.key === 'pageSize' ? pageSize.toString() : ''} |
||||
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { |
||||
|
if (field.key === 'isEnabled') { |
||||
|
const value = e.target.value; |
||||
|
setIsEnabled(value === '' ? undefined : value === 'true'); |
||||
|
} else if (field.key === 'pageSize') { |
||||
|
setPageSize(parseInt(e.target.value)); |
||||
|
} |
||||
|
}} |
||||
|
> |
||||
|
{field.options.map(opt => ( |
||||
|
<option value={opt.value} key={opt.value}>{opt.label}</option> |
||||
|
))} |
||||
|
</select> |
||||
|
)} |
||||
|
</div> |
||||
|
))} |
||||
|
{/* 按钮组直接作为表单项之一，紧跟在最后一个表单项后面 */} |
||||
|
<div className="flex flex-row items-center min-w-[200px] flex-1 justify-end gap-2"> |
||||
|
<button type="button" className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" onClick={handleReset}>重置</button> |
||||
|
<button type="submit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700">查询</button> |
||||
|
<button type="button" className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50" onClick={() => setShowAdvanced(v => !v)}> |
||||
|
{showAdvanced ? ( |
||||
|
<> |
||||
|
收起 <ChevronUpIcon className="inline-block ml-1 w-4 h-4 align-middle" /> |
||||
|
</> |
||||
|
) : ( |
||||
|
<> |
||||
|
展开 <ChevronDownIcon className="inline-block ml-1 w-4 h-4 align-middle" /> |
||||
|
</> |
||||
|
)} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
{/* 表格整体卡片区域，包括工具栏、表格、分页 */} |
||||
|
<div className="rounded-md border bg-background p-4"> |
||||
|
{/* 顶部操作栏：添加用例集+工具栏 */} |
||||
|
<div className="flex items-center justify-between mb-2"> |
||||
|
<Dialog open={open} onOpenChange={setOpen}> |
||||
|
<DialogTrigger asChild> |
||||
|
<Button className="bg-primary text-primary-foreground hover:bg-primary/90">+ 添加用例集</Button> |
||||
|
</DialogTrigger> |
||||
|
<DialogContent className="bg-background"> |
||||
|
<TestCaseSetForm onSubmit={handleCreate} isSubmitting={isSubmitting} /> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
<TableToolbar |
||||
|
onRefresh={() => fetchTestCaseSets()} |
||||
|
onDensityChange={setDensity} |
||||
|
onColumnsChange={setColumns} |
||||
|
onColumnsReset={() => setColumns(defaultColumns)} |
||||
|
columns={columns} |
||||
|
density={density} |
||||
|
/> |
||||
|
</div> |
||||
|
{/* 表格区域 */} |
||||
|
<TestCaseSetTable |
||||
|
testCaseSets={testCaseSets} |
||||
|
loading={loading} |
||||
|
onEdit={handleEdit} |
||||
|
onDelete={handleDelete} |
||||
|
page={pageNumber} |
||||
|
pageSize={pageSize} |
||||
|
total={total} |
||||
|
onPageChange={setPageNumber} |
||||
|
hideCard={true} |
||||
|
density={density} |
||||
|
columns={columns} |
||||
|
/> |
||||
|
{/* 分页 */} |
||||
|
<PaginationBar |
||||
|
page={pageNumber} |
||||
|
pageSize={pageSize} |
||||
|
total={total} |
||||
|
onPageChange={setPageNumber} |
||||
|
onPageSizeChange={handlePageSizeChange} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* 编辑用例集对话框 */} |
||||
|
<Dialog open={editOpen} onOpenChange={setEditOpen}> |
||||
|
<DialogContent className="bg-background"> |
||||
|
<TestCaseSetForm |
||||
|
onSubmit={(data) => handleUpdate(data as UpdateTestCaseSetRequest)} |
||||
|
initialData={selectedTestCaseSet || undefined} |
||||
|
isEdit={true} |
||||
|
isSubmitting={isSubmitting} |
||||
|
/> |
||||
|
</DialogContent> |
||||
|
</Dialog> |
||||
|
</main> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
export { default as TestCaseSetsView } from './TestCaseSetsView'; |
||||
|
export { default as TestCaseSetTable } from './TestCaseSetTable'; |
||||
|
export { default as TestCaseSetForm } from './TestCaseSetForm'; |
||||
@ -0,0 +1,142 @@ |
|||||
|
import { httpClient } from '@/lib/http-client'; |
||||
|
import { OperationResult } from '@/types/auth'; |
||||
|
import { API_PATHS } from '@/constants/api'; |
||||
|
|
||||
|
// 用例集接口定义
|
||||
|
export interface TestCaseSet { |
||||
|
testCaseSetId: string; |
||||
|
code: string; |
||||
|
name: string; |
||||
|
description?: string; |
||||
|
version: string; |
||||
|
versionUpdateInfo?: string; |
||||
|
isDisabled: boolean; |
||||
|
remarks?: string; |
||||
|
createdAt: string; |
||||
|
updatedAt?: string; |
||||
|
createdBy: string; |
||||
|
updatedBy?: string; |
||||
|
} |
||||
|
|
||||
|
// 获取用例集列表请求接口
|
||||
|
export interface GetTestCaseSetsRequest { |
||||
|
pageNumber?: number; |
||||
|
pageSize?: number; |
||||
|
searchTerm?: string; |
||||
|
isEnabled?: boolean; |
||||
|
version?: string; |
||||
|
} |
||||
|
|
||||
|
// 获取用例集列表响应接口
|
||||
|
export interface GetTestCaseSetsResponse { |
||||
|
totalCount: number; |
||||
|
pageNumber: number; |
||||
|
pageSize: number; |
||||
|
totalPages: number; |
||||
|
hasPreviousPage: boolean; |
||||
|
hasNextPage: boolean; |
||||
|
items: TestCaseSet[]; |
||||
|
} |
||||
|
|
||||
|
// 创建用例集请求接口
|
||||
|
export interface CreateTestCaseSetRequest { |
||||
|
code: string; |
||||
|
name: string; |
||||
|
version: string; |
||||
|
description?: string; |
||||
|
versionUpdateInfo?: string; |
||||
|
isDisabled?: boolean; |
||||
|
remarks?: string; |
||||
|
} |
||||
|
|
||||
|
// 创建用例集响应接口
|
||||
|
export interface CreateTestCaseSetResponse { |
||||
|
testCaseSetId: string; |
||||
|
code: string; |
||||
|
name: string; |
||||
|
description?: string; |
||||
|
version: string; |
||||
|
versionUpdateInfo?: string; |
||||
|
isDisabled: boolean; |
||||
|
remarks?: string; |
||||
|
createdAt: string; |
||||
|
createdBy: string; |
||||
|
} |
||||
|
|
||||
|
// 更新用例集请求接口
|
||||
|
export interface UpdateTestCaseSetRequest { |
||||
|
testCaseSetId: string; |
||||
|
code: string; |
||||
|
name: string; |
||||
|
version: string; |
||||
|
description?: string; |
||||
|
versionUpdateInfo?: string; |
||||
|
isDisabled?: boolean; |
||||
|
remarks?: string; |
||||
|
} |
||||
|
|
||||
|
// 更新用例集响应接口
|
||||
|
export interface UpdateTestCaseSetResponse { |
||||
|
testCaseSetId: string; |
||||
|
code: string; |
||||
|
name: string; |
||||
|
description?: string; |
||||
|
version: string; |
||||
|
versionUpdateInfo?: string; |
||||
|
isDisabled: boolean; |
||||
|
remarks?: string; |
||||
|
createdAt: string; |
||||
|
updatedAt?: string; |
||||
|
createdBy: string; |
||||
|
updatedBy?: string; |
||||
|
} |
||||
|
|
||||
|
class TestCaseSetService { |
||||
|
private readonly baseUrl = API_PATHS.TEST_CASE_SETS; |
||||
|
|
||||
|
// 获取用例集列表
|
||||
|
async getTestCaseSets(params: GetTestCaseSetsRequest = {}): Promise<OperationResult<GetTestCaseSetsResponse>> { |
||||
|
const queryParams = new URLSearchParams(); |
||||
|
|
||||
|
if (params.pageNumber) queryParams.append('PageNumber', params.pageNumber.toString()); |
||||
|
if (params.pageSize) queryParams.append('PageSize', params.pageSize.toString()); |
||||
|
if (params.searchTerm) queryParams.append('SearchTerm', params.searchTerm); |
||||
|
if (params.isEnabled !== undefined) queryParams.append('IsEnabled', params.isEnabled.toString()); |
||||
|
if (params.version) queryParams.append('Version', params.version); |
||||
|
|
||||
|
const url = `${this.baseUrl}?${queryParams.toString()}`; |
||||
|
return httpClient.get<GetTestCaseSetsResponse>(url); |
||||
|
} |
||||
|
|
||||
|
// 根据ID获取用例集详情
|
||||
|
async getTestCaseSetById(id: string): Promise<OperationResult<TestCaseSet>> { |
||||
|
return httpClient.get<TestCaseSet>(`${this.baseUrl}/${id}`); |
||||
|
} |
||||
|
|
||||
|
// 创建用例集
|
||||
|
async createTestCaseSet(data: CreateTestCaseSetRequest): Promise<OperationResult<CreateTestCaseSetResponse>> { |
||||
|
return httpClient.post<CreateTestCaseSetResponse>(this.baseUrl, data); |
||||
|
} |
||||
|
|
||||
|
// 更新用例集
|
||||
|
async updateTestCaseSet(id: string, data: UpdateTestCaseSetRequest): Promise<OperationResult<UpdateTestCaseSetResponse>> { |
||||
|
return httpClient.put<UpdateTestCaseSetResponse>(`${this.baseUrl}/${id}`, data); |
||||
|
} |
||||
|
|
||||
|
// 删除用例集
|
||||
|
async deleteTestCaseSet(id: string): Promise<OperationResult<boolean>> { |
||||
|
return httpClient.delete<boolean>(`${this.baseUrl}/${id}`); |
||||
|
} |
||||
|
|
||||
|
// 启用用例集
|
||||
|
async enableTestCaseSet(id: string): Promise<OperationResult<boolean>> { |
||||
|
return httpClient.post<boolean>(`${this.baseUrl}/${id}/enable`); |
||||
|
} |
||||
|
|
||||
|
// 禁用用例集
|
||||
|
async disableTestCaseSet(id: string): Promise<OperationResult<boolean>> { |
||||
|
return httpClient.post<boolean>(`${this.baseUrl}/${id}/disable`); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const testCaseSetService = new TestCaseSetService(); |
||||
Loading…
Reference in new issue