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) !!});
['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"
        }
    ]
}

ListType1 파라메터의 이해와 사용법

ListType1

ListType1은 다보리 파라메터 중 가장 많이 사용되는 파라메터입니다. 주로 필터링을 통해 데이터를 List 형식으로 출력합니다.

 ListType1 예시

1. view page

image.png

상단 필터링을 통해 데이터가 걸러지고 하단 박스에 결과 데이터들을 출력합니다.

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 경로로 이동합니다.

image.png 

2. 좌측 Left menu에서 슈퍼유저 메뉴 - 시스템 관리(주의)메뉴를 찾습니다.

image.png

3. 위 메뉴들은 모두 ListType1을 통해 구현된 메뉴들을 불러오는 리스트메뉴입니다. 사용자 메뉴 불러오기를 예시로 새로운 ListType1을 추가하겠습니다.

4. 사용자 메뉴 불러오기 메뉴 진입시 아래와 같이 리스트가 출력됩니다. C5:파라메터명을 확인합니다.

image.png

5. 예제에서는 회원 앱 권한 메뉴를 복사하여 새로운 ListType1을 생성하겠습니다. 회원 앱 권한의 파라메터명은 /form/form-b/member-menu-perm입니다.

6. dbrerp 소스상에서 para 파일들이 들어있는 dabory/para 디렉토리에서 /list/list-type1/downupload/ 경로에서 

image.png

7. member-menu-perm 파일을 복사하여 새로운 name으로 수정합니다. member-menu-perm_new.json로 하겠습니다.

image.png

image.png

8. 이제 weberp-queries을 편집기에서 열고 

해당 페이지 메뉴에서 보여주고 싶은 데이터, 엑셀 다운로드 데이터를 C1~C20까지 순서대로 넣습니다.

image.png

쿼리 작성이 끝났다면 방금 만들어줬던 쿼리와 동일하게 새로 만들어준 json 파일의 파라메터도 수정해줍니다.

image.png

마지막으로 쿼리를 실행하기 위래 QueryName을 입력해줍니다.

image.png

이제 다시 웹으로 가서 바둑판 메뉴 불러오기를 하면 새로 추가한 list를 확인할 수 있습니다.

ListType1 파라메터의 이해와 사용법2

ListType1

ListType1은 다보리 파라메터 중 가장 많이 사용되는 파라메터입니다. 주로 필터링을 통해 데이터를 List 형식으로 출력합니다.

 ListType1 예시

1. view page

image.png

