hjjeong
7779f37c17
PART Excel Import (M1·M2 공용):
- /partMng/openPartExcelImportPopUp.do + partParsingExcelFile.do + partUploadSave.do 1:1
- 22컬럼 파싱 + NOTE 누적 검증 (품번 필수/중복, PART_TYPE/ACCTFG/UNIT_DC commCode 매핑,
ODRFG/LOT_FG/USE_YN/QC_FG/SETITEM_FG/REQ_FG 한글 → 코드값)
- 저장은 신규 PART_NO 만 mergePartMng INSERT (기존 IS_LAST='1' 행은 skip)
- part-regist + part-search 페이지에 Excel Upload 버튼 + 다이얼로그 연결
BOM Report Excel Import (M3 = openBomReportExcelImportPopUp = "PART 및 구조등록 Excel upload"):
- /partMng/parsingExcelFile.do + checkDuplicatePartNo.do + getBomDataForCopy.do
+ partBomApplySave.do (savePartBomMaster) 1:1
- 10컬럼 파싱 + 자품번/모품번/품명/수량 필수 검증, 모품번이 자품번 목록(Set)에 존재 검증,
수량 숫자+>0 검증, PART_TYPE='0001788'(구매품표준) part_mng 존재 검증
- 1레벨(모품번 없는 첫 행) → 헤더 PART_NO/PART_NAME 자동 채움
- 저장 트랜잭션 (wace 1:1):
헤더 part_bom_report INSERT(신규) / DELETE 자식트리+UPDATE(수정)
자식 PART: part_mng IS_LAST='1' 존재 시 updatePartInfoFromCsv UPDATE, 없으면 insertpartInfo INSERT
부모 PART: 존재 시 lookup, 없으면 "" (절대 INSERT 안 함 — wace 5359-5361)
bom_part_qty INSERT (relatePartInfo) — 부모행 CHILD_OBJID 를 PARENT_OBJID 로 체인
- 헤더 PART_NO 중복 검사 (편집 중인 자신 제외)
- E-BOM 복사 기능 (기존 BOM → 그리드 행) + Template Download
- ebom-regist 페이지에 "E-BOM 등록(Excel)" 버튼 + 다이얼로그 연결
운영 템플릿 정적 자산:
- frontend/public/templates/PART_EXCEL_IMPORT_TEMPLATE.xlsx
- frontend/public/templates/BOM_REPORT_EXCEL_IMPORT_TEMPLATE.xlsx (.gitignore 우회 git add -f)
wace structureExcelImportPopup.jsp 는 옛 차종/제품군/사양 도메인 화면으로 운영 메뉴 트리에
서 더이상 호출되지 않아 이식 대상 제외.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
371 lines
15 KiB
TypeScript
371 lines
15 KiB
TypeScript
"use client";
|
|
|
|
// 개발관리 E-BOM 등록 Excel Import 다이얼로그
|
|
// wace partMng/openBomReportExcelImportPopUp.jsp 1:1
|
|
// - 헤더: 제품구분 / 품번(readonly, 1레벨 자동) / 품명(readonly, 1레벨 자동) / Version
|
|
// - E-BOM 복사 (기존 BOM 선택 → 그리드 채움)
|
|
// - Drag&Drop 엑셀 → 백엔드 파싱 + 검증 (NOTE 누적)
|
|
// - 저장: part_bom_report 헤더 + bom_part_qty 트리. NOTE 있는 행이 1건이라도 있으면 차단.
|
|
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { CommCodeSelect } from "@/components/common/CommCodeSelect";
|
|
import { Download, Upload, Save, Loader2, FileX, Copy } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { cn } from "@/lib/utils";
|
|
import { devBomApi, BomExcelRow, BomCopySourceRow } from "@/lib/api/devBom";
|
|
|
|
const PRODUCT_GROUP = "0000001";
|
|
const TEMPLATE_DOWNLOAD_URL = "/templates/BOM_REPORT_EXCEL_IMPORT_TEMPLATE.xlsx";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
// 수정 모드 시: 기존 BOM_REPORT_OBJID (메인 그리드 행 클릭 → "Excel로 재등록" 등의 진입점)
|
|
editObjid?: string | null;
|
|
initialProductCd?: string;
|
|
onSaved: () => void;
|
|
}
|
|
|
|
interface Column {
|
|
key: keyof BomExcelRow;
|
|
label: string;
|
|
width: string;
|
|
align?: "left" | "center" | "right";
|
|
showNameFor?: keyof BomExcelRow;
|
|
}
|
|
|
|
const COLUMNS: Column[] = [
|
|
{ key: "NOTE", label: "결과", width: "min-w-[220px]", align: "left" },
|
|
{ key: "PARENT_PART_NO", label: "모품번", width: "min-w-[140px]", align: "center" },
|
|
{ key: "PART_NO", label: "자품번", width: "min-w-[140px]", align: "center" },
|
|
{ key: "PART_NAME", label: "품명", width: "min-w-[200px]", align: "left" },
|
|
{ key: "QTY", label: "수량", width: "min-w-[70px]", align: "right" },
|
|
{ key: "ITEM_QTY", label: "항목수량", width: "min-w-[80px]", align: "right" },
|
|
{ key: "MATERIAL", label: "재질", width: "min-w-[100px]" },
|
|
{ key: "SPEC", label: "사양(규격)", width: "min-w-[110px]" },
|
|
{ key: "POST_PROCESSING", label: "후처리", width: "min-w-[100px]" },
|
|
{ key: "MAKER", label: "MAKER", width: "min-w-[110px]" },
|
|
{ key: "PART_TYPE", label: "부품유형", width: "min-w-[100px]", align: "center", showNameFor: "PART_TYPE_NAME" },
|
|
{ key: "REMARK", label: "REMARK", width: "min-w-[130px]", align: "left" },
|
|
];
|
|
|
|
function displayValue(r: BomExcelRow, col: Column): string {
|
|
if (col.showNameFor) {
|
|
const name = r[col.showNameFor];
|
|
if (name) return String(name);
|
|
}
|
|
return String(r[col.key] ?? "");
|
|
}
|
|
|
|
export function BomReportExcelImportDialog({ open, onOpenChange, editObjid, initialProductCd, onSaved }: Props) {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [productCd, setProductCd] = useState<string>("");
|
|
const [bomPartNo, setBomPartNo] = useState<string>("");
|
|
const [bomPartName, setBomPartName] = useState<string>("");
|
|
const [version, setVersion] = useState<string>("");
|
|
|
|
const [copyOptions, setCopyOptions] = useState<BomCopySourceRow[]>([]);
|
|
const [copySelect, setCopySelect] = useState<string>("");
|
|
|
|
const [rows, setRows] = useState<BomExcelRow[]>([]);
|
|
const [hasError, setHasError] = useState(false);
|
|
const [fileName, setFileName] = useState<string>("");
|
|
const [parsing, setParsing] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [copying, setCopying] = useState(false);
|
|
const [dragOver, setDragOver] = useState(false);
|
|
|
|
const reset = useCallback(() => {
|
|
setProductCd(initialProductCd ?? "");
|
|
setBomPartNo("");
|
|
setBomPartName("");
|
|
setVersion("");
|
|
setRows([]);
|
|
setHasError(false);
|
|
setFileName("");
|
|
setCopySelect("");
|
|
}, [initialProductCd]);
|
|
|
|
// open 시 초기화 + 복사 옵션 로드
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
reset();
|
|
devBomApi.excelCopySource().then(setCopyOptions).catch(() => setCopyOptions([]));
|
|
}, [open, reset]);
|
|
|
|
const handleDialogChange = (v: boolean) => {
|
|
if (!v) reset();
|
|
onOpenChange(v);
|
|
};
|
|
|
|
// wace gridFn.search().gridComplete — 1레벨(PARENT_PART_NO 없는 첫 행) → 헤더 자동 채움
|
|
const applyFirstLevelToHeader = (first: { part_no: string; part_name: string } | null) => {
|
|
if (!first) return;
|
|
if (first.part_no) setBomPartNo(first.part_no);
|
|
if (first.part_name) setBomPartName(first.part_name);
|
|
};
|
|
|
|
const parseFile = useCallback(async (file: File) => {
|
|
if (!/\.xlsx?$/i.test(file.name)) {
|
|
toast.error("xlsx 또는 xls 파일만 업로드 가능합니다.");
|
|
return;
|
|
}
|
|
setParsing(true);
|
|
setFileName(file.name);
|
|
try {
|
|
const data = await devBomApi.excelParse(file);
|
|
setRows(data.rows ?? []);
|
|
setHasError(!!data.hasError);
|
|
applyFirstLevelToHeader(data.firstLevel);
|
|
if (!data.rows || data.rows.length === 0) {
|
|
toast.warning("파싱된 데이터가 없습니다. 템플릿 형식을 확인해 주세요.");
|
|
} else if (data.hasError) {
|
|
toast.error("엑셀파일 로딩결과가 유효하지 않습니다. 결과메세지를 확인해 주세요.");
|
|
} else {
|
|
toast.success(`${data.rows.length}건 파싱 완료`);
|
|
}
|
|
} catch (e: any) {
|
|
toast.error(e?.response?.data?.message ?? e?.message ?? "엑셀 파싱 실패");
|
|
setRows([]); setHasError(false); setFileName("");
|
|
} finally {
|
|
setParsing(false);
|
|
}
|
|
}, []);
|
|
|
|
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) parseFile(f);
|
|
e.target.value = "";
|
|
};
|
|
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setDragOver(false);
|
|
const f = e.dataTransfer.files?.[0];
|
|
if (f) parseFile(f);
|
|
};
|
|
|
|
const handleCopy = async () => {
|
|
if (!copySelect) { toast.error("복사할 BOM을 선택하세요."); return; }
|
|
setCopying(true);
|
|
try {
|
|
const copied = await devBomApi.excelCopy(copySelect);
|
|
setRows(copied);
|
|
setHasError(false);
|
|
const first = copied.find((r) => !r.PARENT_PART_NO);
|
|
if (first) applyFirstLevelToHeader({ part_no: first.PART_NO, part_name: first.PART_NAME });
|
|
toast.success(`BOM 데이터 ${copied.length}건 불러왔습니다.`);
|
|
} catch (e: any) {
|
|
toast.error(e?.response?.data?.message ?? e?.message ?? "BOM 복사 실패");
|
|
} finally {
|
|
setCopying(false);
|
|
}
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!productCd) { toast.error("제품구분을 선택해 주세요."); return; }
|
|
if (!bomPartNo) { toast.error("품번을 입력해 주세요."); return; }
|
|
if (!bomPartName){ toast.error("품명을 입력해 주세요."); return; }
|
|
if (hasError) {
|
|
toast.error("엑셀파일 로딩결과가 유효하지 않습니다. 결과메세지를 확인해 주세요.");
|
|
return;
|
|
}
|
|
// wace fn_checkDuplicatePartNo 1:1 — 헤더 PART_NO 가 다른 BOM 에 이미 있으면 거부 (편집 중 자신 제외)
|
|
try {
|
|
const dup = await devBomApi.excelCheckDuplicate(bomPartNo, editObjid ?? undefined);
|
|
if (dup) {
|
|
toast.error("입력한 품번이 이미 존재합니다. 다른 품번을 입력해주세요.");
|
|
return;
|
|
}
|
|
} catch { /* 중복 확인 실패는 비차단 */ }
|
|
|
|
const confirmMsg = rows.length > 0 ? "저장 하시겠습니까?" : "품번, 품명으로 빈 E-BOM을 생성하시겠습니까?";
|
|
if (!confirm(confirmMsg)) return;
|
|
|
|
setSaving(true);
|
|
try {
|
|
const result = await devBomApi.excelSave({
|
|
bomReportObjid: editObjid ?? undefined,
|
|
productCd, partNo: bomPartNo, partName: bomPartName, version,
|
|
rows,
|
|
});
|
|
toast.success(`${result.mode === "create" ? "등록" : "수정"} 완료 — BOM ${result.bomRows}건 (PART 신규 ${result.insertedParts} / 수정 ${result.updatedParts})`);
|
|
onSaved();
|
|
handleDialogChange(false);
|
|
} catch (e: any) {
|
|
toast.error(e?.response?.data?.message ?? e?.message ?? "저장 실패");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const errorCount = useMemo(() => rows.filter((r) => r.NOTE).length, [rows]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={handleDialogChange}>
|
|
<DialogContent className="max-w-[1400px] w-[96vw] max-h-[92vh] flex flex-col">
|
|
<DialogHeader>
|
|
<DialogTitle>PART 및 구조등록 Excel upload</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* 헤더 */}
|
|
<div className="grid grid-cols-4 gap-3 border-b pb-3">
|
|
<div>
|
|
<Label className="mb-1 block text-xs text-muted-foreground">제품구분 *</Label>
|
|
<CommCodeSelect
|
|
groupId={PRODUCT_GROUP}
|
|
value={productCd}
|
|
onValueChange={setProductCd}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="mb-1 block text-xs text-muted-foreground">품번 * (1레벨 자동)</Label>
|
|
<Input value={bomPartNo} readOnly placeholder="엑셀 1레벨에서 자동 채움" />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-1 block text-xs text-muted-foreground">품명 * (1레벨 자동)</Label>
|
|
<Input value={bomPartName} readOnly placeholder="엑셀 1레벨에서 자동 채움" />
|
|
</div>
|
|
<div>
|
|
<Label className="mb-1 block text-xs text-muted-foreground">Version</Label>
|
|
<Input value={version} onChange={(e) => setVersion(e.target.value)} placeholder="REV 등" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* E-BOM 복사 + 액션 버튼 */}
|
|
<div className="flex flex-wrap items-center gap-2 border-b pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Label className="text-xs text-muted-foreground whitespace-nowrap">E-BOM 복사</Label>
|
|
<select
|
|
className="h-9 rounded-md border bg-background px-2 text-sm min-w-[280px]"
|
|
value={copySelect}
|
|
onChange={(e) => setCopySelect(e.target.value)}
|
|
>
|
|
<option value="">선택</option>
|
|
{copyOptions.map((o) => (
|
|
<option key={o.objid} value={o.objid}>
|
|
{o.part_no} / {o.part_name} {o.revision ? `(v${o.revision})` : ""} - {o.regdate ?? ""}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<Button variant="outline" size="sm" onClick={handleCopy} disabled={copying || !copySelect}>
|
|
{copying ? <Loader2 className="h-4 w-4 animate-spin" /> : <Copy className="h-4 w-4" />}
|
|
<span className="ml-1">복사</span>
|
|
</Button>
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={TEMPLATE_DOWNLOAD_URL} download>
|
|
<Download className="h-4 w-4" /><span className="ml-1">Template Download</span>
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => fileInputRef.current?.click()} disabled={parsing}>
|
|
<Upload className="h-4 w-4" /><span className="ml-1">파일 선택</span>
|
|
</Button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".xlsx,.xls"
|
|
className="hidden"
|
|
onChange={handleFileInput}
|
|
/>
|
|
{rows.length > 0 && (
|
|
<Button variant="ghost" size="sm" onClick={() => { setRows([]); setHasError(false); setFileName(""); }}>
|
|
<FileX className="h-4 w-4" /><span className="ml-1">초기화</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-muted-foreground flex items-center gap-3">
|
|
{fileName && <span className="truncate max-w-[400px]">{fileName}</span>}
|
|
<span>총 {rows.length}건</span>
|
|
{errorCount > 0 && <span className="text-destructive font-semibold">에러 {errorCount}건</span>}
|
|
</div>
|
|
|
|
{/* Drop Zone */}
|
|
{rows.length === 0 && !parsing && (
|
|
<div
|
|
className={cn(
|
|
"border-2 border-dashed rounded p-8 text-center transition-colors cursor-pointer",
|
|
dragOver ? "border-primary bg-primary/5" : "border-muted-foreground/30"
|
|
)}
|
|
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
|
onDragLeave={() => setDragOver(false)}
|
|
onDrop={handleDrop}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
<Upload className="h-9 w-9 mx-auto text-muted-foreground mb-2" />
|
|
<div className="text-sm text-muted-foreground">
|
|
Drag & Drop 또는 클릭하여 BOM 엑셀 템플릿 업로드 (.xlsx, .xls)
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{parsing && (
|
|
<div className="flex items-center justify-center py-8 text-muted-foreground">
|
|
<Loader2 className="h-5 w-5 animate-spin" /><span className="ml-2">파싱 중...</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* 결과 그리드 */}
|
|
{rows.length > 0 && !parsing && (
|
|
<div className="flex-1 min-h-0 overflow-auto border rounded">
|
|
<table className="text-xs border-collapse w-max min-w-full">
|
|
<thead className="bg-muted sticky top-0">
|
|
<tr>
|
|
<th className="border px-2 py-1 w-[40px] text-center">#</th>
|
|
{COLUMNS.map((c) => (
|
|
<th key={c.key as string} className={cn("border px-2 py-1", c.width)}>
|
|
{c.label}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((r, i) => (
|
|
<tr key={i} className={r.NOTE ? "bg-destructive/5" : ""}>
|
|
<td className="border px-2 py-1 text-center">{i + 1}</td>
|
|
{COLUMNS.map((c) => {
|
|
const value = displayValue(r, c);
|
|
const isNote = c.key === "NOTE";
|
|
return (
|
|
<td
|
|
key={c.key as string}
|
|
className={cn(
|
|
"border px-2 py-1 whitespace-nowrap",
|
|
c.align === "right" && "text-right",
|
|
c.align === "center" && "text-center",
|
|
isNote && r.NOTE && "text-destructive font-semibold"
|
|
)}
|
|
title={value}
|
|
>
|
|
{value}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
<DialogFooter className="gap-2">
|
|
<Button variant="outline" onClick={() => handleDialogChange(false)}>닫기</Button>
|
|
<Button onClick={handleSave} disabled={saving || hasError}>
|
|
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
|
<span className="ml-1">저장</span>
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|