317 lines
19 KiB
TypeScript
317 lines
19 KiB
TypeScript
'use client'
|
||
import { useState, useRef } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { ArrowLeft, Plus, Trash2, Upload, Info, CheckCircle, FileText, X, ScanLine } from 'lucide-react'
|
||
import { useApi } from '@/lib/hooks'
|
||
|
||
interface CategoryItem { id: number; name: string; status: string; has_calibration: number }
|
||
interface VersionItem { id: number; type: string; version: string; status: string }
|
||
|
||
interface BoardEntry {
|
||
id: number
|
||
type: string
|
||
version: string
|
||
sn: string
|
||
productionDate: string
|
||
status: string
|
||
calibStatus: string
|
||
calibFile: File | null
|
||
}
|
||
|
||
let nextId = 1
|
||
|
||
export default function BoardRegisterPage() {
|
||
const router = useRouter()
|
||
const { data: categoriesData } = useApi<CategoryItem[]>('/api/material-categories', [])
|
||
const { data: versionsData } = useApi<VersionItem[]>('/api/material-versions', [])
|
||
const typeOptions = categoriesData.filter(c => c.status === '启用').map(c => c.name)
|
||
|
||
// 根据分类名获取该分类下的版本列表
|
||
const getVersionsForType = (type: string) => versionsData.filter(v => v.type === type && v.status === '在产')
|
||
// 判断分类是否需要校准
|
||
const needsCalibration = (type: string) => !!categoriesData.find(c => c.name === type)?.has_calibration
|
||
|
||
function createEntry(): BoardEntry {
|
||
const defaultType = typeOptions[0] || ''
|
||
const versions = getVersionsForType(defaultType)
|
||
return { id: nextId++, type: defaultType, version: versions[0]?.version || '', sn: '', productionDate: '', status: '在库', calibStatus: '-', calibFile: null }
|
||
}
|
||
|
||
const [entries, setEntries] = useState<BoardEntry[]>([createEntry()])
|
||
const [batchMode, setBatchMode] = useState(false)
|
||
|
||
const addEntry = () => {
|
||
const defaultType = typeOptions[0] || ''
|
||
const versions = getVersionsForType(defaultType)
|
||
setEntries(prev => [...prev, { id: nextId++, type: defaultType, version: versions[0]?.version || '', sn: '', productionDate: '', status: '在库', calibStatus: '-', calibFile: null }])
|
||
}
|
||
|
||
const removeEntry = (id: number) => {
|
||
if (entries.length <= 1) return
|
||
setEntries(prev => prev.filter(e => e.id !== id))
|
||
}
|
||
|
||
const updateEntry = (id: number, field: keyof BoardEntry, value: string) => {
|
||
setEntries(prev => prev.map(e => {
|
||
if (e.id !== id) return e
|
||
const updated = { ...e, [field]: value }
|
||
// 切换类型时自动选第一个版本
|
||
if (field === 'type') {
|
||
const versions = getVersionsForType(value)
|
||
updated.version = versions[0]?.version || ''
|
||
if (needsCalibration(value)) { updated.calibStatus = '待校准' } else { updated.calibStatus = '-'; updated.calibFile = null }
|
||
}
|
||
return updated
|
||
}))
|
||
}
|
||
|
||
const fileInputRefs = useRef<Record<number, HTMLInputElement | null>>({})
|
||
|
||
const handleCalibFileChange = (entryId: number, file: File | null) => {
|
||
setEntries(prev => prev.map(e => e.id === entryId ? { ...e, calibFile: file } : e))
|
||
}
|
||
|
||
const formatFileSize = (bytes: number): string => {
|
||
if (bytes < 1024) return bytes + ' B'
|
||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
||
}
|
||
|
||
const isValid = entries.every(e => e.sn.trim() && e.productionDate)
|
||
|
||
return (
|
||
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
|
||
<div style={{ flex: 1, padding: 24, paddingBottom: 80 }}>
|
||
{/* Header */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
|
||
<button onClick={() => router.push('/materials')} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 32, height: 32, border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer' }}>
|
||
<ArrowLeft size={16} />
|
||
</button>
|
||
<div>
|
||
<h2 style={{ fontSize: 20, fontWeight: 600, margin: 0 }}>登记物料</h2>
|
||
<p style={{ fontSize: 14, color: 'rgba(0,0,0,0.45)', margin: '4px 0 0' }}>登记新物料信息，支持单个或批量登记</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info Banner */}
|
||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: 16, backgroundColor: '#eef5f0', borderRadius: 8, marginBottom: 24, border: '1px solid #a3c4ad' }}>
|
||
<Info size={18} style={{ color: '#4a7c59', flexShrink: 0, marginTop: 2 }} />
|
||
<div style={{ fontSize: 14, color: '#4a7c59', lineHeight: 1.6 }}>
|
||
物料SN号为唯一标识，请确保录入正确。采集板登记后需要进行校准才能用于装配。选择版本后固件版本会自动填充。
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mode Toggle */}
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
|
||
<span style={{ fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>登记模式：</span>
|
||
<div style={{ display: 'flex', gap: 0, borderRadius: 6, overflow: 'hidden', border: '1px solid #D9D9D9' }}>
|
||
<button onClick={() => setBatchMode(false)} style={{ padding: '6px 16px', fontSize: 13, border: 'none', cursor: 'pointer', backgroundColor: !batchMode ? '#4a7c59' : '#fff', color: !batchMode ? '#fff' : 'rgba(0,0,0,0.65)' }}>单个登记</button>
|
||
<button onClick={() => setBatchMode(true)} style={{ padding: '6px 16px', fontSize: 13, border: 'none', cursor: 'pointer', backgroundColor: batchMode ? '#4a7c59' : '#fff', color: batchMode ? '#fff' : 'rgba(0,0,0,0.65)', borderLeft: '1px solid #D9D9D9' }}>批量登记</button>
|
||
</div>
|
||
{batchMode && (
|
||
<span style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}>当前 {entries.length} 条</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Entry Cards */}
|
||
{entries.map((entry, idx) => (
|
||
<div key={entry.id} style={{ backgroundColor: '#fff', borderRadius: 8, padding: 24, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', border: '1px solid #F0F0F0' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
|
||
<h3 style={{ fontSize: 15, fontWeight: 600, margin: 0, color: 'rgba(0,0,0,0.85)' }}>
|
||
{batchMode ? `物料 #${idx + 1}` : '物料信息'}
|
||
</h3>
|
||
{batchMode && entries.length > 1 && (
|
||
<button onClick={() => removeEntry(entry.id)} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 12px', border: '1px solid #FFCCC7', borderRadius: 6, backgroundColor: '#FFF1F0', color: '#FF4D4F', cursor: 'pointer', fontSize: 13 }}>
|
||
<Trash2 size={13} />移除
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
|
||
{/* 板卡类型 */}
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 物料类型</label>
|
||
<select value={entry.type} onChange={e => updateEntry(entry.id, 'type', e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{typeOptions.map(t => <option key={t} value={t}>{t}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* 板卡版本 */}
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 物料版本</label>
|
||
<select value={entry.version} onChange={e => updateEntry(entry.id, 'version', e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{getVersionsForType(entry.type).map(v => <option key={v.id} value={v.version}>{v.version}</option>)}
|
||
{getVersionsForType(entry.type).length === 0 && <option value="">暂无版本</option>}
|
||
</select>
|
||
</div>
|
||
|
||
{/* 物料SN */}
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 物料SN号</label>
|
||
<div style={{ display: 'flex', gap: 6 }}>
|
||
<input value={entry.sn} onChange={e => updateEntry(entry.id, 'sn', e.target.value)} placeholder={`扫码或手动输入 如 ${entry.version}-20250401001`} style={{ flex: 1, padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
|
||
<button title="扫码录入SN" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', flexShrink: 0 }}>
|
||
<ScanLine size={16} style={{ color: '#4a7c59' }} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 生产日期 */}
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}><span style={{ color: '#FF4D4F' }}>*</span> 生产日期</label>
|
||
<input type="date" value={entry.productionDate} onChange={e => updateEntry(entry.id, 'productionDate', e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14, boxSizing: 'border-box' }} />
|
||
</div>
|
||
|
||
{/* 物料状态 */}
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>物料状态</label>
|
||
<select value={entry.status} onChange={e => updateEntry(entry.id, 'status', e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{['在库', '已装配', '故障', '报废'].map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
|
||
{/* 校准状态（仅需校准的分类显示） */}
|
||
{needsCalibration(entry.type) && (
|
||
<div>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6 }}>校准状态</label>
|
||
<select value={entry.calibStatus} onChange={e => updateEntry(entry.id, 'calibStatus', e.target.value)} style={{ width: '100%', padding: '8px 12px', border: '1px solid #D9D9D9', borderRadius: 6, fontSize: 14 }}>
|
||
{['待校准', '合格', '不合格'].map(s => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
|
||
{/* 需校准物料提示 */}
|
||
{needsCalibration(entry.type) && (
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 16, padding: '8px 12px', backgroundColor: '#FFFBE6', borderRadius: 6, border: '1px solid #FFE58F' }}>
|
||
<Info size={14} style={{ color: '#FAAD14', flexShrink: 0 }} />
|
||
<span style={{ fontSize: 12, color: 'rgba(0,0,0,0.65)' }}>该物料登记后状态为"待校准"，需完成校准后才能用于设备装配。</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 校准文件导入（需校准的分类显示） */}
|
||
{needsCalibration(entry.type) && (
|
||
<div style={{ marginTop: 16 }}>
|
||
<label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 8 }}>校准文件（可选）</label>
|
||
<input
|
||
type="file"
|
||
accept=".csv,.xlsx,.xls,.dat,.json"
|
||
ref={el => { fileInputRefs.current[entry.id] = el }}
|
||
onChange={e => handleCalibFileChange(entry.id, e.target.files?.[0] || null)}
|
||
style={{ display: 'none' }}
|
||
/>
|
||
{entry.calibFile ? (
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', backgroundColor: '#eef5f0', borderRadius: 6, border: '1px solid #a3c4ad' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<FileText size={16} style={{ color: '#4a7c59', flexShrink: 0 }} />
|
||
<div>
|
||
<div style={{ fontSize: 13, fontWeight: 500, color: 'rgba(0,0,0,0.85)' }}>{entry.calibFile.name}</div>
|
||
<div style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}>{formatFileSize(entry.calibFile.size)}</div>
|
||
</div>
|
||
</div>
|
||
<button onClick={() => { handleCalibFileChange(entry.id, null); if (fileInputRefs.current[entry.id]) fileInputRefs.current[entry.id]!.value = '' }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, border: 'none', background: 'none', cursor: 'pointer', color: 'rgba(0,0,0,0.45)', borderRadius: 4 }}>
|
||
<X size={14} />
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<button onClick={() => fileInputRefs.current[entry.id]?.click()} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%', padding: '14px 0', border: '2px dashed #D9D9D9', borderRadius: 6, backgroundColor: '#FAFAFA', cursor: 'pointer', fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>
|
||
<Upload size={16} />导入校准文件（支持 .csv / .xlsx / .dat / .json）
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
|
||
{/* Add More Button (batch mode) */}
|
||
{batchMode && (
|
||
<button onClick={addEntry} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, width: '100%', padding: '12px 0', border: '2px dashed #D9D9D9', borderRadius: 8, backgroundColor: '#FAFAFA', cursor: 'pointer', fontSize: 14, color: 'rgba(0,0,0,0.45)', marginBottom: 16 }}>
|
||
<Plus size={16} />添加一条物料
|
||
</button>
|
||
)}
|
||
|
||
{/* Preview Summary */}
|
||
{entries.length > 0 && (
|
||
<div style={{ backgroundColor: '#fff', borderRadius: 8, padding: 20, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', border: '1px solid #F0F0F0' }}>
|
||
<h3 style={{ fontSize: 15, fontWeight: 600, margin: '0 0 16px', color: 'rgba(0,0,0,0.85)' }}>登记预览</h3>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||
<thead>
|
||
<tr style={{ backgroundColor: '#FAFAFA' }}>
|
||
{['序号', '物料分类', '物料版本', '物料SN号', '生产日期', '物料状态', '校准状态', '校准文件'].map(h => (
|
||
<th key={h} style={{ padding: '10px 14px', textAlign: 'left', fontSize: 13, fontWeight: 600, color: 'rgba(0,0,0,0.85)', borderBottom: '1px solid #F0F0F0' }}>{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{entries.map((entry, i) => (
|
||
<tr key={entry.id} style={{ borderBottom: '1px solid #F0F0F0' }}>
|
||
<td style={{ padding: '10px 14px', fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{i + 1}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13 }}>{entry.type}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13 }}>{entry.version}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13, fontWeight: 500, color: entry.sn ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.25)' }}>{entry.sn || '未填写'}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13, color: entry.productionDate ? 'rgba(0,0,0,0.65)' : 'rgba(0,0,0,0.25)' }}>{entry.productionDate || '未填写'}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13 }}>{entry.status}</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13 }}>
|
||
{needsCalibration(entry.type) ? entry.calibStatus : <span style={{ color: 'rgba(0,0,0,0.25)' }}>-</span>}
|
||
</td>
|
||
<td style={{ padding: '10px 14px', fontSize: 13 }}>
|
||
{needsCalibration(entry.type) ? (
|
||
entry.calibFile ? (
|
||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: '#4a7c59', fontSize: 12 }}>
|
||
<FileText size={12} />{entry.calibFile.name}
|
||
</span>
|
||
) : (
|
||
<span style={{ fontSize: 12, color: '#FAAD14' }}>待上传</span>
|
||
)
|
||
) : (
|
||
<span style={{ fontSize: 12, color: 'rgba(0,0,0,0.25)' }}>-</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Sticky Bottom Bar */}
|
||
<div style={{ position: 'sticky', bottom: 0, backgroundColor: '#fff', borderTop: '1px solid #F0F0F0', padding: '12px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 10 }}>
|
||
<span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>
|
||
共 {entries.length} 条物料待登记
|
||
{entries.some(e => needsCalibration(e.type)) && <span style={{ color: '#FAAD14' }}> · 含需校准物料</span>}
|
||
{entries.some(e => needsCalibration(e.type) && e.calibFile) && <span style={{ color: '#4a7c59' }}> · {entries.filter(e => e.calibFile).length} 个已附校准文件</span>}
|
||
</span>
|
||
<div style={{ display: 'flex', gap: 12 }}>
|
||
<button onClick={() => router.push('/materials')} style={{ padding: '8px 24px', border: '1px solid #D9D9D9', borderRadius: 6, backgroundColor: '#fff', cursor: 'pointer', fontSize: 14 }}>取消</button>
|
||
<button
|
||
onClick={async () => {
|
||
for (const entry of entries) {
|
||
await fetch('/api/materials', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
sn: entry.sn, name: entry.type, category: entry.type, type: entry.version,
|
||
device_model: '', version: entry.version, description: '',
|
||
firmware: '-', status: entry.status,
|
||
production_date: entry.productionDate,
|
||
calib_status: needsCalibration(entry.type) ? entry.calibStatus : '-',
|
||
calib_date: '-',
|
||
})
|
||
})
|
||
}
|
||
router.push('/materials')
|
||
}}
|
||
disabled={!isValid}
|
||
style={{ padding: '8px 24px', border: 'none', borderRadius: 6, backgroundColor: isValid ? '#4a7c59' : '#D9D9D9', color: '#fff', cursor: isValid ? 'pointer' : 'not-allowed', fontSize: 14 }}
|
||
>
|
||
<span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||
<CheckCircle size={14} />确认登记
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|