DDD1542
578 lines
28 KiB
TypeScript
578 lines
28 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 외주품목정보 — 하드코딩 페이지
|
|
*
|
|
* 좌측: 품목 목록 (subcontractor_item_mapping 기반 품목, item_info 조인)
|
|
* 우측: 선택한 품목의 외주업체 정보 (subcontractor_item_mapping → subcontractor_mng 조인)
|
|
*
|
|
* 외주업체관리와 양방향 연동 (같은 subcontractor_item_mapping 테이블)
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
|
import { Plus, Save, Loader2, FileSpreadsheet, Download, Pencil, Inbox, Search, RotateCcw, Settings2 } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { toast } from "sonner";
|
|
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
|
|
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
|
|
|
|
const ITEM_TABLE = "item_info";
|
|
const MAPPING_TABLE = "subcontractor_item_mapping";
|
|
const SUBCONTRACTOR_TABLE = "subcontractor_mng";
|
|
|
|
const formatNum = (v: any) => (v == null || v === "" ? "-" : Number(v).toLocaleString());
|
|
|
|
const GRID_COLUMNS_CONFIG = [
|
|
{ key: "item_number", label: "품번" },
|
|
{ key: "item_name", label: "품명" },
|
|
{ key: "size", label: "규격" },
|
|
{ key: "unit", label: "단위" },
|
|
{ key: "standard_price", label: "기준단가" },
|
|
{ key: "selling_price", label: "판매가격" },
|
|
{ key: "currency_code", label: "통화" },
|
|
{ key: "status", label: "상태" },
|
|
];
|
|
export default function SubcontractorItemPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent } = useConfirmDialog();
|
|
|
|
// 좌측: 품목
|
|
const [items, setItems] = useState<any[]>([]);
|
|
const [itemLoading, setItemLoading] = useState(false);
|
|
const [itemCount, setItemCount] = useState(0);
|
|
const [inputKeyword, setInputKeyword] = useState("");
|
|
const [searchKeyword, setSearchKeyword] = useState("");
|
|
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
|
|
|
|
// 우측: 외주업체
|
|
const [subcontractorItems, setSubcontractorItems] = useState<any[]>([]);
|
|
const [subcontractorLoading, setSubcontractorLoading] = useState(false);
|
|
|
|
// 카테고리
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 외주업체 추가 모달
|
|
const [subSelectOpen, setSubSelectOpen] = useState(false);
|
|
const [subSearchKeyword, setSubSearchKeyword] = useState("");
|
|
const [subSearchResults, setSubSearchResults] = useState<any[]>([]);
|
|
const [subSearchLoading, setSubSearchLoading] = useState(false);
|
|
const [subCheckedIds, setSubCheckedIds] = useState<Set<string>>(new Set());
|
|
|
|
// 품목 수정 모달
|
|
const [editItemOpen, setEditItemOpen] = useState(false);
|
|
const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// 엑셀
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
|
|
// 테이블 설정
|
|
const ts = useTableSettings("c16-subcontractor-item", ITEM_TABLE, GRID_COLUMNS_CONFIG);
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
const optMap: Record<string, { code: string; label: string }[]> = {};
|
|
const flatten = (vals: any[]): { code: string; label: string }[] => {
|
|
const result: { code: string; label: string }[] = [];
|
|
for (const v of vals) {
|
|
result.push({ code: v.valueCode, label: v.valueLabel });
|
|
if (v.children?.length) result.push(...flatten(v.children));
|
|
}
|
|
return result;
|
|
};
|
|
for (const col of ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${ITEM_TABLE}/${col}/values`);
|
|
if (res.data?.success) optMap[col] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
setCategoryOptions(optMap);
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
const resolve = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
|
|
};
|
|
|
|
const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
|
|
const cols: EDataTableColumn[] = [];
|
|
if (ts.isVisible("item_number")) cols.push({ key: "item_number", label: "품번", width: "w-[110px]" });
|
|
if (ts.isVisible("item_name")) cols.push({ key: "item_name", label: "품명", minWidth: "min-w-[130px]", render: (v) => v || "-" });
|
|
if (ts.isVisible("size")) cols.push({ key: "size", label: "규격", width: "w-[90px]", render: (v) => v || "-" });
|
|
if (ts.isVisible("unit")) cols.push({ key: "unit", label: "단위", width: "w-[60px]", render: (v) => v || "-" });
|
|
if (ts.isVisible("standard_price")) cols.push({ key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true });
|
|
if (ts.isVisible("selling_price")) cols.push({ key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true });
|
|
if (ts.isVisible("currency_code")) cols.push({ key: "currency_code", label: "통화", width: "w-[50px]", render: (v) => v || "-" });
|
|
if (ts.isVisible("status")) cols.push({ key: "status", label: "상태", width: "w-[60px]", render: (v) => v || "-" });
|
|
return cols;
|
|
}, [ts.visibleColumns]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
|
|
const outsourcingDivisionCode = categoryOptions["division"]?.find(
|
|
(o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
|
|
)?.code;
|
|
|
|
const fetchItems = useCallback(async () => {
|
|
setItemLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (outsourcingDivisionCode) {
|
|
filters.push({ columnName: "division", operator: "equals", value: outsourcingDivisionCode });
|
|
}
|
|
if (searchKeyword) {
|
|
filters.push({ columnName: "item_name", operator: "contains", value: searchKeyword });
|
|
}
|
|
const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
const raw = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const CATS = ["unit", "material", "division", "type", "status", "inventory_unit", "currency_code", "user_type01", "user_type02"];
|
|
const data = raw.map((r: any) => {
|
|
const converted = { ...r };
|
|
for (const col of CATS) {
|
|
if (converted[col]) converted[col] = resolve(col, converted[col]);
|
|
}
|
|
return converted;
|
|
});
|
|
setItems(data);
|
|
setItemCount(res.data?.data?.total || raw.length);
|
|
} catch (err) {
|
|
console.error("품목 조회 실패:", err);
|
|
toast.error("품목 목록을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setItemLoading(false);
|
|
}
|
|
}, [searchKeyword, categoryOptions, outsourcingDivisionCode]);
|
|
|
|
useEffect(() => { fetchItems(); }, [fetchItems]);
|
|
|
|
// 선택된 품목
|
|
const selectedItem = items.find((i) => i.id === selectedItemId);
|
|
|
|
// 우측: 외주업체 목록 조회
|
|
useEffect(() => {
|
|
if (!selectedItem?.item_number) { setSubcontractorItems([]); return; }
|
|
const itemKey = selectedItem.item_number;
|
|
const fetchSubcontractorItems = async () => {
|
|
setSubcontractorLoading(true);
|
|
try {
|
|
const mapRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_id", operator: "equals", value: itemKey }] },
|
|
autoFilter: true,
|
|
});
|
|
const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
|
|
const subIds = [...new Set(mappings.map((m: any) => m.subcontractor_id).filter(Boolean))];
|
|
let subMap: Record<string, any> = {};
|
|
if (subIds.length > 0) {
|
|
try {
|
|
const subRes = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
|
|
page: 1, size: subIds.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "subcontractor_code", operator: "in", value: subIds }] },
|
|
autoFilter: true,
|
|
});
|
|
for (const s of (subRes.data?.data?.data || subRes.data?.data?.rows || [])) {
|
|
subMap[s.subcontractor_code] = s;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
setSubcontractorItems(mappings.map((m: any) => ({
|
|
...m,
|
|
subcontractor_code: m.subcontractor_id,
|
|
subcontractor_name: subMap[m.subcontractor_id]?.subcontractor_name || "",
|
|
})));
|
|
} catch (err) {
|
|
console.error("외주업체 조회 실패:", err);
|
|
} finally {
|
|
setSubcontractorLoading(false);
|
|
}
|
|
};
|
|
fetchSubcontractorItems();
|
|
}, [selectedItem?.item_number]);
|
|
|
|
// 외주업체 검색
|
|
const searchSubcontractors = async () => {
|
|
setSubSearchLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (subSearchKeyword) filters.push({ columnName: "subcontractor_name", operator: "contains", value: subSearchKeyword });
|
|
const res = await apiClient.post(`/table-management/tables/${SUBCONTRACTOR_TABLE}/data`, {
|
|
page: 1, size: 50,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
const all = res.data?.data?.data || res.data?.data?.rows || [];
|
|
const existing = new Set(subcontractorItems.map((s: any) => s.subcontractor_id || s.subcontractor_code));
|
|
setSubSearchResults(all.filter((s: any) => !existing.has(s.subcontractor_code)));
|
|
} catch { /* skip */ } finally { setSubSearchLoading(false); }
|
|
};
|
|
|
|
// 외주업체 추가 저장
|
|
const addSelectedSubcontractors = async () => {
|
|
const selected = subSearchResults.filter((s) => subCheckedIds.has(s.id));
|
|
if (selected.length === 0 || !selectedItem) return;
|
|
try {
|
|
for (const sub of selected) {
|
|
await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
subcontractor_id: sub.subcontractor_code,
|
|
item_id: selectedItem.item_number,
|
|
});
|
|
}
|
|
toast.success(`${selected.length}개 외주업체가 추가되었습니다.`);
|
|
setSubCheckedIds(new Set());
|
|
setSubSelectOpen(false);
|
|
const sid = selectedItemId;
|
|
setSelectedItemId(null);
|
|
setTimeout(() => setSelectedItemId(sid), 50);
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "외주업체 추가에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 품목 수정
|
|
const openEditItem = () => {
|
|
if (!selectedItem) return;
|
|
setEditItemForm({ ...selectedItem });
|
|
setEditItemOpen(true);
|
|
};
|
|
|
|
const handleEditSave = async () => {
|
|
if (!editItemForm.id) return;
|
|
setSaving(true);
|
|
try {
|
|
await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
|
|
originalData: { id: editItemForm.id },
|
|
updatedData: {
|
|
selling_price: editItemForm.selling_price || null,
|
|
standard_price: editItemForm.standard_price || null,
|
|
currency_code: editItemForm.currency_code || null,
|
|
},
|
|
});
|
|
toast.success("수정되었습니다.");
|
|
setEditItemOpen(false);
|
|
fetchItems();
|
|
} catch (err: any) {
|
|
toast.error(err.response?.data?.message || "수정에 실패했습니다.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 엑셀 다운로드
|
|
const handleExcelDownload = async () => {
|
|
if (items.length === 0) return;
|
|
const data = items.map((i) => ({
|
|
품번: i.item_number, 품명: i.item_name, 규격: i.size, 단위: i.unit,
|
|
기준단가: i.standard_price, 판매가격: i.selling_price, 통화: i.currency_code, 상태: i.status,
|
|
}));
|
|
await exportToExcel(data, "외주품목정보.xlsx", "외주품목");
|
|
toast.success("다운로드 완료");
|
|
};
|
|
|
|
const handleSearch = () => setSearchKeyword(inputKeyword);
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-3">
|
|
{/* 브레드크럼 */}
|
|
<div className="flex items-center gap-1.5 text-xs text-muted-foreground shrink-0">
|
|
<span>외주관리</span>
|
|
<span className="text-muted-foreground/50">/</span>
|
|
<span className="text-foreground font-medium">외주품목정보</span>
|
|
</div>
|
|
|
|
{/* 검색 바 */}
|
|
<div className="flex items-center gap-2 px-4 py-3 bg-card border rounded-lg shrink-0">
|
|
<span className="text-[11px] font-semibold text-muted-foreground whitespace-nowrap">품명</span>
|
|
<Input
|
|
className="h-9 w-[200px]"
|
|
placeholder="품명 검색"
|
|
value={inputKeyword}
|
|
onChange={(e) => setInputKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && handleSearch()}
|
|
/>
|
|
<Button variant="outline" size="sm" className="h-9" onClick={() => { setInputKeyword(""); setSearchKeyword(""); }}>
|
|
<RotateCcw className="w-3.5 h-3.5 mr-1" /> 초기화
|
|
</Button>
|
|
<Button size="sm" className="h-9" onClick={handleSearch}>
|
|
<Search className="w-3.5 h-3.5 mr-1" /> 조회
|
|
</Button>
|
|
<div className="ml-auto flex gap-1.5">
|
|
<Button variant="outline" size="sm" className="h-9" onClick={() => setExcelUploadOpen(true)}>
|
|
<FileSpreadsheet className="w-3.5 h-3.5 mr-1" /> 엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="h-9" onClick={handleExcelDownload}>
|
|
<Download className="w-3.5 h-3.5 mr-1" /> 엑셀 다운로드
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 분할 패널 */}
|
|
<div className="flex-1 overflow-hidden border rounded-lg bg-card">
|
|
<ResizablePanelGroup direction="horizontal">
|
|
{/* 좌측: 외주품목 목록 */}
|
|
<ResizablePanel defaultSize={55} minSize={30}>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-[13px] font-bold">외주품목 목록</h3>
|
|
<span className="text-[11px] font-semibold text-primary bg-primary/10 border border-primary/15 px-2 py-0.5 rounded-full font-mono">{itemCount}건</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Button variant="outline" size="sm" disabled={!selectedItemId} onClick={openEditItem}>
|
|
<Pencil className="w-3.5 h-3.5 mr-1" /> 수정
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={() => ts.setOpen(true)}>
|
|
<Settings2 className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<EDataTable
|
|
columns={mainTableColumns}
|
|
data={ts.groupData(items)}
|
|
loading={itemLoading}
|
|
emptyMessage="등록된 외주품목이 없어요"
|
|
selectedId={selectedItemId}
|
|
onSelect={(id) => setSelectedItemId(id)}
|
|
onRowDoubleClick={() => openEditItem()}
|
|
showPagination={true}
|
|
draggableColumns={false}
|
|
columnOrderKey="c16-subcontractor-item-main"
|
|
/>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 우측: 외주업체 정보 */}
|
|
<ResizablePanel defaultSize={45} minSize={25}>
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-3 border-b bg-muted/50 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-[13px] font-bold">외주업체 정보</h3>
|
|
{selectedItem && <Badge variant="outline" className="font-normal">{selectedItem.item_name}</Badge>}
|
|
</div>
|
|
<Button variant="outline" size="sm" disabled={!selectedItemId}
|
|
onClick={() => { setSubCheckedIds(new Set()); setSubSelectOpen(true); searchSubcontractors(); }}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" /> 외주업체 추가
|
|
</Button>
|
|
</div>
|
|
{!selectedItemId ? (
|
|
<div className="flex-1 flex flex-col items-center justify-center gap-3 m-3 border-2 border-dashed rounded-lg text-center">
|
|
<Inbox className="w-12 h-12 text-muted-foreground/40" />
|
|
<div>
|
|
<p className="text-sm font-semibold text-muted-foreground">품목을 선택해주세요</p>
|
|
<p className="text-xs text-muted-foreground mt-1">좌측에서 품목을 선택하면 외주업체 정보가 표시돼요</p>
|
|
</div>
|
|
</div>
|
|
) : subcontractorLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : subcontractorItems.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<Inbox className="w-8 h-8 mb-2 opacity-40" />
|
|
<p className="text-sm">등록된 외주업체가 없어요</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 overflow-auto">
|
|
<Table noWrapper>
|
|
<thead className="sticky top-0 z-10 bg-card">
|
|
<TableRow>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
|
|
<TableHead className="min-w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품번</TableHead>
|
|
<TableHead className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주품명</TableHead>
|
|
<TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준가</TableHead>
|
|
<TableHead className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
|
|
<TableHead className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
|
|
</TableRow>
|
|
</thead>
|
|
<TableBody>
|
|
{subcontractorItems.map((item, idx) => (
|
|
<TableRow key={item.id || idx}>
|
|
<TableCell className="text-[13px] font-mono">{item.subcontractor_code || "-"}</TableCell>
|
|
<TableCell className="text-sm">{item.subcontractor_name || "-"}</TableCell>
|
|
<TableCell className="text-[13px]">{item.subcontractor_item_code || "-"}</TableCell>
|
|
<TableCell className="text-[13px]">{item.subcontractor_item_name || "-"}</TableCell>
|
|
<TableCell className="text-[13px] text-right font-mono">{formatNum(item.base_price)}</TableCell>
|
|
<TableCell className="text-[13px] text-right font-mono">{formatNum(item.calculated_price)}</TableCell>
|
|
<TableCell className="text-[13px]">{item.currency_code || "-"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
|
|
{/* 품목 수정 모달 */}
|
|
<Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>외주품목 수정</DialogTitle>
|
|
<DialogDescription>{editItemForm.item_number || ""} — {editItemForm.item_name || ""}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid grid-cols-2 gap-4 py-4">
|
|
{[
|
|
{ key: "item_number", label: "품목코드" },
|
|
{ key: "item_name", label: "품명" },
|
|
{ key: "size", label: "규격" },
|
|
{ key: "unit", label: "단위" },
|
|
{ key: "material", label: "재질" },
|
|
{ key: "status", label: "상태" },
|
|
].map((f) => (
|
|
<div key={f.key} className="space-y-1.5">
|
|
<Label className="text-sm text-muted-foreground">{f.label}</Label>
|
|
<Input value={editItemForm[f.key] || ""} className="h-9 bg-muted/50" disabled />
|
|
</div>
|
|
))}
|
|
<div className="col-span-2 border-t my-2" />
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">판매가격</Label>
|
|
<Input value={editItemForm.selling_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, selling_price: e.target.value }))}
|
|
placeholder="판매가격" className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">기준단가</Label>
|
|
<Input value={editItemForm.standard_price || ""} onChange={(e) => setEditItemForm((p) => ({ ...p, standard_price: e.target.value }))}
|
|
placeholder="기준단가" className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">통화</Label>
|
|
<Select value={editItemForm.currency_code || ""} onValueChange={(v) => setEditItemForm((p) => ({ ...p, currency_code: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="통화" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["currency_code"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setEditItemOpen(false)}>취소</Button>
|
|
<Button onClick={handleEditSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 외주업체 추가 모달 */}
|
|
<Dialog open={subSelectOpen} onOpenChange={setSubSelectOpen}>
|
|
<DialogContent className="max-w-2xl max-h-[70vh] flex flex-col overflow-hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>외주업체 선택</DialogTitle>
|
|
<DialogDescription>품목에 추가할 외주업체를 선택해주세요.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex gap-2">
|
|
<Input placeholder="외주업체명 검색" value={subSearchKeyword}
|
|
onChange={(e) => setSubSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && searchSubcontractors()}
|
|
className="h-9 flex-1" />
|
|
<Button size="sm" onClick={searchSubcontractors} disabled={subSearchLoading} className="h-9">
|
|
{subSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
|
|
</Button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto border rounded-lg">
|
|
<Table noWrapper>
|
|
<thead className="sticky top-0 z-10 bg-card">
|
|
<TableRow>
|
|
<TableHead className="w-[40px] text-center">
|
|
<input type="checkbox"
|
|
checked={subSearchResults.length > 0 && subCheckedIds.size === subSearchResults.length}
|
|
onChange={(e) => {
|
|
if (e.target.checked) setSubCheckedIds(new Set(subSearchResults.map((s) => s.id)));
|
|
else setSubCheckedIds(new Set());
|
|
}} />
|
|
</TableHead>
|
|
<TableHead className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체코드</TableHead>
|
|
<TableHead className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">외주업체명</TableHead>
|
|
<TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래유형</TableHead>
|
|
<TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>
|
|
</TableRow>
|
|
</thead>
|
|
<TableBody>
|
|
{subSearchResults.length === 0 ? (
|
|
<TableRow><TableCell colSpan={5} className="text-center text-muted-foreground py-8">검색 결과가 없어요</TableCell></TableRow>
|
|
) : subSearchResults.map((s) => (
|
|
<TableRow key={s.id} className={cn("cursor-pointer", subCheckedIds.has(s.id) && "bg-primary/5")}
|
|
onClick={() => setSubCheckedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(s.id)) next.delete(s.id); else next.add(s.id);
|
|
return next;
|
|
})}>
|
|
<TableCell className="text-center"><input type="checkbox" checked={subCheckedIds.has(s.id)} readOnly /></TableCell>
|
|
<TableCell className="text-[13px]">{s.subcontractor_code}</TableCell>
|
|
<TableCell className="text-sm">{s.subcontractor_name}</TableCell>
|
|
<TableCell className="text-[13px]">{s.division}</TableCell>
|
|
<TableCell className="text-[13px]">{s.contact_person}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex items-center gap-2 w-full justify-between">
|
|
<span className="text-sm text-muted-foreground">{subCheckedIds.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => setSubSelectOpen(false)}>취소</Button>
|
|
<Button onClick={addSelectedSubcontractors} disabled={subCheckedIds.size === 0}>
|
|
<Plus className="w-4 h-4 mr-1" /> {subCheckedIds.size}개 추가
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 엑셀 업로드 */}
|
|
<ExcelUploadModal
|
|
open={excelUploadOpen}
|
|
onOpenChange={setExcelUploadOpen}
|
|
tableName={ITEM_TABLE}
|
|
userId={user?.userId}
|
|
onSuccess={() => fetchItems()}
|
|
/>
|
|
|
|
{/* 테이블 설정 */}
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|