90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { ComponentCategory } from "@/types/component";
|
|
import { ScreenSplitPanel } from "@/components/screen-embedding/ScreenSplitPanel";
|
|
import { ScreenSplitPanelConfigPanel } from "./ScreenSplitPanelConfigPanel";
|
|
|
|
/**
|
|
* 화면 분할 패널 Renderer
|
|
* 좌우 화면 임베딩 및 데이터 전달 기능을 제공하는 컴포넌트
|
|
*/
|
|
class ScreenSplitPanelRenderer extends AutoRegisteringComponentRenderer {
|
|
static componentDefinition = {
|
|
id: "screen-split-panel",
|
|
name: "화면 분할 패널",
|
|
nameEng: "Screen Split Panel",
|
|
description: "좌우 화면 임베딩 및 데이터 전달 기능을 제공하는 분할 패널",
|
|
category: ComponentCategory.LAYOUT,
|
|
webType: "text", // 레이아웃 컴포넌트는 기본 webType 사용
|
|
component: ScreenSplitPanelRenderer, // 🆕 Renderer 클래스 자체를 등록 (ScreenSplitPanel 아님)
|
|
configPanel: ScreenSplitPanelConfigPanel, // 설정 패널
|
|
tags: ["split", "panel", "embed", "data-transfer", "layout"],
|
|
defaultSize: {
|
|
width: 1200,
|
|
height: 600,
|
|
},
|
|
defaultConfig: {
|
|
screenId: 0,
|
|
leftScreenId: 0,
|
|
rightScreenId: 0,
|
|
splitRatio: 50,
|
|
resizable: true,
|
|
buttonLabel: "데이터 전달",
|
|
buttonPosition: "center",
|
|
},
|
|
version: "1.0.0",
|
|
author: "ERP System",
|
|
documentation: `
|
|
# 화면 분할 패널
|
|
|
|
좌우로 화면을 나누고 각 영역에 다른 화면을 임베딩할 수 있는 레이아웃 컴포넌트입니다.
|
|
|
|
## 주요 기능
|
|
|
|
- **화면 임베딩**: 좌우 영역에 기존 화면을 임베딩
|
|
- **데이터 전달**: 좌측 화면에서 선택한 데이터를 우측 화면으로 전달
|
|
- **다중 컴포넌트 매핑**: 테이블, 입력 필드, 폼 등 다양한 컴포넌트로 데이터 전달 가능
|
|
- **데이터 변환**: sum, average, concat 등 데이터 변환 함수 지원
|
|
- **조건부 전달**: 특정 조건을 만족하는 데이터만 전달 가능
|
|
|
|
## 사용 시나리오
|
|
|
|
1. **입고 등록**: 발주 목록(좌) → 입고 품목 입력(우)
|
|
2. **수주 등록**: 품목 목록(좌) → 수주 상세 입력(우)
|
|
3. **출고 등록**: 재고 목록(좌) → 출고 품목 입력(우)
|
|
|
|
## 설정 방법
|
|
|
|
1. 화면 디자이너에서 "화면 분할 패널" 컴포넌트를 드래그하여 배치
|
|
2. 속성 패널에서 좌측/우측 화면 선택
|
|
3. 데이터 전달 규칙 설정 (소스 → 타겟 매핑)
|
|
4. 전달 버튼 설정 (라벨, 위치, 검증 규칙)
|
|
`,
|
|
};
|
|
|
|
render() {
|
|
const { component, style = {}, componentConfig, config, screenId, formData } = this.props as any;
|
|
|
|
// componentConfig 또는 config 또는 component.componentConfig 사용
|
|
const finalConfig = componentConfig || config || component?.componentConfig || {};
|
|
|
|
return (
|
|
<div style={{ width: "100%", height: "100%", ...style }}>
|
|
<ScreenSplitPanel
|
|
screenId={screenId || finalConfig.screenId}
|
|
config={finalConfig}
|
|
initialFormData={formData} // 🆕 수정 데이터 전달
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 자동 등록
|
|
ScreenSplitPanelRenderer.registerSelf();
|
|
|
|
export default ScreenSplitPanelRenderer;
|