6c751eb489
- 섹션 기반 폼 레이아웃 지원 (접힘/펼침, 그리드 컬럼) - 반복 섹션 지원 (겸직 등 동일 필드 그룹 여러 개 추가) - 채번규칙 연동 (모달 열릴 때 또는 저장 시점 자동 생성) - 다중 행 저장 지원 (공통 필드 + 개별 필드 조합) - Select 옵션 동적 로드 (정적/테이블/공통코드) - 스크린 디자이너 설정 패널 구현
139 lines
2.8 KiB
TypeScript
139 lines
2.8 KiB
TypeScript
/**
|
|
* 범용 폼 모달 컴포넌트 기본 설정
|
|
*/
|
|
|
|
import { UniversalFormModalConfig } from "./types";
|
|
|
|
// 기본 설정값
|
|
export const defaultConfig: UniversalFormModalConfig = {
|
|
modal: {
|
|
title: "데이터 입력",
|
|
description: "",
|
|
size: "lg",
|
|
closeOnOutsideClick: false,
|
|
showCloseButton: true,
|
|
saveButtonText: "저장",
|
|
cancelButtonText: "취소",
|
|
showResetButton: false,
|
|
resetButtonText: "초기화",
|
|
},
|
|
sections: [
|
|
{
|
|
id: "default",
|
|
title: "기본 정보",
|
|
description: "",
|
|
collapsible: false,
|
|
defaultCollapsed: false,
|
|
columns: 2,
|
|
gap: "16px",
|
|
fields: [],
|
|
repeatable: false,
|
|
},
|
|
],
|
|
saveConfig: {
|
|
tableName: "",
|
|
primaryKeyColumn: "id",
|
|
multiRowSave: {
|
|
enabled: false,
|
|
commonFields: [],
|
|
repeatSectionId: "",
|
|
typeColumn: "",
|
|
mainTypeValue: "main",
|
|
subTypeValue: "concurrent",
|
|
mainSectionFields: [],
|
|
},
|
|
afterSave: {
|
|
closeModal: true,
|
|
refreshParent: true,
|
|
showToast: true,
|
|
},
|
|
},
|
|
editMode: {
|
|
enabled: false,
|
|
loadDataOnOpen: true,
|
|
identifierField: "id",
|
|
},
|
|
};
|
|
|
|
// 기본 필드 설정
|
|
export const defaultFieldConfig = {
|
|
id: "",
|
|
columnName: "",
|
|
label: "",
|
|
fieldType: "text" as const,
|
|
required: false,
|
|
defaultValue: "",
|
|
placeholder: "",
|
|
disabled: false,
|
|
readOnly: false,
|
|
width: "100%",
|
|
gridSpan: 6,
|
|
receiveFromParent: false,
|
|
};
|
|
|
|
// 기본 섹션 설정
|
|
export const defaultSectionConfig = {
|
|
id: "",
|
|
title: "새 섹션",
|
|
description: "",
|
|
collapsible: false,
|
|
defaultCollapsed: false,
|
|
columns: 2,
|
|
gap: "16px",
|
|
fields: [],
|
|
repeatable: false,
|
|
repeatConfig: {
|
|
minItems: 0,
|
|
maxItems: 10,
|
|
addButtonText: "+ 추가",
|
|
removeButtonText: "삭제",
|
|
itemTitle: "항목 {index}",
|
|
confirmRemove: false,
|
|
},
|
|
};
|
|
|
|
// 기본 채번규칙 설정
|
|
export const defaultNumberingRuleConfig = {
|
|
enabled: false,
|
|
ruleId: "",
|
|
editable: false,
|
|
hidden: false,
|
|
generateOnOpen: true,
|
|
generateOnSave: false,
|
|
};
|
|
|
|
// 기본 Select 옵션 설정
|
|
export const defaultSelectOptionsConfig = {
|
|
type: "static" as const,
|
|
staticOptions: [],
|
|
tableName: "",
|
|
valueColumn: "",
|
|
labelColumn: "",
|
|
filterCondition: "",
|
|
codeCategory: "",
|
|
};
|
|
|
|
// 모달 크기별 너비
|
|
export const MODAL_SIZE_MAP = {
|
|
sm: 400,
|
|
md: 600,
|
|
lg: 800,
|
|
xl: 1000,
|
|
full: "100%",
|
|
} as const;
|
|
|
|
// 유틸리티: 고유 ID 생성
|
|
export const generateUniqueId = (prefix: string = "item"): string => {
|
|
return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
};
|
|
|
|
// 유틸리티: 섹션 ID 생성
|
|
export const generateSectionId = (): string => {
|
|
return generateUniqueId("section");
|
|
};
|
|
|
|
// 유틸리티: 필드 ID 생성
|
|
export const generateFieldId = (): string => {
|
|
return generateUniqueId("field");
|
|
};
|