상단 필터링을 통해 데이터가 걸러지고 하단 박스에 결과 데이터들을 출력합니다.

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": "company-input",
      "FilterName": "",
      "FilterValue": "",
      "SimpleFilter": ""
    },
    "HeadSelectOptions": [
      {
        "Value": "new",
        "Caption": "추가"
      },
      {
        "Value": "multi-delete",
        "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": "",
        "Caption": "메뉴코드"
      }
    ],


    "SimpleSelectOptions": [
        {
            "Value": "sort ='buyer'",
            "Caption": "매출업체"
        },
        {
            "Value": "sort ='supplier'",
            "Caption": "공급업체"
        },
        {
            "Value": "sort ='seller'",
            "Caption": "입점업체"
        },
        {
            "Value": "sort ='agent'",
            "Caption": "영업대리인"
        },
        {
            "Value": " =''",
            "Caption": "해외(무역)업체"
        },
        {
            "Value": "sort =''",
            "Caption": "금융기관"
        },
        {
            "Value": "sort =''",
            "Caption": "급여대상자"
        },
        {
            "Value": "sort =''",
            "Caption": "거래중지"
        },
        {
            "Value": "",
            "Caption": "전체"
        }
    ],

    "//ListType1RangeVars": "[0]-filter, [1]-component, [2]-parameter",
    "ListType1RangeVars": [
      {
        "FirstRange": "",
        "SecondRange": "",
        "ThirdRange": "",
        "FourthRange": ""
      },
      {
        "FirstRange": "",
        "SecondRange": "",
        "ThirdRange": "",
        "FourthRange": ""
      },
      {
        "FirstRange": "",
        "SecondRange": "",
        "ThirdRange": "",
        "FourthRange": ""
      }
    ],

    "DateNaviOptions": [
        {
            "Value": "day",
            "Caption": "일"
          },
          {
            "Value": "week",
            "Caption": "주"
          },
          {
            "Value": "month",
            "Caption": "월"
          },
          {
            "Value": "quarterly",
            "Caption": "분기"
          },
          {
            "Value": "semiannual",
            "Caption": "반기"
          },
          {
            "Value": "year",
            "Caption": "년"
          },
          {
            "Value": "all",
            "Caption": "전체"
          }
    ],

    "SelectPopupOptions": [
        {
            "Caption": "업체 출력(새탭)",
            "Component": "",
            "Parameter": "",
            "TabbedMenuHash": "d2e8109543c426b4a3cb71c4a129a52d"
        }
    ],
    "SelectLinkedPopupOptions":[
        {
            "Caption": "업체 출력(새탭)",
            "Linked":"/dabory/erp/master-data/company-tabbed?bpa=eyJtZW51X25hbWUiOiJcdWM1YzVcdWNjYjRcdWI0ZjFcdWI4NWQtXHVkMGVkIiwibWVudV9jb2RlIjoiNzgwNjA0IiwiZGlzYWJsZV9sX21lbnUiOiIwIiwiZW5hYmxlX3JfbWVudSI6IjAiLCJwZXJtaXNzaW9uIjp7ImlzX215bWVudSI6IjAiLCJpc19saXN0IjoiMSIsImlzX3JlYWQiOiIxIiwiaXNfY3JlYXRlIjoiMSIsImlzX3VwZGF0ZSI6IjEiLCJpc19kZWxldGUiOiIxIiwiaXNfbmV3dGFiIjoiMCJ9LCJwYWdlX3VyaSI6IlwvZGFib3J5XC9lcnBcL21hc3Rlci1kYXRhXC9jb21wYW55LXRhYmJlZCIsInBhcmFfbmFtZSI6IlwvZm9ybVwvZm9ybS1hXC9jb21wYW55LXRhYmJlZCIsInRoZW1lX2RpciI6IiIsIm1haW5fYXBwX2lkIjowLCJndWVzdF9hcHBfaWQiOjAsImN1c3RvbV92YXIiOiIiLCJ0YWJiZWRfbWVudV9oYXNoIjoiZDJlODEwOTU0M2M0MjZiNGEzY2I3MWM0YTEyOWE1MmQifQ=="
        }
    ],


    "// OrderByOptions": "OrderBy Options//첫번째 Value가 Default",
    "OrderByOptions": [
      {
        "Value": "",
        "Caption": "상품 코드 순서"
      },
      {
        "Value": "",
        "Caption": "상품 코드 역순"
      }
    ],

    "//BalanceOptions": "Show OnlyBalaceRemained or All",
    "BalanceOptions": [
      {
        "Value": "",
        "Caption": "전체 보기"
      },
      {
        "Value": "c10 > 0",
        "Caption": "잔량있는 것만"
      }
    ],

    "DisplayVars": {
      "IsSimpleSelectPage": false,
      "IsListFirst": true,
      "IsExcelColumn": true,
      "InitLines": 15,
      "InitDateRange" : "week",
      "HeadHeight": "130",
      "IsC1Popup": "3",
      "BodyHeight": "570"
    },

    "//Theme": "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": "업체번호"
          },
          {
              "$Radio": "3",
              "$Check": "3",
              "No": "3",
              "C1": "5",
              "C2": "5",
              "C3": "10",
              "C4": "5",
              "C5": "6",
              "C6": "6",
              "C7": "6",
              "C8": "6"
          },
          {
              "$Radio": "center",
              "$Check": "center",
              "No": "center",
              "C1": "left",
              "C2": "left",
              "C3": "left",
              "C4": "left",
              "C5": "left",
              "C6": "left",
              "C7": "left",
              "C8": "left"
          }
      ]
  }

ListType1 Filter 제어하기

image.png

1. DateNavi 제어하기

(1). FormVars에 DateNavi를 지정합니다.

(2). DateRange는 ""으로 입력합니다. (현재는 Deprecate 되었습니다.)

"FormVars": [
      {
        "ListButton": "조회",
        "DateRange": "",
        "DateNavi": "일자방향(오늘)",
        "Date": "",
        "From": "부터",
        "To": "까지",
        "FirstRange": "",
        "SecondRange": "",
        "ThirdRange": "",
        "FourthRange": "",
        "AddTotalLine": "",
        "SelectPopup": "",
        "MultiPopup": "",
        "ChartPopup": "",
        "DownloadList": "",
        "ShowOnlyClosed": "",
        "Balance": "",
        "OrderBy": "표시 순서",
        "FilterOption": "조건조회",
        "SimpleOption": "거래유형 지정"
      }
    ],

image.png

위와 같이 사용됩니다.

(3). DateNaviOptions를 다음과 같이 작성합니다. 필요없는 값들은 제외해도 무방합니다.

"DateNaviOptions": [
        {
            "Value": "day",
            "Caption": "일"
          },
          {
            "Value": "week",
            "Caption": "주"
          },
          {
            "Value": "month",
            "Caption": "월"
          },
          {
            "Value": "quarterly",
            "Caption": "분기"
          },
          {
            "Value": "semiannual",
            "Caption": "반기"
          },
          {
            "Value": "year",
            "Caption": "년"
          },
          {
            "Value": "all",
            "Caption": "전체"
          }
    ],

(4). InitDateRange에 초기 default값을 지정합니다. 

"DisplayVars": {
      "IsSimpleSelectPage": false,
      "IsListFirst": true,
      "IsExcelColumn": true,
      "InitLines": 15,
      "InitDateRange" : "week",
      "HeadHeight": "130",
      "IsC1Popup": "3",
      "BodyHeight": "570"
    },

아래와 같이 설정된 default 값으로 DateNavi를 출력할 수 있습니다.

image.png

파라메터를 이용한 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": "합계액 소계"
        }
    ]
}