smartERPLite Vue Document

Appearance

Return to top
On this page

입력항목

컴포넌트의 expose 변수 사용

  • template ref를 적용한다.
  • 선언할때 generic으로 컴포넌트의 타입을 지정한다.
<VmSearch ref="searchRef" />

import VmSearch from '@/core/components/form/VmSearch.vue'
const searchRef = ref<InstanceType<typeof VmSearch>>()
function query() {
  searchRef.value.inputRef
}

VmSearch

input type=search의 입력항목을 생성한다. search는 값이 있으면 삭제마크(x) 가 표시된다.

  • Props
    • modelValue - string | number | null | undefined. v-model과 연결되는 변수
    • label ? - string. 입력항목의 제목
    • name ? - string <input>의 name 속성. 필수입력 검사와 container에서 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • mask ? - Mask. 마스킹이름. 마스킹은 입력양식을 미리 정해진대로 입력하기 위해 사용된다.
    • maskOption ? - InputmaskOptions. 마스킹 할때 세부옵션
    • text ? - input tag 대신 span으로 감싼 텍스트만 표시한다.
    • d? - boolean 디버그 정보 표시
  • Emits
    • update:modelValue
      • @parameter value 선택된 값
      (e: 'update:modelValue', value: string): void
  • slot 없음
  • expose
    • inputRef - Ref<HTMLInputElement> 실제 input element
  • Usage
      <VmSearch
    v-model="data.text"
    label=""
    required
    mask="tel"
    :maskOption="{}"
    :disabled="checkDisabled"
  />

VmSelect

  • Props
    • modelValue - string | null. v-model
    • label ? - string. 입력항목의 제목
    • name ? - string <select>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • defaultValue ? - string. 로딩후 기본 선택될 값
    • defaultIndex ? - number. 로딩후 기본 선택될 인덱스
    • width ? - string.
    • style ? - object.
    • tableId ? - string. 서버에서 불러올 코드 목록의 mybatis id. tableId가 있으면 items는 무시된다.
    • code ? - string. 조회할 코드의 조건 공통 코드
    • items ? - CodeNameItem[]. tableId를 통한 서버 데이터가 아닌 자체로 생성한 option용 CodeNameItem 배열
    • optionFirst ? - OptionFirst. 제일 상위에 표시할 텍스트 ALL | CHOOSE
    • parentCode ? - string. 상위컬럼에 해당하는 v-model 변수명. 현재 model이 "모듈"이고 상위 model이 "시스템" 이라면 parent-code="systemCd"
    • parentName ? - string. 상위컬럼이 선택 안되있을때 표시할 이름. "시스템을 선택하세요" 텍스트가 표시된다. parent-name="시스템"
    • parentModel ? - string | null. 상위컬럼의 값. :parent-model="data.systemCd"
    • d? - boolean 디버그 정보 표시
  • Emits
    • update:modelValue
      • @parameter value 선택된 값
      (e: 'update:modelValue', value: string): void
    • change 선택한 값이 변경될때 후속처리가 필요할때.
      • @parameter code 선택한 값
      • @parameter option 전체 CodeNameItem 리스트
      • @parameter event html event
    (e: 'change', code?: string, option?: Readonly<CodeNameItem[]>, event?: Event): void
  • slot 없음
  • Usage
      <VmSearch
    v-model="data.select"
    label=""
    required
    default-value=""
    :default-index="1"
    width="200px"
    :style="selectStyle"
    table-id="CMM_CODE"
    code="CMM_000"
    :items="[{code: '', name:''}, {code: '', name:''}]"
    option-first="CHOOSE"
    parent-code="systemCd"
    parent-name="시스템"
    parent-Model="data.systemCd"
  >

VmCheckbox

체크박스 입력항목을 생성한다.
체크박스는 여부 와 같은 단일 모드와, 여러 개중에서 선택하는 다중 모드로 만들어진다. table-id나 items 가 있으면 다중 모드이고, 없으면 단일 모드가 된다.

