kjs
59f60799ab
- Updated API calls in the purchase and sales item pages to increase the data size limit from 500 to 5000, enhancing the ability to fetch larger datasets. - This change aims to improve performance and user experience by allowing more data to be loaded in a single request across multiple company implementations.
2017 lines
101 KiB
TypeScript
2017 lines
101 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 판매품목정보 — Type B 마스터-디테일 리디자인
|
|
*
|
|
* 좌측: 판매품목 목록 (item_info, 판매 관련 필터)
|
|
* 우측: 선택한 품목의 거래처 정보 (customer_item_mapping → customer_mng 조인)
|
|
*
|
|
* 거래처관리와 양방향 연동 (같은 customer_item_mapping 테이블)
|
|
*/
|
|
|
|
import React, { useState, useEffect, useCallback, useRef } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { ImageUpload } from "@/components/common/ImageUpload";
|
|
import {
|
|
Plus, Trash2, Save, Loader2, FileSpreadsheet, Download, Pencil, Users, Package,
|
|
Search, X, Settings2, GripVertical, ChevronRight, ChevronDown, Coins,
|
|
Check, ChevronsUpDown,
|
|
} from "lucide-react";
|
|
import {
|
|
DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
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 { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelUploadModal";
|
|
import { autoDetectMultiTableConfig, TableChainConfig } from "@/lib/api/multiTableExcel";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { TableSettingsModal } from "@/components/common/TableSettingsModal";
|
|
import { useTableSettings } from "@/hooks/useTableSettings";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
|
|
|
|
// 검색 가능한 카테고리 콤보박스
|
|
function CategoryCombobox({ options, value, onChange, placeholder }: {
|
|
options: { code: string; label: string }[];
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const selected = options.find((o) => o.code === value);
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
|
|
<span className="truncate">{selected?.label || <span className="text-muted-foreground">{placeholder}</span>}</span>
|
|
<ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="h-8" />
|
|
<CommandList>
|
|
<CommandEmpty>검색 결과가 없어요</CommandEmpty>
|
|
<CommandGroup className="max-h-[200px] overflow-auto">
|
|
{options.map((opt) => (
|
|
<CommandItem key={opt.code} value={opt.label} onSelect={() => { onChange(opt.code); setOpen(false); }}>
|
|
<Check className={cn("mr-2 h-3.5 w-3.5", value === opt.code ? "opacity-100" : "opacity-0")} />
|
|
{opt.label}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
// 다중 선택 카테고리 콤보박스
|
|
function MultiCategoryCombobox({ options, value, onChange, placeholder }: {
|
|
options: { code: string; label: string }[];
|
|
value: string;
|
|
onChange: (v: string) => void;
|
|
placeholder: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const selectedCodes = value ? value.split(",").map((c) => c.trim()).filter(Boolean) : [];
|
|
const selectedLabels = selectedCodes.map((code) => options.find((o) => o.code === code)?.label || code).filter(Boolean);
|
|
|
|
const toggle = (code: string) => {
|
|
const next = selectedCodes.includes(code)
|
|
? selectedCodes.filter((c) => c !== code)
|
|
: [...selectedCodes, code];
|
|
onChange(next.join(","));
|
|
};
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" role="combobox" aria-expanded={open} className="h-9 w-full justify-between font-normal">
|
|
<span className="truncate">
|
|
{selectedLabels.length > 0
|
|
? selectedLabels.join(", ")
|
|
: <span className="text-muted-foreground">{placeholder}</span>}
|
|
</span>
|
|
<ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
|
|
<Command>
|
|
<CommandInput placeholder="검색..." className="h-8" />
|
|
<CommandList>
|
|
<CommandEmpty>검색 결과가 없어요</CommandEmpty>
|
|
<CommandGroup className="max-h-[200px] overflow-auto">
|
|
{options.map((opt) => (
|
|
<CommandItem key={opt.code} value={opt.label} onSelect={() => toggle(opt.code)}>
|
|
<Check className={cn("mr-2 h-3.5 w-3.5", selectedCodes.includes(opt.code) ? "opacity-100" : "opacity-0")} />
|
|
{opt.label}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
const ITEM_TABLE = "item_info";
|
|
const MAPPING_TABLE = "customer_item_mapping";
|
|
const CUSTOMER_TABLE = "customer_mng";
|
|
const PRICE_TABLE = "customer_item_prices";
|
|
|
|
// 숫자 포맷 헬퍼
|
|
const formatNum = (val: any): string => {
|
|
if (val === null || val === undefined || val === "") return "";
|
|
const n = Number(val);
|
|
return isNaN(n) ? String(val) : n.toLocaleString();
|
|
};
|
|
|
|
const ITEM_GRID_COLUMNS = [
|
|
{ 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: "상태" },
|
|
];
|
|
|
|
const FORM_FIELDS = [
|
|
{ key: "item_number", label: "품목코드", type: "numbering", required: true, placeholder: "자동 채번" },
|
|
{ key: "item_name", label: "품명", type: "text", required: true },
|
|
{ key: "division", label: "관리품목", type: "multi-category" },
|
|
{ key: "type", label: "품목구분", type: "category" },
|
|
{ key: "size", label: "규격", type: "text" },
|
|
{ key: "unit", label: "단위", type: "category" },
|
|
{ key: "material", label: "재질", type: "category" },
|
|
{ key: "status", label: "상태", type: "category" },
|
|
{ key: "weight", label: "중량", type: "text", placeholder: "숫자 입력 (예: 3.5)" },
|
|
{ key: "volum", label: "부피", type: "text", placeholder: "숫자 입력 (예: 100)" },
|
|
{ key: "specific_gravity", label: "비중", type: "text", placeholder: "숫자 입력 (예: 7.85)" },
|
|
{ key: "inventory_unit", label: "재고단위", type: "category" },
|
|
{ key: "selling_price", label: "판매가격", type: "text" },
|
|
{ key: "standard_price", label: "기준단가", type: "text" },
|
|
{ key: "currency_code", label: "통화", type: "category" },
|
|
{ key: "user_type01", label: "대분류", type: "category" },
|
|
{ key: "user_type02", label: "중분류", type: "category" },
|
|
{ key: "lead_time", label: "생산 리드타임(일)", type: "text", placeholder: "숫자 입력 (예: 7)" },
|
|
{ key: "image", label: "품목 이미지", type: "image" },
|
|
{ key: "meno", label: "메모", type: "textarea" },
|
|
];
|
|
|
|
const CATEGORY_COLUMNS_FOR_MODAL = [
|
|
"division", "type", "unit", "material", "status",
|
|
"inventory_unit", "currency_code", "user_type01", "user_type02",
|
|
];
|
|
|
|
function SortableMappingRow({ id, children }: { id: string; children: React.ReactNode }) {
|
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
|
const style: React.CSSProperties = {
|
|
transform: CSS.Transform.toString(transform), transition,
|
|
opacity: isDragging ? 0.5 : 1,
|
|
};
|
|
return (
|
|
<div ref={setNodeRef} style={style} className="flex gap-2 items-center">
|
|
<div {...attributes} {...listeners} className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0">
|
|
<GripVertical className="h-3.5 w-3.5" />
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SalesItemPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent, isConfirmOpenRef } = useConfirmDialog();
|
|
const ts = useTableSettings("c16-sales-item", ITEM_TABLE, ITEM_GRID_COLUMNS);
|
|
const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
|
|
|
|
// 좌측: 품목
|
|
const [items, setItems] = useState<any[]>([]);
|
|
const [rawItems, setRawItems] = useState<any[]>([]);
|
|
const [itemLoading, setItemLoading] = useState(false);
|
|
const [itemCount, setItemCount] = useState(0);
|
|
const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
|
|
|
|
// 검색 필터 (DynamicSearchFilter에서 관리)
|
|
const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
|
|
|
|
// 우측: 거래처
|
|
const [customerItems, setCustomerItems] = useState<any[]>([]);
|
|
const [priceGroups, setPriceGroups] = useState<Record<string, { master: any; details: any[] }>>({});
|
|
const [customerLoading, setCustomerLoading] = useState(false);
|
|
const [customerCheckedIds, setCustomerCheckedIds] = useState<string[]>([]);
|
|
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
|
|
|
// 카테고리
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string; isDefault?: boolean }[]>>({});
|
|
const [priceCategoryOptions, setPriceCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 거래처 추가 모달
|
|
const [custSelectOpen, setCustSelectOpen] = useState(false);
|
|
const [custSearchKeyword, setCustSearchKeyword] = useState("");
|
|
const [custSearchResults, setCustSearchResults] = useState<any[]>([]);
|
|
const [custSearchLoading, setCustSearchLoading] = useState(false);
|
|
const [custCheckedIds, setCustCheckedIds] = useState<Set<string>>(new Set());
|
|
|
|
// 품목 등록/수정 모달
|
|
const [editItemOpen, setEditItemOpen] = useState(false);
|
|
const [editItemForm, setEditItemForm] = useState<Record<string, any>>({});
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [editId, setEditId] = useState<string | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// 채번 관련 상태
|
|
const [numberingRule, setNumberingRule] = useState<any>(null);
|
|
const [numberingParts, setNumberingParts] = useState<{ value: string; isManual: boolean; separator: string }[]>([]);
|
|
const [manualInputValue, setManualInputValue] = useState<string>("");
|
|
const [isNumberingLoading, setIsNumberingLoading] = useState(false);
|
|
const numberingRuleIdRef = useRef<string | null>(null);
|
|
|
|
// 엑셀
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
const [excelChainConfig, setExcelChainConfig] = useState<TableChainConfig | null>(null);
|
|
const [excelDetecting, setExcelDetecting] = useState(false);
|
|
|
|
// 거래처 상세 입력 모달 (거래처 품번/품명 + 단가)
|
|
const [custDetailOpen, setCustDetailOpen] = useState(false);
|
|
const [selectedCustsForDetail, setSelectedCustsForDetail] = useState<any[]>([]);
|
|
const [custMappings, setCustMappings] = useState<Record<string, Array<{ _id: string; customer_item_code: string; customer_item_name: string }>>>({});
|
|
const [custPrices, setCustPrices] = useState<Record<string, Array<{
|
|
_id: string; start_date: string; end_date: string; currency_code: string;
|
|
base_price_type: string; base_price: string; discount_type: string;
|
|
discount_value: string; rounding_type: string; rounding_unit_value: string;
|
|
calculated_price: string;
|
|
}>>>({});
|
|
const [editCustData, setEditCustData] = useState<any>(null);
|
|
const [collapsedPriceCards, setCollapsedPriceCards] = useState<Set<string>>(new Set());
|
|
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
const optMap: Record<string, { code: string; label: string; isDefault?: boolean }[]> = {};
|
|
const flatten = (vals: any[]): { code: string; label: string; isDefault?: boolean }[] => {
|
|
const result: { code: string; label: string; isDefault?: boolean }[] = [];
|
|
for (const v of vals) {
|
|
result.push({ code: v.valueCode, label: v.valueLabel, isDefault: v.isDefault });
|
|
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);
|
|
|
|
// 단가 카테고리
|
|
const priceOpts: Record<string, { code: string; label: string }[]> = {};
|
|
for (const col of ["base_price_type", "currency_code", "discount_type", "rounding_type", "rounding_unit_value"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/customer_item_prices/${col}/values`);
|
|
if (res.data?.success) priceOpts[col] = flatten(res.data.data || []);
|
|
} catch { /* skip */ }
|
|
}
|
|
setPriceCategoryOptions(priceOpts);
|
|
};
|
|
load();
|
|
}, []);
|
|
|
|
const resolve = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
|
|
};
|
|
|
|
// 좌측: 품목 조회
|
|
const fetchItems = useCallback(async () => {
|
|
setItemLoading(true);
|
|
try {
|
|
const filters: { columnName: string; operator: string; value: any }[] = [];
|
|
|
|
// 영업관리 division 필터: 카테고리에서 "영업관리" 라벨의 코드를 찾아서 필터링
|
|
const salesCode = categoryOptions["division"]?.find((o) => o.label === "영업관리")?.code;
|
|
if (salesCode) {
|
|
filters.push({ columnName: "division", operator: "contains", value: salesCode });
|
|
}
|
|
|
|
// DynamicSearchFilter에서 전달된 필터 추가
|
|
for (const f of searchFilters) {
|
|
filters.push({ columnName: f.columnName, operator: f.operator, value: f.value });
|
|
}
|
|
|
|
const res = await apiClient.post(`/table-management/tables/${ITEM_TABLE}/data`, {
|
|
page: 1, size: 5000,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
const raw = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setRawItems(raw);
|
|
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);
|
|
}
|
|
}, [searchFilters, categoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
useEffect(() => { fetchItems(); }, [fetchItems]);
|
|
|
|
// 선택된 품목
|
|
const selectedItem = items.find((i) => i.id === selectedItemId);
|
|
|
|
// 우측: 거래처 목록 조회
|
|
useEffect(() => {
|
|
if (!selectedItem?.item_number) {
|
|
setCustomerItems([]);
|
|
setPriceGroups({});
|
|
setCustomerCheckedIds([]);
|
|
setExpandedItems(new Set());
|
|
return;
|
|
}
|
|
setCustomerCheckedIds([]);
|
|
setExpandedItems(new Set());
|
|
const itemKey = selectedItem.item_number;
|
|
const fetchCustomerItems = async () => {
|
|
setCustomerLoading(true);
|
|
try {
|
|
// 1. customer_item_mapping에서 해당 품목의 매핑 조회
|
|
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,
|
|
sort: { columnName: "created_date", order: "asc" },
|
|
});
|
|
const mappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
|
|
// 2. customer_id → customer_mng 조인 (거래처명)
|
|
const custIds = [...new Set(mappings.map((m: any) => m.customer_id).filter(Boolean))];
|
|
let custMap: Record<string, any> = {};
|
|
if (custIds.length > 0) {
|
|
try {
|
|
const custRes = await apiClient.post(`/table-management/tables/${CUSTOMER_TABLE}/data`, {
|
|
page: 1, size: custIds.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "in", value: custIds }] },
|
|
autoFilter: true,
|
|
});
|
|
for (const c of (custRes.data?.data?.data || custRes.data?.data?.rows || [])) {
|
|
custMap[c.customer_code] = c;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// 3. customer_item_prices 조회 (단가 정보)
|
|
let allPrices: any[] = [];
|
|
if (mappings.length > 0) {
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/${PRICE_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "item_id", operator: "equals", value: itemKey },
|
|
]},
|
|
autoFilter: true,
|
|
});
|
|
allPrices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// 4. 거래처 기준 그룹핑 — master: 첫 매핑 + 현재 단가, details: 전체 단가 리스트
|
|
const priceResolve = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
return priceCategoryOptions[col]?.find((o: any) => o.code === code)?.label || code;
|
|
};
|
|
const now = new Date();
|
|
const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
|
|
|
const grouped: Record<string, { master: any; details: any[] }> = {};
|
|
const flatItems: any[] = [];
|
|
const seenCustIds = new Set<string>();
|
|
|
|
for (const m of mappings) {
|
|
const custKey = m.customer_id || "";
|
|
if (seenCustIds.has(custKey)) continue; // 거래처당 첫 매핑만 마스터
|
|
seenCustIds.add(custKey);
|
|
|
|
const custInfo = custMap[custKey] || {};
|
|
const custPriceList = allPrices
|
|
.filter((p: any) => p.customer_id === custKey)
|
|
.sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
|
|
const todayPrice = custPriceList.find((p: any) =>
|
|
(!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today)
|
|
) || custPriceList[0] || {};
|
|
|
|
const masterRow = {
|
|
...m,
|
|
customer_code: custKey,
|
|
customer_name: custInfo.customer_name || "",
|
|
base_price_type: priceResolve("base_price_type", todayPrice.base_price_type || ""),
|
|
base_price: todayPrice.base_price || "",
|
|
discount_type: priceResolve("discount_type", todayPrice.discount_type || ""),
|
|
discount_value: todayPrice.discount_value || "",
|
|
calculated_price: todayPrice.calculated_price || todayPrice.unit_price || "",
|
|
currency_code: priceResolve("currency_code", todayPrice.currency_code || ""),
|
|
};
|
|
|
|
// 단가 리스트 (라벨 변환)
|
|
const priceDetails = custPriceList.map((p: any) => ({
|
|
...p,
|
|
base_price_type_label: priceResolve("base_price_type", p.base_price_type || ""),
|
|
discount_type_label: priceResolve("discount_type", p.discount_type || ""),
|
|
currency_label: priceResolve("currency_code", p.currency_code || ""),
|
|
is_current: (!p.start_date || p.start_date <= today) && (!p.end_date || p.end_date >= today),
|
|
}));
|
|
|
|
grouped[custKey] = { master: masterRow, details: priceDetails };
|
|
flatItems.push(masterRow);
|
|
}
|
|
setPriceGroups(grouped);
|
|
setCustomerItems(flatItems);
|
|
} catch (err) {
|
|
console.error("거래처 조회 실패:", err);
|
|
} finally {
|
|
setCustomerLoading(false);
|
|
}
|
|
};
|
|
fetchCustomerItems();
|
|
}, [selectedItem?.item_number, priceCategoryOptions]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// 거래처 검색
|
|
const searchCustomers = useCallback(async () => {
|
|
setCustSearchLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (custSearchKeyword) filters.push({ columnName: "customer_name", operator: "contains", value: custSearchKeyword });
|
|
const res = await apiClient.post(`/table-management/tables/${CUSTOMER_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(customerItems.map((c: any) => c.customer_id || c.customer_code));
|
|
setCustSearchResults(all.filter((c: any) => !existing.has(c.customer_code)));
|
|
} catch { /* skip */ } finally { setCustSearchLoading(false); }
|
|
}, [custSearchKeyword, customerItems]);
|
|
|
|
// 실시간 검색 (2글자 이상)
|
|
useEffect(() => {
|
|
if (!custSelectOpen) return;
|
|
if (custSearchKeyword.length > 0 && custSearchKeyword.length < 2) return;
|
|
searchCustomers();
|
|
}, [custSearchKeyword, custSelectOpen]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
// 거래처 선택 → 상세 모달로 이동
|
|
const goToCustDetail = () => {
|
|
const selected = custSearchResults.filter((c) => custCheckedIds.has(c.id));
|
|
if (selected.length === 0) { toast.error("거래처를 선택해주세요."); return; }
|
|
setSelectedCustsForDetail(selected);
|
|
const mappings: typeof custMappings = {};
|
|
const prices: typeof custPrices = {};
|
|
for (const cust of selected) {
|
|
const key = cust.customer_code || cust.id;
|
|
mappings[key] = [];
|
|
prices[key] = [{
|
|
_id: `p_${Date.now()}_${Math.random()}`,
|
|
start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
|
|
discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
|
|
calculated_price: selectedItem?.standard_price || selectedItem?.selling_price || "",
|
|
}];
|
|
}
|
|
setCustMappings(mappings);
|
|
setCustPrices(prices);
|
|
setCustSelectOpen(false);
|
|
setCustDetailOpen(true);
|
|
};
|
|
|
|
const addMappingRow = (custKey: string) => {
|
|
setCustMappings((prev) => ({
|
|
...prev,
|
|
[custKey]: [...(prev[custKey] || []), { _id: `m_${Date.now()}_${Math.random()}`, customer_item_code: "", customer_item_name: "" }],
|
|
}));
|
|
};
|
|
|
|
const removeMappingRow = (custKey: string, rowId: string) => {
|
|
setCustMappings((prev) => ({
|
|
...prev,
|
|
[custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
|
|
}));
|
|
};
|
|
|
|
const updateMappingRow = (custKey: string, rowId: string, field: string, value: string) => {
|
|
setCustMappings((prev) => ({
|
|
...prev,
|
|
[custKey]: (prev[custKey] || []).map((r) => r._id === rowId ? { ...r, [field]: value } : r),
|
|
}));
|
|
};
|
|
|
|
const handleMappingDragEnd = (custKey: string, event: DragEndEvent) => {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id) return;
|
|
setCustMappings((prev) => {
|
|
const arr = [...(prev[custKey] || [])];
|
|
const oldIdx = arr.findIndex((r) => r._id === active.id);
|
|
const newIdx = arr.findIndex((r) => r._id === over.id);
|
|
return { ...prev, [custKey]: arrayMove(arr, oldIdx, newIdx) };
|
|
});
|
|
};
|
|
|
|
const addPriceRow = (custKey: string) => {
|
|
setCustPrices((prev) => ({
|
|
...prev,
|
|
[custKey]: [...(prev[custKey] || []), {
|
|
_id: `p_${Date.now()}_${Math.random()}`,
|
|
start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "",
|
|
discount_type: "", discount_value: "", rounding_type: "", rounding_unit_value: "",
|
|
calculated_price: "",
|
|
}],
|
|
}));
|
|
};
|
|
|
|
const removePriceRow = (custKey: string, rowId: string) => {
|
|
setCustPrices((prev) => ({
|
|
...prev,
|
|
[custKey]: (prev[custKey] || []).filter((r) => r._id !== rowId),
|
|
}));
|
|
};
|
|
|
|
const updatePriceRow = (custKey: string, rowId: string, field: string, value: string) => {
|
|
setCustPrices((prev) => ({
|
|
...prev,
|
|
[custKey]: (prev[custKey] || []).map((r) => {
|
|
if (r._id !== rowId) return r;
|
|
const updated = { ...r, [field]: value };
|
|
if (["base_price", "discount_type", "discount_value", "rounding_unit_value", "rounding_type"].includes(field)) {
|
|
const bp = Number(updated.base_price) || 0;
|
|
const dv = Number(updated.discount_value) || 0;
|
|
const dt = updated.discount_type;
|
|
let calc = bp;
|
|
if (dt === "CAT_MLAMBEC8_URQA") calc = bp * (1 - dv / 100);
|
|
else if (dt === "CAT_MLAMBLFM_JTLO") calc = bp - dv;
|
|
// 반올림 유형 + 단위 적용
|
|
const rv = updated.rounding_unit_value;
|
|
const rt = updated.rounding_type;
|
|
const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
|
|
const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
|
|
const unitOpts = priceCategoryOptions["rounding_type"] || [];
|
|
const unitLabel = unitOpts.find((o) => o.code === rt)?.label || "";
|
|
const unit = parseInt(unitLabel) || 1;
|
|
if (roundLabel === "반올림") calc = Math.round(calc / unit) * unit;
|
|
else if (roundLabel === "절삭") calc = Math.floor(calc / unit) * unit;
|
|
else if (roundLabel === "올림") calc = Math.ceil(calc / unit) * unit;
|
|
updated.calculated_price = String(Math.floor(calc));
|
|
}
|
|
return updated;
|
|
}),
|
|
}));
|
|
};
|
|
|
|
const openEditCust = async (row: any) => {
|
|
const custKey = row.customer_code || row.customer_id;
|
|
|
|
// customer_mng에서 거래처 정보 조회
|
|
let custInfo: any = { customer_code: custKey, customer_name: row.customer_name || "" };
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/customer_mng/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: custKey }] },
|
|
autoFilter: true,
|
|
});
|
|
const found = (res.data?.data?.data || res.data?.data?.rows || [])[0];
|
|
if (found) custInfo = found;
|
|
} catch { /* skip */ }
|
|
|
|
// 매핑 조회
|
|
let mappingRows: any[] = [];
|
|
try {
|
|
const mapRes = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: custKey },
|
|
{ columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
|
|
]}, autoFilter: true,
|
|
sort: { columnName: "created_date", order: "asc" },
|
|
});
|
|
const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
mappingRows = allMappings
|
|
.filter((m: any) => m.customer_item_code || m.customer_item_name)
|
|
.map((m: any) => ({
|
|
_id: `m_existing_${m.id}`,
|
|
customer_item_code: m.customer_item_code || "",
|
|
customer_item_name: m.customer_item_name || "",
|
|
}));
|
|
} catch { /* skip */ }
|
|
|
|
// 단가 전체 조회
|
|
let priceRows: any[] = [];
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: custKey },
|
|
{ columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
|
|
]}, autoFilter: true,
|
|
});
|
|
const allPriceData = (priceRes.data?.data?.data || priceRes.data?.data?.rows || [])
|
|
.sort((a: any, b: any) => (a.start_date || "").localeCompare(b.start_date || ""));
|
|
priceRows = allPriceData.map((p: any) => ({
|
|
_id: `p_existing_${p.id}`,
|
|
start_date: p.start_date ? String(p.start_date).split("T")[0] : "",
|
|
end_date: p.end_date ? String(p.end_date).split("T")[0] : "",
|
|
currency_code: p.currency_code || "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: p.base_price_type || "CAT_MLAMFGFT_4RZW",
|
|
base_price: p.base_price ? String(p.base_price) : "",
|
|
discount_type: p.discount_type || "",
|
|
discount_value: p.discount_value ? String(p.discount_value) : "",
|
|
rounding_type: p.rounding_type || "",
|
|
rounding_unit_value: p.rounding_unit_value || "",
|
|
calculated_price: p.calculated_price ? String(p.calculated_price) : "",
|
|
}));
|
|
} catch { /* skip */ }
|
|
|
|
if (priceRows.length === 0) {
|
|
priceRows.push({
|
|
_id: `p_${Date.now()}`, start_date: "", end_date: "", currency_code: "CAT_MLAMDKVN_PZJI",
|
|
base_price_type: "CAT_MLAMFGFT_4RZW", base_price: "", discount_type: "", discount_value: "",
|
|
rounding_type: "", rounding_unit_value: "", calculated_price: "",
|
|
});
|
|
}
|
|
|
|
setSelectedCustsForDetail([custInfo]);
|
|
setCustMappings({ [custKey]: mappingRows });
|
|
setCustPrices({ [custKey]: priceRows });
|
|
setEditCustData(row);
|
|
setCustDetailOpen(true);
|
|
};
|
|
|
|
const handleCustDetailSave = async () => {
|
|
if (!selectedItem) return;
|
|
const isEditingExisting = !!editCustData;
|
|
setSaving(true);
|
|
try {
|
|
for (const cust of selectedCustsForDetail) {
|
|
const custKey = cust.customer_code || cust.id;
|
|
const mappingRows = custMappings[custKey] || [];
|
|
|
|
if (isEditingExisting && editCustData?.id) {
|
|
// 기존 매핑 조회
|
|
let existingMaps: any[] = [];
|
|
try {
|
|
const existingMappings = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: custKey },
|
|
{ columnName: "item_id", operator: "equals", value: selectedItem.item_number },
|
|
]}, autoFilter: true,
|
|
sort: { columnName: "created_date", order: "asc" },
|
|
});
|
|
existingMaps = existingMappings.data?.data?.data || existingMappings.data?.data?.rows || [];
|
|
} catch { /* skip */ }
|
|
|
|
// 매핑 upsert: 인덱스 기반
|
|
const usedExistingIds = new Set<string>();
|
|
let firstMappingId: string | null = editCustData.id;
|
|
for (let mi = 0; mi < mappingRows.length; mi++) {
|
|
const existMap = existingMaps[mi];
|
|
if (existMap) {
|
|
await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
|
|
originalData: { id: existMap.id },
|
|
updatedData: {
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
},
|
|
});
|
|
usedExistingIds.add(existMap.id);
|
|
if (mi === 0) firstMappingId = existMap.id;
|
|
} else {
|
|
const mRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: custKey, item_id: selectedItem.item_number,
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
});
|
|
if (mi === 0 && !firstMappingId) firstMappingId = mRes.data?.data?.id || null;
|
|
}
|
|
}
|
|
// 초과분 delete
|
|
const toDeleteMaps = existingMaps.filter((m) => !usedExistingIds.has(m.id));
|
|
if (toDeleteMaps.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${MAPPING_TABLE}/delete`, {
|
|
data: toDeleteMaps.map((m: any) => ({ id: m.id })),
|
|
});
|
|
}
|
|
|
|
// 기존 단가 조회
|
|
let existingPriceRows: any[] = [];
|
|
try {
|
|
const existingPrices = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: custKey },
|
|
{ columnName: "item_id", operator: "equals", value: selectedItem.item_number },
|
|
]}, autoFilter: true,
|
|
});
|
|
existingPriceRows = existingPrices.data?.data?.data || existingPrices.data?.data?.rows || [];
|
|
} catch { /* skip */ }
|
|
|
|
// 단가 upsert: 인덱스 기반
|
|
const priceRows = (custPrices[custKey] || []).filter((p) =>
|
|
p.base_price || p.start_date || p.currency_code || p.base_price_type
|
|
);
|
|
const usedPriceIds = new Set<string>();
|
|
for (let pi = 0; pi < priceRows.length; pi++) {
|
|
const price = priceRows[pi];
|
|
const priceData = {
|
|
mapping_id: firstMappingId || editCustData.id,
|
|
customer_id: custKey, item_id: selectedItem.item_number,
|
|
start_date: price.start_date || null, end_date: price.end_date || null,
|
|
currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
|
|
base_price: price.base_price ? Number(price.base_price) : null,
|
|
unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
|
|
discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
|
|
rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
|
|
calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
|
|
};
|
|
const existPrice = existingPriceRows[pi];
|
|
if (existPrice) {
|
|
await apiClient.put(`/table-management/tables/customer_item_prices/edit`, {
|
|
originalData: { id: existPrice.id },
|
|
updatedData: priceData,
|
|
});
|
|
usedPriceIds.add(existPrice.id);
|
|
} else {
|
|
await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
|
|
id: crypto.randomUUID(), ...priceData,
|
|
});
|
|
}
|
|
}
|
|
// 초과분 delete
|
|
const toDeletePrices = existingPriceRows.filter((p) => !usedPriceIds.has(p.id));
|
|
if (toDeletePrices.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/customer_item_prices/delete`, {
|
|
data: toDeletePrices.map((p: any) => ({ id: p.id })),
|
|
});
|
|
}
|
|
} else {
|
|
// 신규 등록
|
|
const mappingRes = await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: custKey, item_id: selectedItem.item_number,
|
|
customer_item_code: mappingRows[0]?.customer_item_code || "",
|
|
customer_item_name: mappingRows[0]?.customer_item_name || "",
|
|
});
|
|
const mappingId = mappingRes.data?.data?.id || null;
|
|
|
|
for (let mi = 1; mi < mappingRows.length; mi++) {
|
|
await apiClient.post(`/table-management/tables/${MAPPING_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
customer_id: custKey, item_id: selectedItem.item_number,
|
|
customer_item_code: mappingRows[mi].customer_item_code || "",
|
|
customer_item_name: mappingRows[mi].customer_item_name || "",
|
|
});
|
|
}
|
|
|
|
const priceRows = (custPrices[custKey] || []).filter((p) =>
|
|
p.base_price || p.start_date || p.currency_code || p.base_price_type
|
|
);
|
|
for (const price of priceRows) {
|
|
await apiClient.post(`/table-management/tables/customer_item_prices/add`, {
|
|
id: crypto.randomUUID(),
|
|
mapping_id: mappingId || "", customer_id: custKey, item_id: selectedItem.item_number,
|
|
start_date: price.start_date || null, end_date: price.end_date || null,
|
|
currency_code: price.currency_code || null, base_price_type: price.base_price_type || null,
|
|
base_price: price.base_price ? Number(price.base_price) : null,
|
|
unit_price: price.calculated_price ? Number(price.calculated_price) : (price.base_price ? Number(price.base_price) : null),
|
|
discount_type: price.discount_type || null, discount_value: price.discount_value ? Number(price.discount_value) : null,
|
|
rounding_type: price.rounding_type || null, rounding_unit_value: price.rounding_unit_value || null,
|
|
calculated_price: price.calculated_price ? Number(price.calculated_price) : null,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
toast.success(isEditingExisting ? "수정되었습니다." : `${selectedCustsForDetail.length}개 거래처가 추가되었습니다.`);
|
|
setCustDetailOpen(false);
|
|
setEditCustData(null);
|
|
setCustCheckedIds(new Set());
|
|
// 우측 새로고침
|
|
const sid = selectedItemId;
|
|
setSelectedItemId(null);
|
|
setTimeout(() => setSelectedItemId(sid), 50);
|
|
} catch (err: any) {
|
|
console.error("거래처 상세 저장 실패:", err.response?.data);
|
|
const detail = err.response?.data?.error?.details;
|
|
const msg = err.response?.data?.message || "저장에 실패했습니다.";
|
|
toast.error(detail ? `${msg} (${typeof detail === "string" ? detail : JSON.stringify(detail)})` : msg);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 프리뷰 코드에서 각 파트별 표시값을 추출
|
|
const parsePreviewIntoParts = (previewCode: string, rule: any) => {
|
|
if (!previewCode || !rule?.parts) return [];
|
|
const sorted = [...rule.parts].sort((a: any, b: any) => a.order - b.order);
|
|
const globalSep = rule.separator || "";
|
|
|
|
const partMeta = sorted.map((part: any, idx: number) => {
|
|
const sep = idx < sorted.length - 1
|
|
? (part.separatorAfter ?? part.autoConfig?.separatorAfter ?? globalSep)
|
|
: "";
|
|
const config = part.autoConfig || {};
|
|
if (part.generationMethod === "manual") return { known: false, marker: "____", sep, isManual: true, partType: part.partType };
|
|
switch (part.partType) {
|
|
case "text": return { known: true, value: config.textValue || "", sep, isManual: false, partType: "text" };
|
|
case "number": return { known: true, value: String(config.numberValue || 1).padStart(config.numberLength || 3, "0"), sep, isManual: false, partType: "number" };
|
|
case "date": {
|
|
const now = new Date();
|
|
const y = String(now.getFullYear()), m = String(now.getMonth() + 1).padStart(2, "0"), d = String(now.getDate()).padStart(2, "0");
|
|
const fmt = config.dateFormat || "YYYYMMDD";
|
|
const map: Record<string, string> = { YYYY: y, YY: y.slice(2), YYYYMM: y + m, YYMM: y.slice(2) + m, YYYYMMDD: y + m + d, YYMMDD: y.slice(2) + m + d };
|
|
return { known: true, value: map[fmt] || y + m + d, sep, isManual: false, partType: "date" };
|
|
}
|
|
default: return { known: false, sep, isManual: false, partType: part.partType };
|
|
}
|
|
});
|
|
|
|
let remaining = previewCode;
|
|
const results: { value: string; isManual: boolean; separator: string }[] = [];
|
|
|
|
for (let i = 0; i < partMeta.length; i++) {
|
|
const meta = partMeta[i];
|
|
const nextMeta = i < partMeta.length - 1 ? partMeta[i + 1] : null;
|
|
|
|
if (meta.isManual) {
|
|
const markerIdx = remaining.indexOf("____");
|
|
if (markerIdx >= 0) {
|
|
remaining = remaining.substring(markerIdx + 4);
|
|
if (meta.sep && remaining.startsWith(meta.sep)) remaining = remaining.substring(meta.sep.length);
|
|
}
|
|
results.push({ value: "", isManual: true, separator: meta.sep });
|
|
continue;
|
|
}
|
|
|
|
if (meta.known) {
|
|
const valIdx = remaining.indexOf(meta.value);
|
|
if (valIdx >= 0) {
|
|
remaining = remaining.substring(valIdx + meta.value.length);
|
|
if (meta.sep && remaining.startsWith(meta.sep)) remaining = remaining.substring(meta.sep.length);
|
|
}
|
|
results.push({ value: meta.value, isManual: false, separator: meta.sep });
|
|
} else {
|
|
let endIdx = remaining.length;
|
|
if (meta.sep) {
|
|
if (nextMeta) {
|
|
if (nextMeta.known && nextMeta.value) {
|
|
const patIdx = remaining.indexOf(meta.sep + nextMeta.value);
|
|
if (patIdx >= 0) endIdx = patIdx;
|
|
} else if (nextMeta.isManual) {
|
|
const patIdx = remaining.indexOf(meta.sep + "____");
|
|
if (patIdx >= 0) endIdx = patIdx;
|
|
} else {
|
|
const sepIdx = remaining.indexOf(meta.sep);
|
|
if (sepIdx >= 0) endIdx = sepIdx;
|
|
}
|
|
}
|
|
} else if (nextMeta) {
|
|
if (nextMeta.known && nextMeta.value) {
|
|
const valIdx = remaining.indexOf(nextMeta.value);
|
|
if (valIdx >= 0) endIdx = valIdx;
|
|
} else if (nextMeta.isManual) {
|
|
const markerIdx = remaining.indexOf("____");
|
|
if (markerIdx >= 0) endIdx = markerIdx;
|
|
}
|
|
}
|
|
const extracted = remaining.substring(0, endIdx);
|
|
remaining = remaining.substring(endIdx);
|
|
if (meta.sep && remaining.startsWith(meta.sep)) remaining = remaining.substring(meta.sep.length);
|
|
results.push({ value: extracted, isManual: false, separator: meta.sep });
|
|
}
|
|
}
|
|
return results;
|
|
};
|
|
|
|
// 파트 값으로부터 전체 코드 조합
|
|
const buildCodeFromParts = (parts: { value: string; isManual: boolean; separator: string }[], manualVal: string) => {
|
|
return parts.map((p, idx) => {
|
|
const val = p.isManual ? manualVal : p.value;
|
|
const sep = idx < parts.length - 1 ? p.separator : "";
|
|
return val + sep;
|
|
}).join("");
|
|
};
|
|
|
|
// 채번 미리보기 로드
|
|
const loadNumberingPreview = async (currentFormData?: Record<string, any>, currentManualValue?: string) => {
|
|
try {
|
|
setIsNumberingLoading(true);
|
|
|
|
let rule = numberingRule;
|
|
if (!rule) {
|
|
const ruleRes = await apiClient.get(`/numbering-rules/by-column/${ITEM_TABLE}/item_number`);
|
|
rule = ruleRes.data?.data;
|
|
if (rule) {
|
|
setNumberingRule(rule);
|
|
numberingRuleIdRef.current = rule.ruleId;
|
|
}
|
|
}
|
|
|
|
if (!rule?.ruleId) return { code: "", parts: [] as { value: string; isManual: boolean; separator: string }[] };
|
|
|
|
const previewRes = await apiClient.post(`/numbering-rules/${rule.ruleId}/preview`, {
|
|
formData: currentFormData || {},
|
|
manualInputValue: currentManualValue || undefined,
|
|
});
|
|
|
|
const generatedCode = previewRes.data?.data?.generatedCode || "";
|
|
const parts = parsePreviewIntoParts(generatedCode, rule);
|
|
setNumberingParts(parts);
|
|
return { code: generatedCode, parts };
|
|
} catch { /* 채번 규칙 없으면 무시 */ }
|
|
finally {
|
|
setIsNumberingLoading(false);
|
|
}
|
|
return { code: "", parts: [] as { value: string; isManual: boolean; separator: string }[] };
|
|
};
|
|
|
|
// 품목 등록 모달 열기
|
|
const openRegisterModal = async () => {
|
|
setEditItemForm({});
|
|
setManualInputValue("");
|
|
setNumberingParts([]);
|
|
setIsEditMode(false);
|
|
setEditId(null);
|
|
setEditItemOpen(true);
|
|
const result = await loadNumberingPreview({});
|
|
if (result.code) {
|
|
const hasManual = result.parts.some(p => p.isManual);
|
|
const displayCode = hasManual ? buildCodeFromParts(result.parts, "") : result.code;
|
|
setEditItemForm(prev => ({ ...prev, item_number: displayCode }));
|
|
}
|
|
};
|
|
|
|
// 품목 수정 모달 열기
|
|
const openEditItem = (item?: any) => {
|
|
const target = item || selectedItem;
|
|
if (!target) return;
|
|
const raw = rawItems.find((r) => r.id === target.id) || target;
|
|
setEditItemForm({ ...raw });
|
|
setManualInputValue("");
|
|
setNumberingParts([]);
|
|
setIsEditMode(true);
|
|
setEditId(target.id);
|
|
setEditItemOpen(true);
|
|
};
|
|
|
|
// 카테고리 변경 시 채번 preview 재호출
|
|
useEffect(() => {
|
|
if (isEditMode || !editItemOpen || !numberingRuleIdRef.current) return;
|
|
|
|
const hasCategoryPart = numberingRule?.parts?.some(
|
|
(p: any) => p.partType === "category" && p.generationMethod === "auto"
|
|
);
|
|
if (!hasCategoryPart) return;
|
|
|
|
const timer = setTimeout(async () => {
|
|
const result = await loadNumberingPreview(editItemForm, manualInputValue);
|
|
if (result.parts.length > 0) {
|
|
setEditItemForm(prev => ({ ...prev, item_number: buildCodeFromParts(result.parts, manualInputValue) }));
|
|
}
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timer);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [...CATEGORY_COLUMNS_FOR_MODAL.map(col => editItemForm[col])]);
|
|
|
|
// 수동 입력값 변경 시 preview 갱신
|
|
useEffect(() => {
|
|
if (isEditMode || !editItemOpen || !numberingRuleIdRef.current) return;
|
|
if (!numberingParts.some(p => p.isManual)) return;
|
|
|
|
const timer = setTimeout(async () => {
|
|
const result = await loadNumberingPreview(editItemForm, manualInputValue);
|
|
if (result.parts.length > 0) {
|
|
setEditItemForm(prev => ({ ...prev, item_number: buildCodeFromParts(result.parts, manualInputValue) }));
|
|
}
|
|
}, 500);
|
|
|
|
return () => clearTimeout(timer);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [manualInputValue]);
|
|
|
|
// 품목 저장 (등록 + 수정 통합)
|
|
const handleEditSave = async () => {
|
|
if (!editItemForm.item_name) {
|
|
toast.error("품명은 필수 입력이에요.");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
if (isEditMode && editId) {
|
|
const { id, created_date, updated_date, writer, company_code, ...updateFields } = editItemForm;
|
|
await apiClient.put(`/table-management/tables/${ITEM_TABLE}/edit`, {
|
|
originalData: { id: editId },
|
|
updatedData: updateFields,
|
|
});
|
|
toast.success("수정되었어요.");
|
|
} else {
|
|
// 신규 등록: allocateCode 호출하여 실제 순번 확보
|
|
let finalItemNumber = editItemForm.item_number || "";
|
|
|
|
if (numberingRuleIdRef.current) {
|
|
try {
|
|
const hasManual = numberingParts.some(p => p.isManual);
|
|
const userInputCode = hasManual && manualInputValue
|
|
? manualInputValue
|
|
: undefined;
|
|
|
|
const allocRes = await apiClient.post(
|
|
`/numbering-rules/${numberingRuleIdRef.current}/allocate`,
|
|
{ formData: editItemForm, userInputCode }
|
|
);
|
|
|
|
if (allocRes.data?.success && allocRes.data?.data?.generatedCode) {
|
|
finalItemNumber = allocRes.data.data.generatedCode;
|
|
}
|
|
} catch (err) {
|
|
console.error("채번 할당 실패:", err);
|
|
toast.error("품목코드 할당에 실패했어요. 다시 시도해주세요.");
|
|
setSaving(false);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const { id, created_date, updated_date, ...insertFields } = editItemForm;
|
|
await apiClient.post(`/table-management/tables/${ITEM_TABLE}/add`, {
|
|
id: crypto.randomUUID(),
|
|
...insertFields,
|
|
item_number: finalItemNumber,
|
|
});
|
|
toast.success("등록되었어요.");
|
|
}
|
|
setEditItemOpen(false);
|
|
fetchItems();
|
|
} catch (err: any) {
|
|
console.error("저장 실패:", err);
|
|
toast.error(err.response?.data?.message || "저장에 실패했어요.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 우측: 거래처 매핑 해제 (소프트 삭제 — item_id를 null 처리)
|
|
const handleCustomerMappingDelete = async () => {
|
|
if (customerCheckedIds.length === 0) return;
|
|
const ok = await confirm(`선택한 ${customerCheckedIds.length}개 거래처의 연결을 해제하시겠습니까?`, {
|
|
description: "해당 거래처의 품목 연결이 해제됩니다. (데이터는 유지)",
|
|
variant: "destructive", confirmText: "해제",
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
const customerCodes = customerCheckedIds.map((mid) => {
|
|
const group = Object.values(priceGroups).find((g) => g.master.id === mid);
|
|
return group?.master.customer_id || group?.master.customer_code || "";
|
|
}).filter(Boolean);
|
|
|
|
for (const custCode of customerCodes) {
|
|
// 해당 거래처의 모든 매핑 조회 → item_id null 처리
|
|
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: selectedItem!.item_number },
|
|
{ columnName: "customer_id", operator: "equals", value: custCode },
|
|
]}, autoFilter: true,
|
|
});
|
|
const allMappings = mapRes.data?.data?.data || mapRes.data?.data?.rows || [];
|
|
for (const m of allMappings) {
|
|
await apiClient.put(`/table-management/tables/${MAPPING_TABLE}/edit`, {
|
|
originalData: { id: m.id },
|
|
updatedData: { item_id: null },
|
|
});
|
|
}
|
|
|
|
// 해당 거래처의 모든 단가 조회 → item_id null 처리
|
|
try {
|
|
const priceRes = await apiClient.post(`/table-management/tables/customer_item_prices/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: { enabled: true, filters: [
|
|
{ columnName: "item_id", operator: "equals", value: selectedItem!.item_number },
|
|
{ columnName: "customer_id", operator: "equals", value: custCode },
|
|
]}, autoFilter: true,
|
|
});
|
|
const prices = priceRes.data?.data?.data || priceRes.data?.data?.rows || [];
|
|
for (const p of prices) {
|
|
await apiClient.put(`/table-management/tables/customer_item_prices/edit`, {
|
|
originalData: { id: p.id },
|
|
updatedData: { item_id: null },
|
|
});
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
toast.success(`${customerCheckedIds.length}개 거래처의 연결이 해제되었습니다.`);
|
|
setCustomerCheckedIds([]);
|
|
const sid = selectedItemId;
|
|
setSelectedItemId(null);
|
|
setTimeout(() => setSelectedItemId(sid), 50);
|
|
} catch {
|
|
toast.error("연결 해제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 엑셀 다운로드
|
|
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("다운로드 완료");
|
|
};
|
|
|
|
// EDataTable 컬럼 정의 (판매품목)
|
|
const itemColumns: EDataTableColumn[] = [
|
|
{ key: "item_number", label: "품번", width: "w-[110px]" },
|
|
{ key: "item_name", label: "품명", minWidth: "min-w-[130px]" },
|
|
{ key: "size", label: "규격", width: "w-[80px]" },
|
|
{ key: "unit", label: "단위", width: "w-[60px]" },
|
|
{ key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true },
|
|
{ key: "selling_price", label: "판매가격", width: "w-[90px]", align: "right", formatNumber: true },
|
|
{ key: "currency_code", label: "통화", width: "w-[50px]" },
|
|
{ key: "status", label: "상태", width: "w-[60px]" },
|
|
];
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-4">
|
|
{/* 검색 필터 (DynamicSearchFilter) */}
|
|
<DynamicSearchFilter
|
|
tableName={ITEM_TABLE}
|
|
filterId="c16-sales-item"
|
|
onFilterChange={setSearchFilters}
|
|
dataCount={items.length}
|
|
externalFilterConfig={ts.filterConfig}
|
|
/>
|
|
|
|
{/* 액션 버튼 영역 */}
|
|
<div className="flex items-center gap-2 px-4 shrink-0">
|
|
<div className="flex gap-1.5 ml-auto">
|
|
<Button
|
|
variant="outline" size="sm" className="h-8" disabled={excelDetecting}
|
|
onClick={async () => {
|
|
setExcelDetecting(true);
|
|
try {
|
|
const result = await autoDetectMultiTableConfig(ITEM_TABLE);
|
|
if (result.success && result.data) {
|
|
setExcelChainConfig(result.data);
|
|
setExcelUploadOpen(true);
|
|
} else {
|
|
toast.error(result.message || "테이블 구조 분석 실패");
|
|
}
|
|
} catch { toast.error("테이블 구조 분석 중 오류"); } finally { setExcelDetecting(false); }
|
|
}}
|
|
>
|
|
{excelDetecting ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <FileSpreadsheet className="w-3.5 h-3.5 mr-1" />}
|
|
엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="h-8" 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-background shadow-sm">
|
|
<ResizablePanelGroup direction="horizontal">
|
|
|
|
{/* 좌측: 판매품목 목록 */}
|
|
<ResizablePanel defaultSize={55} minSize={30}>
|
|
<div className="flex flex-col h-full">
|
|
{/* 패널 헤더 */}
|
|
<div className="flex items-center justify-between px-4 h-[42px] border-b bg-muted shrink-0">
|
|
<div className="flex items-center gap-2.5">
|
|
<span className="text-[13px] font-bold">판매품목 목록</span>
|
|
<span className="text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
|
|
{itemCount}건
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<Button size="sm" onClick={openRegisterModal}>
|
|
<Plus className="w-3.5 h-3.5 mr-1" /> 품목 추가
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={!selectedItemId} onClick={() => openEditItem()}>
|
|
<Pencil className="w-3.5 h-3.5 mr-1" /> 수정
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={() => ts.setOpen(true)}>
|
|
<Settings2 className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 거래처 테이블 */}
|
|
<EDataTable
|
|
columns={itemColumns}
|
|
data={ts.groupData(items)}
|
|
rowKey={(row) => row.id}
|
|
loading={itemLoading}
|
|
emptyMessage="등록된 판매품목이 없어요"
|
|
selectedId={selectedItemId}
|
|
onSelect={(id) => setSelectedItemId(id)}
|
|
onRowDoubleClick={(row) => openEditItem(row)}
|
|
showRowNumber
|
|
showPagination
|
|
defaultPageSize={20}
|
|
draggableColumns={false}
|
|
columnOrderKey="c16-sales-item"
|
|
/>
|
|
</div>
|
|
</ResizablePanel>
|
|
|
|
<ResizableHandle withHandle />
|
|
|
|
{/* 우측: 디테일 패널 */}
|
|
<ResizablePanel defaultSize={45} minSize={25}>
|
|
<div className="flex flex-col h-full">
|
|
{!selectedItemId ? (
|
|
/* 빈 상태 */
|
|
<div className="flex-1 flex items-center justify-center p-5">
|
|
<div className="flex flex-col items-center justify-center text-center border-2 border-dashed border-border rounded-lg px-10 py-16">
|
|
<Package className="w-12 h-12 text-muted-foreground/40 mb-4" />
|
|
<div className="text-sm font-semibold text-muted-foreground mb-1.5">품목을 선택해주세요</div>
|
|
<div className="text-xs text-muted-foreground">좌측에서 품목을 선택하면 상세 정보가 표시돼요</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 거래처별 단가 헤더 */}
|
|
<div className="flex items-center justify-between h-[42px] border-b bg-muted shrink-0 pr-3">
|
|
<div className="flex items-center gap-2.5 px-4">
|
|
<Users className="w-3.5 h-3.5 text-muted-foreground" />
|
|
<span className="text-xs font-semibold">거래처별 단가</span>
|
|
{Object.keys(priceGroups).length > 0 && (
|
|
<Badge variant="secondary" className="ml-0.5 text-[10px] px-1.5 py-0">{Object.keys(priceGroups).length}</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => { setCustCheckedIds(new Set()); setCustSelectOpen(true); searchCustomers(); }}
|
|
>
|
|
<Plus className="w-3.5 h-3.5" /> 거래처 추가
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
disabled={customerCheckedIds.length === 0}
|
|
onClick={handleCustomerMappingDelete}
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" /> 삭제
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 거래처 테이블 */}
|
|
<div className="flex-1 min-h-0 overflow-auto pt-px">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted h-10">
|
|
<TableHead className="w-[40px] text-center px-2">
|
|
<input
|
|
type="checkbox"
|
|
className="rounded"
|
|
checked={customerItems.length > 0 && customerCheckedIds.length === customerItems.length}
|
|
onChange={(e) => setCustomerCheckedIds(e.target.checked ? customerItems.map((c) => c.id) : [])}
|
|
/>
|
|
</TableHead>
|
|
<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-[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-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">할인유형</TableHead>
|
|
<TableHead className="w-[60px] 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>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{customerLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={11} className="text-center py-8">
|
|
<Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : Object.keys(priceGroups).length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
|
|
등록된 거래처가 없어요
|
|
</TableCell>
|
|
</TableRow>
|
|
) : Object.entries(priceGroups).map(([custKey, group]) => {
|
|
const isExpanded = expandedItems.has(custKey);
|
|
const m = group.master;
|
|
const isChecked = customerCheckedIds.includes(m.id);
|
|
return (
|
|
<React.Fragment key={custKey}>
|
|
{/* 마스터 행 */}
|
|
<TableRow
|
|
className={cn(
|
|
"cursor-pointer border-l-[3px] border-l-transparent h-[41px]",
|
|
isChecked && "bg-primary/5 border-l-primary"
|
|
)}
|
|
onClick={() => {
|
|
setExpandedItems((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(custKey)) next.delete(custKey); else next.add(custKey);
|
|
return next;
|
|
});
|
|
}}
|
|
onDoubleClick={() => openEditCust(m)}
|
|
>
|
|
<TableCell
|
|
className="text-center px-2"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setCustomerCheckedIds((prev) =>
|
|
prev.includes(m.id) ? prev.filter((id) => id !== m.id) : [...prev, m.id]
|
|
);
|
|
}}
|
|
>
|
|
<input type="checkbox" className="rounded" checked={isChecked} readOnly />
|
|
</TableCell>
|
|
<TableCell className="text-[13px] font-mono text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
{isExpanded
|
|
? <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
: <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
|
|
}
|
|
{m.customer_code}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.customer_name}</TableCell>
|
|
<TableCell className="text-[13px]">{m.customer_item_code}</TableCell>
|
|
<TableCell className="text-[13px]">{m.customer_item_name}</TableCell>
|
|
<TableCell className="text-[13px]">{m.base_price_type}</TableCell>
|
|
<TableCell className="text-[13px] text-right">
|
|
{m.base_price ? Number(m.base_price).toLocaleString() : ""}
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.discount_type}</TableCell>
|
|
<TableCell className="text-[13px] text-right">{m.discount_value ? Number(m.discount_value).toLocaleString() : ""}</TableCell>
|
|
<TableCell className="text-[13px] text-right font-semibold">
|
|
{m.calculated_price ? Number(m.calculated_price).toLocaleString() : ""}
|
|
</TableCell>
|
|
<TableCell className="text-[13px]">{m.currency_code}</TableCell>
|
|
</TableRow>
|
|
|
|
{/* 현재 단가 카드 (펼쳤을 때) */}
|
|
{isExpanded && (() => {
|
|
const cp = group.details.find((p) => p.is_current) || group.details[0];
|
|
if (!cp) return (
|
|
<TableRow className="border-l-[3px] border-l-primary/30">
|
|
<TableCell colSpan={11} className="py-3 px-4 text-xs text-muted-foreground">등록된 단가가 없어요</TableCell>
|
|
</TableRow>
|
|
);
|
|
return (
|
|
<TableRow className="border-l-[3px] border-l-primary/30">
|
|
<TableCell colSpan={11} className="px-4 py-3">
|
|
<div className="border border-primary/20 rounded-lg bg-card overflow-hidden">
|
|
{/* 카드 헤더 */}
|
|
<div className="flex items-center justify-between px-4 py-2 bg-primary/[0.04] border-b border-primary/10">
|
|
<div className="flex items-center gap-2">
|
|
<Coins className="w-3.5 h-3.5 text-primary" />
|
|
<span className="text-xs font-semibold">적용 단가</span>
|
|
<Badge variant="secondary" className="text-[9px] px-1.5 py-0 bg-primary/10 text-primary">현재</Badge>
|
|
</div>
|
|
{group.details.length > 1 && (
|
|
<span className="text-[10px] text-muted-foreground">전체 {group.details.length}건 중</span>
|
|
)}
|
|
</div>
|
|
{/* 카드 내용 */}
|
|
<div className="px-5 py-3.5 flex items-end gap-0 text-[13px]">
|
|
<div className="flex flex-col pr-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기간</span>
|
|
<span className="font-mono text-muted-foreground text-xs">
|
|
{cp.start_date ? String(cp.start_date).split("T")[0] : "—"} ~ {cp.end_date ? String(cp.end_date).split("T")[0] : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준유형</span>
|
|
<span>{cp.base_price_type_label || "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">기준가</span>
|
|
<span className="font-mono font-medium">{cp.base_price ? Number(cp.base_price).toLocaleString() : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인유형</span>
|
|
<span>{cp.discount_type_label && cp.discount_type_label !== "할인없음" ? cp.discount_type_label : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5 border-r border-border/30">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">할인값</span>
|
|
<span className="font-mono">{cp.discount_value ? Number(cp.discount_value).toLocaleString() : "-"}</span>
|
|
</div>
|
|
<div className="flex flex-col px-5">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">단수처리</span>
|
|
<span>
|
|
{cp.rounding_unit_value
|
|
? (priceCategoryOptions["rounding_unit_value"]?.find((o) => o.code === cp.rounding_unit_value)?.label || cp.rounding_unit_value)
|
|
: "-"}
|
|
</span>
|
|
</div>
|
|
<span className="text-primary/50 px-4 pb-0.5 text-lg">→</span>
|
|
<div className="flex flex-col pl-1">
|
|
<span className="text-[10px] text-muted-foreground/50 font-medium mb-1">계산단가</span>
|
|
<span className="text-base font-bold font-mono text-foreground">
|
|
{(cp.calculated_price || cp.unit_price) ? Number(cp.calculated_price || cp.unit_price).toLocaleString() : "-"}
|
|
<span className="text-xs font-normal text-muted-foreground ml-1.5">{cp.currency_label}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
})()}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizablePanelGroup>
|
|
</div>
|
|
|
|
{/* ── 품목 등록/수정 모달 ── */}
|
|
<Dialog open={editItemOpen} onOpenChange={setEditItemOpen}>
|
|
<DialogContent className="sm:max-w-[600px] w-[95vw] max-h-[90vh] flex flex-col p-0 overflow-hidden">
|
|
<DialogHeader className="shrink-0 px-6 pt-5 pb-3 border-b">
|
|
<DialogTitle>{isEditMode ? "품목 수정" : "품목 등록"}</DialogTitle>
|
|
<DialogDescription>
|
|
{isEditMode ? "품목 정보를 수정해요." : "새로운 품목을 등록해요."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="grid grid-cols-2 gap-4 p-6">
|
|
{FORM_FIELDS.map((field) => (
|
|
<div
|
|
key={field.key}
|
|
className={cn("space-y-1.5", (field.type === "textarea" || field.type === "image") && "col-span-2")}
|
|
>
|
|
<Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
|
{field.label}
|
|
{field.required && <span className="text-destructive ml-1">*</span>}
|
|
</Label>
|
|
{field.type === "numbering" ? (
|
|
isEditMode ? (
|
|
<Input
|
|
value={editItemForm[field.key] || ""}
|
|
disabled
|
|
className="h-9 bg-muted"
|
|
/>
|
|
) : isNumberingLoading && numberingParts.length === 0 ? (
|
|
<div className="flex h-9 items-center gap-2 rounded-md border px-3">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
|
<span className="text-sm text-muted-foreground">생성 중...</span>
|
|
</div>
|
|
) : numberingParts.some(p => p.isManual) ? (
|
|
<div className="flex h-9 items-center rounded-md border border-input">
|
|
{numberingParts.map((part, idx) => {
|
|
const isFirst = idx === 0;
|
|
const isLast = idx === numberingParts.length - 1;
|
|
if (part.isManual) {
|
|
return (
|
|
<React.Fragment key={idx}>
|
|
<input
|
|
type="text"
|
|
value={manualInputValue}
|
|
onChange={(e) => {
|
|
const val = e.target.value;
|
|
setManualInputValue(val);
|
|
setEditItemForm(prev => ({
|
|
...prev,
|
|
item_number: buildCodeFromParts(numberingParts, val),
|
|
}));
|
|
}}
|
|
placeholder="입력"
|
|
className="h-full min-w-[60px] flex-1 border-0 bg-transparent px-2 text-sm outline-none"
|
|
/>
|
|
{part.separator && !isLast && (
|
|
<span className="text-muted-foreground text-sm">{part.separator}</span>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
return (
|
|
<React.Fragment key={idx}>
|
|
<span className={cn(
|
|
"flex h-full items-center bg-muted px-2 text-sm text-muted-foreground whitespace-nowrap",
|
|
isFirst && "rounded-l-[5px]",
|
|
isLast && "rounded-r-[5px]",
|
|
)}>
|
|
{part.value}
|
|
</span>
|
|
{part.separator && !isLast && (
|
|
<span className="text-muted-foreground text-sm">{part.separator}</span>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<Input
|
|
value={editItemForm[field.key] || ""}
|
|
disabled
|
|
placeholder="자동 채번"
|
|
className="h-9 bg-muted"
|
|
/>
|
|
)
|
|
) : field.type === "image" ? (
|
|
<ImageUpload
|
|
value={editItemForm[field.key] || ""}
|
|
onChange={(v) => setEditItemForm((prev) => ({ ...prev, [field.key]: v }))}
|
|
tableName={ITEM_TABLE}
|
|
recordId={editItemForm.id || ""}
|
|
columnName={field.key}
|
|
height="h-32"
|
|
/>
|
|
) : field.type === "multi-category" ? (
|
|
<MultiCategoryCombobox
|
|
options={categoryOptions[field.key] || []}
|
|
value={editItemForm[field.key] || ""}
|
|
onChange={(v) => setEditItemForm((prev) => ({ ...prev, [field.key]: v }))}
|
|
placeholder={`${field.label} 선택`}
|
|
/>
|
|
) : field.type === "category" ? (
|
|
<CategoryCombobox
|
|
options={categoryOptions[field.key] || []}
|
|
value={editItemForm[field.key] || ""}
|
|
onChange={(v) => setEditItemForm((prev) => ({ ...prev, [field.key]: v }))}
|
|
placeholder={`${field.label} 선택`}
|
|
/>
|
|
) : field.type === "textarea" ? (
|
|
<Textarea
|
|
value={editItemForm[field.key] || ""}
|
|
onChange={(e) => setEditItemForm((prev) => ({ ...prev, [field.key]: e.target.value }))}
|
|
placeholder={field.label}
|
|
rows={3}
|
|
/>
|
|
) : ["selling_price", "standard_price"].includes(field.key) ? (
|
|
<Input
|
|
value={editItemForm[field.key] ? Number(String(editItemForm[field.key]).replace(/,/g, "")).toLocaleString() : ""}
|
|
onChange={(e) => {
|
|
const raw = e.target.value.replace(/[^\d.-]/g, "");
|
|
setEditItemForm((prev) => ({ ...prev, [field.key]: raw }));
|
|
}}
|
|
placeholder={field.placeholder || field.label}
|
|
className="h-9 text-right"
|
|
/>
|
|
) : (
|
|
<Input
|
|
value={editItemForm[field.key] || ""}
|
|
onChange={(e) => setEditItemForm((prev) => ({ ...prev, [field.key]: e.target.value }))}
|
|
placeholder={field.placeholder || (field.disabled ? "자동 채번" : field.label)}
|
|
disabled={field.disabled && !isEditMode}
|
|
className="h-9"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="shrink-0 border-t px-6 py-3">
|
|
<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={custSelectOpen} onOpenChange={setCustSelectOpen}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>거래처 검색 및 추가</DialogTitle>
|
|
<DialogDescription>품목에 추가할 거래처를 선택해주세요.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3 py-2">
|
|
{/* 검색바 */}
|
|
<div className="flex gap-2">
|
|
<Input
|
|
placeholder="거래처명으로 검색해주세요"
|
|
value={custSearchKeyword}
|
|
onChange={(e) => setCustSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && searchCustomers()}
|
|
className="h-9 flex-1"
|
|
/>
|
|
<Button size="sm" onClick={searchCustomers} disabled={custSearchLoading} className="h-9">
|
|
{custSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4" /> 조회</>}
|
|
</Button>
|
|
</div>
|
|
{/* 검색 결과 테이블 */}
|
|
<div className="overflow-auto max-h-[350px] border rounded-lg">
|
|
<Table noWrapper>
|
|
<TableHeader className="sticky top-0 z-10">
|
|
<TableRow className="bg-muted hover:bg-muted">
|
|
<TableHead className="sticky top-0 bg-card w-[40px] text-center">
|
|
<Checkbox
|
|
checked={custSearchResults.length > 0 && custCheckedIds.size === custSearchResults.length}
|
|
onCheckedChange={(checked) => {
|
|
if (checked === true) setCustCheckedIds(new Set(custSearchResults.map((c) => c.id)));
|
|
else setCustCheckedIds(new Set());
|
|
}}
|
|
/>
|
|
</TableHead>
|
|
<TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">거래처코드</TableHead>
|
|
<TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">거래처명</TableHead>
|
|
<TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">거래유형</TableHead>
|
|
<TableHead className="sticky top-0 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">담당자</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{custSearchResults.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center text-muted-foreground py-8 text-sm">
|
|
검색 결과가 없어요
|
|
</TableCell>
|
|
</TableRow>
|
|
) : custSearchResults.map((c) => (
|
|
<TableRow
|
|
key={c.id}
|
|
className={cn("cursor-pointer", custCheckedIds.has(c.id) && "bg-primary/[0.08]")}
|
|
onClick={() => setCustCheckedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(c.id)) next.delete(c.id); else next.add(c.id);
|
|
return next;
|
|
})}
|
|
>
|
|
<TableCell className="text-center">
|
|
<Checkbox
|
|
checked={custCheckedIds.has(c.id)}
|
|
onCheckedChange={(checked) => {
|
|
setCustCheckedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (checked === true) next.add(c.id); else next.delete(c.id);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>
|
|
<TableCell className="text-sm font-medium text-foreground">{c.customer_name}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{c.division}</TableCell>
|
|
<TableCell className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex items-center gap-2 w-full justify-between">
|
|
<span className="text-sm text-muted-foreground">{custCheckedIds.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => setCustSelectOpen(false)}>취소</Button>
|
|
<Button onClick={goToCustDetail} disabled={custCheckedIds.size === 0}>
|
|
<Plus className="w-4 h-4" />
|
|
{custCheckedIds.size}개 다음
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* ── 거래처 상세 입력/수정 모달 ── */}
|
|
<Dialog open={custDetailOpen} onOpenChange={setCustDetailOpen}>
|
|
<DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
거래처 상세정보 {editCustData ? "수정" : "입력"} — {selectedItem?.item_name || ""}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{editCustData ? "거래처 품번/품명과 기간별 단가를 수정해주세요." : "선택한 거래처의 품번/품명과 기간별 단가를 설정해주세요."}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6 py-2 flex-1 overflow-y-auto">
|
|
{selectedCustsForDetail.map((cust, idx) => {
|
|
const custKey = cust.customer_code || cust.id;
|
|
const mappingRows = custMappings[custKey] || [];
|
|
const prices = custPrices[custKey] || [];
|
|
|
|
return (
|
|
<div key={custKey} className="border rounded-lg overflow-hidden">
|
|
{/* 거래처 헤더 */}
|
|
<div className="flex items-center gap-2.5 px-4 py-3 bg-muted border-b">
|
|
<span className="text-[13px] font-bold text-foreground">{idx + 1}. {cust.customer_name || custKey}</span>
|
|
<span className="text-[11px] font-mono text-muted-foreground bg-muted-foreground/10 px-2 py-0.5 rounded-full">
|
|
{custKey}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex gap-4 p-4 bg-card items-stretch">
|
|
{/* 좌: 거래처 품번/품명 */}
|
|
<div className="flex-1 border rounded-lg p-4 bg-muted/50 flex flex-col">
|
|
<div className="flex items-center justify-between mb-3 shrink-0">
|
|
<span className="text-sm font-semibold text-foreground">거래처 품번/품명 관리</span>
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addMappingRow(custKey)}>
|
|
<Plus className="h-3 w-3" />
|
|
품번 추가
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2 min-h-[200px] max-h-[350px] overflow-y-auto flex-1">
|
|
{mappingRows.length === 0 ? (
|
|
<div className="text-xs text-muted-foreground py-2">입력된 거래처 품번이 없어요</div>
|
|
) : (
|
|
<DndContext
|
|
sensors={dndSensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(e) => handleMappingDragEnd(custKey, e)}
|
|
>
|
|
<SortableContext items={mappingRows.map((r) => r._id)} strategy={verticalListSortingStrategy}>
|
|
{mappingRows.map((mRow) => (
|
|
<SortableMappingRow key={mRow._id} id={mRow._id}>
|
|
<Input
|
|
value={mRow.customer_item_code}
|
|
onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_code", e.target.value)}
|
|
placeholder="거래처 품번"
|
|
className="h-8 text-sm flex-1"
|
|
/>
|
|
<Input
|
|
value={mRow.customer_item_name}
|
|
onChange={(e) => updateMappingRow(custKey, mRow._id, "customer_item_name", e.target.value)}
|
|
placeholder="거래처 품명"
|
|
className="h-8 text-sm flex-1"
|
|
/>
|
|
<Button
|
|
variant="ghost" size="sm"
|
|
className="h-7 w-7 p-0 text-destructive shrink-0"
|
|
onClick={() => removeMappingRow(custKey, mRow._id)}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</SortableMappingRow>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우: 기간별 단가 */}
|
|
<div className="flex-1 border rounded-lg p-4 bg-muted/30 flex flex-col">
|
|
<div className="flex items-center justify-between mb-3 shrink-0">
|
|
<span className="text-sm font-semibold text-foreground">기간별 단가 설정</span>
|
|
<Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => addPriceRow(custKey)}>
|
|
<Plus className="h-3 w-3" />
|
|
단가 추가
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-3 flex-1 overflow-y-auto max-h-[350px]">
|
|
{prices.map((price, pIdx) => (
|
|
<div key={price._id} className="border rounded-lg bg-background overflow-hidden">
|
|
<div
|
|
className="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-muted/50 transition-colors"
|
|
onClick={() => setCollapsedPriceCards((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(price._id)) next.delete(price._id); else next.add(price._id);
|
|
return next;
|
|
})}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{collapsedPriceCards.has(price._id)
|
|
? <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
|
|
: <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
|
|
}
|
|
<span className="text-xs font-medium text-muted-foreground">단가 {pIdx + 1}</span>
|
|
{collapsedPriceCards.has(price._id) && price.calculated_price && (
|
|
<span className="text-xs text-muted-foreground ml-2">
|
|
{price.start_date || "—"} ~ {price.end_date || "—"} · <span className="font-mono font-bold text-foreground">{Number(price.calculated_price).toLocaleString()}</span> {priceCategoryOptions["currency_code"]?.find((o) => o.code === price.currency_code)?.label || ""}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{prices.length > 1 && (
|
|
<Button
|
|
variant="ghost" size="sm"
|
|
className="h-6 w-6 p-0 text-destructive"
|
|
onClick={(e) => { e.stopPropagation(); removePriceRow(custKey, price._id); }}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{!collapsedPriceCards.has(price._id) && <div className="px-3 pb-3 space-y-2">
|
|
{/* 기간 + 통화 */}
|
|
<div className="flex gap-2 items-center">
|
|
<Input
|
|
type="date"
|
|
value={price.start_date}
|
|
onChange={(e) => {
|
|
const v = e.target.value;
|
|
updatePriceRow(custKey, price._id, "start_date", v);
|
|
if (price.end_date && v > price.end_date) {
|
|
updatePriceRow(custKey, price._id, "end_date", v);
|
|
}
|
|
}}
|
|
max={price.end_date || undefined}
|
|
className="h-8 text-xs flex-1"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">~</span>
|
|
<Input
|
|
type="date"
|
|
value={price.end_date}
|
|
onChange={(e) => updatePriceRow(custKey, price._id, "end_date", e.target.value)}
|
|
min={price.start_date || undefined}
|
|
className="h-8 text-xs flex-1"
|
|
/>
|
|
<div className="w-[80px]">
|
|
<Select
|
|
value={price.currency_code}
|
|
onValueChange={(v) => updatePriceRow(custKey, price._id, "currency_code", v)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="통화" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["currency_code"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
{/* 기준유형 + 기준가 */}
|
|
<div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
|
|
<Select
|
|
value={price.base_price_type}
|
|
onValueChange={(v) => updatePriceRow(custKey, price._id, "base_price_type", v)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준유형" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["base_price_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={price.base_price ? Number(price.base_price).toLocaleString() : ""}
|
|
onChange={(e) => {
|
|
const raw = e.target.value.replace(/[^\d.-]/g, "");
|
|
updatePriceRow(custKey, price._id, "base_price", raw);
|
|
}}
|
|
className="h-8 text-xs text-right col-span-3"
|
|
placeholder="기준가"
|
|
/>
|
|
</div>
|
|
{/* 할인 + 반올림 */}
|
|
<div className="grid grid-cols-[1fr_70px_1fr_85px] gap-2 items-center">
|
|
<Select
|
|
value={price.discount_type}
|
|
onValueChange={(v) => updatePriceRow(custKey, price._id, "discount_type", v)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">할인없음</SelectItem>
|
|
{(priceCategoryOptions["discount_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={price.discount_value ? Number(price.discount_value).toLocaleString() : ""}
|
|
onChange={(e) => {
|
|
const raw = e.target.value.replace(/[^\d.-]/g, "");
|
|
updatePriceRow(custKey, price._id, "discount_value", raw);
|
|
}}
|
|
className="h-8 text-xs text-right"
|
|
placeholder="0"
|
|
/>
|
|
<Select
|
|
value={price.rounding_unit_value}
|
|
onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_unit_value", v)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["rounding_unit_value"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<Select
|
|
value={price.rounding_type}
|
|
onValueChange={(v) => updatePriceRow(custKey, price._id, "rounding_type", v)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs"><SelectValue placeholder="단위" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(priceCategoryOptions["rounding_type"] || []).map((o) => (
|
|
<SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
{/* 계산 단가 */}
|
|
<div className="flex items-center justify-end gap-2 pt-1 border-t">
|
|
<span className="text-xs text-muted-foreground">계산 단가:</span>
|
|
<span className="font-bold text-sm text-foreground">
|
|
{price.calculated_price ? Number(price.calculated_price).toLocaleString() : "-"}
|
|
</span>
|
|
</div>
|
|
</div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setCustDetailOpen(false);
|
|
if (!editCustData) setCustSelectOpen(true);
|
|
setEditCustData(null);
|
|
}}
|
|
>
|
|
{editCustData ? "취소" : "← 이전"}
|
|
</Button>
|
|
<Button onClick={handleCustDetailSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
|
저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 테이블 설정 모달 */}
|
|
<TableSettingsModal
|
|
open={ts.open}
|
|
onOpenChange={ts.setOpen}
|
|
tableName={ts.tableName}
|
|
settingsId={ts.settingsId}
|
|
defaultVisibleKeys={ts.defaultVisibleKeys}
|
|
onSave={ts.applySettings}
|
|
/>
|
|
|
|
{/* 엑셀 업로드 */}
|
|
{excelChainConfig && (
|
|
<MultiTableExcelUploadModal
|
|
open={excelUploadOpen}
|
|
onOpenChange={setExcelUploadOpen}
|
|
config={excelChainConfig}
|
|
onSuccess={() => fetchItems()}
|
|
/>
|
|
)}
|
|
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|