@manrajang/newbiz-components v0.1.52

newbiz-components

Project setup

npm install

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

AlertDialog Example

Popup.vue 파일 참고

sync 를 걸어주거나, v-on:update 로 직접 데이터 관리

<alert-dialog :isShow.sync="isShow" v-bind="props"/>
<alert-dialog :isShow="isShow" @update="value => isShow = value" v-bind="props"/>

props 정보

props = {
    isShow: { type: Boolean, default: false },
    title: { type: String, default: '' },
    content: [String, Object],
    buttons: {
      type: Array,
      default: () => ([{ id: 'btn-ok', label: '확인', isPrimary: true, isCancel: false, btnClass: '', disabled: false }]),
    },
    titleClass: { type: String, default: '' },
    contentClass: { type: String, default: '' },
    footerClass: { type: String, default: '' },
    width: { type: String, default: '30%' },
    propsData: { type: Object, default: () => ({}) },
    onClick: { type: Function, default: () => {} },
}

function mounted () {
    this.$events.$on('SHOW_ALERT', props => {
      this.isShow = true
      this.props = props || {}
    })
    this.$events.$on('HIDE_ALERT', () => {
      this.isShow = false
    })
}
function beforeDestroy () {
    this.$events.$off('SHOW_ALERT')
    this.$events.$off('HIDE_ALERT')
}

• content 가 component 형식

• onClickBtn 구현
• 다이어로그 닫는 이벤트는 closeDlg 이벤트

function onClickBtn (selectedId, cb) {
    if (selectedId === 'btn-ok') {
        cb && cb(selectedId)
        this.$emit('closeDlg')
    }
}

CheckboxGroup Example

Forms.vue 파일 참고

sync 를 걸어주거나, v-on:update 로 직접 데이터 관리

<checkbox-group :items="checkboxGroupItems" :selectedIds.sync="checkGroupsSelectedIds"/>
<checkbox-group :items="checkboxGroupItems" :selectedIds="checkGroupsSelectedIds" @update="onChangeCheckboxGroup"/>

props 정보

props = {
    items: { type: Array, required: true },
    selectedIds: { type: Array, default: () => [] },
    labelAll: { type: String, default: '전체' },
}

데이터 구조

checkboxGroupItems = [
    { id: 'HOTEL', label: '호텔' },
    { id: 'MOTEL', label: '모텔' },
]
function onChangeCheckboxGroup (selectedIds) {
    this.checkGroupsSelectedIds = selectedIds
}

RadioGroup Example

Forms.vue 파일 참고

sync 를 걸어주거나, v-on:update 로 직접 데이터 관리

<radio-group :items="radioGroupItems" :selectedId.sync="radioGroupSelectedId"/>
<radio-group :items="radioGroupItems" :selectedId="radioGroupSelectedId" @update="onChangeRadioGroup"/>

props 정보

props = {
    items: { type: Array, required: true },
    selectedId: { type: [String, Number, Boolean] },
}

데이터 구조

radioGroupItems = [
    { id: 'ALL', label: '전체' },
    { id: 'ENABLE', label: '이용가능' },
    { id: 'DISABLE', label: '이용불가' },
]
function onChangeRadioGroup (selectedId) {
    this.radioGroupSelectedId = selectedId
}

InputDigit Example

Forms.vue 파일 참고

sync 를 걸어주거나, v-on:change 로 직접 데이터 관리

<input-digit :value.sync="inputDigit"/>
<input-digit :value="inputDigit" @change="value => inputDigit = value"/>

props 정보

props = {
    value: { type: String, default: '' },
    placeholder: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    step: { type: Number, default: 10 },
    isParsePercentage: { type: Boolean, default: false }, // 소수점 할푼리
    delimiter: { type: String, default: '' }, // 구분자
}

PrevNextPicker Example

Forms.vue 파일 참고

v-on:change 로 직접 데이터 관리

<prev-next-picker :value="currentYear" min="1900" max="3000" @change="(value, event) => currentYear = value">

props 정보

props = {
    value: { type: [String, Number], default: 0 },
    min: { type: [String, Number], default: -Infinity },
    max: { type: [String, Number], default: Infinity },
    step: { type: [String, Number], default: 1 },
}

DateRangePicker Example

Forms.vue 파일 참고

sync 를 걸어주거나, v-on:change 로 직접 데이터 관리

<date-range-picker :dateRange.sync="dateRangeVal" :pickerType="'datetimerange'"/>
<date-range-picker :dateRange="dateRangeVal" :pickerType="'daterange'" @change="value => dateRangeVal = value"/>

props 정보

props = {
    dateRange: { type: Array }, // default 값 설정
    shortCutTypes: { type: Array, default: () => defaultShortCut }, // shortCut 설정 (미설정 시 전체 표현)
    pickerType: { type: String, default: 'daterange' }, // 시간 사용 시 datetimerange
    displayFormat: { type: String, default: 'yyyy-MM-dd HH:mm' },
    dateFormat: { type: String, default: 'yyyyMMddTHH:mm:ss' }, // 날짜 형식 설정
}

ImageUploader Example

Forms.vue 파일 참고

sync 를 사용

<image-uploader :fileList.sync="uploadedFileList" :rawFileList.sync="uploadedFileListRaw"/>

props 정보