단일모드에서 선택여부에 따른 값은 trueValue와 falseValue로 지정한 값이 사용되는데 미지정하면 DB에 저장될 값인 "1" 또는 "0"이 적용된다.

  • Props
    • modelValue - string | string[] | null | undefined. v-model 값
    • label ? - string. 입력항목의 제목
    • name ? - string <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • toggle ? - boolean 토글버튼으로 표시 여부
    • itemLabel ? - string. 체크박스가 여부 체크로 1개만 생성될때 오른쪽에 표시될 라벨
    • tableId ? - string. 서버에서 불러올 코드 목록의 mybatis id
    • code ? - string. 서버에서 불러올 코드 목록에 조건으로 사용될 값. CMM_CODE의 코드컬럼.
    • items ? - CodeNameItem[]. 다중 선택을 서버에서 불러오지 않고 script에서 직접 배열로 생성한 값
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • trueValue ? - string. 체크된 상태 일때의 값. 기본값 "1"
    • falseValue ? - string. 체크 않된 상태 일때의 값. 기본값 "0"
    • disabled ? - boolean. 비활성 여부
    • d? - boolean 디버그 정보 표시
  • Emits
    • update:modelValue
      • @parameter value 단일 모드이면 체크 상태에 따라 trueValue 또는 falseValue이고, 다중 모드이면 체크된 값의 배열
      (e: 'update:modelValue', value: string | string[] | null): void
  • slot 없음
  • Usage
      <VmCheckbox
    v-model="data.yn"
    label="사용여부"
    required
    required-label="사용여부체크"
    toggle
    true-value="Y"
    false-value="N"
    item-label="사용/미사용"
    table-id="CMM_CODE"
    code="CMM003"
    items="[{code: '1', name: '사용'}, {code: '0', name: '미사용'}, ]"
    :disabled="checkDisabled"
  />
  • Example
    <template>
  단일 여부 선택: <VmCheckbox label="" v-model="" />
  다중 값 선택: <VmCheckbox v-model="" table-id="" code="" /> 또는
               <VmCheckbox v-model="" :items="multiCheckValues" />             
</template>
<script setup lang="ts">
  // 체크박스에서 선택할 수 있는 값의 타입 선언
  type MultiCheckValueType = 'a' | 'b' | 'c' | 'd'
  const multiCheckValues: { code: MultiCheckValueType, name: string }[] = [
    { code: 'a', name: 'AAA' },
    { code: 'b', name: 'BBB' },
    { code: 'c', name: 'CCC' },
    { code: 'd', name: 'DDD' },
  ]
</script>
    다중 모드는 동일한 v-model을 <VmCheckbox>를 여러개 생성하지 말고 table-id 또는 items를 이용한다.
      틀림
  <VmCheckbox v-model="data.checkbox" true-value="a" item-label="A"/>
  <VmCheckbox v-model="data.checkbox" true-value="b" item-label="B"/>
  <VmCheckbox v-model="data.checkbox" true-value="c" item-label="C"/>

  맞음
  <VmCheckbox v-model="data.checkbox" items="[
    {code: 'a', name: 'A'},
    {code: 'b', name: 'B'},
    {code: 'c', name: 'C'}
  ]"/>

VmRadio

라디오 입력항목을 생성한다.

  • Props
    • modelValue - string | null | undefined
    • label ? string. 입력항목의 제목
    • name ? - string <input>의 name속성. 라디오를 같은 그룹으로 묶어준다. 필수입력 검사와 container의 getElement()에서 사용
    • tableId ? string. 불러올 코드목록 mybatis id
    • code ? string. CMM_CODE의 코드컬럼. tableId가 있으면 해당 쿼리의 코드값
    • items ? CodeNameItem[]. 멀티 선택라디오 버튼의 원천 데이터 목록. db에서 조회하지 않은 프로그램에서 선언한 배열
    • uncheckable? - boolean 선택안함 표시 여부
    • disabled ? boolean 비활성화
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • d? - boolean 디버그 정보 표시
  • Emits
    • update:modelValue
      • @parameter value 선택한 값
      (e: 'update:modelValue', value: string): void
  • slot 없음
  • Usage
      <VmRadio
    v-model=""
    label="라디오"
    table-id="CMM_CODE"
    code="CMM003"
    items="[{code: '1', name: '사용'}, {code: '0', name: '미사용'}, ]"
    :disabled="checkDisabled"
  />
  • Example
      * VmRadio에 선택할 라디오 만큼 items 데이터 입력
  <VmRadio v-model="data.multiRadio" :items="radioItems" />
  * 서버 코드
  <VmRadio label="부서타입" v-model="data.serverRadio" table-id="CMM_CODE" code="CMM003" />

VmDate

형식의 연월일 입력 항목을 생성한다.

  • Props
    • modelValue - Date | string | null | undefined. v-model
    • label ? - string. 입력항목의 제목
    • name ? - string <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • hideInputIcon? - boolean 달력 버튼을 감출지 여부
  • Emits
    • update:modelValue
      • @parameter value 선택한 일자 yyyy-MM-dd
      (e: 'update:modelValue', value: string): void
  • slot 없음
  • Usage
      <VmDate
    v-model=""
    label=""
    required
    hide-input-icon
  />

VmMonth

연월 입력 항목을 생성한다.

  • Props
    • modelValue - string | null | undefined. v-model
    • label ? - string. 입력항목의 제목
    • name ? - string <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
  • Emits
    • update:modelValue
      • @parameter value 선택한 월 yyyy-MM
      (e: 'update:modelValue', value: string | null): void
  • slot 없음
  • Usage
      <VmMonth
    v-model=""
    label=""
    required
  />

VmYear

  • Props
    • modelValue - string | null | undefined. v-model
    • label ? - string. 입력항목의 제목
    • name ? - string <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
  • Emits
    • update:modelValue
      • @parameter value 선택한 년도 yyyy
      (e: 'update:modelValue', value: string): void
  • slot 없음
  • Usage
      <VmYear
    v-model=""
    label=""
    required
  />

