Browse Source
- 导入Play和Square图标组件，替换原有的"开始"和"停止"文字 - 使用绿色主题的Play图标表示开始操作，红色主题的Square图标表示停止操作 - 添加悬停效果、背景色变化和圆角设计，提升按钮交互体验 - 为图标按钮添加title属性，提供操作说明提示 - 优化表格空间利用，使界面更加紧凑美观 - 保持原有功能逻辑不变，仅优化用户界面体验refactor/permission-config
6 changed files with 504 additions and 4 deletions
@ -0,0 +1,220 @@ |
|||||
|
import React from 'react'; |
||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; |
||||
|
import { TestScenarioTask } from '@/services/testScenarioTaskService'; |
||||
|
import { Badge } from '@/components/ui/badge'; |
||||
|
import { Play, Square } from 'lucide-react'; |
||||
|
|
||||
|
interface TaskExecutionTableProps { |
||||
|
tasks: TestScenarioTask[]; |
||||
|
loading: boolean; |
||||
|
onStart: (task: TestScenarioTask) => void; |
||||
|
onStop: (task: TestScenarioTask) => 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 PriorityBadge: React.FC<{ priority: number }> = ({ priority }) => { |
||||
|
const getPriorityConfig = (priority: number) => { |
||||
|
switch (priority) { |
||||
|
case 0: |
||||
|
return { label: '普通', className: 'bg-blue-100 text-blue-800' }; |
||||
|
case 1: |
||||
|
return { label: '高', className: 'bg-orange-100 text-orange-800' }; |
||||
|
default: |
||||
|
return { label: '未知', className: 'bg-gray-100 text-gray-800' }; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const config = getPriorityConfig(priority); |
||||
|
return ( |
||||
|
<Badge className={config.className}> |
||||
|
{config.label} |
||||
|
</Badge> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 生命周期徽章组件
|
||||
|
const LifecycleBadge: React.FC<{ lifecycle: string }> = ({ lifecycle }) => { |
||||
|
const getLifecycleConfig = (lifecycle: string) => { |
||||
|
switch (lifecycle) { |
||||
|
case 'Created': |
||||
|
return { label: '已创建', className: 'bg-blue-100 text-blue-800' }; |
||||
|
case 'Scheduled': |
||||
|
return { label: '已调度', className: 'bg-green-100 text-green-800' }; |
||||
|
case 'Archived': |
||||
|
return { label: '已归档', className: 'bg-gray-100 text-gray-800' }; |
||||
|
case 'Cancelled': |
||||
|
return { label: '已取消', className: 'bg-red-100 text-red-800' }; |
||||
|
default: |
||||
|
return { label: '未知', className: 'bg-gray-100 text-gray-800' }; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const config = getLifecycleConfig(lifecycle); |
||||
|
return ( |
||||
|
<Badge className={config.className}> |
||||
|
{config.label} |
||||
|
</Badge> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 状态徽章组件
|
||||
|
const StatusBadge: React.FC<{ isDisabled: boolean }> = ({ isDisabled }) => { |
||||
|
return ( |
||||
|
<Badge className={isDisabled ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-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 TaskExecutionTable({ |
||||
|
tasks, |
||||
|
loading, |
||||
|
onStart, |
||||
|
onStop, |
||||
|
hideCard = false, |
||||
|
density = 'default', |
||||
|
columns = [] |
||||
|
}: TaskExecutionTableProps) { |
||||
|
|
||||
|
const visibleColumns = columns.filter(col => col.visible); |
||||
|
|
||||
|
const renderCell = (task: TestScenarioTask, columnKey: string) => { |
||||
|
switch (columnKey) { |
||||
|
case 'taskCode': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate font-mono text-sm" title={task.taskCode}> |
||||
|
{task.taskCode} |
||||
|
</div> |
||||
|
); |
||||
|
case 'taskName': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate" title={task.taskName}> |
||||
|
{task.taskName} |
||||
|
</div> |
||||
|
); |
||||
|
case 'scenarioCode': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate text-sm" title={task.scenarioCode}> |
||||
|
{task.scenarioCode} |
||||
|
</div> |
||||
|
); |
||||
|
case 'deviceCode': |
||||
|
return ( |
||||
|
<div className="max-w-xs truncate text-sm" title={task.deviceCode}> |
||||
|
{task.deviceCode} |
||||
|
</div> |
||||
|
); |
||||
|
case 'priority': |
||||
|
return <PriorityBadge priority={task.priority} />; |
||||
|
case 'lifecycle': |
||||
|
return <LifecycleBadge lifecycle={task.lifecycle} />; |
||||
|
case 'isDisabled': |
||||
|
return <StatusBadge isDisabled={task.isDisabled} />; |
||||
|
case 'createdAt': |
||||
|
return <DateDisplay date={task.createdAt} />; |
||||
|
case 'flowCount': |
||||
|
return ( |
||||
|
<div className="text-center"> |
||||
|
<Badge className="bg-purple-100 text-purple-800"> |
||||
|
{task.flowCount} 个流程 |
||||
|
</Badge> |
||||
|
</div> |
||||
|
); |
||||
|
case 'actions': |
||||
|
return ( |
||||
|
<div className="flex justify-end gap-4"> |
||||
|
<button |
||||
|
className="p-2 text-green-600 hover:text-green-700 hover:bg-green-50 rounded-md transition-colors" |
||||
|
onClick={() => onStart(task)} |
||||
|
title="开始任务" |
||||
|
> |
||||
|
<Play className="h-4 w-4" /> |
||||
|
</button> |
||||
|
<button |
||||
|
className="p-2 text-red-500 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors" |
||||
|
onClick={() => onStop(task)} |
||||
|
title="停止任务" |
||||
|
> |
||||
|
<Square className="h-4 w-4" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
); |
||||
|
default: |
||||
|
return null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
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> |
||||
|
) : tasks.length === 0 ? ( |
||||
|
<TableRow key="empty" className={rowClass}> |
||||
|
<TableCell colSpan={visibleColumns.length} className={`text-center text-muted-foreground ${cellPadding}`}> |
||||
|
暂无数据 |
||||
|
</TableCell> |
||||
|
</TableRow> |
||||
|
) : ( |
||||
|
tasks.map((task) => ( |
||||
|
<TableRow key={task.taskId} className={rowClass}> |
||||
|
{visibleColumns.map((column) => ( |
||||
|
<TableCell key={column.key} className={`text-foreground text-center ${cellPadding}`}> |
||||
|
{renderCell(task, column.key)} |
||||
|
</TableCell> |
||||
|
))} |
||||
|
</TableRow> |
||||
|
)) |
||||
|
)} |
||||
|
</TableBody> |
||||
|
</Table> |
||||
|
</Wrapper> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,219 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { testScenarioTaskService, TestScenarioTask, GetTestScenarioTasksRequest } from '@/services/testScenarioTaskService'; |
||||
|
import TaskExecutionTable from './TaskExecutionTable'; |
||||
|
import { Input } from '@/components/ui/input'; |
||||
|
import PaginationBar from '@/components/ui/PaginationBar'; |
||||
|
import TableToolbar, { DensityType } from '@/components/ui/TableToolbar'; |
||||
|
import { useToast } from '@/components/ui/use-toast'; |
||||
|
import { Button } from '@/components/ui/button'; |
||||
|
|
||||
|
const defaultColumns = [ |
||||
|
{ key: 'taskCode', title: '任务编码', visible: true }, |
||||
|
{ key: 'taskName', title: '任务名称', visible: true }, |
||||
|
{ key: 'scenarioCode', title: '场景编码', visible: true }, |
||||
|
{ key: 'deviceCode', title: '设备编码', visible: true }, |
||||
|
{ key: 'priority', title: '优先级', visible: true }, |
||||
|
{ key: 'lifecycle', title: '生命周期', visible: true }, |
||||
|
{ key: 'isDisabled', title: '状态', visible: true }, |
||||
|
{ key: 'flowCount', title: '流程数量', visible: true }, |
||||
|
{ key: 'createdAt', title: '创建时间', visible: true }, |
||||
|
{ key: 'actions', title: '操作', visible: true } |
||||
|
]; |
||||
|
|
||||
|
export default function TaskExecutionView() { |
||||
|
const [tasks, setTasks] = useState<TestScenarioTask[]>([]); |
||||
|
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 [searchTerm, setSearchTerm] = useState(''); |
||||
|
const [isDisabled, setIsDisabled] = useState<boolean | undefined>(undefined); |
||||
|
|
||||
|
// Toast 提示
|
||||
|
const { toast } = useToast(); |
||||
|
|
||||
|
const fetchTasks = async (params: Partial<GetTestScenarioTasksRequest> = {}) => { |
||||
|
setLoading(true); |
||||
|
const queryParams: GetTestScenarioTasksRequest = { |
||||
|
pageNumber, |
||||
|
pageSize, |
||||
|
searchTerm, |
||||
|
isDisabled, |
||||
|
...params |
||||
|
}; |
||||
|
|
||||
|
const result = await testScenarioTaskService.getTestScenarioTasks(queryParams); |
||||
|
if (result.isSuccess && result.data) { |
||||
|
setTasks(result.data.tasks || []); |
||||
|
setTotal(result.data.totalCount || 0); |
||||
|
} |
||||
|
setLoading(false); |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
fetchTasks(); |
||||
|
// eslint-disable-next-line
|
||||
|
}, [pageNumber, pageSize]); |
||||
|
|
||||
|
const handleStart = async (task: TestScenarioTask) => { |
||||
|
try { |
||||
|
// TODO: 实现开始任务的逻辑
|
||||
|
toast({ |
||||
|
title: "开始任务", |
||||
|
description: `任务 "${task.taskName}" 已开始执行`, |
||||
|
}); |
||||
|
// 这里可以调用相应的API来开始任务
|
||||
|
// await taskExecutionService.startTask(task.taskId);
|
||||
|
} catch (error) { |
||||
|
console.error('开始任务失败:', error); |
||||
|
toast({ |
||||
|
title: "开始失败", |
||||
|
description: "网络错误，请稍后重试", |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleStop = async (task: TestScenarioTask) => { |
||||
|
try { |
||||
|
// TODO: 实现停止任务的逻辑
|
||||
|
toast({ |
||||
|
title: "停止任务", |
||||
|
description: `任务 "${task.taskName}" 已停止执行`, |
||||
|
}); |
||||
|
// 这里可以调用相应的API来停止任务
|
||||
|
// await taskExecutionService.stopTask(task.taskId);
|
||||
|
} catch (error) { |
||||
|
console.error('停止任务失败:', error); |
||||
|
toast({ |
||||
|
title: "停止失败", |
||||
|
description: "网络错误，请稍后重试", |
||||
|
variant: "destructive", |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 查询按钮
|
||||
|
const handleQuery = () => { |
||||
|
setPageNumber(1); |
||||
|
fetchTasks({ pageNumber: 1 }); |
||||
|
}; |
||||
|
|
||||
|
// 重置按钮
|
||||
|
const handleReset = () => { |
||||
|
setSearchTerm(''); |
||||
|
setIsDisabled(undefined); |
||||
|
setPageNumber(1); |
||||
|
fetchTasks({ |
||||
|
searchTerm: '', |
||||
|
isDisabled: undefined, |
||||
|
pageNumber: 1 |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 每页条数选择
|
||||
|
const handlePageSizeChange = (size: number) => { |
||||
|
setPageSize(size); |
||||
|
setPageNumber(1); |
||||
|
}; |
||||
|
|
||||
|
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-background p-4 rounded-md border mb-2"> |
||||
|
<form |
||||
|
className="flex gap-x-8 gap-y-4 items-center flex-wrap" |
||||
|
onSubmit={e => { |
||||
|
e.preventDefault(); |
||||
|
handleQuery(); |
||||
|
}} |
||||
|
> |
||||
|
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
||||
|
<label |
||||
|
className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" |
||||
|
style={{ width: 80, minWidth: 80 }} |
||||
|
> |
||||
|
搜索关键词： |
||||
|
</label> |
||||
|
<Input |
||||
|
className="flex-1 bg-background text-foreground placeholder:text-muted-foreground border border-border focus:outline-none focus:ring-0 focus:border-border transition-all" |
||||
|
placeholder="请输入任务名称或编码" |
||||
|
value={searchTerm} |
||||
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="flex flex-row items-center min-w-[200px] flex-1"> |
||||
|
<label |
||||
|
className="mr-2 text-sm font-medium text-foreground whitespace-nowrap text-right" |
||||
|
style={{ width: 80, minWidth: 80 }} |
||||
|
> |
||||
|
状态： |
||||
|
</label> |
||||
|
<select |
||||
|
className="h-10 rounded border border-border bg-background px-3 text-sm flex-1 text-foreground focus:outline-none focus:ring-0 focus:border-border transition-all" |
||||
|
value={isDisabled === undefined ? '' : isDisabled.toString()} |
||||
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => { |
||||
|
const value = e.target.value; |
||||
|
setIsDisabled(value === '' ? undefined : value === 'true'); |
||||
|
}} |
||||
|
> |
||||
|
<option value="">请选择</option> |
||||
|
<option value="false">启用</option> |
||||
|
<option value="true">禁用</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
{/* 按钮组 */} |
||||
|
<div className="flex flex-row items-center gap-2"> |
||||
|
<Button variant="outline" onClick={handleReset}>重置</Button> |
||||
|
<Button onClick={handleQuery}>查询</Button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
{/* 表格整体卡片区域，包括工具栏、表格、分页 */} |
||||
|
<div className="rounded-md border bg-background p-4"> |
||||
|
{/* 顶部操作栏：工具栏 */} |
||||
|
<div className="flex items-center justify-end mb-2"> |
||||
|
<TableToolbar |
||||
|
onRefresh={() => fetchTasks()} |
||||
|
onDensityChange={setDensity} |
||||
|
onColumnsChange={setColumns} |
||||
|
onColumnsReset={() => setColumns(defaultColumns)} |
||||
|
columns={columns} |
||||
|
density={density} |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* 表格区域 */} |
||||
|
<TaskExecutionTable |
||||
|
tasks={tasks} |
||||
|
loading={loading} |
||||
|
onStart={handleStart} |
||||
|
onStop={handleStop} |
||||
|
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> |
||||
|
</main> |
||||
|
); |
||||
|
} |
||||
Loading…
Reference in new issue