sodalive-vuejs-admin/src/views/Can/CanManagement.vue

<template>
  <div>
    <v-toolbar dark>
      <v-spacer />
      <v-toolbar-title>캔 환율관리</v-toolbar-title>
      <v-spacer />
    </v-toolbar>

    <br>

    <v-row>
      <v-dialog
        v-model="show_dialog"
        max-width="400px"
        persistent
      >
        <template v-slot:activator="{ on, attrs }">
          <v-container>
            <v-row>
              <v-col cols="10" />
              <v-col>
                <v-btn
                  block
                  color="#3bb9f1"
                  dark
                  depressed
                  v-bind="attrs"
                  v-on="on"
                >
                  캔등록
                </v-btn>
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <v-data-table
                  :headers="headers"
                  :items="cans"
                  class="elevation-1"
                  hide-default-footer
                >
                  <template v-slot:item.priceStr="{ item }">
                    {{ formatMoney(item.priceStr, item.currency) }}
                  </template>

                  <template v-slot:item.can="{ item }">
                    {{ formatNumber(item.can) }} 캔
                  </template>

                  <template v-slot:item.rewardCan="{ item }">
                    {{ formatNumber(item.rewardCan) }} 캔
                  </template>

                  <template v-slot:item.management="{ item }">
                    <v-btn
                      :disabled="isLoading"
                      @click="deleteCan(item)"
                    >
                      삭제
                    </v-btn>
                  </template>
                </v-data-table>
              </v-col>
            </v-row>
          </v-container>
        </template>

        <v-card>
          <v-card-title>캔 등록</v-card-title>
          <v-card-text>
            <v-text-field
              v-model="price"
              label="가격"
              required
            />
            <v-select
              v-model="currency"
              :items="currencies"
              label="화폐 단위"
              required
            />
          </v-card-text>
          <v-card-text>
            <v-text-field
              v-model="can"
              label="캔"
              required
            />
          </v-card-text>
          <v-card-text>
            <v-text-field
              v-model="reward_can"
              label="리워드 캔"
              required
            />
          </v-card-text>
          <v-card-actions v-show="!isLoading">
            <v-spacer />
            <v-btn
              color="blue darken-1"
              text
              @click="cancel"
            >
              취소
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="submit"
            >
              등록
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>

<script>
import * as api from '@/api/can'

export default {
  name: "CanView",

  data() {
    return {
      isLoading: false,
      show_dialog: false,
      selected_can: null,
      price: null,
      can: null,
      reward_can: null,
      currency: 'KRW',
      currencies: [
        { text: 'KRW (한국 원)', value: 'KRW' },
        { text: 'USD (미국 달러)', value: 'USD' }
      ],
      headers: [
        {
          text: '가격(VAT포함)',
          align: 'center',
          sortable: false,
          value: 'priceStr',
        },
        {
          text: '충전캔',
          align: 'center',
          sortable: false,
          value: 'can',
        },
        {
          text: '리워드캔',
          align: 'center',
          sortable: false,
          value: 'rewardCan',
        },
        {
          text: '관리',
          align: 'center',
          sortable: false,
          value: 'management'
        },
      ],
      cans: [],
    }
  },

  async created() {
    await this.getCans()
  },

  methods: {
    notifyError(message) {
      this.$dialog.notify.error(message)
    },

    notifySuccess(message) {
      this.$dialog.notify.success(message)
    },

    cancel() {
      this.show_dialog = false
      this.can = null
      this.price = null
      this.reward_can = null
      this.currency = 'KRW'
      this.selected_can = null
    },

    formatMoney(priceStr, currencyCode, locale = navigator.language) {
      const price = Number(priceStr);
      const formatted = new Intl.NumberFormat(locale, {
        style: 'currency',
        currency: currencyCode
      }).format(price);

      return formatted.replace(/([^\d\s])(\d)/, '$1 $2');
    },

    formatNumber(num) {
      return new Intl.NumberFormat(navigator.language, {
        style: 'decimal'
      }).format(num);
    },

    async getCans() {
      this.isLoading = true
      try {
        let res = await api.getCans();
        this.cans = res.data.data
      } catch (e) {
        this.notifyError("알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.")
      } finally {
        this.isLoading = false
      }
    },

    async deleteCan(item) {
      this.isLoading = true

      let res = await api.deleteCan(item.id)
      if (res.status === 200 && res.data.success === true) {
        this.notifySuccess(res.data.message || '삭제되었습니다.')
        this.cans = []
        await this.getCans()
      } else {
        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      }
    },

    async submit() {
      this.isLoading = true

      const res = await api.insertCan(this.can, this.reward_can, this.price, this.currency)

      if (res.status === 200 && res.data.success === true) {
        this.show_dialog = false
        this.can = null
        this.price = null
        this.reward_can = null
        this.currency = 'KRW'
        this.selected_can = null
        this.notifySuccess(res.data.message || '등록되었습니다.')

        this.cans = []
        await this.getCans()
      } else {
        this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
      }

      this.isLoading = false
    },
  }
}
</script>

<style scoped>

</style>