kjs
64e6fd1920
- 범용 컴포넌트 3종 개발 및 레지스트리 등록: * AutocompleteSearchInput: 자동완성 검색 입력 컴포넌트 * EntitySearchInput: 엔티티 검색 모달 컴포넌트 * ModalRepeaterTable: 모달 기반 반복 테이블 컴포넌트 - 수주등록 전용 컴포넌트: * OrderCustomerSearch: 거래처 검색 (AutocompleteSearchInput 래퍼) * OrderItemRepeaterTable: 품목 관리 (ModalRepeaterTable 래퍼) * OrderRegistrationModal: 수주등록 메인 모달 - 백엔드 API: * Entity 검색 API (멀티테넌시 지원) * 수주 등록 API (자동 채번) - 화면 편집기 통합: * 컴포넌트 레지스트리에 등록 * ConfigPanel을 통한 설정 기능 * 드래그앤드롭으로 배치 가능 - 개발 문서: * 수주등록_화면_개발_계획서.md (상세 설계 문서)
129 lines
2.8 KiB
TypeScript
129 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ModalRepeaterTableComponent } from "@/lib/registry/components/modal-repeater-table";
|
|
import type {
|
|
RepeaterColumnConfig,
|
|
CalculationRule,
|
|
} from "@/lib/registry/components/modal-repeater-table";
|
|
|
|
/**
|
|
* 수주 등록 전용 품목 반복 테이블 컴포넌트
|
|
*
|
|
* 이 컴포넌트는 수주 등록 화면 전용이며, 설정이 고정되어 있습니다.
|
|
* 범용 ModalRepeaterTable과 달리 item_info 테이블만 조회하며,
|
|
* 수주 등록에 필요한 컬럼과 계산 공식이 미리 설정되어 있습니다.
|
|
*/
|
|
|
|
interface OrderItemRepeaterTableProps {
|
|
/** 현재 선택된 품목 목록 */
|
|
value: any[];
|
|
/** 품목 목록 변경 시 콜백 */
|
|
onChange: (items: any[]) => void;
|
|
/** 비활성화 여부 */
|
|
disabled?: boolean;
|
|
}
|
|
|
|
// 수주 등록 전용 컬럼 설정 (고정)
|
|
const ORDER_COLUMNS: RepeaterColumnConfig[] = [
|
|
{
|
|
field: "id",
|
|
label: "품번",
|
|
editable: false,
|
|
width: "120px",
|
|
},
|
|
{
|
|
field: "item_name",
|
|
label: "품명",
|
|
editable: false,
|
|
width: "200px",
|
|
},
|
|
{
|
|
field: "item_number",
|
|
label: "품목번호",
|
|
editable: false,
|
|
width: "150px",
|
|
},
|
|
{
|
|
field: "quantity",
|
|
label: "수량",
|
|
type: "number",
|
|
editable: true,
|
|
required: true,
|
|
defaultValue: 1,
|
|
width: "100px",
|
|
},
|
|
{
|
|
field: "selling_price",
|
|
label: "단가",
|
|
type: "number",
|
|
editable: true,
|
|
required: true,
|
|
width: "120px",
|
|
},
|
|
{
|
|
field: "amount",
|
|
label: "금액",
|
|
type: "number",
|
|
editable: false,
|
|
calculated: true,
|
|
width: "120px",
|
|
},
|
|
{
|
|
field: "delivery_date",
|
|
label: "납품일",
|
|
type: "date",
|
|
editable: true,
|
|
width: "130px",
|
|
},
|
|
{
|
|
field: "note",
|
|
label: "비고",
|
|
type: "text",
|
|
editable: true,
|
|
width: "200px",
|
|
},
|
|
];
|
|
|
|
// 수주 등록 전용 계산 공식 (고정)
|
|
const ORDER_CALCULATION_RULES: CalculationRule[] = [
|
|
{
|
|
result: "amount",
|
|
formula: "quantity * selling_price",
|
|
dependencies: ["quantity", "selling_price"],
|
|
},
|
|
];
|
|
|
|
export function OrderItemRepeaterTable({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
}: OrderItemRepeaterTableProps) {
|
|
return (
|
|
<ModalRepeaterTableComponent
|
|
// 고정 설정 (수주 등록 전용)
|
|
sourceTable="item_info"
|
|
sourceColumns={[
|
|
"id",
|
|
"item_name",
|
|
"item_number",
|
|
"unit",
|
|
"selling_price",
|
|
]}
|
|
sourceSearchFields={["item_name", "id", "item_number"]}
|
|
modalTitle="품목 검색 및 선택"
|
|
modalButtonText="품목 검색"
|
|
multiSelect={true}
|
|
columns={ORDER_COLUMNS}
|
|
calculationRules={ORDER_CALCULATION_RULES}
|
|
uniqueField="id"
|
|
|
|
// 외부에서 제어 가능한 prop
|
|
value={value}
|
|
onChange={onChange}
|
|
disabled={disabled}
|
|
/>
|
|
);
|
|
}
|
|
|