ERP-node/frontend/lib/registry/components/autocomplete-search-input

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);
  }}
/>

필드 자동 매핑 사용

<AutocompleteSearchInputComponent
  config={{
    tableName: "customer_mng",
    displayField: "customer_name",
    valueField: "customer_code",
    searchFields: ["customer_name", "customer_code"],
    placeholder: "거래처 검색",
    enableFieldMapping: true,
    fieldMappings: [
      {
        sourceField: "customer_name",  // 테이블의 컬럼명
        targetField: "customer_name_input",  // 화면 input의 id
        label: "거래처명"
      },
      {
        sourceField: "address",
        targetField: "address_input",
        label: "주소"
      },
      {
        sourceField: "phone",
        targetField: "phone_input",
        label: "전화번호"
      }
    ]
  }}
  onChange={(code, fullData) => {
    console.log("선택됨:", code, fullData);
    // 필드 매핑은 자동으로 실행됩니다
  }}
/>

<!-- 화면의 다른 곳에 있는 입력 필드들 -->
<input id="customer_name_input" placeholder="거래처명" />
<input id="address_input" placeholder="주소" />
<input id="phone_input" placeholder="전화번호" />

설정 옵션

기본 설정

• tableName: 검색할 테이블명
• displayField: 표시할 필드
• valueField: 값으로 사용할 필드
• searchFields: 검색 대상 필드들
• placeholder: 플레이스홀더
• showAdditionalInfo: 추가 정보 표시 여부
• additionalFields: 추가로 표시할 필드들

값 필드 저장 위치 설정 (고급)

• valueFieldStorage: 값 필드 저장 위치 지정
  • targetTable: 저장할 테이블명 (미설정 시 화면 연결 테이블)
  • targetColumn: 저장할 컬럼명 (미설정 시 바인딩 필드)

필드 자동 매핑 설정

• enableFieldMapping: 필드 자동 매핑 활성화 여부
• fieldMappings: 매핑할 필드 목록
  • sourceField: 소스 테이블의 컬럼명 (예: customer_name)
  • targetField: 타겟 필드 ID (예: 화면의 input id 속성)
  • label: 표시명 (선택사항)

필드 자동 매핑 동작 방식

1. 사용자가 검색 컴포넌트에서 항목을 선택합니다
2. 선택된 항목의 데이터에서 sourceField에 해당하는 값을 가져옵니다
3. 화면에서 targetField ID를 가진 컴포넌트를 찾습니다
4. 해당 컴포넌트에 값을 자동으로 채워넣습니다
5. React의 change 이벤트를 트리거하여 상태 업데이트를 유발합니다

주의사항

• 타겟 필드 ID는 화면 디자이너에서 설정한 컴포넌트 ID와 정확히 일치해야 합니다
• 필드 매핑은 input, textarea 타입의 요소에만 동작합니다
• 여러 필드를 한 번에 매핑할 수 있습니다