다보리 파라메터의 개념

다보리 파라메터

다보리 컴포저블에서는 모든 구성요소들을 파라메터를 통해 관리, 구성하고 있습니다. 다보리 파라메터를 통해 다음과 같이 구현이 가능합니다. 몇가지 예시를 소개합니다.

고객입력창 구현을 위한 파라메터

{
    "General": {
        "Title": "고객입력",
        "PickApi": "slip-form-book",
        "ActApi": "company-act"
    },


    "QueryVars": {
        "QueryName": "pos/customer"
    },
  
    "SelectButtonOptions": [
        {
            "Value": "new",
            "Caption": "새 레코드"
        },
        {
            "Value": "del",
            "Caption": "레코드 삭제"
        },
        {
            "Value": "copy",
            "Caption": "레코드 복사"
        },
        {
            "Value": "rpt-print-pdf",
            "Caption": "연말정산(pdf)"
        },
        {
            "Value": "rpt-print-paper",
            "Caption": "연말정산(종이)"
        }
    ],


    "//FormVars": "ListVars[0]-Caption",
    "FormVars": [
        {
            "SaveButton": "저장",
            "CompanyName": "고객번호(자동채번)*",
            "MainContact": "고객명* / 성별",
            "MobileNo": "휴대전화*",
            "TelNo": "유선전화",
            "BirthDate": "생년월일*",
            "Email": "이메일*",
            "CgroupId": "고객분류*",
            "ZipCode": "우편번호*",
            "Addr1": "주소*",
            "Addr2": "주소상세",
            "IsOkText": "문자발송",
            "IsOkEmail": "이메일발송",
            "IsOkDm": "디엠발송",
            "Remarks": "관리자메모",
            "UserCredit": "적립금",
            "CurrUserCredit": "현재 적립금",
            "AvailUserCredit": "가용 적립금(적용-버튼)"
        },
        {
            "SaveButton": "",
            "CompanyName": "left",
            "MainContact": "left",
            "MobileNo": "left",
            "TelNo": "left",
            "BirthDate": "left",
            "Email": "left",
            "CgroupId": "left",
            "ZipCode": "left",
            "Addr1": "left",
            "Addr2": "left",
            "IsOkText": "left",
            "IsOkEmail": "left",
            "IsOkDm": "left",
            "Remarks": "left",
            "UserCredit": "left",
            "CurrUserCredit": "left",
            "AvailUserCredit": "left"
        },
        {
            "SaveButton": "0",
            "CompanyName": "20",
            "MainContact": "20",
            "MobileNo": "20",
            "TelNo": "20",
            "BirthDate": "20",
            "Email": "20",
            "CgroupId": "20",
            "ZipCode": "20",
            "Addr1": "20",
            "Addr2": "100",
            "IsOkText": "20",
            "IsOkEmail": "20",
            "IsOkDm": "20",
            "Remarks": "",
            "UserCredit": "20",
            "CurrUserCredit": "20",
            "AvailUserCredit": "20"
        },
        {
            "SaveButton": "",
            "CompanyName": "required",
            "MainContact": "required",
            "MobileNo": "required",
            "TelNo": "",
            "BirthDate": "required",
            "Email": "required",
            "CgroupId": "required",
            "ZipCode": "required",
            "Addr1": "required",
            "Addr2": "",
            "IsOkText": "",
            "IsOkEmail": "",
            "IsOkDm": "",
            "Remarks": "",
            "UserCredit": "",
            "CurrUserCredit": "",
            "AvailUserCredit": ""
        }
    ]
}
['General']['Title'] : view page에서 페이지의 title로 사용
['General']['PickApi'] : view page 혹은 비지니스 로직에서 api 서버로 특정 pick-api를 호출 가능
['QueryVars']['QueryName'] : api 서버에 특정 api 호출시 백엔드서버에 요청할 query를 지정
let response = await call_slip_form_book(formA['General']['PickApi'], formA['QueryVars']['QueryName'],
                customer_name, {!! json_encode($menuCode) !!});
['SelectButtonOptions']['Value'] : view page에서 버튼으로 구현할 경우 버튼의  javascript에서 value를 통해 특정 이벤트를 발생시키거나 함수로 구현
$('.customer-eyetest-act').on('click', function () {
                // console.log($(this).data('value'))
                switch( $(this).data('value') ) {
                    case 'save': customer_eyetest_btn_act_save(); break;
                    case 'new': atype_custom_btn_act_new(); break;
                    case 'copy': customer_eyetest_btn_act_copy(); break;
                    case 'del': customer_eyetest_btn_act_del(); break;
                    case 'rpt-print-pdf': Stype.rpt_print('#customer-eyetest .frm'); break;
                    case 'rpt-print-paper': print_test(); break;
                }
            });
