57 lines
2.8 KiB
TypeScript
57 lines
2.8 KiB
TypeScript
import { formatCount, formatDateTime, formatDecimal } from './model';
|
|
import type { BatchRow } from './types';
|
|
|
|
interface BatchTableProps {
|
|
batches: BatchRow[];
|
|
batchFilter: string;
|
|
onClearFilter: () => void;
|
|
onSelectBatch: (batchId: string) => void;
|
|
}
|
|
|
|
export function BatchTable({ batches, batchFilter, onClearFilter, onSelectBatch }: BatchTableProps) {
|
|
if (batches.length === 0) return null;
|
|
|
|
return (
|
|
<section className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
|
<div className="px-3 py-2 bg-slate-50 flex items-center justify-between">
|
|
<span className="text-[11px] font-bold text-slate-500">最近上传批次</span>
|
|
{batchFilter && (
|
|
<button onClick={onClearFilter} className="text-[10px] font-bold text-blue-500">取消筛选</button>
|
|
)}
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-[11px]">
|
|
<thead className="text-slate-400 font-bold bg-slate-50/40">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left">导入时间</th>
|
|
<th className="px-3 py-2 text-right">总数</th>
|
|
<th className="px-3 py-2 text-right">内部</th>
|
|
<th className="px-3 py-2 text-right">外部</th>
|
|
<th className="px-3 py-2 text-right">电量(度)</th>
|
|
<th className="px-3 py-2 text-right">费用(元)</th>
|
|
<th className="px-3 py-2 text-right">批次</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{batches.map(batch => (
|
|
<tr
|
|
key={batch.batch_id}
|
|
onClick={() => onSelectBatch(batch.batch_id)}
|
|
className={`border-t border-slate-100 cursor-pointer transition-colors ${batchFilter === batch.batch_id ? 'bg-blue-50/40' : 'hover:bg-slate-50/60'}`}
|
|
>
|
|
<td className="px-3 py-2 text-slate-600 whitespace-nowrap">{formatDateTime(batch.imported_at, 19)}</td>
|
|
<td className="px-3 py-2 text-right font-bold text-slate-700">{formatCount(batch.records)}</td>
|
|
<td className="px-3 py-2 text-right text-blue-600 font-bold">{formatCount(batch.internal_count)}</td>
|
|
<td className="px-3 py-2 text-right text-amber-600 font-bold">{formatCount(batch.external_count)}</td>
|
|
<td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">{formatDecimal(batch.total_kwh, 1)}</td>
|
|
<td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">¥{formatDecimal(batch.total_fee, 2)}</td>
|
|
<td className="px-3 py-2 text-right text-slate-300 font-mono text-[10px]">{batch.batch_id.slice(0, 12)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|