61 lines
4.3 KiB
TypeScript
61 lines
4.3 KiB
TypeScript
import Blur from '../../../components/Blur';
|
|
import type { VehicleListItem } from '../types';
|
|
|
|
type DetailsProps = { vehicles: VehicleListItem[] };
|
|
|
|
function InventoryVehicleDetails({ vehicles, kind }: DetailsProps & { kind: 'abnormal' | 'pending' }) {
|
|
const pending = kind === 'pending';
|
|
const labels = pending ? ['合同编号', '客户名称（已脱敏）'] : ['异动类型', '审批通过时间', '已异动时长', '具体工作', '申请人', '预计完成时间', '实际完成时间'];
|
|
const details = (vehicle: VehicleListItem) => pending
|
|
? [vehicle.pendingDelivery?.contractNo || '未提供', vehicle.pendingDelivery?.customerName || '未提供']
|
|
: [
|
|
vehicle.abnormalMove?.type || '未提供',
|
|
vehicle.abnormalMove?.approvalPassedAt ? new Date(vehicle.abnormalMove.approvalPassedAt).toLocaleString('zh-CN', { hour12: false }) : '审批时间缺失',
|
|
vehicle.abnormalMove?.elapsedDays != null ? `${vehicle.abnormalMove.elapsedDays.toFixed(1)} 天` : '无法计算',
|
|
vehicle.abnormalMove?.work || '未提供',
|
|
vehicle.abnormalMove?.applicant || '未提供',
|
|
vehicle.abnormalMove?.targetCompletionTime || '未提供',
|
|
vehicle.abnormalMove?.actualCompletionTime || (vehicle.abnormalMove?.status === '待结束' ? '未完成' : '未提供'),
|
|
];
|
|
|
|
if (vehicles.length === 0) return <div className="py-14 text-center text-sm text-slate-500">暂无符合筛选条件的{pending ? '待交车' : '异动车辆'}</div>;
|
|
|
|
return <>
|
|
<p className="px-4 py-3 text-xs leading-5 text-slate-500">{pending ? '展示当前待交车任务的合同信息，客户名称已脱敏。' : '申请人取异动单创建人；未结束的异动显示“未完成”，缺失信息显示“未提供”。'}</p>
|
|
<div className="space-y-3 px-3 pb-3 md:hidden">
|
|
{vehicles.map(vehicle => <article key={vehicle.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<h4 className="break-all font-mono text-base font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></h4>
|
|
<p className="mt-1 text-xs text-slate-500">{vehicle.brandLabel || '—'} · {vehicle.type} · {vehicle.location === '其他' ? '对接中' : vehicle.location}</p>
|
|
<dl className="mt-4 space-y-3 text-sm">
|
|
{details(vehicle).map((value, index) => <div key={labels[index]} className="grid grid-cols-[6rem_minmax(0,1fr)] gap-2">
|
|
<dt className="text-slate-500">{pending && index === 1 ? "客户（已脱敏）" : labels[index]}</dt>
|
|
<dd className="whitespace-pre-wrap break-words font-medium text-slate-800 [overflow-wrap:anywhere]"><Blur>{value}</Blur></dd>
|
|
</div>)}
|
|
</dl>
|
|
</article>)}
|
|
</div>
|
|
<div className="hidden overflow-x-auto md:block" tabIndex={0} role="region" aria-label={pending ? "待交车明细表" : "异动明细表，可横向滚动"}>
|
|
<table className={`w-full ${pending ? "min-w-[700px]" : "min-w-[1160px]"} border-collapse text-left text-sm`}>
|
|
<thead className="sticky top-0 z-20 bg-slate-700 text-white"><tr>
|
|
{['车牌', '品牌', '车型', '所在地', ...labels].map(label => <th key={label} scope="col" className={`whitespace-nowrap p-3 ${label === "具体工作" ? "w-64" : ""}`}>{label}</th>)}
|
|
</tr></thead>
|
|
<tbody>{vehicles.map(vehicle => <tr key={vehicle.id} className="border-b border-slate-200 bg-white align-top">
|
|
<td className="p-3 font-mono font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></td>
|
|
<td className="p-3 text-slate-600">{vehicle.brandLabel || '—'}</td>
|
|
<td className="p-3 text-slate-600">{vehicle.type}</td>
|
|
<td className="p-3 text-slate-600">{vehicle.location === '其他' ? '对接中' : vehicle.location}</td>
|
|
{details(vehicle).map((value, index) => <td key={labels[index]} className={`whitespace-pre-wrap break-words p-3 leading-6 text-slate-700 [overflow-wrap:anywhere] ${labels[index] === "具体工作" ? "min-w-56 max-w-72" : "min-w-28 max-w-48"}`}><Blur>{value}</Blur></td>)}
|
|
</tr>)}</tbody>
|
|
</table>
|
|
</div>
|
|
</>;
|
|
}
|
|
|
|
export function AbnormalVehicleDetails(props: DetailsProps) {
|
|
return <InventoryVehicleDetails {...props} kind="abnormal" />;
|
|
}
|
|
|
|
export function PendingVehicleDetails(props: DetailsProps) {
|
|
return <InventoryVehicleDetails {...props} kind="pending" />;
|
|
}
|