kjs
1c562fa854
- Updated the item information page to include category code to label conversion for better data representation. - Enhanced the sales order page by integrating a fullscreen dialog for improved user experience during order registration and editing. - Added dynamic loading of delivery options based on selected customers to streamline the order process. - Introduced a new FullscreenDialog component for consistent fullscreen behavior across modals. - Implemented validation utilities for form fields to ensure data integrity during user input.
886 lines
42 KiB
TypeScript
886 lines
42 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useRef } 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";
|
|
// Card, CardContent 제거 — DynamicSearchFilter가 대체
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Plus, Trash2, RotateCcw, Save, Loader2, FileSpreadsheet, Download,
|
|
ClipboardList, Pencil, Search, X, Maximize2, Minimize2, Truck,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { useConfirmDialog } from "@/components/common/ConfirmDialog";
|
|
import { ExcelUploadModal } from "@/components/common/ExcelUploadModal";
|
|
import { exportToExcel } from "@/lib/utils/excelExport";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { toast } from "sonner";
|
|
import { FormDatePicker } from "@/components/screen/filters/FormDatePicker";
|
|
import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
|
|
import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
|
|
import { FullscreenDialog } from "@/components/common/FullscreenDialog";
|
|
import { ShippingPlanBatchModal } from "@/components/common/ShippingPlanBatchModal";
|
|
|
|
const DETAIL_TABLE = "sales_order_detail";
|
|
|
|
// 천단위 구분자 표시용 (입력 중에는 콤마 포함 표시, 저장 시 숫자만)
|
|
const formatNumber = (val: string) => {
|
|
const num = val.replace(/[^\d.-]/g, "");
|
|
if (!num) return "";
|
|
const parts = num.split(".");
|
|
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
return parts.join(".");
|
|
};
|
|
const parseNumber = (val: string) => val.replace(/,/g, "");
|
|
const MASTER_TABLE = "sales_order_mng";
|
|
|
|
// 메인 목록 테이블 컬럼 (sales_order_detail 기준)
|
|
const GRID_COLUMNS: DataGridColumn[] = [
|
|
{ key: "order_no", label: "수주번호", width: "w-[120px]" },
|
|
{ key: "part_code", label: "품번", width: "w-[120px]", editable: true },
|
|
{ key: "part_name", label: "품명", minWidth: "min-w-[150px]", editable: true },
|
|
{ key: "spec", label: "규격", width: "w-[120px]", editable: true },
|
|
{ key: "unit", label: "단위", width: "w-[70px]", editable: true },
|
|
{ key: "qty", label: "수량", width: "w-[90px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
|
|
{ key: "ship_qty", label: "출하수량", width: "w-[90px]", formatNumber: true, align: "right" },
|
|
{ key: "balance_qty", label: "잔량", width: "w-[80px]", formatNumber: true, align: "right" },
|
|
{ key: "unit_price", label: "단가", width: "w-[100px]", editable: true, inputType: "number", formatNumber: true, align: "right" },
|
|
{ key: "amount", label: "금액", width: "w-[110px]", formatNumber: true, align: "right" },
|
|
{ key: "due_date", label: "납기일", width: "w-[110px]" },
|
|
{ key: "memo", label: "메모", width: "w-[100px]", editable: true },
|
|
];
|
|
|
|
// 조건부 레이어 설정 (input_mode, sell_mode에 따라 표시 필드가 달라짐)
|
|
// Zone 10: input_mode → 공급업체우선(CAT_MLZWPH5R_983R) / 품목우선(CAT_MLZWPUQC_PB8Z)
|
|
// Zone 17: sell_mode → 해외판매(CAT_MLZWFF2Z_BQCV)
|
|
|
|
export default function SalesOrderPage() {
|
|
const { user } = useAuth();
|
|
const { confirm, ConfirmDialogComponent } = useConfirmDialog();
|
|
const [orders, setOrders] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
|
|
// 검색 필터 (DynamicSearchFilter에서 관리)
|
|
const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
|
|
|
|
// 모달
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
// isModalFullscreen 제거됨 — FullscreenDialog 사용
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [masterForm, setMasterForm] = useState<Record<string, any>>({});
|
|
const [detailRows, setDetailRows] = useState<any[]>([]);
|
|
|
|
// 품목 선택 모달 (리피터에서 품목 추가용)
|
|
const [itemSelectOpen, setItemSelectOpen] = useState(false);
|
|
const [itemSearchKeyword, setItemSearchKeyword] = useState("");
|
|
const [itemSearchResults, setItemSearchResults] = useState<any[]>([]);
|
|
const [itemSearchLoading, setItemSearchLoading] = useState(false);
|
|
const [itemCheckedIds, setItemCheckedIds] = useState<Set<string>>(new Set());
|
|
|
|
// 엑셀 업로드
|
|
const [excelUploadOpen, setExcelUploadOpen] = useState(false);
|
|
|
|
// 출하계획 모달
|
|
const [shippingPlanOpen, setShippingPlanOpen] = useState(false);
|
|
|
|
// 카테고리 옵션
|
|
const [categoryOptions, setCategoryOptions] = useState<Record<string, { code: string; label: string }[]>>({});
|
|
|
|
// 체크된 행 (다중선택)
|
|
const [checkedIds, setCheckedIds] = useState<string[]>([]);
|
|
|
|
// 카테고리 로드
|
|
useEffect(() => {
|
|
const loadCategories = async () => {
|
|
const catColumns = ["sell_mode", "input_mode", "price_mode", "incoterms", "payment_term"];
|
|
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;
|
|
};
|
|
// 라벨 치환 + 중복 제거 (같은 label이면 첫 번째만 유지)
|
|
const LABEL_REPLACE: Record<string, string> = {
|
|
"공급업체 우선": "거래처 우선",
|
|
"공급업체우선": "거래처 우선",
|
|
};
|
|
const dedup = (items: { code: string; label: string }[]) => {
|
|
const seen = new Set<string>();
|
|
return items
|
|
.map((item) => ({ ...item, label: LABEL_REPLACE[item.label] || item.label }))
|
|
.filter((item) => {
|
|
const key = item.label.replace(/\s/g, "");
|
|
if (seen.has(key)) return false;
|
|
seen.add(key);
|
|
return true;
|
|
});
|
|
};
|
|
await Promise.all(
|
|
catColumns.map(async (col) => {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/${MASTER_TABLE}/${col}/values`);
|
|
if (res.data?.success && res.data.data?.length > 0) {
|
|
optMap[col] = dedup(flatten(res.data.data));
|
|
}
|
|
} catch { /* skip */ }
|
|
})
|
|
);
|
|
// 거래처 목록도 로드
|
|
try {
|
|
const custRes = await apiClient.post(`/table-management/tables/customer_mng/data`, {
|
|
page: 1, size: 500, autoFilter: true,
|
|
});
|
|
const custs = custRes.data?.data?.data || custRes.data?.data?.rows || [];
|
|
optMap["partner_id"] = custs.map((c: any) => ({ code: c.customer_code, label: `${c.customer_name} (${c.customer_code})` }));
|
|
} catch { /* skip */ }
|
|
// item_info 카테고리도 로드 (unit, material 등 코드→라벨 변환용)
|
|
for (const col of ["unit", "material", "division", "type"]) {
|
|
try {
|
|
const res = await apiClient.get(`/table-categories/item_info/${col}/values`);
|
|
if (res.data?.success && res.data.data?.length > 0) {
|
|
optMap[`item_${col}`] = flatten(res.data.data);
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
setCategoryOptions(optMap);
|
|
};
|
|
loadCategories();
|
|
}, []);
|
|
|
|
// 데이터 조회
|
|
const fetchOrders = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const filters: any[] = searchFilters.map((f) => ({
|
|
columnName: f.columnName,
|
|
operator: f.operator,
|
|
value: f.value,
|
|
}));
|
|
const res = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
sort: { columnName: "order_no", order: "desc" },
|
|
});
|
|
const rows = res.data?.data?.data || res.data?.data?.rows || [];
|
|
|
|
// part_code → item_info 조인 (품명/규격이 비어있는 경우 보강)
|
|
const partCodes = [...new Set(rows.map((r: any) => r.part_code).filter(Boolean))];
|
|
let itemMap: Record<string, any> = {};
|
|
if (partCodes.length > 0) {
|
|
try {
|
|
const itemRes = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: partCodes.length + 10,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "item_number", operator: "in", value: partCodes }] },
|
|
autoFilter: true,
|
|
});
|
|
const items = itemRes.data?.data?.data || itemRes.data?.data?.rows || [];
|
|
for (const item of items) {
|
|
itemMap[item.item_number] = item;
|
|
}
|
|
} catch { /* skip */ }
|
|
}
|
|
|
|
// 조인 적용 + 카테고리 코드→라벨 변환
|
|
const resolveLabel = (key: string, code: string) => {
|
|
if (!code) return "";
|
|
const opts = categoryOptions[key];
|
|
if (!opts) return code;
|
|
return opts.find((o) => o.code === code)?.label || code;
|
|
};
|
|
const data = rows.map((row: any) => {
|
|
const item = itemMap[row.part_code];
|
|
const rawUnit = row.unit || item?.unit || "";
|
|
return {
|
|
...row,
|
|
part_name: row.part_name || item?.item_name || "",
|
|
spec: row.spec || item?.size || "",
|
|
unit: resolveLabel("item_unit", rawUnit) || rawUnit,
|
|
};
|
|
});
|
|
|
|
setOrders(data);
|
|
setTotalCount(res.data?.data?.total || data.length);
|
|
} catch (err) {
|
|
console.error("수주 조회 실패:", err);
|
|
toast.error("수주 목록을 불러오는데 실패했습니다.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [searchFilters]);
|
|
|
|
useEffect(() => { fetchOrders(); }, [fetchOrders]);
|
|
|
|
const getCategoryLabel = (col: string, code: string) => {
|
|
if (!code) return "";
|
|
const found = categoryOptions[col]?.find((o) => o.code === code);
|
|
return found?.label || code;
|
|
};
|
|
|
|
// 등록 모달 열기
|
|
// 납품처 목록 (거래처 선택 시 조회)
|
|
const [deliveryOptions, setDeliveryOptions] = useState<{ code: string; label: string }[]>([]);
|
|
|
|
const loadDeliveryOptions = async (customerCode: string) => {
|
|
if (!customerCode) { setDeliveryOptions([]); return; }
|
|
try {
|
|
const res = await apiClient.post(`/table-management/tables/delivery_destination/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "customer_code", operator: "equals", value: customerCode }] },
|
|
autoFilter: true,
|
|
});
|
|
const rows = res.data?.data?.data || res.data?.data?.rows || [];
|
|
setDeliveryOptions(rows.map((r: any) => ({
|
|
code: r.destination_code || r.id,
|
|
label: `${r.destination_name}${r.address ? ` (${r.address})` : ""}`,
|
|
})));
|
|
} catch { setDeliveryOptions([]); }
|
|
};
|
|
|
|
const openRegisterModal = () => {
|
|
// 기본값: 각 카테고리의 첫 번째 옵션
|
|
const defaultSellMode = categoryOptions["sell_mode"]?.[0]?.code || "";
|
|
const defaultInputMode = categoryOptions["input_mode"]?.[0]?.code || "";
|
|
const defaultPriceMode = categoryOptions["price_mode"]?.[0]?.code || "";
|
|
setMasterForm({ input_mode: defaultInputMode, sell_mode: defaultSellMode, price_mode: defaultPriceMode });
|
|
setDetailRows([]);
|
|
setDeliveryOptions([]);
|
|
setIsEditMode(false);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
// 수정 모달 열기 (order_no로 마스터 + 디테일 조회)
|
|
const openEditModal = async (orderNo: string) => {
|
|
try {
|
|
// 마스터 조회
|
|
const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const masterData = (masterRes.data?.data?.data || masterRes.data?.data?.rows || [])[0];
|
|
|
|
// 디테일 조회
|
|
const detailRes = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const detailData = detailRes.data?.data?.data || detailRes.data?.data?.rows || [];
|
|
|
|
setMasterForm(masterData || {});
|
|
setDetailRows(detailData.map((d: any, i: number) => ({ ...d, _id: d.id || `row_${i}` })));
|
|
setIsEditMode(true);
|
|
setIsModalOpen(true);
|
|
} catch (err) {
|
|
console.error("수주 상세 조회 실패:", err);
|
|
toast.error("수주 정보를 불러오는데 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 삭제 (다중 선택)
|
|
const handleDelete = async () => {
|
|
if (checkedIds.length === 0) { toast.error("삭제할 수주를 선택해주세요."); return; }
|
|
const selectedItems = orders.filter((o) => checkedIds.includes(o.id));
|
|
const orderNos = [...new Set(selectedItems.map((o) => o.order_no))];
|
|
const ok = await confirm(`${checkedIds.length}건의 수주 데이터를 삭제하시겠습니까?`, {
|
|
description: "삭제된 데이터는 복구할 수 없습니다.",
|
|
variant: "destructive",
|
|
confirmText: "삭제",
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
// 선택된 디테일 행 삭제
|
|
await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
|
|
data: checkedIds.map((id) => ({ id })),
|
|
});
|
|
// 해당 수주번호의 남은 디테일이 없으면 마스터도 삭제
|
|
for (const orderNo of orderNos) {
|
|
const remaining = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const rows = remaining.data?.data?.data || remaining.data?.data?.rows || [];
|
|
if (rows.length === 0) {
|
|
const masterRes = await apiClient.post(`/table-management/tables/${MASTER_TABLE}/data`, {
|
|
page: 1, size: 1,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: orderNo }] },
|
|
autoFilter: true,
|
|
});
|
|
const masters = masterRes.data?.data?.data || masterRes.data?.data?.rows || [];
|
|
if (masters.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${MASTER_TABLE}/delete`, {
|
|
data: masters.map((m: any) => ({ id: m.id })),
|
|
});
|
|
}
|
|
}
|
|
}
|
|
toast.success("삭제되었습니다.");
|
|
setCheckedIds([]);
|
|
fetchOrders();
|
|
} catch (err) {
|
|
console.error("삭제 실패:", err);
|
|
toast.error("삭제에 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 저장 (마스터 + 디테일)
|
|
const handleSave = async () => {
|
|
if (!masterForm.order_no && !isEditMode) {
|
|
toast.error("수주번호는 필수입니다.");
|
|
return;
|
|
}
|
|
if (detailRows.length === 0) {
|
|
toast.error("품목을 1개 이상 추가해주세요.");
|
|
return;
|
|
}
|
|
|
|
setSaving(true);
|
|
try {
|
|
const { id, created_date, updated_date, writer, company_code, created_by, updated_by, ...masterFields } = masterForm;
|
|
|
|
if (isEditMode && id) {
|
|
// 마스터 수정
|
|
await apiClient.put(`/table-management/tables/${MASTER_TABLE}/edit`, {
|
|
originalData: { id },
|
|
updatedData: masterFields,
|
|
});
|
|
// 기존 디테일 삭제 후 재삽입
|
|
const existingDetails = await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/data`, {
|
|
page: 1, size: 100,
|
|
dataFilter: { enabled: true, filters: [{ columnName: "order_no", operator: "equals", value: masterForm.order_no }] },
|
|
autoFilter: true,
|
|
});
|
|
const existings = existingDetails.data?.data?.data || existingDetails.data?.data?.rows || [];
|
|
if (existings.length > 0) {
|
|
await apiClient.delete(`/table-management/tables/${DETAIL_TABLE}/delete`, {
|
|
data: existings.map((d: any) => ({ id: d.id })),
|
|
});
|
|
}
|
|
} else {
|
|
// 마스터 등록
|
|
await apiClient.post(`/table-management/tables/${MASTER_TABLE}/add`, masterFields);
|
|
}
|
|
|
|
// 디테일 등록
|
|
for (const row of detailRows) {
|
|
const { _id, id: rowId, created_date: _cd, updated_date: _ud, writer: _w, company_code: _cc, ...detailFields } = row;
|
|
await apiClient.post(`/table-management/tables/${DETAIL_TABLE}/add`, {
|
|
...detailFields,
|
|
order_no: masterForm.order_no,
|
|
});
|
|
}
|
|
|
|
toast.success(isEditMode ? "수정되었습니다." : "등록되었습니다.");
|
|
setIsModalOpen(false);
|
|
fetchOrders();
|
|
} catch (err: any) {
|
|
console.error("저장 실패:", err);
|
|
toast.error(err.response?.data?.message || "저장에 실패했습니다.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
// 품목 검색 (리피터에서 추가)
|
|
const searchItems = async () => {
|
|
setItemSearchLoading(true);
|
|
try {
|
|
const filters: any[] = [];
|
|
if (itemSearchKeyword) {
|
|
filters.push({ columnName: "item_name", operator: "contains", value: itemSearchKeyword });
|
|
}
|
|
const res = await apiClient.post(`/table-management/tables/item_info/data`, {
|
|
page: 1, size: 50,
|
|
dataFilter: filters.length > 0 ? { enabled: true, filters } : undefined,
|
|
autoFilter: true,
|
|
});
|
|
setItemSearchResults(res.data?.data?.data || res.data?.data?.rows || []);
|
|
} catch { /* skip */ } finally {
|
|
setItemSearchLoading(false);
|
|
}
|
|
};
|
|
|
|
const addSelectedItemsToDetail = async () => {
|
|
const selected = itemSearchResults.filter((item) => itemCheckedIds.has(item.id));
|
|
if (selected.length === 0) { toast.error("품목을 선택해주세요."); return; }
|
|
|
|
// 단가방식에 따라 단가 조회
|
|
const isStandardPrice = masterForm.price_mode === "CAT_MM0BUZKL_HJ7U" || masterForm.price_mode === "CAT_MLKG792S_54WJ";
|
|
const isCustomerPrice = masterForm.price_mode === "CAT_MM0BV3OS_41DX" || masterForm.price_mode === "CAT_MLKG7D8K_N8SI";
|
|
const partnerId = masterForm.partner_id;
|
|
const today = new Date().toISOString().split("T")[0];
|
|
|
|
// 거래처별 단가 조회 (선택된 품목들에 대해)
|
|
let customerPriceMap: Record<string, string> = {};
|
|
if (isCustomerPrice && partnerId) {
|
|
try {
|
|
const itemIds = selected.map((item) => item.item_number || item.id);
|
|
const res = await apiClient.post(`/table-management/tables/customer_item_mapping/data`, {
|
|
page: 1, size: 500,
|
|
dataFilter: {
|
|
enabled: true,
|
|
filters: [
|
|
{ columnName: "customer_id", operator: "equals", value: partnerId },
|
|
{ columnName: "item_id", operator: "in", value: itemIds },
|
|
],
|
|
},
|
|
autoFilter: true,
|
|
});
|
|
const mappings = res.data?.data?.data || res.data?.data?.rows || [];
|
|
for (const m of mappings) {
|
|
// calculated_price 우선, 없으면 current_unit_price
|
|
const price = m.calculated_price || m.current_unit_price || "";
|
|
if (price) customerPriceMap[m.item_id] = String(price);
|
|
}
|
|
} catch (err) {
|
|
console.error("거래처별 단가 조회 실패:", err);
|
|
}
|
|
}
|
|
|
|
const newRows = selected.map((item) => {
|
|
const itemCode = item.item_number || item.id;
|
|
let unitPrice = "";
|
|
|
|
if (isStandardPrice) {
|
|
// 기준단가: item_info의 standard_price 또는 selling_price
|
|
unitPrice = item.standard_price || item.selling_price || "";
|
|
} else if (isCustomerPrice && partnerId) {
|
|
// 거래처별 단가
|
|
unitPrice = customerPriceMap[itemCode] || "";
|
|
}
|
|
|
|
return {
|
|
_id: `new_${Date.now()}_${Math.random()}`,
|
|
part_code: itemCode,
|
|
part_name: item.item_name,
|
|
spec: item.size || "",
|
|
material: getCategoryLabel("item_material", item.material) || item.material || "",
|
|
unit: getCategoryLabel("item_unit", item.unit) || item.unit || "",
|
|
qty: "",
|
|
unit_price: unitPrice,
|
|
amount: "",
|
|
due_date: "",
|
|
};
|
|
});
|
|
|
|
setDetailRows((prev) => [...prev, ...newRows]);
|
|
toast.success(`${selected.length}개 품목이 추가되었습니다.`);
|
|
setItemCheckedIds(new Set());
|
|
setItemSelectOpen(false);
|
|
};
|
|
|
|
const updateDetailRow = (idx: number, field: string, value: string) => {
|
|
setDetailRows((prev) => {
|
|
const next = [...prev];
|
|
next[idx] = { ...next[idx], [field]: value };
|
|
// 수량 × 단가 = 금액 자동 계산
|
|
if (field === "qty" || field === "unit_price") {
|
|
const qty = parseFloat(field === "qty" ? value : next[idx].qty) || 0;
|
|
const price = parseFloat(field === "unit_price" ? value : next[idx].unit_price) || 0;
|
|
next[idx].amount = (qty * price).toString();
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const removeDetailRow = (idx: number) => {
|
|
setDetailRows((prev) => prev.filter((_, i) => i !== idx));
|
|
};
|
|
|
|
// input_mode 값으로 레이어 판단
|
|
// 거래처 우선 (구: 공급업체 우선) - 두 코드 모두 지원
|
|
const isSupplierFirst = masterForm.input_mode === "CAT_MLZWPH5R_983R" || masterForm.input_mode === "CAT_MLKG5KP8_C39W";
|
|
const isItemFirst = masterForm.input_mode === "CAT_MLZWPUQC_PB8Z" || masterForm.input_mode === "CAT_MLKG5FZO_HS1B";
|
|
const isOverseas = masterForm.sell_mode === "CAT_MLZWFF2Z_BQCV" || masterForm.sell_mode === "CAT_MLKGAR2W_HAPO";
|
|
|
|
const handleExcelDownload = async () => {
|
|
if (orders.length === 0) { toast.error("다운로드할 데이터가 없습니다."); return; }
|
|
const data = orders.map((o) => {
|
|
const row: Record<string, any> = {};
|
|
for (const col of GRID_COLUMNS) row[col.label] = o[col.key] || "";
|
|
return row;
|
|
});
|
|
await exportToExcel(data, "수주관리.xlsx", "수주목록");
|
|
toast.success("다운로드 완료");
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-3 p-3">
|
|
{/* 검색 필터 (사용자 설정 가능) */}
|
|
<DynamicSearchFilter
|
|
tableName={DETAIL_TABLE}
|
|
filterId="sales-order"
|
|
onFilterChange={setSearchFilters}
|
|
dataCount={totalCount}
|
|
/>
|
|
|
|
{/* 메인 테이블 */}
|
|
<div className="flex-1 overflow-hidden border rounded-lg bg-background shadow-sm flex flex-col">
|
|
<div className="flex items-center justify-between p-3 border-b bg-muted/10 shrink-0">
|
|
<div className="font-semibold flex items-center gap-2 text-sm">
|
|
<ClipboardList className="w-5 h-5" /> 수주 목록
|
|
<Badge variant="secondary" className="font-normal">{totalCount}건</Badge>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm" onClick={() => setExcelUploadOpen(true)}>
|
|
<FileSpreadsheet className="w-4 h-4 mr-1.5" /> 엑셀 업로드
|
|
</Button>
|
|
<Button variant="outline" size="sm" onClick={handleExcelDownload}>
|
|
<Download className="w-4 h-4 mr-1.5" /> 엑셀 다운로드
|
|
</Button>
|
|
<Button size="sm" onClick={openRegisterModal}>
|
|
<Plus className="w-4 h-4 mr-1.5" /> 수주 등록
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={checkedIds.length !== 1} onClick={() => {
|
|
const item = orders.find((o) => o.id === checkedIds[0]);
|
|
if (item) openEditModal(item.order_no);
|
|
}}>
|
|
<Pencil className="w-4 h-4 mr-1.5" /> 수정
|
|
</Button>
|
|
<Button variant="destructive" size="sm" disabled={checkedIds.length === 0} onClick={handleDelete}>
|
|
<Trash2 className="w-4 h-4 mr-1.5" /> 삭제 {checkedIds.length > 0 && `(${checkedIds.length})`}
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={checkedIds.length === 0} onClick={() => setShippingPlanOpen(true)}>
|
|
<Truck className="w-4 h-4 mr-1.5" /> 출하계획 {checkedIds.length > 0 && `(${checkedIds.length})`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<DataGrid
|
|
gridId="sales-order"
|
|
columns={GRID_COLUMNS}
|
|
data={orders}
|
|
loading={loading}
|
|
showCheckbox
|
|
showRowNumber={false}
|
|
checkedIds={checkedIds}
|
|
onCheckedChange={setCheckedIds}
|
|
onRowDoubleClick={(row) => openEditModal(row.order_no)}
|
|
tableName={DETAIL_TABLE}
|
|
emptyMessage="등록된 수주가 없습니다"
|
|
onCellEdit={() => fetchOrders()}
|
|
/>
|
|
</div>
|
|
|
|
{/* 수주 등록/수정 모달 */}
|
|
<FullscreenDialog
|
|
open={isModalOpen}
|
|
onOpenChange={setIsModalOpen}
|
|
title={isEditMode ? "수주 수정" : "수주 등록"}
|
|
description={isEditMode ? "수주 정보를 수정합니다." : "새로운 수주를 등록합니다."}
|
|
footer={
|
|
<>
|
|
<Button variant="outline" onClick={() => setIsModalOpen(false)}>취소</Button>
|
|
<Button onClick={handleSave} disabled={saving}>
|
|
{saving ? <Loader2 className="w-4 h-4 mr-1.5 animate-spin" /> : <Save className="w-4 h-4 mr-1.5" />} 저장
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
|
|
<div className="space-y-4 py-2">
|
|
{/* 기본 레이어 (항상 표시) */}
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">수주번호 <span className="text-destructive">*</span></Label>
|
|
<Input value={masterForm.order_no || ""} onChange={(e) => setMasterForm((p) => ({ ...p, order_no: e.target.value }))}
|
|
placeholder="수주번호" className="h-9" disabled={isEditMode} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">수주일</Label>
|
|
<FormDatePicker value={masterForm.order_date || ""} onChange={(v) => setMasterForm((p) => ({ ...p, order_date: v }))} placeholder="수주일" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">판매 유형</Label>
|
|
<Select value={masterForm.sell_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, sell_mode: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["sell_mode"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">입력방식</Label>
|
|
<Select value={masterForm.input_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, input_mode: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["input_mode"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">단가방식</Label>
|
|
<Select value={masterForm.price_mode || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, price_mode: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["price_mode"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 레이어 2: 거래처 우선 (거래처, 담당자, 납품처, 납품장소) */}
|
|
{isSupplierFirst && (
|
|
<div className="grid grid-cols-4 gap-4 border-t pt-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">거래처</Label>
|
|
<Select value={masterForm.partner_id || ""} onValueChange={(v) => { setMasterForm((p) => ({ ...p, partner_id: v, delivery_partner_id: "" })); loadDeliveryOptions(v); }}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="거래처 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["partner_id"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">담당자</Label>
|
|
<Input value={masterForm.manager_id || ""} onChange={(e) => setMasterForm((p) => ({ ...p, manager_id: e.target.value }))}
|
|
placeholder="담당자" className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">납품처</Label>
|
|
{deliveryOptions.length > 0 ? (
|
|
<Select value={masterForm.delivery_partner_id || ""} onValueChange={(v) => {
|
|
setMasterForm((p) => ({ ...p, delivery_partner_id: v }));
|
|
// 선택한 납품처의 주소를 자동 입력
|
|
const found = deliveryOptions.find((o) => o.code === v);
|
|
if (found) {
|
|
const addr = found.label.match(/\((.+)\)$/)?.[1] || "";
|
|
if (addr) setMasterForm((p) => ({ ...p, delivery_partner_id: v, delivery_address: addr }));
|
|
}
|
|
}}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="납품처 선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{deliveryOptions.map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input value={masterForm.delivery_partner_id || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_partner_id: e.target.value }))}
|
|
placeholder={masterForm.partner_id ? "등록된 납품처 없음" : "거래처를 먼저 선택하세요"} className="h-9" disabled={!masterForm.partner_id} />
|
|
)}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">납품장소</Label>
|
|
<Input value={masterForm.delivery_address || ""} onChange={(e) => setMasterForm((p) => ({ ...p, delivery_address: e.target.value }))}
|
|
placeholder="납품장소" className="h-9" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 레이어 4: 해외판매 (인코텀즈, 결제조건, 통화, 선적항, 도착항, HS코드) */}
|
|
{isOverseas && (
|
|
<div className="grid grid-cols-3 gap-4 border-t pt-4">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">인코텀즈</Label>
|
|
<Select value={masterForm.incoterms || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, incoterms: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["incoterms"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">결제조건</Label>
|
|
<Select value={masterForm.payment_term || ""} onValueChange={(v) => setMasterForm((p) => ({ ...p, payment_term: v }))}>
|
|
<SelectTrigger className="h-9"><SelectValue placeholder="선택" /></SelectTrigger>
|
|
<SelectContent>
|
|
{(categoryOptions["payment_term"] || []).map((o) => <SelectItem key={o.code} value={o.code}>{o.label}</SelectItem>)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">통화</Label>
|
|
<Input value={masterForm.currency || ""} onChange={(e) => setMasterForm((p) => ({ ...p, currency: e.target.value }))}
|
|
placeholder="KRW" className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">선적항</Label>
|
|
<Input value={masterForm.port_of_loading || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_loading: e.target.value }))}
|
|
className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">도착항</Label>
|
|
<Input value={masterForm.port_of_discharge || ""} onChange={(e) => setMasterForm((p) => ({ ...p, port_of_discharge: e.target.value }))}
|
|
className="h-9" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">HS Code</Label>
|
|
<Input value={masterForm.hs_code || ""} onChange={(e) => setMasterForm((p) => ({ ...p, hs_code: e.target.value }))}
|
|
className="h-9" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 리피터 그리드 (품목 목록) — 레이어 2,3 공통 */}
|
|
<div className="border rounded-lg">
|
|
<div className="flex items-center justify-between p-3 border-b bg-muted/10">
|
|
<span className="text-sm font-semibold">수주 품목</span>
|
|
<Button size="sm" variant="outline" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(true); searchItems(); }}>
|
|
<Plus className="w-4 h-4 mr-1" /> 품목 추가
|
|
</Button>
|
|
</div>
|
|
<div className="overflow-auto max-h-[300px]">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-background z-10">
|
|
<TableRow>
|
|
<TableHead className="w-[40px]"></TableHead>
|
|
<TableHead className="w-[120px]">품번</TableHead>
|
|
<TableHead className="min-w-[120px]">품명</TableHead>
|
|
<TableHead className="w-[80px]">규격</TableHead>
|
|
<TableHead className="w-[60px]">단위</TableHead>
|
|
<TableHead className="w-[110px]">수량</TableHead>
|
|
<TableHead className="w-[120px]">단가</TableHead>
|
|
<TableHead className="w-[110px]">금액</TableHead>
|
|
<TableHead className="w-[200px]">납기일</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{detailRows.length === 0 ? (
|
|
<TableRow><TableCell colSpan={9} className="text-center text-muted-foreground py-8">품목을 추가해주세요</TableCell></TableRow>
|
|
) : detailRows.map((row, idx) => (
|
|
<TableRow key={row._id || idx}>
|
|
<TableCell>
|
|
<Button variant="ghost" size="sm" className="h-7 w-7 p-0 text-destructive" onClick={() => removeDetailRow(idx)}>
|
|
<X className="w-3.5 h-3.5" />
|
|
</Button>
|
|
</TableCell>
|
|
<TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_code}>{row.part_code}</span></TableCell>
|
|
<TableCell className="text-xs max-w-[120px]"><span className="block truncate" title={row.part_name}>{row.part_name}</span></TableCell>
|
|
<TableCell className="text-xs">{row.spec}</TableCell>
|
|
<TableCell className="text-xs">{row.unit}</TableCell>
|
|
<TableCell>
|
|
<Input value={formatNumber(row.qty || "")} onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
|
|
className="h-8 text-sm text-right" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Input value={formatNumber(row.unit_price || "")} onChange={(e) => updateDetailRow(idx, "unit_price", parseNumber(e.target.value))}
|
|
className="h-8 text-sm text-right" />
|
|
</TableCell>
|
|
<TableCell className="text-sm text-right font-medium">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>
|
|
<TableCell>
|
|
<FormDatePicker value={row.due_date || ""} onChange={(v) => updateDetailRow(idx, "due_date", v)} placeholder="납기일" />
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 메모 */}
|
|
<div className="space-y-1.5">
|
|
<Label className="text-sm">메모</Label>
|
|
<Input value={masterForm.memo || ""} onChange={(e) => setMasterForm((p) => ({ ...p, memo: e.target.value }))}
|
|
placeholder="메모" className="h-9" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 품목 선택 모달 (등록 모달 내부에 중첩) */}
|
|
<Dialog open={itemSelectOpen} onOpenChange={setItemSelectOpen}>
|
|
<DialogContent className="max-w-3xl max-h-[70vh]" onInteractOutside={(e) => e.preventDefault()}>
|
|
<DialogHeader>
|
|
<DialogTitle>품목 선택</DialogTitle>
|
|
<DialogDescription>수주에 추가할 품목을 선택 후 하단 버튼을 눌러주세요.</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex gap-2 mb-3">
|
|
<Input placeholder="품명/품목코드 검색" value={itemSearchKeyword}
|
|
onChange={(e) => setItemSearchKeyword(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && searchItems()}
|
|
className="h-9 flex-1" />
|
|
<Button size="sm" onClick={searchItems} disabled={itemSearchLoading} className="h-9">
|
|
{itemSearchLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Search className="w-4 h-4 mr-1" /> 조회</>}
|
|
</Button>
|
|
</div>
|
|
<div className="overflow-auto max-h-[350px] border rounded-lg">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-background z-10">
|
|
<TableRow>
|
|
<TableHead className="w-[40px] text-center">
|
|
<input type="checkbox"
|
|
checked={itemSearchResults.length > 0 && itemCheckedIds.size === itemSearchResults.length}
|
|
onChange={(e) => {
|
|
if (e.target.checked) setItemCheckedIds(new Set(itemSearchResults.map((i) => i.id)));
|
|
else setItemCheckedIds(new Set());
|
|
}} />
|
|
</TableHead>
|
|
<TableHead className="w-[130px]">품목코드</TableHead>
|
|
<TableHead className="min-w-[150px]">품명</TableHead>
|
|
<TableHead className="w-[100px]">규격</TableHead>
|
|
<TableHead className="w-[100px]">재질</TableHead>
|
|
<TableHead className="w-[60px]">단위</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{itemSearchResults.length === 0 ? (
|
|
<TableRow><TableCell colSpan={6} className="text-center text-muted-foreground py-8">검색 결과가 없습니다</TableCell></TableRow>
|
|
) : itemSearchResults.map((item) => (
|
|
<TableRow key={item.id} className={cn("cursor-pointer", itemCheckedIds.has(item.id) && "bg-primary/5")}
|
|
onClick={() => setItemCheckedIds((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(item.id)) next.delete(item.id); else next.add(item.id);
|
|
return next;
|
|
})}>
|
|
<TableCell className="text-center">
|
|
<input type="checkbox" checked={itemCheckedIds.has(item.id)} readOnly />
|
|
</TableCell>
|
|
<TableCell className="text-xs max-w-[130px]"><span className="block truncate" title={item.item_number}>{item.item_number}</span></TableCell>
|
|
<TableCell className="text-sm max-w-[150px]"><span className="block truncate" title={item.item_name}>{item.item_name}</span></TableCell>
|
|
<TableCell className="text-xs">{item.size}</TableCell>
|
|
<TableCell className="text-xs">{item.material}</TableCell>
|
|
<TableCell className="text-xs">{item.unit}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<DialogFooter>
|
|
<div className="flex items-center gap-2 w-full justify-between">
|
|
<span className="text-sm text-muted-foreground">{itemCheckedIds.size}개 선택됨</span>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => { setItemCheckedIds(new Set()); setItemSelectOpen(false); }}>취소</Button>
|
|
<Button onClick={addSelectedItemsToDetail} disabled={itemCheckedIds.size === 0}>
|
|
<Plus className="w-4 h-4 mr-1" /> {itemCheckedIds.size}개 추가
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</FullscreenDialog>
|
|
|
|
{/* 출하계획 동시 등록 모달 */}
|
|
<ShippingPlanBatchModal
|
|
open={shippingPlanOpen}
|
|
onOpenChange={setShippingPlanOpen}
|
|
selectedDetailIds={checkedIds}
|
|
onSuccess={fetchOrders}
|
|
/>
|
|
|
|
{/* 엑셀 업로드 */}
|
|
<ExcelUploadModal
|
|
open={excelUploadOpen}
|
|
onOpenChange={setExcelUploadOpen}
|
|
tableName={DETAIL_TABLE}
|
|
userId={user?.userId}
|
|
onSuccess={() => fetchOrders()}
|
|
/>
|
|
|
|
{/* 공통 확인 다이얼로그 */}
|
|
{ConfirmDialogComponent}
|
|
</div>
|
|
);
|
|
}
|