4장. Parameter 기반 개발
다보리 파라메터의 개념
다보리 파라메터
다보리 컴포저블에서는 모든 구성요소들을 파라메터를 통해 관리, 구성하고 있습니다. 다보리 파라메터를 통해 다음과 같이 구현이 가능합니다. 몇가지 예시를 소개합니다.
고객입력창 구현을 위한 파라메터
{
"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) !!});$('.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;
}
});<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"
}
]
}ListType1 파라메터의 이해와 사용법
ListType1
ListType1은 다보리 파라메터 중 가장 많이 사용되는 파라메터입니다. 주로 필터링을 통해 데이터를 List 형식으로 출력합니다.
ListType1 예시
1. view page
상단 필터링을 통해 데이터가 걸러지고 하단 박스에 결과 데이터들을 출력합니다.
2. para
{
"//list-type-1": "simple and plain list by query of table join",
"General": {
"Title": "상품 리스트",
"PageApi": "list-type1-page",
"ActApi": "list-type1-upload"
},
"QueryVars": {
"QueryName": "master/item-fngoods-input",
"FilterName": "",
"FilterValue": "",
"FilterDate": ""
},
"PrintVars": {
"QueryName": "federated/crystal/master/item-fngoods-input",
"ReportPath": "standard/master/item-fngoods-input.rpt",
"ExportFmt": "PDF",
"ServerPrinter": "",
"CustomCode": "item-fngoods-input"
},
"HeadSelectOptions": [
{
"Value": "clear-all-filter",
"Caption": "초기화"
},
{
"Value": "barcode-print",
"Caption": "바코드 인쇄"
},
{
"Value": "rpt-print",
"Caption": "빠른 표준 보고서"
},
{
"Value": "rpt-custom",
"Caption": "커스텀 보고서"
}
],
"//FormVars": "FormVars[0]-caption, FormVars[1]-searchPopup",
"FormVars": [
{
"ListButton": "조회",
"DateRange": "",
"DateNavi": "일자방향(오늘)",
"Date": "",
"From": "부터",
"To": "까지",
"FirstRange": "",
"SecondRange": "",
"ThirdRange": "",
"FourthRange": "",
"AddTotalLine": "",
"SelectPopup": "",
"MultiPopup": "",
"ChartPopup": "",
"DownloadList": "",
"ShowOnlyClosed": "",
"Balance": "",
"OrderBy": "표시 순서",
"FilterOption": "검색조건",
"SimpleOption": "상태별 검색"
}
],
"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": "",
"Caption": "전체"
}
],
"//ListType1RangeVars": "[0]-filter, [1]-component, [2]-parameter",
"ListType1RangeVars": [
{
"FirstRange": "",
"SecondRange": "",
"ThirdRange": "",
"FourthRange": ""
},
{
"FirstRange": "",
"SecondRange": "",
"ThirdRange": "",
"FourthRange": ""
},
{
"FirstRange": "",
"SecondRange": "",
"ThirdRange": "",
"FourthRange": ""
}
],
"// DateRangeOptions": "월:현재월의 1~30, 분기: 현재분기의 첫째월 1일 ~ 마지막월의 말일, 반기/년 동일한 컨셉,전체:1990~3000",
"DateRangeOptions": [
],
"DateNaviOptions": [
{
"Value": "day",
"Caption": "일"
},
{
"Value": "week",
"Caption": "주"
},
{
"Value": "month",
"Caption": "월"
},
{
"Value": "quarterly",
"Caption": "분기"
},
{
"Value": "year",
"Caption": "년"
},
{
"Value": "all",
"Caption": "전체"
}
],
"SelectPopupOptions": [
{
"Caption": "상품 입력/수정/삭제",
"Component": "popup-form1.form-a.item-form",
"Parameter": "/popup/popup-form1/form-a/item"
}
],
"SelectLinkedPopupOptions":[
{
"Caption": "상품 입력/수정/삭제",
"Linked":"/dabory/erp/master-data/item-tabbed?bpa=eyJtZW51X25hbWUiOiJ0ZXN0LWl0ZW0tdGFiYmVkIiwibWVudV9jb2RlIjoiOTMwMDAwIiwiZGlzYWJsZV9sX21lbnUiOiIwIiwiZW5hYmxlX3JfbWVudSI6IjAiLCJwZXJtaXNzaW9uIjp7ImlzX215bWVudSI6IjAiLCJpc19saXN0IjoiMSIsImlzX3JlYWQiOiIxIiwiaXNfY3JlYXRlIjoiMSIsImlzX3VwZGF0ZSI6IjEiLCJpc19kZWxldGUiOiIxIiwiaXNfbmV3dGFiIjoiMCJ9LCJwYWdlX3VyaSI6IlwvZGFib3J5XC9lcnBcL21hc3Rlci1kYXRhXC9pdGVtLXRhYmJlZCIsInBhcmFfbmFtZSI6IlwvZm9ybVwvZm9ybS1hXC9pdGVtLXRhYmJlZCIsInRoZW1lX2RpciI6IiIsIm1haW5fYXBwX2lkIjowLCJndWVzdF9hcHBfaWQiOjAsImN1c3RvbV92YXIiOiIifQ=="
}
],
"// OrderByOptions": "OrderBy Options//첫번째 Value가 Default",
"OrderByOptions": [
{
"Value": "mx.item_code asc",
"Caption": "상품 코드 순서"
},
{
"Value": "mx.item_code desc",
"Caption": "상품 코드 역순"
}
],
"//BalanceOptions": "Show OnlyBalaceRemained or All",
"BalanceOptions": [
{
"Value": "",
"Caption": "전체 보기"
},
{
"Value": "c10 > 0",
"Caption": "잔량있는 것만"
}
],
"DisplayVars": {
"IsListFirst" : true,
"IsExcelColumn" : false,
"InitLines" : 15,
"HeadHeight": "130",
"IsC1Popup": "1",
"BodyHeight": "680"
},
"// ListVars": "ListVars[0]-caption, ListVars[1]-size(px), ListVars[2]-align->right(number) left(left)",
"ListVars": [
{
"$Radio": "$Radio",
"$Check": "$Check",
"No": "번호",
"C1": "품목코드",
"C2": "품명",
"C3": "서브명",
"C4": "품목구분",
"C5": "매출가",
"C6": "매입가",
"C7": "단위",
"C8": "공급사(입점사)",
"C9": "온라인누락"
},
{
"$Radio": "3",
"$Check": "3",
"No": "5",
"C1": "12",
"C2": "25",
"C3": "12",
"C4": "8",
"C5": "6",
"C6": "6",
"C7": "4",
"C8": "8",
"C9": "8"
},
{
"$Radio": "center",
"$Check": "center",
"No": "center",
"C1": "left",
"C2": "left",
"C3": "left",
"C4": "left",
"C5": "decimal('sales_prc')",
"C6": "decimal('purch_prc')",
"C7": "center",
"C8": "center",
"C9": "check"
}
]
}
ListType1 추가방법
새로운 ListType1을 추가하는 방법입니다.
1. 웹상에서 /dabory/erp 경로로 이동합니다.
3. 위 메뉴들은 모두 ListType1을 통해 구현된 메뉴들을 불러오는 리스트메뉴입니다. 사용자 메뉴 불러오기를 예시로 새로운 ListType1을 추가하겠습니다.
4. 사용자 메뉴 불러오기 메뉴 진입시 아래와 같이 리스트가 출력됩니다. C5:파라메터명을 확인합니다.
5. 예제에서는 회원 앱 권한 메뉴를 복사하여 새로운 ListType1을 생성하겠습니다. 회원 앱 권한의 파라메터명은 /form/form-b/member-menu-perm입니다.
6. dbrerp 소스상에서 para 파일들이 들어있는 dabory/para 디렉토리에서 /list/list-type1/downupload/ 경로에서
해당 페이지 메뉴에서 보여주고 싶은 데이터, 엑셀 다운로드 데이터를 C1~C20까지 순서대로 넣습니다.
쿼리 작성이 끝났다면 방금 만들어줬던 쿼리와 동일하게 새로 만들어준 json 파일의 파라메터도 수정해줍니다.
마지막으로 쿼리를 실행하기 위래 QueryName을 입력해줍니다.
이제 다시 웹으로 가서 바둑판 메뉴 불러오기를 하면 새로 추가한 list를 확인할 수 있습니다.
파라메터를 이용한 head/body 복사
head 복사 구현하기
파라메터를 이용하여 sorder의 head와 body를 복사하는 방법을 명시합니다.
예제에서는 sorder(수주)로 테스트를 진행하겠습니다.
필요한 사항
1. 파라메터에 대한 전반적인 이해도
2. JavaScript에 대한 기초적인 이해도
3. API에 대한 이해도
1. 수주리스트의 파라메터인 sorder.json을 살펴보겠습니다.
{
"General": {
"Title": "수주등록",
"PickApi": "slip-form-book",
"ActApi": "sorder-act"
},
"QueryVars": {
"QueryName": "sales/sorder"
},
"HeadSelectOptions": [
{
"Value": "new",
"Caption": "추가",
"Parameter": ""
},
{
"Value": "save-and-new",
"Caption": "저장 후 추가",
"Parameter": ""
},
{
"Value": "copy-to-another",
"Caption": "수주에서 수주로 복사(-)",
"Parameter": "sales/sorder-sorder"
},
{
"Value": "copy-to-another",
"Caption": "매입 가격표에서 수주로 복사(-)",
"Parameter": "purch/pquote-sorder"
},
{
"Value": "copy-to-another",
"Caption": "견적에서 수주로 복사",
"Parameter": "sales/squote-sorder"
},
{
"Value": "delete",
"Caption": "삭제",
"Parameter": ""
}
],
"StatusOptions": [
{
"Value": "확정",
"Caption": "확정"
},
{
"Value": "취소",
"Caption": "취소"
}
],
"BodySelectOptions": [
{
"Value": "body-copy",
"Caption": "수주에서 수주로 품목 복사(-)",
"Parameter": "sales/sorder-sorder"
},
{
"Value": "body-copy",
"Caption": "견적에서 수주로 품목 복사(-)",
"Parameter": "sales/squote-sorder"
},
{
"Value": "multi-delete",
"Caption": "품목 일괄 삭제",
"Parameter": ""
},
{
"Value": "multi-update",
"Caption": "품목 일괄 수정",
"Parameter": ""
}
],
"//FormVars": "ListVars[0]-Caption",
"FormVars": [
{
"SaveButton": "저장",
"AddNewBdButton": "품목 추가",
"AutoSlipNo": "수주번호(자동채번)*",
"Date": "수주일자*",
"Buyer": "매출업체*",
"BuyerContact": "업체담당자",
"DealType": "거래구분*",
"VatType": "부가세*",
"VatTypeRate": "부가세율",
"Status": "상황",
"Delivery": "납품기한",
"PayTerms": "지불조건",
"Destination": "납품장소",
"IsClosed": "종결",
"SgroupName": "영업부서*",
"UserName": "입력사용자*",
"Remarks": "비고"
},
{
"SaveButton": "left",
"AddNewBdButton": "left",
"AutoSlipNo": "left",
"Date": "left",
"Buyer": "left",
"BuyerContact": "left",
"DealType": "left",
"VatType": "left",
"VatTypeRate": "left",
"Status": "left",
"Delivery": "left",
"PayTerms": "left",
"Destination": "left",
"IsClosed": "left",
"SgroupName": "left",
"UserName": "left",
"Remarks": "left"
},
{
"SaveButton": "0",
"AddNewBdButton": "20",
"AutoSlipNo": "20",
"Date": "20",
"Buyer": "20",
"BuyerContact": "20",
"DealType": "20",
"VatType": "20",
"VatTypeRate": "20",
"Status": "20",
"Delivery": "20",
"PayTerms": "20",
"Destination": "20",
"IsClosed": "0",
"SgroupName": "20",
"UserName": "20",
"Remarks": "0"
},
{
"SaveButton": "",
"AddNewBdButton": "",
"AutoSlipNo": "required",
"Date": "required",
"Buyer": "required",
"BuyerContact": "",
"DealType": "required",
"VatType": "required",
"VatTypeRate": "",
"Status": "",
"Delivery": "",
"PayTerms": "",
"Destination": "",
"IsClosed": "",
"SgroupName": "required",
"UserName": "required",
"Remarks": ""
}
],
"// ListVars": "ListVars[0]-Caption, ListVars[1]-Size(%), ListVars[2]-align",
"ListVars": [
{
"$Radio": "",
"$Check": "$Check",
"ItemCode": "품목코드*",
"ItemName": "품명*",
"SubName": "서브명#",
"CountUnit": "단위#",
"SorderQty": "수주수량*",
"SorderPrc": "수주단가*",
"SupplyAmt": "공급가액*",
"VatAmt": "세액*",
"SumAmt": "합계금액*",
"CurrSalesPrc": "매출가#",
"ConfirmDate": "요청납기일",
"DeliDate": "확정납기일*",
"Ref1": "참고1",
"Ref2": "참고2",
"SorderMemo": "품목설명(M)"
},
{
"$Radio": "",
"$Check": "3",
"ItemCode": "10",
"ItemName": "30",
"SubName": "10",
"CountUnit": "5",
"SorderQty": "10",
"SorderPrc": "10",
"SupplyAmt": "10",
"VatAmt": "10",
"SumAmt": "10",
"CurrSalesPrc": "10",
"DeliDate": "12",
"ConfirmDate": "12",
"Ref1": "15",
"Ref2": "15",
"SorderMemo": "10"
},
{
"$Radio": "",
"$Check": "center",
"ItemCode": "left",
"ItemName": "left",
"SubName": "left",
"CountUnit": "center",
"SorderQty": "decimal('sales_qty')",
"SorderPrc": "decimal('sales_prc')",
"SupplyAmt": "decimal('sales_amt')",
"VatAmt": "decimal('sales_amt')",
"SumAmt": "decimal('sales_amt')",
"CurrSalesPrc": "decimal('sales_prc')",
"DeliDate": "right",
"ConfirmDate": "right",
"Ref1": "right",
"Ref2": "right",
"SorderMemo": "right"
}
],
"FooterVars": [
{
"StorageName": "창고",
"BranchName": "점포명",
"QtyTotal": "수량 합계",
"SupplyTotal": "공급가액 소계",
"VatTotal": "부가세액 소계",
"SumTotal": "합계액 소계"
}
]
}