['SelectButtonOptions']['Caption'] : button의 이름 등 text형태로  다양하게 활용가능 
<ul class="dropdown-menu dropdown-menu-right" role="menu">
  @foreach ($formA['SelectButtonOptions'] as $key => $btn)
    <li class="dropdown-item">`{{ $btn['Caption'] }}`</li>    
   @endforeach
</ul>
['FormVars'][0] : label,  input등의 title
['FormVars'][1] : label,  input css 정렬
['FormVars'][2] : label,  input등의 maxlength 설정

['FormVars'][2] : label,  input등의 필수요소 설정

<div class="form-group w-100 d-flex flex-column" style="width: 143px">
  <label class="m-0 overflow-hidden text-nowrap">{{ $formA['FormVars']['Title']['CompanyName'] }}</label>
  <div class="col-12 d-flex p-0">
  <input type="text" class="auto-slip-no-txt rounded w-100 radius-l0" autocomplete="off" disabled
         maxlength="{{ $formA['FormVars']['MaxLength']['CompanyName'] }}"
         {{ $formA['FormVars']['Required']['CompanyName'] }}>
  </div>
</div>

품목찾기 모달창 구현을 위한 파라메터

{
    "General": {
        "Title": "품목 찾기",
        "PageApi": "item-search-page"
    },


    "QueryVars": {
        "QueryName": "master/item",
        "FilterName": "is_material",
        "FilterValue": "0"
    },


    "//FormVars": "ListVars[0]-Caption, ListVars[0]-format",
    "FormVars": [
        {
            "SelectButton": "",
            "ItemCode": "품목코드",
            "ItemName": "품명",
            "SubName": "서브명",
            "CountUnit": "수량단위",
            "CurrStockQty": "현재고",
            "PurchPrc": "표준매입가",
            "SalesPrc": "표준매출가",
            "ItemDesc": "품목설명",
            "FilterOption": "검색조건",
            "SimpleOption": "상태별 검색"
        },
        {
            "SelectButton": "left",
            "ItemCode": "left",
            "ItemName": "left",
            "SubName": "left",
            "CountUnit": "left",
            "CurrStockQty": "decimal('stock_qty')",
            "PurchPrc": "decimal('purch_prc')",
            "SalesPrc": "decimal('sales_prc')",
            "ItemDesc": "left",
            "FilterOption": "left",
            "SimpleOption": "left"
        }
    ],



    "// OrderByOptions": "OrderBy Options//첫번째 Value가 Default, 필수(Required)",
    "OrderByOptions": [
        {
            "Value": "item_code asc",
            "Caption": "품목코드 정렬"
        },
        {
            "Value": "item_name asc",
            "Caption": "품명 정렬"
        },
        {
            "Value": "sub_name asc",
            "Caption": "서브명 정렬"
        }
    ],


    "FilterSelectOptions": [
        {
            "Value": "",
            "Caption": "=검색 조건="
        },
        {
            "Value": "mx.item_code",
            "Caption": "품목코드"
        },
        {
            "Value": "mx.item_name",
            "Caption": "품명"
        },
        {
            "Value": "mx.sub_name",
            "Caption": "서브명"
        }
    ],


    "SimpleSelectOptions": [
        {
            "Value": "mx.expose_type='0'",
            "Caption": "온라인 게시"
        },
        {
            "Value": "mx.expose_type='1'",
            "Caption": "온라인 누락"
        },
        {
            "Value": "mx.expose_type='2'",
            "Caption": "쿠폰신청 상품"
        },
        {
            "Value": "",
            "Caption": "전체"
        }
    ],


    "// ListVars": "ListVars[0]-caption, ListVars[1]-size(%), ListVars[2]-align",
    "// Price": "Prices show with comma and truncate numbers under decimal !!",
    "ListVars": [
        {
            "$Radio": "$Radio",
            "$Check": "",
            "No": "번호",
            "ItemCode": "품목 코드",
            "ItemName": "품명",
            "SubName": "서브명",
            "IgroupName": "품목구분",
            "SalesPrc": "매출가",
            "PurchPrc": "매입가",
            "MoreInfo": "추가정보"
        },
        {
            "$Radio": "3",
            "$Check": "3",
            "No": "10",
            "ItemCode": "15",
            "ItemName": "12",
            "SubName": "12",
            "IgroupName": "13",
            "SalesPrc": "10",
            "PurchPrc": "10",
            "MoreInfo": "10"
        },
        {
            "$Radio": "center",
            "$Check": "center",
            "No": "center",
            "ItemCode": "left",
            "ItemName": "left",
            "SubName": "left",
            "IgroupName": "left",
            "SalesPrc": "decimal('sales_qty')",
            "PurchPrc": "decimal('purch_prc')",
            "MoreInfo": "left"
        }
    ]
}


Revision #18
Created 26 February 2024 09:49:20 by Admin
Updated 18 February 2025 08:57:24 by 유호경