kjs
64e6fd1920
- 범용 컴포넌트 3종 개발 및 레지스트리 등록: * AutocompleteSearchInput: 자동완성 검색 입력 컴포넌트 * EntitySearchInput: 엔티티 검색 모달 컴포넌트 * ModalRepeaterTable: 모달 기반 반복 테이블 컴포넌트 - 수주등록 전용 컴포넌트: * OrderCustomerSearch: 거래처 검색 (AutocompleteSearchInput 래퍼) * OrderItemRepeaterTable: 품목 관리 (ModalRepeaterTable 래퍼) * OrderRegistrationModal: 수주등록 메인 모달 - 백엔드 API: * Entity 검색 API (멀티테넌시 지원) * 수주 등록 API (자동 채번) - 화면 편집기 통합: * 컴포넌트 레지스트리에 등록 * ConfigPanel을 통한 설정 기능 * 드래그앤드롭으로 배치 가능 - 개발 문서: * 수주등록_화면_개발_계획서.md (상세 설계 문서) |
||
|---|---|---|
| .. | ||
| AutocompleteSearchInputComponent.tsx | ||
| AutocompleteSearchInputConfigPanel.tsx | ||
| AutocompleteSearchInputRenderer.tsx | ||
| README.md | ||
| index.ts | ||
| types.ts | ||
README.md
AutocompleteSearchInput 컴포넌트
자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
특징
- 타이핑하면 즉시 드롭다운 표시
- 빈 값일 때 전체 목록 조회
- 추가 정보 표시 가능
- X 버튼으로 선택 초기화
- 외부 클릭 시 자동 닫힘
사용 예시
<AutocompleteSearchInputComponent
tableName="customer_mng"
displayField="customer_name"
valueField="customer_code"
searchFields={["customer_name", "customer_code"]}
placeholder="거래처명 입력"
showAdditionalInfo
additionalFields={["customer_code", "address"]}
value={selectedCode}
onChange={(code, fullData) => {
console.log("선택됨:", code, fullData);
}}
/>
설정 옵션
tableName: 검색할 테이블명displayField: 표시할 필드valueField: 값으로 사용할 필드searchFields: 검색 대상 필드들placeholder: 플레이스홀더showAdditionalInfo: 추가 정보 표시 여부additionalFields: 추가로 표시할 필드들