admin-components

설치

npm install

컴포넌트 빌드

npm run build

예제 실행 (컴포넌트 직접 연결)

cd example
npm run serve

예제 실행 (빌드 나온거 연결)

cd example
npm run serve:test

배포

npm publish --access=public

플러그인 설정

import Vue from 'vue'
import AdminComponents from '@newbiz/admin-components'
import '@newbiz/admin-components/dist/adminComponents.css'

Vue.use(AdminComponents)

Global Component

element-ui component, checkbox-group, common-table, date-range-picker, editor, image-uploader, input-digit, prev-next-picker, radio-group, result-tree

Local Component

import { AlertDialog, Breadcrumb } from '@newbiz/admin-components'

AlertDialog Example

example/Popup.vue 파일 참고

props 정보는 아래 참고

<alert-dialog v-bind="props"/>

props 정보

props = {
    dialogAttr: { type: Object, default: () => ({ width: '30%', top: '10vh' }) }, // el-dialog attributes
    titleAttr: { type: Object, default: () => ({ title: null, titleClass: null }) },
    contentAttr: {
      type: Object,
      default: () => ({
        content: '',
        contentClass: null,
        data: null, // 동적으로 들어갈 component props
      }),
    },
    footerAttr: {
      type: Object,
      default: () => ({
        buttons: [
          {
            id: 'btn-ok',
            label: '확인',
            isPrimary: true,
            isCancel: false,
            btnClass: '',
            btnAttr: null, // el-button attributes
          },
        ],
        footerClass: null,
      }),
    },
    callback: { type: Function, default: () => {} },
}

• content 가 component 형식

• beforeClose (selectedId, done) 구현

function beforeClose (selectedId, done) {
    if (selectedId === 'btn-ok') {
        done('전달할 데이터')
    }
}

Breadcrumb Example

<breadcrumb :menuInfo="menuInfo"/>

props 정보

props = {
    menuInfo: { type: Object, required: true },
}

데이터 구조

menuInfo = { tree: {}, list: [] }

CheckboxGroup Example

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

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

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

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

example/Forms.vue 파일 참고

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

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

props 정보

props = {
    dateRange: { type: Array, default: () => [] },
    shortCutTypes: { type: Array, default: () => defaultShortCut }, // shortCut 설정 (미설정 시 전체 표현)
    pickerAttr: { type: Object, default: () => ({}) }, // el-date-picker attributes
}

ImageUploader Example

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

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

example/CommonTable.vue 파일 참고

<common-table
    isShowPagination
    :totalCount="items.length"
    :rowCount="10"
    :selectedRowIndex.sync="selectedRowIndex"
    :items="items"
    :columns="columns"
    :tableAttr="{ highlightCurrentRow: true }"
    :tableEvent="{ 'selection-change': onChangeSelect, 'current-change': onSelectRow }"
    @pageChange="onChangePage"
    >
    <h2 slot="leftBox" class="subtitle">
      공통 테이블 목록 <span class="result-mes">총 <strong>{{ items.length }}</strong> 건</span>
    </h2>
    <span slot="rightBox">
      <el-button size="mini" @click="onClickExcelExportBtn">엑셀다운로드</el-button>
      <el-divider direction="vertical"/>
    </span>
    <template v-slot:manage>
      <span>
        <el-button size="mini" class="demi-mini">상세보기</el-button>
      </span>
    </template>
</common-table>

event 정보

// pageChange - (nextPage) - 페이지 클릭 이벤트 핸들러

props 정보

props = {
    isShowTop: { type: Boolean, default: true },
    isShowPageSize: { type: Boolean, default: true }, // 페이지 사이즈 컴포넌트 사용 여부
    isShowPagination: { type: Boolean, default: false }, // 페이지 출력할지 여부
    totalCount: { type: Number, default: 0 }, // 전체 데이터 갯수
    rowCount: { type: Number }, // 결과 표시 갯수 (10,30,60,90) (:rowCount.sync)
    selectedRowIndex: { type: Number, default: null }, // 선택된 테이블 row 표시 (:selectedRowIndex.sync)
    items: { type: Array, default: () => [] }, // 테이블 데이터
    tableAttr: { type: Object, default: () => ({}) }, // el-table attributes
    tableEvent: { type: Object, default: () => ({}) }, // el-table events
    /*
     * column: {
     *   el-table-column attributes
     *   childrenColumns: 있으면 그룹
     *   render(): 해당 칼럼 값을 커스텀하게 랜더링 (결과값만 랜더링하고 그 외에는 slot을 이용)
     * }
     */
    columns: { type: Array, required: true }, // 테이블 칼럼 정보
    help: { type: String, default: null }, // 테이블 하단 도움말 메시지
    invalid: { type: String, default: null }, // 테이블 하단 오류 메시지
}