duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Grid回退grid-cols-12精确对齐+分组标题按device/order切换+宏观状态receive/transfer只主线

Browse Source
This commit is contained in:
duxingchen
2026-08-10 10:58:33 +08:00
parent 26dc05cc2f
commit 2880ea6df7
2 changed files with 26 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/pages/admin/AdminTasksPage.tsx
View File

@ -326,9 +326,11 @@ export default function AdminTasksPage() {
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold text-gray-800">
{group.orderNo === "未绑定订单"
? "📋 未绑定订单"
: `📦 订单: ${group.orderNo}`}
{group.orderNo === "未绑定订单" || group.orderNo === "未命名设备"
? "📋 未分类"
: groupBy === "device"
? `⚙️ 设备: ${group.orderNo}`
: `📦 订单: ${group.orderNo}`}
</span>
<span className="text-xs text-gray-400">
{group.products.length} 个产品
@ -351,15 +353,15 @@ export default function AdminTasksPage() {
{isOpen && (
<div className="border-t border-gray-100">
{/* 表头 */}
<div className="grid gap-2 bg-gray-50 px-5 py-2 text-xs font-medium text-gray-500" style={{ gridTemplateColumns: "2fr 1fr 2fr 1fr 1fr 2fr 2fr 2fr" }}>
<div className="">产品身份证</div>
<div className="grid grid-cols-12 gap-2 bg-gray-50 px-5 py-2 text-xs font-medium text-gray-500">
<div className="col-span-2">产品身份证</div>
<div className="col-span-1">序列号</div>
<div className="">规格型号</div>
<div className="col-span-2">规格型号</div>
<div className="col-span-1">宏观状态</div>
<div className="col-span-1">任务状态</div>
<div className="">当前位置</div>
<div className="">创建时间</div>
<div className="">操作</div>
<div className="col-span-1">当前位置</div>
<div className="col-span-2">创建时间</div>
<div className="col-span-2">操作</div>
</div>
{/* 产品行 */}
@ -374,41 +376,15 @@ export default function AdminTasksPage() {
return (
<div key={p.id}>
<div className="grid gap-2 border-t border-gray-50 px-5 py-3 items-center text-sm hover:bg-gray-50/50" style={{ gridTemplateColumns: "2fr 1fr 2fr 1fr 1fr 2fr 2fr 2fr" }}>
<div className="col-span-2 font-mono text-xs font-semibold text-gray-800 tracking-wider">
{p.serial_number}
</div>
<div className="col-span-1 font-mono text-xs text-gray-600 truncate">
{p.external_serial || "—"}
</div>
<div className="col-span-2 text-xs text-gray-500 truncate">
{p.spec_model || p.material_name || p.material_id || "—"}
</div>
<div className="col-span-1">
<span className="text-xs font-medium text-gray-700">
{p.overall_status || "—"}
</span>
</div>
<div className="col-span-1">
<span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${statusCfg.bg} ${statusCfg.text}`}
>
{statusCfg.label}
</span>
</div>
<div className="col-span-2 text-xs text-gray-500 truncate">
{p.current_location_id === "virtual_warehouse" ? (
<span className="inline-flex items-center gap-1 text-purple-600">
🏭 仓库
</span>
) : (
p.current_location_name || p.current_location_id || "—"
)}
</div>
<div className="col-span-2 text-xs text-gray-400">
{new Date(p.created_at).toLocaleDateString("zh-CN")}
</div>
<div className="">
<div className="grid grid-cols-12 gap-2 border-t border-gray-50 px-5 py-3 items-center text-sm hover:bg-gray-50/50">
<div className="col-span-2 font-mono text-xs font-semibold text-gray-800 tracking-wider">{p.serial_number}</div>
<div className="col-span-1 font-mono text-xs text-gray-600 truncate">{p.external_serial || "—"}</div>
<div className="col-span-2 text-xs text-gray-500 truncate">{p.spec_model || p.material_name || p.material_id || "—"}</div>
<div className="col-span-1"><span className="text-xs font-medium text-gray-700">{p.overall_status || "—"}</span></div>
<div className="col-span-1"><span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${statusCfg.bg} ${statusCfg.text}`}>{statusCfg.label}</span></div>
<div className="col-span-1 text-xs text-gray-500 truncate">{p.current_location_id === "virtual_warehouse" ? (<span className="inline-flex items-center gap-1 text-purple-600">🏭 仓库</span>) : (p.current_location_name || p.current_location_id || "—")}</div>
<div className="col-span-2 text-xs text-gray-400">{new Date(p.created_at).toLocaleDateString("zh-CN")}</div>
<div className="col-span-2">
<button
onClick={() => toggleProductTree(p.serial_number)}
className="flex items-center gap-1 rounded border border-blue-200 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-50 transition-colors"