VmDateRange

날짜를 범위로 입력하는 항목을 생성한다.

  • Props

    • stt - string | null | undefined. v-model. 시작 일자
    • end - string | null | undefined. v-model. 종료 일자
    • label ? - string. 입력항목의 제목
    • nameStt ? - string 시작일자 <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • nameEnd ? - string 종료일자 <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredStt ? - boolean. 시작일자만 필수. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredEnd ? - boolean. 종료일자만 필수. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • d? - boolean 디버그 정보 표시

  • Emits

    • update:stt
      • @parameter value 선택한 시작 일자 yyyy-MM-dd
    • update:end
      • @parameter value 선택한 종료 일자 yyyy-MM-dd
      (e: 'update:stt', value: string | null | undefined): void,
  (e: 'update:end', value: string | null | undefined): void,

  • slot 없음

  • Usage

    <VmDateRange 
  v-model:stt="data.sttDt" 
  v-model:end="data.endDt" 
  label=""
  required
  />

VmMonthRange

  • Props
    • stt - string | null | undefined. v-model. 시작 연월
    • end - string | null | undefined. v-model. 종료 연월
    • label ? - string. 입력항목의 제목
    • nameStt ? - string 시작일자 <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • nameEnd ? - string 종료일자 <input>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredStt ? - boolean. 시작만 필수. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredEnd ? - boolean. 종료만 필수. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
  • Emits
    • update:stt
      • @parameter value 선택한 시작 연월 yyyy-MM
    • update:end
      • @parameter value 선택한 종료 연월 yyyy-MM
      (e: 'update:stt', value: string | null | undefined): void,
  (e: 'update:end', value: string | null | undefined): void,
  • slot 없음
  • Usage
      <VmMonthRange
    v-model:stt="data.sttYm" 
    v-model:end="data.endYm" 
    label=""
    required
  />

VmPopup

[코드 + 팝업아이콘 + 이름] 이 결합된 형태의 입력항목을 생성한다.

  • Props

    • component - string 팝업 컴포넌트 이름
    • modelValue ? - string | null v-model은 팝업 code
    • name ? - string | null v-model:name은 팝업 명칭의 값
    • label ? - string 제목
    • nameCode?: string 코드 input의 name 속성. 필수입력 검사와 container의 getElement()에서 사용
    • nameName?: string 명칭 input의 name 속성. container의 getElement()에서 사용
    • required ? - boolean 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
    • codeWidth ? - string 코드 input의 폭.
    • nameWidth ? - string 명칭 input의 폭
    • hideCode ? - boolean 코드항목을 숨길지 여부
    • hideButton ? - boolean 팝업버튼을 숨길지 여부
    • hideName ? - boolean 이름항목을 숨길지 여부
    • changing ? - ({ code, name, item }: PopupResult) => boolean | Promise<boolean> 팝업에서 선택한 값을 적용하기전에 호출된다. 선택한 값을 적용할지 여부를 반환한다.

  • Emits

    • update:modelValue
      • @parameter code 팝업에서 선택한 값
    • update:name
      • @parameter name 팝업에서 선택한 값의 명칭
    • changed
      • @parameter { code, name, item }: PopupResult code input에 입력한값으로 조회한 결과가 1건이어서 code와 name에 값이 반영된후에 호출되는 이벤트
      (e: 'update:modelValue', code: string | null): void
  (e: 'update:name', name: string | null): void
  (e: 'changed', { code, name, item }: PopupResult): void

  • type

    interface PopupResult {
  popupResultCount?: number
  code?: string | null
  name?: string | null
  item?: PopupItem | null
  event?: Event
}

  • slot 없음

  • Usage

      <VmPopup
    component="팝업컴포넌트이름"
    v-model="condData.comCodePopupId"
    v-model:name="condData.comCodePopupName"
    label=""
    require
    code-width=""
    name-width=""
    :changing="popupChanging"
    hide-code
    hide-button
    hide-name
  />

  <script>
  function popupChanging({code, name, item}: PopupResult) {
    return true;
  }
  </script>

VmTextarea

  • Props
    • modelValue - string | number | null | undefined. v-model
    • label ? - string. 입력항목의 제목
    • name ? - string <textarea>의 name속성. 필수입력 검사와 container의 getElement()에서 사용
    • required ? - boolean. 라벨에 필수 표시하고 require함수에서 필수입력 검사한다.
    • requiredLabel ? - string. 필수입력 alert 할때 label 대신 표시된다.
  • Emits
    • update:modelValue
      (e: 'update:modelValue', value: string): void
  • slot 없음

VmIcon

/src/aseets/icon에 있는 svg 아이콘을 표시한다.

  • Props
    • name - string. 아이콘 이름
  • Emits 없음
  • slot 없음
  • Usage
      <VmIcon 
    name=""
  />

Hello

Copyright © 2022 SmartBiz