- 업로드 당시 분류된 정보를 그대로 표시하도록 수정
- 복잡한 BOM 페이지 스타일 분류 로직 제거
- 간단하고 안정적인 테이블 형태로 자재 목록 표시
- 카테고리별 그룹화 유지하되 에러 방지를 위해 단순화
✅ 해결된 문제:
- 구매신청 페이지에서 몇몇 항목이 깨지던 문제 해결
- 업로드 당시 정보를 그대로 보여주도록 개선
This commit is contained in:
hyungi
@@ -155,97 +155,73 @@ const PurchaseRequestPage = ({ onNavigate, fileId, jobNo, selectedProject }) =>
|
||||
</div>
|
||||
|
||||
<div className="materials-table">
|
||||
{/* 카테고리별로 그룹화하여 표시 */}
|
||||
{(() => {
|
||||
// 카테고리별로 자재 그룹화
|
||||
const groupedByCategory = requestMaterials.reduce((acc, material) => {
|
||||
const category = material.category || 'UNKNOWN';
|
||||
if (!acc[category]) acc[category] = [];
|
||||
acc[category].push(material);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.entries(groupedByCategory).map(([category, materials]) => (
|
||||
<div key={category} style={{ marginBottom: '30px' }}>
|
||||
<h3 style={{
|
||||
background: '#f0f0f0',
|
||||
padding: '10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{category} ({materials.length}개)
|
||||
</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>카테고리</th>
|
||||
<th>자재 설명</th>
|
||||
<th>크기</th>
|
||||
{category === 'BOLT' ? <th>길이</th> : <th>스케줄</th>}
|
||||
<th>재질</th>
|
||||
<th>수량</th>
|
||||
<th>사용자요구</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{materials.map((material, idx) => (
|
||||
<tr key={material.item_id || `${category}-${idx}`}>
|
||||
<td>{idx + 1}</td>
|
||||
<td>
|
||||
<span className="category-badge">
|
||||
{material.category}
|
||||
</span>
|
||||
</td>
|
||||
<td>{material.description}</td>
|
||||
<td>{material.size || '-'}</td>
|
||||
<td>{material.schedule || '-'}</td>
|
||||
<td>{material.material_grade || '-'}</td>
|
||||
<td>
|
||||
{material.category === 'PIPE' ? (
|
||||
<div>
|
||||
{/* 업로드 당시 분류된 정보를 그대로 표시 */}
|
||||
{requestMaterials.length === 0 ? (
|
||||
<div className="empty-state">자재 정보가 없습니다</div>
|
||||
) : (
|
||||
<div>
|
||||
{/* 카테고리별로 그룹화하여 표시 */}
|
||||
{(() => {
|
||||
// 카테고리별로 자재 그룹화
|
||||
const groupedByCategory = requestMaterials.reduce((acc, material) => {
|
||||
const category = material.category || material.classified_category || 'UNKNOWN';
|
||||
if (!acc[category]) acc[category] = [];
|
||||
acc[category].push(material);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return Object.entries(groupedByCategory).map(([category, materials]) => (
|
||||
<div key={category} style={{ marginBottom: '30px' }}>
|
||||
<h3 style={{
|
||||
background: '#f0f0f0',
|
||||
padding: '10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{category} ({materials.length}개)
|
||||
</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>카테고리</th>
|
||||
<th>자재 설명</th>
|
||||
<th>크기</th>
|
||||
<th>스케줄</th>
|
||||
<th>재질</th>
|
||||
<th>수량</th>
|
||||
<th>사용자요구</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{materials.map((material, idx) => (
|
||||
<tr key={material.item_id || material.id || `${category}-${idx}`}>
|
||||
<td>{idx + 1}</td>
|
||||
<td>
|
||||
<span className="category-badge">
|
||||
{material.category || material.classified_category}
|
||||
</span>
|
||||
</td>
|
||||
<td>{material.description || material.original_description}</td>
|
||||
<td>{material.size || material.size_spec || '-'}</td>
|
||||
<td>{material.schedule || '-'}</td>
|
||||
<td>{material.material_grade || material.full_material_grade || '-'}</td>
|
||||
<td>
|
||||
<span style={{ fontWeight: 'bold' }}>
|
||||
{(() => {
|
||||
// 총 길이와 개수 계산
|
||||
let totalLengthMm = material.total_length || 0;
|
||||
let totalCount = 0;
|
||||
|
||||
if (material.pipe_lengths && material.pipe_lengths.length > 0) {
|
||||
// pipe_lengths 배열에서 총 개수 계산
|
||||
totalCount = material.pipe_lengths.reduce((sum, p) => sum + parseFloat(p.quantity || 0), 0);
|
||||
} else if (material.material_ids && material.material_ids.length > 0) {
|
||||
totalCount = material.material_ids.length;
|
||||
if (!totalLengthMm) {
|
||||
totalLengthMm = totalCount * 6000;
|
||||
}
|
||||
} else {
|
||||
totalCount = parseFloat(material.quantity) || 1;
|
||||
if (!totalLengthMm) {
|
||||
totalLengthMm = totalCount * 6000;
|
||||
}
|
||||
}
|
||||
|
||||
// 6,000mm를 1본으로 계산
|
||||
const pipeCount = Math.ceil(totalLengthMm / 6000);
|
||||
|
||||
// 형식: 2본(11,000mm/40개)
|
||||
return `${pipeCount}본(${totalLengthMm.toLocaleString()}mm/${totalCount}개)`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
`${material.quantity} ${material.unit || 'EA'}`
|
||||
)}
|
||||
</td>
|
||||
<td>{material.user_requirement || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
{Math.round(material.quantity || material.requested_quantity || 0)} {material.unit || material.requested_unit || '개'}
|
||||
</span>
|
||||
</td>
|
||||
<td>{material.user_requirement || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user