props = {
    labelName: String, // vee-validate 전용
    fileList: { type: Array, required: true }, // sync
    rawFileList: { type: Array, default: () => [] },
    baseUrl: { type: String, default: '' }, // 서버 요청 주소
    headers: { type: Object, default: () => {} }, // 헤더 정보
    params: { type: Object, default: () => {} }, // 파라미터 정보
    listType: { type: String, default: 'text' },
    autoUpload: { type: Boolean, default: true }, // 이미지 width, height 필요할 경우 false
    disabled: { type: Boolean, default: false },
    limit: { type: Number, default: 1 }, // 파일 제한
    isShowHelpMsg: { type: Boolean, default: false }, // 도움말
}

ResultTree Example

ResultTree.vue 파일 참고

<result-tree :items="TREE_LIST">
    <template v-slot="{ node, data }">
        <radio-group/>
    </template>
</result-tree>

props 정보

props = {
    items: { type: Array, default: () => [] },
    selectedItems: { type: Array, default: () => [] }, // 선택된 노드 ID (:selectedItems.sync)
    placeholder: { type: String, default: '검색 필터를 입력해주세요.' },
    propKeyId: { type: String, default: 'id' }, // id 대신 사용할 키명
    propKeyLabel: { type: String, default: 'label' }, // label 대신 사용할 키명
    propKeyParent: { type: String, default: 'parent' }, // children 대신 사용할 키명
    propKeyChildren: { type: String, default: 'children' }, // children 대신 사용할 키명
    isExpandAll: { type: Boolean, default: false }, // 전체 트리 확장 표시 여부
    isCheckable: { type: Boolean, default: false }, // 체크 가능 여부
}

데이터 구조

data = [{
    id: 1,
    label: 'Level one 1',
    children: [{
        id: 4,
        label: 'Level two 1-1',
    }]
}, {
    id: 2,
    label: 'Level one 2',
    children: [{
        id: 5,
        label: 'Level two 2-1'
    }, {
        id: 6,
        label: 'Level two 2-2'
    }]
}, {
    id: 3,
    label: 'Level one 3',
    children: [{
        id: 7,
        label: 'Level two 3-1'
    }, {
        id: 8,
        label: 'Level two 3-2'
    }]
}]

CommonTable Example

CommonTable.vue 파일 참고

<common-table
    :columns="columns"
    :items="items"
    :page="currentPage"
    :rowCount="60"
    :selectedRow="36"
    @selectionChange="onChangeSelect"
    @currentPageChange="onChangePage"
    isShowTop
    isMultiSelect
    isPagination
>
    <h2 slot="leftBox" class="subtitle">
      공통 테이블 목록 <span class="result-mes">총 <strong>500</strong> 건</span>
    </h2>
    <span slot="rightBox">
      <el-button size="mini" @click="onClickExcelExportBtn">엑셀다운로드</el-button>
      <el-divider direction="vertical"/>
    </span>
    <span slot="manage">
      <el-button size="mini" class="demi-mini">상세보기</el-button>
    </span>
</common-table>

event 정보

// selectionChange - (selectedItems, items) - 테이블 다중선택 변경 이벤트 핸들러 - selectedItems 는 선택한 목록의 아이템, items 는 전체 아이템
// cellClick - (rowItem, column, cellInfo, event) - 테이블 cell 클릭 이벤트 핸들러
// rowClick - (rowItem, cellInfo, event) - 테이블 row 클릭 이벤트 핸들러 (selectedRow props를 사용하지 않는 경우에만 사용)
// currentRowChange - (nextRowItem, prevRowItem) - 테이블 row를 controlled 혹은 uncontrolled로 선택했을때 발생하는 이벤트 핸들러 (selectedRow props가 선언되어야 함)
// rowCountChange - (rowCount) - 결과 표시 갯수 변경 이벤트 핸들러
// currentPageChange - (nextPage) - 페이지 클릭 이벤트 핸들러
// pageChange - (page) - 페이지 클릭 이벤트 핸들러
// requestItem - 페이지 변경, 결과 표시 갯수 변경 등 새로운 리스트가 요구될 경우의 이벤트 핸들러

props 정보

props = {
    isShowTop: { type: Boolean, default: true },
    isShowPageSize: { type: Boolean, default: true }, // 페이지 사이즈 컴포넌트 사용 여부
    columns: { type: Array, required: true }, // 테이블 칼럼 정보
    items: { type: Array, default: () => [] }, // 테이블 데이터
    totalCount: { type: Number, default: 0 }, // 전체 데이터 갯수
    rowCount: { type: Number }, // 결과 표시 갯수 (10,30,60,90) (:rowCount.sync) / onRequestedItems 이벤트 발생
    selectedRow: { type: [Number, String], default: -1 }, // 선택된 테이블 row 표시 (:selectedRow.sync) / 선택변경시 onChangeSelectedRow 이벤트 발생
    page: { type: Number, default: 1 }, // 현재 페이지 번호 (:page.sync) / onRequestedItems 이벤트 발생
    isMultiSelect: { type: Boolean, default: false }, // 테이블 다중선택 가능 여부
    isPagination: { type: Boolean, default: false }, // 페이지 출력할지 여부
    isShowTitle: { type: Boolean, default: true }, // 타이틀 및 목록 갯수 표기 영역 표시 여부
    isForceFix: { type: Boolean, default: false }, // 테이블이 항상 page 1만 그리도록 고정 ()
    help: { type: String, default: null }, // 테이블 하단 도움말 메시지
    invalid: { type: String, default: null }, // 테이블 하단 오류 메시지
    selectable: { type: Function, default () { return true } }, // isMultiSelect일 경우, 선택 가능한 colums을 커스터마이징 하는 함수
}