hjjeong
7d67a5ab1d
3 페이지 검색 폼이 단순 Input + 품번/품명 LIKE 였음. 운영판 wace 는 class="select2-part" 자동완성 (initPartSelect2Ajax) + 한쪽 선택 시 다른 쪽 자동 채움. 수정 페이지 (모두 DevPartSelect 적용): - part-regist/page.tsx (M1 PART 등록 — wace partMngTempList.jsp) - part-search/page.tsx (M2 PART 조회 — wace partMngList.jsp) - ebom-regist/page.tsx (M3 E-BOM 등록 — wace structureList.jsp) 동작: - 품번/품명 양쪽 DevPartSelect (part_mng IS_LAST='1' 캐시) - 품번 선택 → 품명 자동 채움 (row.part_name) - 품명 선택 → 품번 자동 채움 (row.part_no) - setFilter 함수형 업데이트로 동시 setState 충돌 방지 ebom-search 와 동일 패턴 통일 — DevPartSelect 1개 컴포넌트로 4 페이지 공유. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
229 lines
9.2 KiB
TypeScript
229 lines
9.2 KiB
TypeScript
"use client";
|
|
|
|
// 개발관리 > E-BOM 등록 (M3) — wace structureList.jsp 1:1
|
|
// 그리드: part_bom_report 9셀
|
|
// 액션: 조회 / 삭제 / 상태변경 (E-BOM등록 Excel Import는 별 PR)
|
|
// 참조: docs/migration/development/02-ebom.md
|
|
|
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Search, Loader2, RotateCcw, Trash2, Settings, FileSpreadsheet,
|
|
} from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
|
|
import { CommCodeSelect } from "@/components/common/CommCodeSelect";
|
|
import { devBomApi, BomReportListFilter, BomReportRow } from "@/lib/api/devBom";
|
|
import { BomReportStatusDialog } from "@/components/development/BomReportStatusDialog";
|
|
import { DevPartSelect } from "@/components/development/DevPartSelect";
|
|
import { BomReportExcelImportDialog } from "@/components/development/BomReportExcelImportDialog";
|
|
import { BomReportTreeDialog } from "@/components/development/BomReportTreeDialog";
|
|
|
|
const PRODUCT_GROUP = "0000001"; // 제품구분 (vexplor 공용)
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ code: "create", label: "등록중" },
|
|
{ code: "changeDesign", label: "설계변경미배포" },
|
|
{ code: "deploy", label: "배포완료" },
|
|
];
|
|
|
|
const BASE_GRID_COLUMNS: DataGridColumn[] = [
|
|
{ key: "product_name", label: "제품구분", width: "w-[160px]", align: "center", frozen: true },
|
|
{ key: "part_no", label: "품번", width: "w-[210px]" },
|
|
{ key: "part_name", label: "품명", minWidth: "min-w-[220px]" },
|
|
// wace fnc_getFolderIcon 1:1 — 폴더 아이콘 클릭 시 BOM 구조 다이얼로그
|
|
{ key: "bom_cnt", label: "E-BOM", width: "w-[100px]", align: "center", renderType: "folder" },
|
|
{ key: "dept_user_name", label: "등록자", width: "w-[140px]", align: "center" },
|
|
{ key: "reg_date", label: "등록일", width: "w-[120px]", align: "center" },
|
|
{ key: "deploy_date", label: "확정일", width: "w-[120px]", align: "center" },
|
|
{ key: "revision", label: "Version", width: "w-[100px]", align: "center" },
|
|
{ key: "status_title", label: "상태", width: "w-[120px]", align: "center" },
|
|
];
|
|
|
|
const EMPTY_FILTER: BomReportListFilter = {
|
|
product_cd: "", status: "",
|
|
search_part_no: "", search_part_name: "",
|
|
page: 1, page_size: 50,
|
|
};
|
|
|
|
export default function EbomRegistPage() {
|
|
const [rows, setRows] = useState<BomReportRow[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [filter, setFilter] = useState<BomReportListFilter>(EMPTY_FILTER);
|
|
const [checkedIds, setCheckedIds] = useState<string[]>([]);
|
|
|
|
const [statusOpen, setStatusOpen] = useState(false);
|
|
const [statusObjid, setStatusObjid] = useState<string | null>(null);
|
|
const [excelOpen, setExcelOpen] = useState(false);
|
|
const [treeOpen, setTreeOpen] = useState(false);
|
|
const [treeReport, setTreeReport] = useState<BomReportRow | null>(null);
|
|
|
|
const fetchList = useCallback(async (override?: Partial<BomReportListFilter>) => {
|
|
setLoading(true);
|
|
try {
|
|
const f = { ...filter, ...override };
|
|
const res = await devBomApi.list(f);
|
|
setRows(res.rows ?? []);
|
|
setTotal(res.total ?? 0);
|
|
setCheckedIds([]);
|
|
} catch (e: any) {
|
|
toast.error(e?.response?.data?.message ?? e?.message ?? "조회 실패");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [filter]);
|
|
|
|
useEffect(() => { fetchList(); /* eslint-disable-next-line */ }, []);
|
|
|
|
const handleDelete = async () => {
|
|
if (checkedIds.length === 0) return toast.error("선택된 행이 없습니다.");
|
|
if (!confirm(`${checkedIds.length}건을 삭제하시겠습니까? (자식 BOM 트리도 함께 삭제됨)`)) return;
|
|
try {
|
|
const res = await devBomApi.remove(checkedIds);
|
|
toast.success(res?.message ?? "삭제되었습니다.");
|
|
fetchList();
|
|
} catch (e: any) {
|
|
toast.error(e?.response?.data?.message ?? e?.message ?? "삭제 실패");
|
|
}
|
|
};
|
|
|
|
const handleStatusChange = () => {
|
|
if (checkedIds.length !== 1) return toast.error("상태 변경할 행 1개를 선택하세요.");
|
|
setStatusObjid(checkedIds[0]);
|
|
setStatusOpen(true);
|
|
};
|
|
|
|
// 품번 셀 클릭 → BOM 트리 다이얼로그 (wace fn_openSetStructure 1:1)
|
|
const openTree = useCallback((row: BomReportRow) => {
|
|
setTreeReport(row);
|
|
setTreeOpen(true);
|
|
}, []);
|
|
|
|
const columns: DataGridColumn[] = useMemo(
|
|
() => BASE_GRID_COLUMNS.map((c) =>
|
|
c.key === "bom_cnt"
|
|
? { ...c, onClick: (row: any) => openTree(row as BomReportRow) }
|
|
: c,
|
|
),
|
|
[openTree],
|
|
);
|
|
|
|
// DataGrid 는 row.id 를 키로 사용 — backend 응답은 row.objid (lowercase) 이므로 매핑
|
|
const gridRows = useMemo(() => rows.map((r) => ({ ...r, id: r.objid })), [rows]);
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<div className="border-b bg-card px-4 py-3">
|
|
<div className="grid grid-cols-4 gap-3 text-sm">
|
|
<Field label="제품구분">
|
|
<CommCodeSelect
|
|
groupId={PRODUCT_GROUP}
|
|
value={filter.product_cd ?? ""}
|
|
onValueChange={(v) => setFilter({ ...filter, product_cd: v })}
|
|
/>
|
|
</Field>
|
|
<Field label="상태">
|
|
<select
|
|
className="h-9 w-full rounded-md border bg-background px-2 text-sm"
|
|
value={filter.status ?? ""}
|
|
onChange={(e) => setFilter({ ...filter, status: e.target.value })}
|
|
>
|
|
<option value="">전체</option>
|
|
{STATUS_OPTIONS.map((o) =>
|
|
<option key={o.code} value={o.code}>{o.label}</option>)}
|
|
</select>
|
|
</Field>
|
|
{/* wace structureList.jsp 1:1 — select2-part 자동완성 (양방향 동기) */}
|
|
<Field label="품번">
|
|
<DevPartSelect mode="partNo"
|
|
value={filter.search_part_no ?? ""}
|
|
onValueChange={(v, row) => setFilter((prev) => ({
|
|
...prev,
|
|
search_part_no: v,
|
|
search_part_name: row?.part_name ?? prev.search_part_name,
|
|
}))} />
|
|
</Field>
|
|
<Field label="품명">
|
|
<DevPartSelect mode="partName"
|
|
value={filter.search_part_name ?? ""}
|
|
onValueChange={(v, row) => setFilter((prev) => ({
|
|
...prev,
|
|
search_part_name: v,
|
|
search_part_no: row?.part_no ?? prev.search_part_no,
|
|
}))} />
|
|
</Field>
|
|
</div>
|
|
<div className="mt-3 flex items-center justify-between">
|
|
<div className="text-xs text-muted-foreground">총 {total.toLocaleString()}건</div>
|
|
<div className="flex items-end gap-2">
|
|
<Button variant="outline" size="sm"
|
|
onClick={() => { setFilter(EMPTY_FILTER); fetchList(EMPTY_FILTER); }}>
|
|
<RotateCcw className="h-4 w-4" /><span className="ml-1">초기화</span>
|
|
</Button>
|
|
<Button size="sm" onClick={() => fetchList()} disabled={loading}>
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
|
|
<span className="ml-1">조회</span>
|
|
</Button>
|
|
<Button size="sm" onClick={() => setExcelOpen(true)}
|
|
className="bg-emerald-600 hover:bg-emerald-700 text-white">
|
|
<FileSpreadsheet className="h-4 w-4" /><span className="ml-1">E-BOM 등록(Excel)</span>
|
|
</Button>
|
|
<Button size="sm" variant="secondary" onClick={handleStatusChange}
|
|
disabled={checkedIds.length !== 1}>
|
|
<Settings className="h-4 w-4" /><span className="ml-1">상태변경</span>
|
|
</Button>
|
|
<Button size="sm" variant="destructive" onClick={handleDelete}
|
|
disabled={checkedIds.length === 0}>
|
|
<Trash2 className="h-4 w-4" /><span className="ml-1">삭제</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 p-2">
|
|
<DataGrid
|
|
columns={columns}
|
|
data={gridRows}
|
|
loading={loading}
|
|
showRowNumber
|
|
showCheckbox
|
|
checkedIds={checkedIds}
|
|
onCheckedChange={setCheckedIds}
|
|
emptyMessage="등록된 E-BOM이 없습니다."
|
|
gridId="development-ebom-regist"
|
|
/>
|
|
</div>
|
|
|
|
<BomReportStatusDialog
|
|
open={statusOpen}
|
|
onOpenChange={setStatusOpen}
|
|
objid={statusObjid}
|
|
onSaved={fetchList}
|
|
/>
|
|
<BomReportExcelImportDialog
|
|
open={excelOpen}
|
|
onOpenChange={setExcelOpen}
|
|
initialProductCd={filter.product_cd ?? ""}
|
|
onSaved={fetchList}
|
|
/>
|
|
<BomReportTreeDialog
|
|
open={treeOpen}
|
|
onOpenChange={setTreeOpen}
|
|
bomReport={treeReport}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
|
return (
|
|
<div>
|
|
<Label className="mb-1 block text-xs text-muted-foreground">{label}</Label>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|