[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #2 | 고객사 정보 삭제 기능

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

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

☑ 조회한 정보 수정 기능

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

□ 조회 정보 페이징

□ Packing List 생성, 출력, xlsx  내보내기(모달)

□ 스타일 작업(Bootstrap)

 

| 문제와 해결

data() {
    return {
      customers: [
        { code: '001-00-00000', company: 'A사' },
        { code: '002-00-00000', company: 'B사' },
        { code: '003-00-00000', company: 'C사' }
      ],

위와 같이 customers 배열 안에 고객사 정보를 객체로 넣어 두었다. customers 배열의 요소(고객사 객체)를 checkbox에서 체크된 경우-다일 또는 다중-삭제하는 기능을 구현하고자 하였다. 여러 시도 끝에 다음과 같은 방법으로 해당 기능을 구현할 수 있었다.

data() {
    return {
      customers: [
        { code: '001-00-00000', company: 'A사', isChecked: false },
        { code: '002-00-00000', company: 'B사', isChecked: false },
        { code: '003-00-00000', company: 'C사', isChecked: false }
      ],

위 코드와 같이 고객사 정보는 아니지만 checkbox에서 checked 되었는지 확인하는 isChecked키를 고객사 객체에 추가하였다. isChecked키의 기본값은 false이다.

 

<div :key="customer.code" v-for="customer in searchCustomers">
  <div v-if="customer.code !== 'none'">
    <input
      type="checkbox"
      name=""
      id=""
      :value="customer"
      @change="customer.isChecked = !customer.isChecked"
    />
    {{ customer.company }}
  </div>
</div>

template 태그의 checkbox에서 change 이벤트가 발생하면 customers 배열의 고객사 객체의 isChecked키의 값이 true/false로 변경되게 하였다.

 

methods: {
    doDelete() {
      let tempCustomers = []
      this.customers.forEach((customer) => {
        if (!customer.isChecked) {
          tempCustomers.push(customer)
        }
      })
      this.customers = tempCustomers
      tempCustomers = []
    },

isChecked키의 값이 true인 경우(삭제하기 위해 checkbox를 체크한 경우)를 제외한 isChecked키의 값이 false인 경우만 추려서 customers 배열에 덮어 씌웠다. 그러면 checkbox에서 체크하지 않은 고객사 객체만 남게 된다.

 

[그림 1] 삭제 기능까지 모두 구현된 고객사 관리 모달