조회 조건을 선택할 때 실행되는 것과 엑셀 파일 업로드

 

이런 조회 조건들을 설정해두고, v-select 를 선택할 때 watch 를 실행하도록 하는 방법

 

            <v-row>
              <v-col cols="12" md="3">
                <v-select v-model="selectedCardCompany" :items="cardCompanyOptions" label="카드사 선택" variant="outlined"
                  density="comfortable" class="mb-4" hide-details></v-select>
              </v-col>
              <v-col cols="12" md="3">
                <v-select v-model="selectedYear" :items="yearOptions" label="연도" variant="outlined"
                  density="comfortable" class="mb-4" hide-details></v-select>
              </v-col>
              <v-col cols="12" md="3">
                <v-select v-model="selectedMonth" :items="monthOptions" label="월" variant="outlined"
                  density="comfortable" class="mb-4" hide-details></v-select>
              </v-col>
              <v-col cols="12" md="3">
                <v-btn color="primary" variant="tonal" class="mb-4 mt-2" block @click="fetchCardTransactions">
                  <v-icon start>mdi-magnify</v-icon>
                  조회
                </v-btn>
              </v-col>
            </v-row>

 

v-model 에는 watch 가 실행되도록 했다.

// selectedCardCompany 변경 시 데이터 재조회
watch(selectedCardCompany, () => {
  fetchCardTransactions();
});

// selectedYear 변경 시 데이터 재조회
watch(selectedYear, () => {
  fetchCardTransactions();
});

// selectedMonth 변경 시 데이터 재조회
watch(selectedMonth, () => {
  fetchCardTransactions();
});

 

즉 dropdown list 에서 값을 선택하면 바로 조회 데이터를 조회도록 했다.

watch 를 잘 몰랐을 때는 @click 함수를 사용했어다. 이제 watch 도 잘 사용하면 좋겠다.

 

 

프로젝트를 할 때 조회된 결과값을 늘 새로 배열을 만들어서 관리를 했었다.

일반 복사 기능이나, 스프레드 연산자를 사용해서 만들었는데..

여기서는 map 을 이용해서 가져온 데이터를 가공해서 목록조회 데이터를 만들었다.

    const response = await axios.get(url, { params });

    // 데이터 변환 및 정렬 (백엔드 응답 형식에 맞게 변환)
    const transactions = response.data.map((card: CardApiResponse): CardTransaction => ({
      id: card.id,
      date: card.transaction_date.substring(0, 4) + '-' +
        card.transaction_date.substring(4, 6) + '-' +
        card.transaction_date.substring(6, 8),
      cardName: getCardNameFromCodes(card.card_code),
      merchant: card.merchant,
      amount: card.amount,
      category: card.category || '기타',
      note: card.note || ''
    }));

 

 

그리고 모든 함수는 대부분 비동기로 실행되도록 async - await 를 설정해두었다.

const calculateStatistics = async () => {
....
}


//다른 함수에 포함
await calculateStatistics();

 

 

 

---

엑셀 업로드는 v-file-input 를 사용했다.

<v-file-input v-model="excelFile" label="엑셀 파일 업로드" accept=".xlsx, .xls" variant="outlined"
  density="comfortable" prepend-icon="mdi-file-excel" :disabled="!selectedCardCompany" class="mb-4"
  @change="handleFileUpload">
</v-file-input>

<v-alert v-if="alert && alertType === 'success'" type="success" variant="tonal" closable class="mb-4">
  {{ alertMessage }}
</v-alert>

<v-alert v-if="alert && alertType === 'error'" type="error" variant="tonal" closable class="mb-4">
  {{ alertMessage }}
</v-alert>

 

엑셀파일만 보이도록 accept=".xlxs, .xls" 로 되어 있고, 변경이 되면 handleFileUpload 가 실행된다.

handleFileUpload 는 아래에 표시되는 메시지를 true/false 로 show/hide 하게 해준다.

 

const handleFileUpload = (file: File | null) => {
  if (file) {
    alert.value = false;
  }
};