[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #4 | Bootstrap | 조회 정보 페이징

| 구현 기능 목록 및 진행 현황

☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회

☑ 조회한 정보 수정 기능

☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능

☑ 조회 정보 페이징

□ Packing List 생성, 인쇄, xlsx  내보내기(모달): ☑ Packing List 생성, □ 인쇄, ☑ xlsx  내보내기

☑ 스타일 작업(Bootstrap)

 

| 이슈

input에 placeholder를 이용해 메시지를 넣을 수 있었다. 그런데 Bootstrap에서는 label을 placeholder 메시지처럼 표현할 수 있었다. [그림 1]의 메인화면과 [그림 2]의 고객사 관리 모달에 이 기능을 적극적으로 적용하였다.

[그림 2]의 고객사 관리 모달에서 checkbox를 통해 체크된 고객사를 삭제하는 코드에-현재 참여 중인 Javascript 스터디에서 도움을 받아-filter를 적용하였다. 아래 코드 중 주석 처리된 부분은 forEach와 push를 이용한 기존의 방식이다. filter함수를 이용함을으로 인해 코드가 더욱 간결해졌다.

doDelete() {
  this.customers = this.customers.filter((customer) => !customer.isChecked)
  console.log('doDeleteFilter: ', this.customers)

  // let tempCustomers = []
  // this.customers.forEach((customer) => {
  //   if (!customer.isChecked) {
  //     tempCustomers.push(customer)
  //   }
  // })
  // this.customers = tempCustomers
  // tempCustomers = []

  this.searchName = ''
},

 

[그림 1] 메인화면의 엑셀업로드, 조회, Packing List 생성 버튼을 btn-group으로 묶었다. 그리고 조회, Packing List 버튼에는 각각 disabled를 적용하였고 앞 단계의 절차가 완료되면 활성화되도록 하였는데, 이는 스타일 처리로 기능적 오류를 예방하고자 한 것이다.

 

| 다음 단계

마지막 단계로서 [그림 3]의 Packing List 모달을 인쇄하는 기능을 적용할 예정이다.

 

[그림 1] 메인화면(엑셀업로드 > 조회)

 

[그림 2] 고객사 관리 모달

 

[그림 3] Packing List 모달