duxingchen
59c182a743
App.tsx: - AntApp + AuthProvider + ToastProvider 三层包裹 - /admin/login 独立登录页 - /admin/* 路由认证守卫 AdminLayout: - 未登录→跳转登录; 顶部栏显示用户名+登出 - 侧边栏: 全局概览/产品管理/任务全景 CreateProductDialog (Ant Design 重写): - MOM物料手风琴选择器 (Collapse+Table) - 分组懒加载 + useRef缓存 + 防抖搜索 - HEX ID只读展示 + 序列号/订单号选填 AdminProductsPage: - 打印预览弹窗 (Base64标签预览 + 份数选择) - 打印机设置入口 → AdminPrintConfigPage 扫码组件对齐: - ProductCard: material_name/spec_model/current_location - TaskListCard: 递归 task_tree + 状态配色 + 返工/裂变标签 - QueryResult: task_tree 优先 - ScanPage: 宏观状态栏
67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
/** 产品信息卡片 */
|
|
import { Package } from "lucide-react";
|
|
import type { ProductScanResponse } from "../../types/api";
|
|
import { TASK_STATUS } from "../../types/api";
|
|
|
|
const STATUS_LABELS: Record<string, string> = {
|
|
[TASK_STATUS.PENDING]: "待接收",
|
|
[TASK_STATUS.WIP]: "进行中",
|
|
[TASK_STATUS.COMPLETED]: "已完成",
|
|
[TASK_STATUS.REJECTED]: "已驳回",
|
|
[TASK_STATUS.ARCHIVED]: "已入库",
|
|
};
|
|
|
|
function statusColor(status: string): string {
|
|
switch (status) {
|
|
case TASK_STATUS.PENDING: return "bg-yellow-100 text-yellow-700";
|
|
case TASK_STATUS.WIP: return "bg-blue-100 text-blue-700";
|
|
case TASK_STATUS.COMPLETED: return "bg-green-100 text-green-700";
|
|
case TASK_STATUS.REJECTED: return "bg-red-100 text-red-700";
|
|
default: return "bg-gray-100 text-gray-600";
|
|
}
|
|
}
|
|
|
|
interface ProductCardProps {
|
|
product: ProductScanResponse;
|
|
}
|
|
|
|
export default function ProductCard({ product }: ProductCardProps) {
|
|
return (
|
|
<div className="rounded-xl bg-white p-4 shadow-sm">
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<Package className="h-5 w-5 text-blue-600" />
|
|
<h3 className="font-semibold text-gray-800">产品信息</h3>
|
|
<span className={`ml-auto rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor(product.status)}`}>
|
|
{STATUS_LABELS[product.status] ?? product.status}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
|
<div>
|
|
<span className="text-gray-400">序列号</span>
|
|
<p className="font-mono font-medium text-gray-800">{product.serial_number}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-400">物料名称</span>
|
|
<p className="font-medium text-gray-800">{product.material_name || product.material_id || "—"}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-400">规格型号</span>
|
|
<p className="font-medium text-gray-800">{product.spec_model || "—"}</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-gray-400">订单编号</span>
|
|
<p className="font-medium text-gray-800">{product.order_no || "—"}</p>
|
|
</div>
|
|
{product.current_location_id && (
|
|
<div>
|
|
<span className="text-gray-400">当前位置</span>
|
|
<p className={`font-medium ${product.current_location_id === "virtual_warehouse" ? "text-purple-600" : "text-gray-800"}`}>
|
|
{product.current_location_id === "virtual_warehouse" ? "🏭 仓库" : product.current_location_id}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|