141 lines
4.2 KiB
TypeScript
141 lines
4.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||
|
|
import { ComponentCategory } from "@/types/component";
|
||
|
|
import { RepeatScreenModalComponent } from "./RepeatScreenModalComponent";
|
||
|
|
import { RepeatScreenModalConfigPanel } from "./RepeatScreenModalConfigPanel";
|
||
|
|
import type {
|
||
|
|
RepeatScreenModalProps,
|
||
|
|
CardRowConfig,
|
||
|
|
CardColumnConfig,
|
||
|
|
ColumnSourceConfig,
|
||
|
|
ColumnTargetConfig,
|
||
|
|
DataSourceConfig,
|
||
|
|
CardData,
|
||
|
|
GroupingConfig,
|
||
|
|
AggregationConfig,
|
||
|
|
TableLayoutConfig,
|
||
|
|
TableColumnConfig,
|
||
|
|
GroupedCardData,
|
||
|
|
CardRowData,
|
||
|
|
} from "./types";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* RepeatScreenModal 컴포넌트 정의 v2
|
||
|
|
* 반복 화면 모달 - 선택한 행 개수만큼 카드를 생성하며, 각 카드는 커스터마이징 가능한 레이아웃
|
||
|
|
*
|
||
|
|
* 주요 기능:
|
||
|
|
* - 🆕 카드 모드: 단순(simple) / 테이블(withTable) 모드 선택
|
||
|
|
* - 🆕 그룹핑: 특정 필드 기준으로 여러 행을 하나의 카드로 묶기
|
||
|
|
* - 🆕 집계: 그룹 내 데이터의 합계/평균/개수 등 자동 계산
|
||
|
|
* - 🆕 카드 내 테이블: 그룹 내 각 행을 테이블 형태로 표시
|
||
|
|
* - 유연한 레이아웃: 행/컬럼 기반 자유로운 구조
|
||
|
|
* - 컬럼별 소스 설정: 직접 조회/조인 조회/수동 입력
|
||
|
|
* - 컬럼별 타겟 설정: 어느 테이블의 어느 컬럼에 저장할지 설정
|
||
|
|
* - 다중 테이블 저장: 하나의 카드에서 여러 테이블 동시 저장
|
||
|
|
*
|
||
|
|
* 사용 시나리오:
|
||
|
|
* - 출하계획 동시 등록 (품목별 그룹핑 + 수주별 테이블)
|
||
|
|
* - 구매발주 일괄 등록 (공급업체별 그룹핑 + 품목별 테이블)
|
||
|
|
* - 생산계획 일괄 등록 (제품별 그룹핑 + 작업지시별 테이블)
|
||
|
|
* - 입고검사 일괄 처리 (발주번호별 그룹핑 + 품목별 검사결과)
|
||
|
|
*/
|
||
|
|
export const RepeatScreenModalDefinition = createComponentDefinition({
|
||
|
|
id: "repeat-screen-modal",
|
||
|
|
name: "반복 화면 모달",
|
||
|
|
nameEng: "Repeat Screen Modal",
|
||
|
|
description:
|
||
|
|
"선택한 행을 그룹핑하여 카드로 표시하고, 각 카드는 헤더+테이블 구조로 편집 가능한 폼 (출하계획, 구매발주 등)",
|
||
|
|
category: ComponentCategory.DATA,
|
||
|
|
webType: "form",
|
||
|
|
component: RepeatScreenModalComponent,
|
||
|
|
defaultConfig: {
|
||
|
|
// 기본 설정
|
||
|
|
cardTitle: "{part_code} - {part_name}",
|
||
|
|
cardSpacing: "24px",
|
||
|
|
showCardBorder: true,
|
||
|
|
saveMode: "all",
|
||
|
|
|
||
|
|
// 카드 모드 (simple: 1행=1카드, withTable: 그룹핑+테이블)
|
||
|
|
cardMode: "simple",
|
||
|
|
|
||
|
|
// 데이터 소스
|
||
|
|
dataSource: {
|
||
|
|
sourceTable: "",
|
||
|
|
filterField: "selectedIds",
|
||
|
|
},
|
||
|
|
|
||
|
|
// 그룹핑 설정 (withTable 모드에서 사용)
|
||
|
|
grouping: {
|
||
|
|
enabled: false,
|
||
|
|
groupByField: "",
|
||
|
|
aggregations: [],
|
||
|
|
},
|
||
|
|
|
||
|
|
// Simple 모드 레이아웃
|
||
|
|
cardLayout: [
|
||
|
|
{
|
||
|
|
id: "row-1",
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
id: "col-1",
|
||
|
|
field: "name",
|
||
|
|
label: "이름",
|
||
|
|
type: "text",
|
||
|
|
width: "50%",
|
||
|
|
editable: true,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "col-2",
|
||
|
|
field: "status",
|
||
|
|
label: "상태",
|
||
|
|
type: "select",
|
||
|
|
width: "50%",
|
||
|
|
editable: true,
|
||
|
|
required: false,
|
||
|
|
selectOptions: [
|
||
|
|
{ value: "active", label: "활성" },
|
||
|
|
{ value: "inactive", label: "비활성" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
gap: "16px",
|
||
|
|
layout: "horizontal",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
|
||
|
|
// WithTable 모드 레이아웃
|
||
|
|
tableLayout: {
|
||
|
|
headerRows: [],
|
||
|
|
tableColumns: [],
|
||
|
|
},
|
||
|
|
} as Partial<RepeatScreenModalProps>,
|
||
|
|
defaultSize: { width: 1000, height: 800 },
|
||
|
|
configPanel: RepeatScreenModalConfigPanel,
|
||
|
|
icon: "LayoutGrid",
|
||
|
|
tags: ["모달", "폼", "반복", "카드", "그룹핑", "집계", "테이블", "편집", "데이터", "출하계획", "일괄등록"],
|
||
|
|
version: "2.0.0",
|
||
|
|
author: "개발팀",
|
||
|
|
});
|
||
|
|
|
||
|
|
// 타입 재 export
|
||
|
|
export type {
|
||
|
|
RepeatScreenModalProps,
|
||
|
|
CardRowConfig,
|
||
|
|
CardColumnConfig,
|
||
|
|
ColumnSourceConfig,
|
||
|
|
ColumnTargetConfig,
|
||
|
|
DataSourceConfig,
|
||
|
|
CardData,
|
||
|
|
GroupingConfig,
|
||
|
|
AggregationConfig,
|
||
|
|
TableLayoutConfig,
|
||
|
|
TableColumnConfig,
|
||
|
|
GroupedCardData,
|
||
|
|
CardRowData,
|
||
|
|
};
|
||
|
|
|
||
|
|
// 컴포넌트 재 export
|
||
|
|
export { RepeatScreenModalComponent, RepeatScreenModalConfigPanel };
|