반복 데이터 입력컴포넌트 통합중
This commit is contained in:
parent
2513b89ca2
commit
97675458d7
|
|
@ -92,6 +92,14 @@ export function ComponentsPanel({
|
|||
tags: ["tree", "org", "bom", "cascading", "unified"],
|
||||
defaultSize: { width: 400, height: 300 },
|
||||
},
|
||||
{
|
||||
id: "unified-repeater",
|
||||
name: "통합 반복 데이터",
|
||||
description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
|
||||
category: "data" as ComponentCategory,
|
||||
tags: ["repeater", "table", "modal", "button", "unified"],
|
||||
defaultSize: { width: 600, height: 300 },
|
||||
},
|
||||
], []);
|
||||
|
||||
// 카테고리별 컴포넌트 그룹화
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -18,6 +18,7 @@ import {
|
|||
UnifiedBiz,
|
||||
UnifiedHierarchy,
|
||||
} from "@/components/unified";
|
||||
import { UnifiedRepeater } from "@/components/unified/UnifiedRepeater";
|
||||
|
||||
// 컴포넌트 렌더러 인터페이스
|
||||
export interface ComponentRenderer {
|
||||
|
|
@ -392,6 +393,42 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
/>
|
||||
);
|
||||
|
||||
case "unified-repeater":
|
||||
return (
|
||||
<UnifiedRepeater
|
||||
config={{
|
||||
renderMode: config.renderMode || "inline",
|
||||
dataSource: config.dataSource || {
|
||||
tableName: "",
|
||||
foreignKey: "",
|
||||
referenceKey: "",
|
||||
},
|
||||
columns: config.columns || [],
|
||||
modal: config.modal,
|
||||
button: config.button,
|
||||
features: config.features || {
|
||||
showAddButton: true,
|
||||
showDeleteButton: true,
|
||||
inlineEdit: false,
|
||||
dragSort: false,
|
||||
showRowNumber: false,
|
||||
selectable: false,
|
||||
multiSelect: false,
|
||||
},
|
||||
}}
|
||||
parentId={props.formData?.[config.dataSource?.referenceKey] || props.formData?.id}
|
||||
onDataChange={(data) => {
|
||||
console.log("UnifiedRepeater data changed:", data);
|
||||
}}
|
||||
onRowClick={(row) => {
|
||||
console.log("UnifiedRepeater row clicked:", row);
|
||||
}}
|
||||
onButtonClick={(action, row, buttonConfig) => {
|
||||
console.log("UnifiedRepeater button clicked:", action, row, buttonConfig);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-amber-300 bg-amber-50 p-4">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
/**
|
||||
* UnifiedRepeater 컴포넌트 타입 정의
|
||||
*
|
||||
* 기존 컴포넌트 통합:
|
||||
* - simple-repeater-table: 인라인 모드
|
||||
* - modal-repeater-table: 모달 모드
|
||||
* - repeat-screen-modal: 화면 기반 모달 모드
|
||||
* - related-data-buttons: 버튼 모드
|
||||
* 렌더링 모드:
|
||||
* - inline: 현재 테이블 컬럼 직접 입력 (simple-repeater-table)
|
||||
* - modal: 소스 테이블에서 검색/선택 후 복사 (modal-repeater-table)
|
||||
* - button: 버튼으로 관련 화면 열기 (related-data-buttons)
|
||||
* - mixed: inline + modal 혼합
|
||||
*/
|
||||
|
||||
// 렌더링 모드
|
||||
|
|
@ -35,6 +35,7 @@ export interface RepeaterColumnConfig {
|
|||
title: string;
|
||||
width: ColumnWidthOption;
|
||||
visible: boolean;
|
||||
editable?: boolean; // 편집 가능 여부 (inline 모드)
|
||||
isJoinColumn?: boolean;
|
||||
sourceTable?: string;
|
||||
}
|
||||
|
|
@ -62,10 +63,25 @@ export interface CommonCodeButtonConfig {
|
|||
variantMapping?: Record<string, ButtonVariant>; // 코드값별 색상 매핑
|
||||
}
|
||||
|
||||
// 모달 표시 컬럼 (라벨 포함)
|
||||
export interface ModalDisplayColumn {
|
||||
key: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
// 모달 설정
|
||||
export interface RepeaterModalConfig {
|
||||
screenId?: number;
|
||||
// 기본 설정
|
||||
size: ModalSize;
|
||||
title?: string; // 모달 제목
|
||||
buttonText?: string; // 검색 버튼 텍스트
|
||||
|
||||
// 소스 테이블 표시 설정 (modal 모드)
|
||||
sourceDisplayColumns?: ModalDisplayColumn[]; // 모달에 표시할 소스 테이블 컬럼 (라벨 포함)
|
||||
searchFields?: string[]; // 검색에 사용할 필드
|
||||
|
||||
// 화면 기반 모달 (옵션)
|
||||
screenId?: number;
|
||||
titleTemplate?: {
|
||||
prefix?: string;
|
||||
columnKey?: string;
|
||||
|
|
@ -84,25 +100,55 @@ export interface RepeaterFeatureOptions {
|
|||
multiSelect: boolean;
|
||||
}
|
||||
|
||||
// 데이터 소스 설정
|
||||
export interface RepeaterDataSource {
|
||||
// inline 모드: 현재 테이블 설정은 필요 없음 (컬럼만 선택)
|
||||
|
||||
// modal 모드: 소스 테이블 설정
|
||||
sourceTable?: string; // 검색할 테이블 (엔티티 참조 테이블)
|
||||
foreignKey?: string; // 현재 테이블의 FK 컬럼 (part_objid 등)
|
||||
referenceKey?: string; // 소스 테이블의 PK 컬럼 (id 등)
|
||||
displayColumn?: string; // 표시할 컬럼 (item_name 등)
|
||||
|
||||
// 추가 필터
|
||||
filter?: {
|
||||
column: string;
|
||||
value: string;
|
||||
};
|
||||
}
|
||||
|
||||
// 컬럼 매핑 (modal 모드에서 소스→타겟 복사용)
|
||||
export interface ColumnMapping {
|
||||
sourceColumn: string;
|
||||
targetColumn: string;
|
||||
transform?: "copy" | "reference"; // copy: 값 복사, reference: ID 참조
|
||||
}
|
||||
|
||||
// 계산 규칙
|
||||
export interface CalculationRule {
|
||||
id: string;
|
||||
targetColumn: string;
|
||||
formula: string; // 예: "quantity * unit_price"
|
||||
label?: string;
|
||||
}
|
||||
|
||||
// 메인 설정 타입
|
||||
export interface UnifiedRepeaterConfig {
|
||||
// 렌더링 모드
|
||||
renderMode: RepeaterRenderMode;
|
||||
|
||||
// 데이터 소스 설정
|
||||
dataSource: {
|
||||
tableName: string; // 데이터 테이블
|
||||
foreignKey: string; // 연결 키 (FK) - 데이터 테이블의 컬럼
|
||||
referenceKey: string; // 상위 키 - 현재 화면 테이블의 컬럼 (부모 ID)
|
||||
filter?: { // 추가 필터 조건
|
||||
column: string;
|
||||
value: string;
|
||||
};
|
||||
};
|
||||
dataSource: RepeaterDataSource;
|
||||
|
||||
// 컬럼 설정
|
||||
// 컬럼 설정 (inline: 입력 컬럼, modal: 표시 컬럼)
|
||||
columns: RepeaterColumnConfig[];
|
||||
|
||||
// 컬럼 매핑 (modal 모드)
|
||||
columnMappings?: ColumnMapping[];
|
||||
|
||||
// 계산 규칙 (modal 모드)
|
||||
calculationRules?: CalculationRule[];
|
||||
|
||||
// 모달 설정 (modal, mixed 모드)
|
||||
modal?: RepeaterModalConfig;
|
||||
|
||||
|
|
@ -141,14 +187,12 @@ export interface UnifiedRepeaterProps {
|
|||
// 기본 설정값
|
||||
export const DEFAULT_REPEATER_CONFIG: UnifiedRepeaterConfig = {
|
||||
renderMode: "inline",
|
||||
dataSource: {
|
||||
tableName: "",
|
||||
foreignKey: "",
|
||||
referenceKey: "",
|
||||
},
|
||||
dataSource: {},
|
||||
columns: [],
|
||||
modal: {
|
||||
size: "md",
|
||||
size: "lg",
|
||||
sourceDisplayColumns: [],
|
||||
searchFields: [],
|
||||
},
|
||||
button: {
|
||||
sourceType: "manual",
|
||||
|
|
@ -159,20 +203,20 @@ export const DEFAULT_REPEATER_CONFIG: UnifiedRepeaterConfig = {
|
|||
features: {
|
||||
showAddButton: true,
|
||||
showDeleteButton: true,
|
||||
inlineEdit: false,
|
||||
inlineEdit: true,
|
||||
dragSort: false,
|
||||
showRowNumber: false,
|
||||
selectable: false,
|
||||
multiSelect: false,
|
||||
multiSelect: true,
|
||||
},
|
||||
};
|
||||
|
||||
// 고정 옵션들 (콤보박스용)
|
||||
export const RENDER_MODE_OPTIONS = [
|
||||
{ value: "inline", label: "인라인 (테이블)" },
|
||||
{ value: "modal", label: "모달" },
|
||||
{ value: "inline", label: "인라인 (직접 입력)" },
|
||||
{ value: "modal", label: "모달 (검색 선택)" },
|
||||
{ value: "button", label: "버튼" },
|
||||
{ value: "mixed", label: "혼합 (테이블 + 버튼)" },
|
||||
{ value: "mixed", label: "혼합 (입력 + 검색)" },
|
||||
] as const;
|
||||
|
||||
export const MODAL_SIZE_OPTIONS = [
|
||||
|
|
@ -227,4 +271,3 @@ export const LABEL_FIELD_OPTIONS = [
|
|||
{ value: "codeName", label: "코드명" },
|
||||
{ value: "codeValue", label: "코드값" },
|
||||
] as const;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue