feat: Add BOM tree view and BOM item editor components
- Introduced new components for BOM tree view and BOM item editor, enhancing the data management capabilities within the application. - Updated the ComponentsPanel to include these new components with appropriate descriptions and default sizes. - Integrated the BOM item editor into the V2PropertiesPanel for seamless editing of BOM items. - Adjusted the SplitLineComponent to improve the handling of canvas split positions, ensuring better user experience during component interactions.
This commit is contained in:
DDD1542
@@ -114,6 +114,7 @@ import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
|
||||
import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
|
||||
import "./v2-split-line/SplitLineRenderer"; // V2 캔버스 분할선
|
||||
import "./v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
|
||||
import "./v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
|
||||
|
||||
/**
|
||||
* 컴포넌트 초기화 함수
|
||||
|
||||
@@ -0,0 +1,709 @@
|
||||
"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;
|
||||
@@ -0,0 +1,22 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
||||
import { BomItemEditorComponent } from "./BomItemEditorComponent";
|
||||
import { V2BomItemEditorDefinition } from "./index";
|
||||
|
||||
export class BomItemEditorRenderer extends AutoRegisteringComponentRenderer {
|
||||
static componentDefinition = V2BomItemEditorDefinition;
|
||||
|
||||
render(): React.ReactElement {
|
||||
return <BomItemEditorComponent {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
BomItemEditorRenderer.registerSelf();
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
setTimeout(() => {
|
||||
BomItemEditorRenderer.registerSelf();
|
||||
}, 0);
|
||||
}
|
||||
30
frontend/lib/registry/components/v2-bom-item-editor/index.ts
Normal file
30
frontend/lib/registry/components/v2-bom-item-editor/index.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { ComponentCategory } from "@/types/component";
|
||||
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||
import { BomItemEditorComponent } from "./BomItemEditorComponent";
|
||||
|
||||
export const V2BomItemEditorDefinition = createComponentDefinition({
|
||||
id: "v2-bom-item-editor",
|
||||
name: "BOM 하위품목 편집기",
|
||||
nameEng: "BOM Item Editor",
|
||||
description: "BOM 하위 품목을 트리 구조로 추가/편집/삭제하는 컴포넌트",
|
||||
category: ComponentCategory.V2,
|
||||
webType: "text",
|
||||
component: BomItemEditorComponent,
|
||||
defaultConfig: {
|
||||
detailTable: "bom_detail",
|
||||
sourceTable: "item_info",
|
||||
foreignKey: "bom_id",
|
||||
parentKey: "parent_detail_id",
|
||||
itemCodeField: "item_number",
|
||||
itemNameField: "item_name",
|
||||
itemTypeField: "type",
|
||||
itemUnitField: "unit",
|
||||
},
|
||||
defaultSize: { width: 900, height: 400 },
|
||||
icon: "ListTree",
|
||||
tags: ["BOM", "트리", "편집", "하위품목", "제조"],
|
||||
version: "1.0.0",
|
||||
author: "개발팀",
|
||||
});
|
||||
|
||||
export default V2BomItemEditorDefinition;
|
||||
@@ -123,8 +123,8 @@ export const SplitLineComponent: React.FC<SplitLineComponentProps> = ({
|
||||
const startOffset = dragOffset;
|
||||
const scaleFactor = getScaleFactor();
|
||||
const cw = detectCanvasWidth();
|
||||
const MIN_POS = 50;
|
||||
const MAX_POS = cw - 50;
|
||||
const MIN_POS = Math.max(50, cw * 0.15);
|
||||
const MAX_POS = cw - Math.max(50, cw * 0.15);
|
||||
|
||||
setIsDragging(true);
|
||||
setCanvasSplit({ isDragging: true });
|
||||
|
||||
Reference in New Issue
Block a user