710 lines
20 KiB
TypeScript
710 lines
20 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||
|
|
import {
|
||
|
|
GripVertical,
|
||
|
|
Plus,
|
||
|
|
X,
|
||
|
|
Search,
|
||
|
|
ChevronRight,
|
||
|
|
ChevronDown,
|
||
|
|
Package,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
DialogDescription,
|
||
|
|
} from "@/components/ui/dialog";
|
||
|
|
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||
|
|
import { apiClient } from "@/lib/api/client";
|
||
|
|
|
||
|
|
// ─── 타입 정의 ───
|
||
|
|
|
||
|
|
interface BomItemNode {
|
||
|
|
tempId: string;
|
||
|
|
id?: string;
|
||
|
|
bom_id?: string;
|
||
|
|
parent_detail_id: string | null;
|
||
|
|
seq_no: number;
|
||
|
|
level: number;
|
||
|
|
child_item_id: string;
|
||
|
|
child_item_code: string;
|
||
|
|
child_item_name: string;
|
||
|
|
child_item_type: string;
|
||
|
|
quantity: string;
|
||
|
|
unit: string;
|
||
|
|
loss_rate: string;
|
||
|
|
remark: string;
|
||
|
|
children: BomItemNode[];
|
||
|
|
_isNew?: boolean;
|
||
|
|
_isDeleted?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ItemInfo {
|
||
|
|
id: string;
|
||
|
|
item_number: string;
|
||
|
|
item_name: string;
|
||
|
|
type: string;
|
||
|
|
unit: string;
|
||
|
|
division: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface BomItemEditorProps {
|
||
|
|
component?: any;
|
||
|
|
formData?: Record<string, any>;
|
||
|
|
companyCode?: string;
|
||
|
|
isDesignMode?: boolean;
|
||
|
|
selectedRowsData?: any[];
|
||
|
|
onChange?: (flatData: any[]) => void;
|
||
|
|
bomId?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 임시 ID 생성
|
||
|
|
let tempIdCounter = 0;
|
||
|
|
const generateTempId = () => `temp_${Date.now()}_${++tempIdCounter}`;
|
||
|
|
|
||
|
|
// ─── 품목 검색 모달 ───
|
||
|
|
|
||
|
|
interface ItemSearchModalProps {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onSelect: (item: ItemInfo) => void;
|
||
|
|
companyCode?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ItemSearchModal({
|
||
|
|
open,
|
||
|
|
onClose,
|
||
|
|
onSelect,
|
||
|
|
companyCode,
|
||
|
|
}: ItemSearchModalProps) {
|
||
|
|
const [searchText, setSearchText] = useState("");
|
||
|
|
const [items, setItems] = useState<ItemInfo[]>([]);
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
const searchItems = useCallback(
|
||
|
|
async (query: string) => {
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const result = await entityJoinApi.getTableDataWithJoins("item_info", {
|
||
|
|
page: 1,
|
||
|
|
size: 50,
|
||
|
|
search: query
|
||
|
|
? { item_number: query, item_name: query }
|
||
|
|
: undefined,
|
||
|
|
enableEntityJoin: true,
|
||
|
|
companyCodeOverride: companyCode,
|
||
|
|
});
|
||
|
|
setItems(result.data || []);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("[BomItemEditor] 품목 검색 실패:", error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[companyCode],
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (open) {
|
||
|
|
setSearchText("");
|
||
|
|
searchItems("");
|
||
|
|
}
|
||
|
|
}, [open, searchItems]);
|
||
|
|
|
||
|
|
const handleSearch = () => {
|
||
|
|
searchItems(searchText);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
|
|
if (e.key === "Enter") {
|
||
|
|
e.preventDefault();
|
||
|
|
handleSearch();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Dialog open={open} onOpenChange={onClose}>
|
||
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="text-base sm:text-lg">품목 검색</DialogTitle>
|
||
|
|
<DialogDescription className="text-xs sm:text-sm">
|
||
|
|
하위 품목으로 추가할 품목을 선택하세요.
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Input
|
||
|
|
value={searchText}
|
||
|
|
onChange={(e) => setSearchText(e.target.value)}
|
||
|
|
onKeyDown={handleKeyDown}
|
||
|
|
placeholder="품목코드 또는 품목명"
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
onClick={handleSearch}
|
||
|
|
size="sm"
|
||
|
|
className="h-8 sm:h-10"
|
||
|
|
>
|
||
|
|
<Search className="mr-1 h-4 w-4" />
|
||
|
|
검색
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="max-h-[300px] overflow-y-auto rounded-md border">
|
||
|
|
{loading ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<span className="text-muted-foreground text-sm">검색 중...</span>
|
||
|
|
</div>
|
||
|
|
) : items.length === 0 ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<span className="text-muted-foreground text-sm">
|
||
|
|
검색 결과가 없습니다.
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<table className="w-full text-xs sm:text-sm">
|
||
|
|
<thead className="bg-muted/50 sticky top-0">
|
||
|
|
<tr>
|
||
|
|
<th className="px-3 py-2 text-left font-medium">품목코드</th>
|
||
|
|
<th className="px-3 py-2 text-left font-medium">품목명</th>
|
||
|
|
<th className="px-3 py-2 text-left font-medium">구분</th>
|
||
|
|
<th className="px-3 py-2 text-left font-medium">단위</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{items.map((item) => (
|
||
|
|
<tr
|
||
|
|
key={item.id}
|
||
|
|
onClick={() => {
|
||
|
|
onSelect(item);
|
||
|
|
onClose();
|
||
|
|
}}
|
||
|
|
className="hover:bg-accent cursor-pointer border-t transition-colors"
|
||
|
|
>
|
||
|
|
<td className="px-3 py-2 font-mono">
|
||
|
|
{item.item_number}
|
||
|
|
</td>
|
||
|
|
<td className="px-3 py-2">{item.item_name}</td>
|
||
|
|
<td className="px-3 py-2">{item.type}</td>
|
||
|
|
<td className="px-3 py-2">{item.unit}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── 트리 노드 행 렌더링 ───
|
||
|
|
|
||
|
|
interface TreeNodeRowProps {
|
||
|
|
node: BomItemNode;
|
||
|
|
depth: number;
|
||
|
|
expanded: boolean;
|
||
|
|
hasChildren: boolean;
|
||
|
|
onToggle: () => void;
|
||
|
|
onFieldChange: (tempId: string, field: string, value: string) => void;
|
||
|
|
onDelete: (tempId: string) => void;
|
||
|
|
onAddChild: (parentTempId: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
function TreeNodeRow({
|
||
|
|
node,
|
||
|
|
depth,
|
||
|
|
expanded,
|
||
|
|
hasChildren,
|
||
|
|
onToggle,
|
||
|
|
onFieldChange,
|
||
|
|
onDelete,
|
||
|
|
onAddChild,
|
||
|
|
}: TreeNodeRowProps) {
|
||
|
|
const indentPx = depth * 32;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"group flex items-center gap-2 rounded-md border px-2 py-1.5",
|
||
|
|
"transition-colors hover:bg-accent/30",
|
||
|
|
depth > 0 && "ml-2 border-l-2 border-l-primary/20",
|
||
|
|
)}
|
||
|
|
style={{ marginLeft: `${indentPx}px` }}
|
||
|
|
>
|
||
|
|
{/* 드래그 핸들 */}
|
||
|
|
<GripVertical className="text-muted-foreground h-4 w-4 shrink-0 cursor-grab" />
|
||
|
|
|
||
|
|
{/* 펼침/접기 */}
|
||
|
|
<button
|
||
|
|
onClick={onToggle}
|
||
|
|
className={cn(
|
||
|
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded",
|
||
|
|
hasChildren
|
||
|
|
? "hover:bg-accent cursor-pointer"
|
||
|
|
: "cursor-default opacity-0",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{hasChildren &&
|
||
|
|
(expanded ? (
|
||
|
|
<ChevronDown className="h-3.5 w-3.5" />
|
||
|
|
) : (
|
||
|
|
<ChevronRight className="h-3.5 w-3.5" />
|
||
|
|
))}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* 순번 */}
|
||
|
|
<span className="text-muted-foreground w-6 shrink-0 text-center text-xs font-medium">
|
||
|
|
{node.seq_no}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{/* 품목코드 */}
|
||
|
|
<span className="w-24 shrink-0 truncate font-mono text-xs font-medium">
|
||
|
|
{node.child_item_code || "-"}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{/* 품목명 */}
|
||
|
|
<span className="min-w-[80px] flex-1 truncate text-xs">
|
||
|
|
{node.child_item_name || "-"}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{/* 레벨 뱃지 */}
|
||
|
|
{node.level > 0 && (
|
||
|
|
<span className="bg-primary/10 text-primary shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold">
|
||
|
|
L{node.level}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 수량 */}
|
||
|
|
<Input
|
||
|
|
value={node.quantity}
|
||
|
|
onChange={(e) =>
|
||
|
|
onFieldChange(node.tempId, "quantity", e.target.value)
|
||
|
|
}
|
||
|
|
className="h-7 w-16 shrink-0 text-center text-xs"
|
||
|
|
placeholder="수량"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* 품목구분 셀렉트 */}
|
||
|
|
<Select
|
||
|
|
value={node.child_item_type || ""}
|
||
|
|
onValueChange={(val) =>
|
||
|
|
onFieldChange(node.tempId, "child_item_type", val)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-7 w-20 shrink-0 text-xs">
|
||
|
|
<SelectValue placeholder="구분" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="assembly">조립</SelectItem>
|
||
|
|
<SelectItem value="process">공정</SelectItem>
|
||
|
|
<SelectItem value="purchase">구매</SelectItem>
|
||
|
|
<SelectItem value="outsource">외주</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
{/* 하위 추가 버튼 */}
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-7 w-7 shrink-0"
|
||
|
|
onClick={() => onAddChild(node.tempId)}
|
||
|
|
title="하위 품목 추가"
|
||
|
|
>
|
||
|
|
<Plus className="h-3.5 w-3.5" />
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
{/* 삭제 버튼 */}
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="text-destructive hover:bg-destructive/10 h-7 w-7 shrink-0"
|
||
|
|
onClick={() => onDelete(node.tempId)}
|
||
|
|
title="삭제"
|
||
|
|
>
|
||
|
|
<X className="h-3.5 w-3.5" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── 메인 컴포넌트 ───
|
||
|
|
|
||
|
|
export function BomItemEditorComponent({
|
||
|
|
component,
|
||
|
|
formData,
|
||
|
|
companyCode,
|
||
|
|
isDesignMode = false,
|
||
|
|
selectedRowsData,
|
||
|
|
onChange,
|
||
|
|
bomId: propBomId,
|
||
|
|
}: BomItemEditorProps) {
|
||
|
|
const [treeData, setTreeData] = useState<BomItemNode[]>([]);
|
||
|
|
const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
const [itemSearchOpen, setItemSearchOpen] = useState(false);
|
||
|
|
const [addTargetParentId, setAddTargetParentId] = useState<string | null>(
|
||
|
|
null,
|
||
|
|
);
|
||
|
|
|
||
|
|
// BOM ID 결정
|
||
|
|
const bomId = useMemo(() => {
|
||
|
|
if (propBomId) return propBomId;
|
||
|
|
if (formData?.id) return formData.id as string;
|
||
|
|
if (selectedRowsData?.[0]?.id) return selectedRowsData[0].id as string;
|
||
|
|
return null;
|
||
|
|
}, [propBomId, formData, selectedRowsData]);
|
||
|
|
|
||
|
|
// ─── 데이터 로드 ───
|
||
|
|
|
||
|
|
const loadBomDetails = useCallback(
|
||
|
|
async (id: string) => {
|
||
|
|
if (!id) return;
|
||
|
|
setLoading(true);
|
||
|
|
try {
|
||
|
|
const result = await entityJoinApi.getTableDataWithJoins("bom_detail", {
|
||
|
|
page: 1,
|
||
|
|
size: 500,
|
||
|
|
search: { bom_id: id },
|
||
|
|
sortBy: "seq_no",
|
||
|
|
sortOrder: "asc",
|
||
|
|
enableEntityJoin: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
const rows = result.data || [];
|
||
|
|
const tree = buildTree(rows);
|
||
|
|
setTreeData(tree);
|
||
|
|
|
||
|
|
// 1레벨 기본 펼침
|
||
|
|
const firstLevelIds = new Set<string>(
|
||
|
|
tree.map((n) => n.tempId || n.id || ""),
|
||
|
|
);
|
||
|
|
setExpandedNodes(firstLevelIds);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("[BomItemEditor] 데이터 로드 실패:", error);
|
||
|
|
} finally {
|
||
|
|
setLoading(false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
[],
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (bomId && !isDesignMode) {
|
||
|
|
loadBomDetails(bomId);
|
||
|
|
}
|
||
|
|
}, [bomId, isDesignMode, loadBomDetails]);
|
||
|
|
|
||
|
|
// ─── 트리 빌드 ───
|
||
|
|
|
||
|
|
const buildTree = (flatData: any[]): BomItemNode[] => {
|
||
|
|
const nodeMap = new Map<string, BomItemNode>();
|
||
|
|
const roots: BomItemNode[] = [];
|
||
|
|
|
||
|
|
flatData.forEach((item) => {
|
||
|
|
const tempId = item.id || generateTempId();
|
||
|
|
nodeMap.set(item.id || tempId, {
|
||
|
|
tempId,
|
||
|
|
id: item.id,
|
||
|
|
bom_id: item.bom_id,
|
||
|
|
parent_detail_id: item.parent_detail_id || null,
|
||
|
|
seq_no: Number(item.seq_no) || 0,
|
||
|
|
level: Number(item.level) || 0,
|
||
|
|
child_item_id: item.child_item_id || "",
|
||
|
|
child_item_code: item.child_item_code || "",
|
||
|
|
child_item_name: item.child_item_name || "",
|
||
|
|
child_item_type: item.child_item_type || "",
|
||
|
|
quantity: item.quantity || "1",
|
||
|
|
unit: item.unit || "EA",
|
||
|
|
loss_rate: item.loss_rate || "0",
|
||
|
|
remark: item.remark || "",
|
||
|
|
children: [],
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
flatData.forEach((item) => {
|
||
|
|
const nodeId = item.id || "";
|
||
|
|
const node = nodeMap.get(nodeId);
|
||
|
|
if (!node) return;
|
||
|
|
|
||
|
|
if (item.parent_detail_id && nodeMap.has(item.parent_detail_id)) {
|
||
|
|
nodeMap.get(item.parent_detail_id)!.children.push(node);
|
||
|
|
} else {
|
||
|
|
roots.push(node);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 순번 정렬
|
||
|
|
const sortChildren = (nodes: BomItemNode[]) => {
|
||
|
|
nodes.sort((a, b) => a.seq_no - b.seq_no);
|
||
|
|
nodes.forEach((n) => sortChildren(n.children));
|
||
|
|
};
|
||
|
|
sortChildren(roots);
|
||
|
|
|
||
|
|
return roots;
|
||
|
|
};
|
||
|
|
|
||
|
|
// ─── 트리 -> 평면 변환 (onChange 콜백용) ───
|
||
|
|
|
||
|
|
const flattenTree = useCallback((nodes: BomItemNode[]): any[] => {
|
||
|
|
const result: any[] = [];
|
||
|
|
const traverse = (
|
||
|
|
items: BomItemNode[],
|
||
|
|
parentId: string | null,
|
||
|
|
level: number,
|
||
|
|
) => {
|
||
|
|
items.forEach((node, idx) => {
|
||
|
|
result.push({
|
||
|
|
id: node.id,
|
||
|
|
tempId: node.tempId,
|
||
|
|
bom_id: node.bom_id,
|
||
|
|
parent_detail_id: parentId,
|
||
|
|
seq_no: String(idx + 1),
|
||
|
|
level: String(level),
|
||
|
|
child_item_id: node.child_item_id,
|
||
|
|
child_item_code: node.child_item_code,
|
||
|
|
child_item_name: node.child_item_name,
|
||
|
|
child_item_type: node.child_item_type,
|
||
|
|
quantity: node.quantity,
|
||
|
|
unit: node.unit,
|
||
|
|
loss_rate: node.loss_rate,
|
||
|
|
remark: node.remark,
|
||
|
|
_isNew: node._isNew,
|
||
|
|
_targetTable: "bom_detail",
|
||
|
|
});
|
||
|
|
if (node.children.length > 0) {
|
||
|
|
traverse(node.children, node.id || node.tempId, level + 1);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
traverse(nodes, null, 0);
|
||
|
|
return result;
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 트리 변경 시 부모에게 알림
|
||
|
|
const notifyChange = useCallback(
|
||
|
|
(newTree: BomItemNode[]) => {
|
||
|
|
setTreeData(newTree);
|
||
|
|
onChange?.(flattenTree(newTree));
|
||
|
|
},
|
||
|
|
[onChange, flattenTree],
|
||
|
|
);
|
||
|
|
|
||
|
|
// ─── 노드 조작 함수들 ───
|
||
|
|
|
||
|
|
// 트리에서 특정 노드 찾기 (재귀)
|
||
|
|
const findAndUpdate = (
|
||
|
|
nodes: BomItemNode[],
|
||
|
|
targetTempId: string,
|
||
|
|
updater: (node: BomItemNode) => BomItemNode | null,
|
||
|
|
): BomItemNode[] => {
|
||
|
|
const result: BomItemNode[] = [];
|
||
|
|
for (const node of nodes) {
|
||
|
|
if (node.tempId === targetTempId) {
|
||
|
|
const updated = updater(node);
|
||
|
|
if (updated) result.push(updated);
|
||
|
|
} else {
|
||
|
|
result.push({
|
||
|
|
...node,
|
||
|
|
children: findAndUpdate(node.children, targetTempId, updater),
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필드 변경
|
||
|
|
const handleFieldChange = useCallback(
|
||
|
|
(tempId: string, field: string, value: string) => {
|
||
|
|
const newTree = findAndUpdate(treeData, tempId, (node) => ({
|
||
|
|
...node,
|
||
|
|
[field]: value,
|
||
|
|
}));
|
||
|
|
notifyChange(newTree);
|
||
|
|
},
|
||
|
|
[treeData, notifyChange],
|
||
|
|
);
|
||
|
|
|
||
|
|
// 노드 삭제
|
||
|
|
const handleDelete = useCallback(
|
||
|
|
(tempId: string) => {
|
||
|
|
const newTree = findAndUpdate(treeData, tempId, () => null);
|
||
|
|
notifyChange(newTree);
|
||
|
|
},
|
||
|
|
[treeData, notifyChange],
|
||
|
|
);
|
||
|
|
|
||
|
|
// 하위 품목 추가 시작 (모달 열기)
|
||
|
|
const handleAddChild = useCallback((parentTempId: string) => {
|
||
|
|
setAddTargetParentId(parentTempId);
|
||
|
|
setItemSearchOpen(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 루트 품목 추가 시작
|
||
|
|
const handleAddRoot = useCallback(() => {
|
||
|
|
setAddTargetParentId(null);
|
||
|
|
setItemSearchOpen(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 품목 선택 후 추가
|
||
|
|
const handleItemSelect = useCallback(
|
||
|
|
(item: ItemInfo) => {
|
||
|
|
const newNode: BomItemNode = {
|
||
|
|
tempId: generateTempId(),
|
||
|
|
parent_detail_id: null,
|
||
|
|
seq_no: 0,
|
||
|
|
level: 0,
|
||
|
|
child_item_id: item.id,
|
||
|
|
child_item_code: item.item_number || "",
|
||
|
|
child_item_name: item.item_name || "",
|
||
|
|
child_item_type: item.type || "",
|
||
|
|
quantity: "1",
|
||
|
|
unit: item.unit || "EA",
|
||
|
|
loss_rate: "0",
|
||
|
|
remark: "",
|
||
|
|
children: [],
|
||
|
|
_isNew: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
let newTree: BomItemNode[];
|
||
|
|
|
||
|
|
if (addTargetParentId === null) {
|
||
|
|
// 루트에 추가
|
||
|
|
newNode.seq_no = treeData.length + 1;
|
||
|
|
newNode.level = 0;
|
||
|
|
newTree = [...treeData, newNode];
|
||
|
|
} else {
|
||
|
|
// 특정 노드 하위에 추가
|
||
|
|
newTree = findAndUpdate(treeData, addTargetParentId, (parent) => {
|
||
|
|
newNode.parent_detail_id = parent.id || parent.tempId;
|
||
|
|
newNode.seq_no = parent.children.length + 1;
|
||
|
|
newNode.level = parent.level + 1;
|
||
|
|
return {
|
||
|
|
...parent,
|
||
|
|
children: [...parent.children, newNode],
|
||
|
|
};
|
||
|
|
});
|
||
|
|
// 부모 노드 펼침
|
||
|
|
setExpandedNodes((prev) => new Set([...prev, addTargetParentId]));
|
||
|
|
}
|
||
|
|
|
||
|
|
notifyChange(newTree);
|
||
|
|
},
|
||
|
|
[addTargetParentId, treeData, notifyChange],
|
||
|
|
);
|
||
|
|
|
||
|
|
// 펼침/접기 토글
|
||
|
|
const toggleExpand = useCallback((tempId: string) => {
|
||
|
|
setExpandedNodes((prev) => {
|
||
|
|
const next = new Set(prev);
|
||
|
|
if (next.has(tempId)) next.delete(tempId);
|
||
|
|
else next.add(tempId);
|
||
|
|
return next;
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// ─── 재귀 렌더링 ───
|
||
|
|
|
||
|
|
const renderNodes = (nodes: BomItemNode[], depth: number) => {
|
||
|
|
return nodes.map((node) => {
|
||
|
|
const isExpanded = expandedNodes.has(node.tempId);
|
||
|
|
return (
|
||
|
|
<React.Fragment key={node.tempId}>
|
||
|
|
<TreeNodeRow
|
||
|
|
node={node}
|
||
|
|
depth={depth}
|
||
|
|
expanded={isExpanded}
|
||
|
|
hasChildren={node.children.length > 0}
|
||
|
|
onToggle={() => toggleExpand(node.tempId)}
|
||
|
|
onFieldChange={handleFieldChange}
|
||
|
|
onDelete={handleDelete}
|
||
|
|
onAddChild={handleAddChild}
|
||
|
|
/>
|
||
|
|
{isExpanded &&
|
||
|
|
node.children.length > 0 &&
|
||
|
|
renderNodes(node.children, depth + 1)}
|
||
|
|
</React.Fragment>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// ─── 디자인 모드 ───
|
||
|
|
|
||
|
|
if (isDesignMode) {
|
||
|
|
return (
|
||
|
|
<div className="rounded-md border border-dashed p-6 text-center">
|
||
|
|
<Package className="text-muted-foreground mx-auto mb-2 h-8 w-8" />
|
||
|
|
<p className="text-muted-foreground text-sm font-medium">
|
||
|
|
BOM 하위 품목 편집기
|
||
|
|
</p>
|
||
|
|
<p className="text-muted-foreground text-xs">
|
||
|
|
트리 구조로 하위 품목을 관리합니다
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── 메인 렌더링 ───
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-3">
|
||
|
|
{/* 헤더 */}
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<h4 className="text-sm font-semibold">하위 품목 구성</h4>
|
||
|
|
<Button
|
||
|
|
onClick={handleAddRoot}
|
||
|
|
size="sm"
|
||
|
|
className="h-8 text-xs"
|
||
|
|
>
|
||
|
|
<Plus className="mr-1 h-3.5 w-3.5" />
|
||
|
|
품목추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 트리 목록 */}
|
||
|
|
<div className="space-y-1">
|
||
|
|
{loading ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<span className="text-muted-foreground text-sm">로딩 중...</span>
|
||
|
|
</div>
|
||
|
|
) : treeData.length === 0 ? (
|
||
|
|
<div className="flex flex-col items-center justify-center rounded-md border border-dashed py-8">
|
||
|
|
<Package className="text-muted-foreground mb-2 h-8 w-8" />
|
||
|
|
<p className="text-muted-foreground text-sm">
|
||
|
|
하위 품목이 없습니다.
|
||
|
|
</p>
|
||
|
|
<p className="text-muted-foreground text-xs">
|
||
|
|
"품목추가" 버튼을 눌러 추가하세요.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
renderNodes(treeData, 0)
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 품목 검색 모달 */}
|
||
|
|
<ItemSearchModal
|
||
|
|
open={itemSearchOpen}
|
||
|
|
onClose={() => setItemSearchOpen(false)}
|
||
|
|
onSelect={handleItemSelect}
|
||
|
|
companyCode={companyCode}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default BomItemEditorComponent;
|