ERP-node/frontend/lib/registry/components/universal-form-modal/index.ts

78 lines
2.6 KiB
TypeScript

"use client";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { UniversalFormModalComponent } from "./UniversalFormModalComponent";
import { UniversalFormModalConfigPanel } from "./UniversalFormModalConfigPanel";
import { defaultConfig } from "./config";
/**
* 범용 폼 모달 컴포넌트 정의
*
* 섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는
* 범용 모달 컴포넌트입니다.
*/
export const UniversalFormModalDefinition = createComponentDefinition({
id: "universal-form-modal",
name: "범용 폼 모달",
nameEng: "Universal Form Modal",
description: "섹션 기반 폼 레이아웃, 채번규칙, 다중 행 저장을 지원하는 범용 모달 컴포넌트",
category: ComponentCategory.INPUT,
webType: "form",
component: UniversalFormModalComponent,
defaultConfig: defaultConfig,
defaultSize: {
width: 800,
height: 600,
gridColumnSpan: "12",
},
configPanel: UniversalFormModalConfigPanel,
icon: "FormInput",
tags: ["폼", "모달", "입력", "저장", "채번", "겸직", "다중행"],
version: "1.0.0",
author: "개발팀",
documentation: `
## 범용 폼 모달 컴포넌트
### 주요 기능
- **섹션 기반 레이아웃**: 기본 정보, 추가 정보 등 섹션별로 폼 구성
- **반복 섹션**: 겸직처럼 동일한 필드 그룹을 여러 개 추가 가능
- **채번규칙 연동**: 자동 코드 생성 (모달 열릴 때 또는 저장 시점)
- **다중 행 저장**: 공통 필드 + 개별 필드 조합으로 여러 행 동시 저장
- **외부 데이터 수신**: 부모 화면에서 전달받은 값 자동 채움
### 사용 예시
1. 부서관리 사원 추가 + 겸직 등록
2. 품목 등록 + 규격 옵션 추가
3. 거래처 등록 + 담당자 정보 추가
### 설정 방법
1. 저장 테이블 선택
2. 섹션 추가 (기본 정보, 겸직 정보 등)
3. 각 섹션에 필드 추가
4. 반복 섹션 설정 (필요 시)
5. 다중 행 저장 설정 (필요 시)
6. 채번규칙 연동 (필요 시)
`,
});
// 컴포넌트 내보내기
export { UniversalFormModalComponent } from "./UniversalFormModalComponent";
export { UniversalFormModalConfigPanel } from "./UniversalFormModalConfigPanel";
export { defaultConfig } from "./config";
// 타입 내보내기
export type {
UniversalFormModalConfig,
UniversalFormModalComponentProps,
UniversalFormModalConfigPanelProps,
FormSectionConfig,
FormFieldConfig,
SaveConfig,
MultiRowSaveConfig,
NumberingRuleConfig,
SelectOptionConfig,
FormDataState,
RepeatSectionItem,
} from "./types";